gpui/
styled.rs

1use crate::{
2    self as gpui, AbsoluteLength, AlignContent, AlignItems, BorderStyle, CursorStyle,
3    DefiniteLength, Display, Fill, FlexDirection, FlexWrap, Font, FontFeatures, FontStyle,
4    FontWeight, GridPlacement, Hsla, JustifyContent, Length, SharedString, StrikethroughStyle,
5    StyleRefinement, TextAlign, TextOverflow, TextStyleRefinement, UnderlineStyle, WhiteSpace, px,
6    relative, rems,
7};
8pub use gpui_macros::{
9    border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
10    overflow_style_methods, padding_style_methods, position_style_methods,
11    visibility_style_methods,
12};
13const ELLIPSIS: SharedString = SharedString::new_static("…");
14
15/// A trait for elements that can be styled.
16/// Use this to opt-in to a utility CSS-like styling API.
17// gate on rust-analyzer so rust-analyzer never needs to expand this macro, it takes up to 10 seconds to expand due to inefficiencies in rust-analyzers proc-macro srv
18#[cfg_attr(
19    all(any(feature = "inspector", debug_assertions), not(rust_analyzer)),
20    gpui_macros::derive_inspector_reflection
21)]
22pub trait Styled: Sized {
23    /// Returns a reference to the style memory of this element.
24    fn style(&mut self) -> &mut StyleRefinement;
25
26    gpui_macros::style_helpers!();
27    gpui_macros::visibility_style_methods!();
28    gpui_macros::margin_style_methods!();
29    gpui_macros::padding_style_methods!();
30    gpui_macros::position_style_methods!();
31    gpui_macros::overflow_style_methods!();
32    gpui_macros::cursor_style_methods!();
33    gpui_macros::border_style_methods!();
34    gpui_macros::box_shadow_style_methods!();
35
36    /// Sets the display type of the element to `block`.
37    /// [Docs](https://tailwindcss.com/docs/display)
38    fn block(mut self) -> Self {
39        self.style().display = Some(Display::Block);
40        self
41    }
42
43    /// Sets the display type of the element to `flex`.
44    /// [Docs](https://tailwindcss.com/docs/display)
45    fn flex(mut self) -> Self {
46        self.style().display = Some(Display::Flex);
47        self
48    }
49
50    /// Sets the display type of the element to `grid`.
51    /// [Docs](https://tailwindcss.com/docs/display)
52    fn grid(mut self) -> Self {
53        self.style().display = Some(Display::Grid);
54        self
55    }
56
57    /// Sets the display type of the element to `none`.
58    /// [Docs](https://tailwindcss.com/docs/display)
59    fn hidden(mut self) -> Self {
60        self.style().display = Some(Display::None);
61        self
62    }
63
64    /// Sets the whitespace of the element to `normal`.
65    /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
66    fn whitespace_normal(mut self) -> Self {
67        self.text_style()
68            .get_or_insert_with(Default::default)
69            .white_space = Some(WhiteSpace::Normal);
70        self
71    }
72
73    /// Sets the whitespace of the element to `nowrap`.
74    /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
75    fn whitespace_nowrap(mut self) -> Self {
76        self.text_style()
77            .get_or_insert_with(Default::default)
78            .white_space = Some(WhiteSpace::Nowrap);
79        self
80    }
81
82    /// Sets the truncate overflowing text with an ellipsis (…) if needed.
83    /// [Docs](https://tailwindcss.com/docs/text-overflow#ellipsis)
84    fn text_ellipsis(mut self) -> Self {
85        self.text_style()
86            .get_or_insert_with(Default::default)
87            .text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
88        self
89    }
90
91    /// Sets the text overflow behavior of the element.
92    fn text_overflow(mut self, overflow: TextOverflow) -> Self {
93        self.text_style()
94            .get_or_insert_with(Default::default)
95            .text_overflow = Some(overflow);
96        self
97    }
98
99    /// Set the text alignment of the element.
100    fn text_align(mut self, align: TextAlign) -> Self {
101        self.text_style()
102            .get_or_insert_with(Default::default)
103            .text_align = Some(align);
104        self
105    }
106
107    /// Sets the text alignment to left
108    fn text_left(mut self) -> Self {
109        self.text_align(TextAlign::Left)
110    }
111
112    /// Sets the text alignment to center
113    fn text_center(mut self) -> Self {
114        self.text_align(TextAlign::Center)
115    }
116
117    /// Sets the text alignment to right
118    fn text_right(mut self) -> Self {
119        self.text_align(TextAlign::Right)
120    }
121
122    /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
123    /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
124    fn truncate(mut self) -> Self {
125        self.overflow_hidden().whitespace_nowrap().text_ellipsis()
126    }
127
128    /// Sets number of lines to show before truncating the text.
129    /// [Docs](https://tailwindcss.com/docs/line-clamp)
130    fn line_clamp(mut self, lines: usize) -> Self {
131        let mut text_style = self.text_style().get_or_insert_with(Default::default);
132        text_style.line_clamp = Some(lines);
133        self.overflow_hidden()
134    }
135
136    /// Sets the flex direction of the element to `column`.
137    /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
138    fn flex_col(mut self) -> Self {
139        self.style().flex_direction = Some(FlexDirection::Column);
140        self
141    }
142
143    /// Sets the flex direction of the element to `column-reverse`.
144    /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
145    fn flex_col_reverse(mut self) -> Self {
146        self.style().flex_direction = Some(FlexDirection::ColumnReverse);
147        self
148    }
149
150    /// Sets the flex direction of the element to `row`.
151    /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
152    fn flex_row(mut self) -> Self {
153        self.style().flex_direction = Some(FlexDirection::Row);
154        self
155    }
156
157    /// Sets the flex direction of the element to `row-reverse`.
158    /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
159    fn flex_row_reverse(mut self) -> Self {
160        self.style().flex_direction = Some(FlexDirection::RowReverse);
161        self
162    }
163
164    /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
165    /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
166    fn flex_1(mut self) -> Self {
167        self.style().flex_grow = Some(1.);
168        self.style().flex_shrink = Some(1.);
169        self.style().flex_basis = Some(relative(0.).into());
170        self
171    }
172
173    /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
174    /// [Docs](https://tailwindcss.com/docs/flex#auto)
175    fn flex_auto(mut self) -> Self {
176        self.style().flex_grow = Some(1.);
177        self.style().flex_shrink = Some(1.);
178        self.style().flex_basis = Some(Length::Auto);
179        self
180    }
181
182    /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
183    /// [Docs](https://tailwindcss.com/docs/flex#initial)
184    fn flex_initial(mut self) -> Self {
185        self.style().flex_grow = Some(0.);
186        self.style().flex_shrink = Some(1.);
187        self.style().flex_basis = Some(Length::Auto);
188        self
189    }
190
191    /// Sets the element to prevent a flex item from growing or shrinking.
192    /// [Docs](https://tailwindcss.com/docs/flex#none)
193    fn flex_none(mut self) -> Self {
194        self.style().flex_grow = Some(0.);
195        self.style().flex_shrink = Some(0.);
196        self
197    }
198
199    /// Sets the initial size of flex items for this element.
200    /// [Docs](https://tailwindcss.com/docs/flex-basis)
201    fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
202        self.style().flex_basis = Some(basis.into());
203        self
204    }
205
206    /// Sets the element to allow a flex item to grow to fill any available space.
207    /// [Docs](https://tailwindcss.com/docs/flex-grow)
208    fn flex_grow(mut self) -> Self {
209        self.style().flex_grow = Some(1.);
210        self
211    }
212
213    /// Sets the element to allow a flex item to shrink if needed.
214    /// [Docs](https://tailwindcss.com/docs/flex-shrink)
215    fn flex_shrink(mut self) -> Self {
216        self.style().flex_shrink = Some(1.);
217        self
218    }
219
220    /// Sets the element to prevent a flex item from shrinking.
221    /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
222    fn flex_shrink_0(mut self) -> Self {
223        self.style().flex_shrink = Some(0.);
224        self
225    }
226
227    /// Sets the element to allow flex items to wrap.
228    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
229    fn flex_wrap(mut self) -> Self {
230        self.style().flex_wrap = Some(FlexWrap::Wrap);
231        self
232    }
233
234    /// Sets the element wrap flex items in the reverse direction.
235    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
236    fn flex_wrap_reverse(mut self) -> Self {
237        self.style().flex_wrap = Some(FlexWrap::WrapReverse);
238        self
239    }
240
241    /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
242    /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
243    fn flex_nowrap(mut self) -> Self {
244        self.style().flex_wrap = Some(FlexWrap::NoWrap);
245        self
246    }
247
248    /// Sets the element to align flex items to the start of the container's cross axis.
249    /// [Docs](https://tailwindcss.com/docs/align-items#start)
250    fn items_start(mut self) -> Self {
251        self.style().align_items = Some(AlignItems::FlexStart);
252        self
253    }
254
255    /// Sets the element to align flex items to the end of the container's cross axis.
256    /// [Docs](https://tailwindcss.com/docs/align-items#end)
257    fn items_end(mut self) -> Self {
258        self.style().align_items = Some(AlignItems::FlexEnd);
259        self
260    }
261
262    /// Sets the element to align flex items along the center of the container's cross axis.
263    /// [Docs](https://tailwindcss.com/docs/align-items#center)
264    fn items_center(mut self) -> Self {
265        self.style().align_items = Some(AlignItems::Center);
266        self
267    }
268
269    /// Sets the element to align flex items along the baseline of the container's cross axis.
270    /// [Docs](https://tailwindcss.com/docs/align-items#baseline)
271    fn items_baseline(mut self) -> Self {
272        self.style().align_items = Some(AlignItems::Baseline);
273        self
274    }
275
276    /// Sets the element to justify flex items against the start of the container's main axis.
277    /// [Docs](https://tailwindcss.com/docs/justify-content#start)
278    fn justify_start(mut self) -> Self {
279        self.style().justify_content = Some(JustifyContent::Start);
280        self
281    }
282
283    /// Sets the element to justify flex items against the end of the container's main axis.
284    /// [Docs](https://tailwindcss.com/docs/justify-content#end)
285    fn justify_end(mut self) -> Self {
286        self.style().justify_content = Some(JustifyContent::End);
287        self
288    }
289
290    /// Sets the element to justify flex items along the center of the container's main axis.
291    /// [Docs](https://tailwindcss.com/docs/justify-content#center)
292    fn justify_center(mut self) -> Self {
293        self.style().justify_content = Some(JustifyContent::Center);
294        self
295    }
296
297    /// Sets the element to justify flex items along the container's main axis
298    /// such that there is an equal amount of space between each item.
299    /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
300    fn justify_between(mut self) -> Self {
301        self.style().justify_content = Some(JustifyContent::SpaceBetween);
302        self
303    }
304
305    /// Sets the element to justify items along the container's main axis such
306    /// that there is an equal amount of space on each side of each item.
307    /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
308    fn justify_around(mut self) -> Self {
309        self.style().justify_content = Some(JustifyContent::SpaceAround);
310        self
311    }
312
313    /// Sets the element to justify items along the container's main axis such
314    /// that there is an equal amount of space around each item, but also
315    /// accounting for the doubling of space you would normally see between
316    /// each item when using justify-around.
317    /// [Docs](https://tailwindcss.com/docs/justify-content#space-evenly)
318    fn justify_evenly(mut self) -> Self {
319        self.style().justify_content = Some(JustifyContent::SpaceEvenly);
320        self
321    }
322
323    /// Sets the element to pack content items in their default position as if no align-content value was set.
324    /// [Docs](https://tailwindcss.com/docs/align-content#normal)
325    fn content_normal(mut self) -> Self {
326        self.style().align_content = None;
327        self
328    }
329
330    /// Sets the element to pack content items in the center of the container's cross axis.
331    /// [Docs](https://tailwindcss.com/docs/align-content#center)
332    fn content_center(mut self) -> Self {
333        self.style().align_content = Some(AlignContent::Center);
334        self
335    }
336
337    /// Sets the element to pack content items against the start of the container's cross axis.
338    /// [Docs](https://tailwindcss.com/docs/align-content#start)
339    fn content_start(mut self) -> Self {
340        self.style().align_content = Some(AlignContent::FlexStart);
341        self
342    }
343
344    /// Sets the element to pack content items against the end of the container's cross axis.
345    /// [Docs](https://tailwindcss.com/docs/align-content#end)
346    fn content_end(mut self) -> Self {
347        self.style().align_content = Some(AlignContent::FlexEnd);
348        self
349    }
350
351    /// Sets the element to pack content items along the container's cross axis
352    /// such that there is an equal amount of space between each item.
353    /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
354    fn content_between(mut self) -> Self {
355        self.style().align_content = Some(AlignContent::SpaceBetween);
356        self
357    }
358
359    /// Sets the element to pack content items along the container's cross axis
360    /// such that there is an equal amount of space on each side of each item.
361    /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
362    fn content_around(mut self) -> Self {
363        self.style().align_content = Some(AlignContent::SpaceAround);
364        self
365    }
366
367    /// Sets the element to pack content items along the container's cross axis
368    /// such that there is an equal amount of space between each item.
369    /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
370    fn content_evenly(mut self) -> Self {
371        self.style().align_content = Some(AlignContent::SpaceEvenly);
372        self
373    }
374
375    /// Sets the element to allow content items to fill the available space along the container's cross axis.
376    /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
377    fn content_stretch(mut self) -> Self {
378        self.style().align_content = Some(AlignContent::Stretch);
379        self
380    }
381
382    /// Sets the background color of the element.
383    fn bg<F>(mut self, fill: F) -> Self
384    where
385        F: Into<Fill>,
386        Self: Sized,
387    {
388        self.style().background = Some(fill.into());
389        self
390    }
391
392    /// Sets the border style of the element.
393    fn border_dashed(mut self) -> Self {
394        self.style().border_style = Some(BorderStyle::Dashed);
395        self
396    }
397
398    /// Returns a mutable reference to the text style that has been configured on this element.
399    fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
400        let style: &mut StyleRefinement = self.style();
401        &mut style.text
402    }
403
404    /// Sets the text color of this element.
405    ///
406    /// This value cascades to its child elements.
407    fn text_color(mut self, color: impl Into<Hsla>) -> Self {
408        self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
409        self
410    }
411
412    /// Sets the font weight of this element
413    ///
414    /// This value cascades to its child elements.
415    fn font_weight(mut self, weight: FontWeight) -> Self {
416        self.text_style()
417            .get_or_insert_with(Default::default)
418            .font_weight = Some(weight);
419        self
420    }
421
422    /// Sets the background color of this element.
423    ///
424    /// This value cascades to its child elements.
425    fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
426        self.text_style()
427            .get_or_insert_with(Default::default)
428            .background_color = Some(bg.into());
429        self
430    }
431
432    /// Sets the text size of this element.
433    ///
434    /// This value cascades to its child elements.
435    fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
436        self.text_style()
437            .get_or_insert_with(Default::default)
438            .font_size = Some(size.into());
439        self
440    }
441
442    /// Sets the text size to 'extra small'.
443    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
444    fn text_xs(mut self) -> Self {
445        self.text_style()
446            .get_or_insert_with(Default::default)
447            .font_size = Some(rems(0.75).into());
448        self
449    }
450
451    /// Sets the text size to 'small'.
452    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
453    fn text_sm(mut self) -> Self {
454        self.text_style()
455            .get_or_insert_with(Default::default)
456            .font_size = Some(rems(0.875).into());
457        self
458    }
459
460    /// Sets the text size to 'base'.
461    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
462    fn text_base(mut self) -> Self {
463        self.text_style()
464            .get_or_insert_with(Default::default)
465            .font_size = Some(rems(1.0).into());
466        self
467    }
468
469    /// Sets the text size to 'large'.
470    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
471    fn text_lg(mut self) -> Self {
472        self.text_style()
473            .get_or_insert_with(Default::default)
474            .font_size = Some(rems(1.125).into());
475        self
476    }
477
478    /// Sets the text size to 'extra large'.
479    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
480    fn text_xl(mut self) -> Self {
481        self.text_style()
482            .get_or_insert_with(Default::default)
483            .font_size = Some(rems(1.25).into());
484        self
485    }
486
487    /// Sets the text size to 'extra extra large'.
488    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
489    fn text_2xl(mut self) -> Self {
490        self.text_style()
491            .get_or_insert_with(Default::default)
492            .font_size = Some(rems(1.5).into());
493        self
494    }
495
496    /// Sets the text size to 'extra extra extra large'.
497    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
498    fn text_3xl(mut self) -> Self {
499        self.text_style()
500            .get_or_insert_with(Default::default)
501            .font_size = Some(rems(1.875).into());
502        self
503    }
504
505    /// Sets the font style of the element to italic.
506    /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
507    fn italic(mut self) -> Self {
508        self.text_style()
509            .get_or_insert_with(Default::default)
510            .font_style = Some(FontStyle::Italic);
511        self
512    }
513
514    /// Sets the font style of the element to normal (not italic).
515    /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
516    fn not_italic(mut self) -> Self {
517        self.text_style()
518            .get_or_insert_with(Default::default)
519            .font_style = Some(FontStyle::Normal);
520        self
521    }
522
523    /// Sets the text decoration to underline.
524    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#underling-text)
525    fn underline(mut self) -> Self {
526        let style = self.text_style().get_or_insert_with(Default::default);
527        style.underline = Some(UnderlineStyle {
528            thickness: px(1.),
529            ..Default::default()
530        });
531        self
532    }
533
534    /// Sets the decoration of the text to have a line through it.
535    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
536    fn line_through(mut self) -> Self {
537        let style = self.text_style().get_or_insert_with(Default::default);
538        style.strikethrough = Some(StrikethroughStyle {
539            thickness: px(1.),
540            ..Default::default()
541        });
542        self
543    }
544
545    /// Removes the text decoration on this element.
546    ///
547    /// This value cascades to its child elements.
548    fn text_decoration_none(mut self) -> Self {
549        self.text_style()
550            .get_or_insert_with(Default::default)
551            .underline = None;
552        self
553    }
554
555    /// Sets the color for the underline on this element
556    fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
557        let style = self.text_style().get_or_insert_with(Default::default);
558        let underline = style.underline.get_or_insert_with(Default::default);
559        underline.color = Some(color.into());
560        self
561    }
562
563    /// Sets the text decoration style to a solid line.
564    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
565    fn text_decoration_solid(mut self) -> Self {
566        let style = self.text_style().get_or_insert_with(Default::default);
567        let underline = style.underline.get_or_insert_with(Default::default);
568        underline.wavy = false;
569        self
570    }
571
572    /// Sets the text decoration style to a wavy line.
573    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
574    fn text_decoration_wavy(mut self) -> Self {
575        let style = self.text_style().get_or_insert_with(Default::default);
576        let underline = style.underline.get_or_insert_with(Default::default);
577        underline.wavy = true;
578        self
579    }
580
581    /// Sets the text decoration to be 0px thick.
582    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
583    fn text_decoration_0(mut self) -> Self {
584        let style = self.text_style().get_or_insert_with(Default::default);
585        let underline = style.underline.get_or_insert_with(Default::default);
586        underline.thickness = px(0.);
587        self
588    }
589
590    /// Sets the text decoration to be 1px thick.
591    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
592    fn text_decoration_1(mut self) -> Self {
593        let style = self.text_style().get_or_insert_with(Default::default);
594        let underline = style.underline.get_or_insert_with(Default::default);
595        underline.thickness = px(1.);
596        self
597    }
598
599    /// Sets the text decoration to be 2px thick.
600    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
601    fn text_decoration_2(mut self) -> Self {
602        let style = self.text_style().get_or_insert_with(Default::default);
603        let underline = style.underline.get_or_insert_with(Default::default);
604        underline.thickness = px(2.);
605        self
606    }
607
608    /// Sets the text decoration to be 4px thick.
609    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
610    fn text_decoration_4(mut self) -> Self {
611        let style = self.text_style().get_or_insert_with(Default::default);
612        let underline = style.underline.get_or_insert_with(Default::default);
613        underline.thickness = px(4.);
614        self
615    }
616
617    /// Sets the text decoration to be 8px thick.
618    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
619    fn text_decoration_8(mut self) -> Self {
620        let style = self.text_style().get_or_insert_with(Default::default);
621        let underline = style.underline.get_or_insert_with(Default::default);
622        underline.thickness = px(8.);
623        self
624    }
625
626    /// Sets the font family of this element and its children.
627    fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
628        self.text_style()
629            .get_or_insert_with(Default::default)
630            .font_family = Some(family_name.into());
631        self
632    }
633
634    /// Sets the font features of this element and its children.
635    fn font_features(mut self, features: FontFeatures) -> Self {
636        self.text_style()
637            .get_or_insert_with(Default::default)
638            .font_features = Some(features);
639        self
640    }
641
642    /// Sets the font of this element and its children.
643    fn font(mut self, font: Font) -> Self {
644        let Font {
645            family,
646            features,
647            fallbacks,
648            weight,
649            style,
650        } = font;
651
652        let text_style = self.text_style().get_or_insert_with(Default::default);
653        text_style.font_family = Some(family);
654        text_style.font_features = Some(features);
655        text_style.font_weight = Some(weight);
656        text_style.font_style = Some(style);
657        text_style.font_fallbacks = fallbacks;
658
659        self
660    }
661
662    /// Sets the line height of this element and its children.
663    fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
664        self.text_style()
665            .get_or_insert_with(Default::default)
666            .line_height = Some(line_height.into());
667        self
668    }
669
670    /// Sets the opacity of this element and its children.
671    fn opacity(mut self, opacity: f32) -> Self {
672        self.style().opacity = Some(opacity);
673        self
674    }
675
676    /// Sets the grid columns of this element.
677    fn grid_cols(mut self, cols: u16) -> Self {
678        self.style().grid_cols = Some(cols);
679        self
680    }
681
682    /// Sets the grid rows of this element.
683    fn grid_rows(mut self, rows: u16) -> Self {
684        self.style().grid_rows = Some(rows);
685        self
686    }
687
688    /// Sets the column start of this element.
689    fn col_start(mut self, start: i16) -> Self {
690        let grid_location = self.style().grid_location_mut();
691        grid_location.column.start = GridPlacement::Line(start);
692        self
693    }
694
695    /// Sets the column start of this element to auto.
696    fn col_start_auto(mut self) -> Self {
697        let grid_location = self.style().grid_location_mut();
698        grid_location.column.start = GridPlacement::Auto;
699        self
700    }
701
702    /// Sets the column end of this element.
703    fn col_end(mut self, end: i16) -> Self {
704        let grid_location = self.style().grid_location_mut();
705        grid_location.column.end = GridPlacement::Line(end);
706        self
707    }
708
709    /// Sets the column end of this element to auto.
710    fn col_end_auto(mut self) -> Self {
711        let grid_location = self.style().grid_location_mut();
712        grid_location.column.end = GridPlacement::Auto;
713        self
714    }
715
716    /// Sets the column span of this element.
717    fn col_span(mut self, span: u16) -> Self {
718        let grid_location = self.style().grid_location_mut();
719        grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
720        self
721    }
722
723    /// Sets the row span of this element.
724    fn col_span_full(mut self) -> Self {
725        let grid_location = self.style().grid_location_mut();
726        grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
727        self
728    }
729
730    /// Sets the row start of this element.
731    fn row_start(mut self, start: i16) -> Self {
732        let grid_location = self.style().grid_location_mut();
733        grid_location.row.start = GridPlacement::Line(start);
734        self
735    }
736
737    /// Sets the row start of this element to "auto"
738    fn row_start_auto(mut self) -> Self {
739        let grid_location = self.style().grid_location_mut();
740        grid_location.row.start = GridPlacement::Auto;
741        self
742    }
743
744    /// Sets the row end of this element.
745    fn row_end(mut self, end: i16) -> Self {
746        let grid_location = self.style().grid_location_mut();
747        grid_location.row.end = GridPlacement::Line(end);
748        self
749    }
750
751    /// Sets the row end of this element to "auto"
752    fn row_end_auto(mut self) -> Self {
753        let grid_location = self.style().grid_location_mut();
754        grid_location.row.end = GridPlacement::Auto;
755        self
756    }
757
758    /// Sets the row span of this element.
759    fn row_span(mut self, span: u16) -> Self {
760        let grid_location = self.style().grid_location_mut();
761        grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
762        self
763    }
764
765    /// Sets the row span of this element.
766    fn row_span_full(mut self) -> Self {
767        let grid_location = self.style().grid_location_mut();
768        grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
769        self
770    }
771
772    /// Draws a debug border around this element.
773    #[cfg(debug_assertions)]
774    fn debug(mut self) -> Self {
775        self.style().debug = Some(true);
776        self
777    }
778
779    /// Draws a debug border on all conforming elements below this element.
780    #[cfg(debug_assertions)]
781    fn debug_below(mut self) -> Self {
782        self.style().debug_below = Some(true);
783        self
784    }
785}
gpui/styled.rs

gpui/
styled.rs
