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