diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index f8f3a1036..bea37ce58 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -11,9 +11,9 @@
-
-
-
+
+
+
diff --git a/docs/source/borders.md b/docs/source/borders.md index 5d4fd2d43..b2022d724 100644 --- a/docs/source/borders.md +++ b/docs/source/borders.md @@ -17,7 +17,7 @@ title: "Borders" Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`. -
+
Class
border
diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php index 5e94cce0b..3ade774d6 100644 --- a/docs/source/examples.blade.php +++ b/docs/source/examples.blade.php @@ -93,9 +93,9 @@
-
+
-

+

Members only

@@ -104,7 +104,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

-
+

Jonathan Reinink

diff --git a/docs/source/spacing.md b/docs/source/spacing.md index 18d7066b9..276bcbf99 100644 --- a/docs/source/spacing.md +++ b/docs/source/spacing.md @@ -15,7 +15,7 @@ title: "Spacing" The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero. -
+
Class
p Padding
diff --git a/src/utilities/flex.less b/src/utilities/flex.less index edf3226a8..f5c8f72fb 100644 --- a/src/utilities/flex.less +++ b/src/utilities/flex.less @@ -1,77 +1,60 @@ +// Parent utilities .flex { display: flex; } -.flex-top { align-items: flex-start; } - -.flex-col { - display: flex; - flex-direction: column; - - .flex-reverse { - flex-direction: column-reverse; - } -} - -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -.flex-y-center { - display: flex; - align-items: center; -} - -.flex-x-center { - display: flex; - justify-content: center; -} - -.flex-y-end { - display: flex; - align-items: flex-end; -} - -.flex-y-baseline { - display: flex; - align-items: baseline; -} - -.flex-right { - justify-content: flex-end; -} - -.flex-spaced { - display: flex; - justify-content: space-between; -} - -.flex-around { - display: flex; - justify-content: space-around; -} - -.flex-fill { max-width: 100%; flex: 1; } -.flex-no-shrink { flex-shrink: 0; } -.flex-inline { display: inline-flex; } - -.flex-reverse { flex-direction: row-reverse; } +.inline-flex { display: inline-flex; } +.flex-row { flex-direction: row; } +.flex-row-reverse { flex-direction: row-reverse; } +.flex-col { flex-direction: column; } +.flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-nowrap { flex-wrap: nowrap; } + +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +// Child utilities +.flex-auto { flex: auto; } +.flex-initial { flex: initial; } +.flex-none { flex: none; } +.flex-grow { flex-grow: 1; } +.flex-shrink { flex-shrink: 1; } +.flex-no-grow { flex-grow: 0; } +.flex-no-shrink { flex-shrink: 0; } .responsive({ &flex { .flex; } - &flex-top { .flex-top; } + &inline-flex { .inline-flex; } + &flex-row { .flex-row; } + &flex-row-reverse { .flex-row-reverse; } &flex-col { .flex-col; } - &flex-center { .flex-center; } - &flex-y-center { .flex-y-center; } - &flex-x-center { .flex-x-center; } - &flex-y-end { .flex-y-end; } - &flex-y-baseline { .flex-y-baseline; } - &flex-right { .flex-right; } - &flex-spaced { .flex-spaced; } - &flex-around { .flex-around; } - &flex-fill { .flex-fill; } - &flex-no-shrink { .flex-no-shrink; } - &flex-inline { .flex-inline; } - &flex-reverse { .flex-reverse; } + &flex-col-reverse { .flex-col-reverse; } &flex-wrap { .flex-wrap; } + &flex-wrap-reverse { .flex-wrap-reverse; } + &flex-nowrap { .flex-nowrap; } + &items-start { .items-start; } + &items-end { .items-end; } + &items-center { .items-center; } + &items-baseline { .items-baseline; } + &items-stretch { .items-stretch; } + &justify-start { .justify-start; } + &justify-end { .justify-end; } + &justify-center { .justify-center; } + &justify-between { .justify-between; } + &justify-around { .justify-around; } + &flex-auto { .flex-auto; } + &flex-initial { .flex-initial; } + &flex-none { .flex-none; } + &flex-grow { .flex-grow; } + &flex-shrink { .flex-shrink; } + &flex-no-grow { .flex-no-grow; } + &flex-no-shrink { .flex-no-shrink; } });