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