diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index d8c591b93..521ff8913 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -11,31 +11,17 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.bg-coverbackground-size: cover;Scale the image until it fills the background layer.
.bg-containbackground-size: contain;Scale the image to the outer edges without cropping or stretching.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.bg-cover', + 'background-size: cover;', + "Scale the image until it fills the background layer.", + ], + [ + '.bg-contain', + 'background-size: contain;', + "Scale the image to the outer edges without cropping or stretching.", + ], + ] +]) diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index a55a18f57..4ab869df3 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -11,26 +11,19 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -
ClassPropertiesDescription
.border-{{ $name }}border-color: {{ $value }};Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.
-
+@include('_partials.class-table', [ + 'rows' => $page->config['colors']->map(function ($value, $name) { + $class = ".border-{$name}"; + $code = "border-color: {$value};"; + $color = implode(' ', array_reverse(explode('-', $name))); + $description = "Set the border color of an element to {$color}."; + return [ + $class, + $code, + $description, + ]; + })->values()->all() +]) ## Hover diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index cbba8a87f..a55a342b1 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -11,36 +11,27 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.border-solidborder-style: solid;Sets the border style on an element to solid.
.border-dashedborder-style: dashed;Sets the border style on an element to dashed.
.border-dottedborder-style: dotted;Sets the border style on an element to dotted.
.border-noneborder-style: none;Disables the border on an element.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.border-solid', + 'border-style: solid;', + "Sets the border style on an element to solid.", + ], + [ + '.border-dashed', + 'border-style: dashed;', + "Sets the border style on an element to dashed.", + ], + [ + '.border-dotted', + 'border-style: dotted;', + "Sets the border style on an element to dotted.", + ], + [ + '.border-none', + 'border-style: none;', + "Disables the border on an element.", + ], + ] +]) diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index 0dc255e54..c11acc05c 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -11,36 +11,22 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.cursor-autocursor: auto;Set the mouse cursor to the default browser behavior.
.cursor-pointercursor: pointer;Set the mouse cursor to a pointer and indicate a link.
.cursor-not-allowedcursor: not-allowed;Set the mouse cursor to indicate that the action will not be executed.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.cursor-auto', + 'cursor: auto;', + "Set the mouse cursor to the default browser behavior.", + ], + [ + '.cursor-pointer', + 'cursor: pointer;', + "Set the mouse cursor to a pointer and indicate a link.", + ], + [ + '.cursor-not-allowed', + 'cursor: not-allowed;', + "Set the mouse cursor to indicate that the action will not be executed.", + ], + ] +]) diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 1970ac2c0..6f21206e0 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -9,49 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.content-startalign-content: flex-start;Pack lines against the start of the cross axis.
.content-centeralign-content: center;Pack lines in the center of the cross axis.
.content-endalign-content: flex-end;Pack lines against the end of the cross axis.
.content-betweenalign-content: space-between;Distribute lines along the cross axis by adding an equal amount of space between each line.
.content-aroundalign-content: space-around;Distribute lines along the cross axis by adding an equal amount of space around each line.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.content-start', + 'align-content: flex-start;', + "Pack lines against the start of the cross axis.", + ], + [ + '.content-center', + 'align-content: center;', + "Pack lines in the center of the cross axis.", + ], + [ + '.content-end', + 'align-content: flex-end;', + "Pack lines against the end of the cross axis.", + ], + [ + '.content-between', + 'align-content: space-between;', + "Distribute lines along the cross axis by adding an equal amount of space between each line.", + ], + [ + '.content-around', + 'align-content: space-around;', + "Distribute lines along the cross axis by adding an equal amount of space around each line.", + ], + ] +]) ### Start Default diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index f8cb64394..3428011ad 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -9,49 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.items-stretchalign-items: flex-stretch;Stretch items to fill the cross axis.
.items-startalign-items: flex-start;Align items against the start of the cross axis.
.items-centeralign-items: center;Align items along the center of the cross axis.
.items-endalign-items: flex-end;Align items against the end of the cross axis.
.items-baselinealign-items: baseline;Align the baselines of each item.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.items-stretch', + 'align-items: flex-stretch;', + "Stretch items to fill the cross axis.", + ], + [ + '.items-start', + 'align-items: flex-start;', + "Align items against the start of the cross axis.", + ], + [ + '.items-center', + 'align-items: center;', + "Align items along the center of the cross axis.", + ], + [ + '.items-end', + 'align-items: flex-end;', + "Align items against the end of the cross axis.", + ], + [ + '.items-baseline', + 'align-items: baseline;', + "Align the baselines of each item.", + ], + ] +]) ### Stretch Default diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 7add93855..46441d121 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -9,44 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.self-autoalign-self: auto;Align item based on the container's align-items property.
.self-startalign-self: flex-start;Align item against the start of the cross axis.
.self-centeralign-self: center;Align item along the center of the cross axis.
.self-endalign-self: flex-end;Align item against the end of the cross axis.
.self-stretchalign-self: stretch;Stretch item to fill the cross axis.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.self-auto', + 'align-self: auto;', + "Align item based on the container's align-items property.", + ], + [ + '.self-start', + 'align-self: flex-start;', + "Align item against the start of the cross axis.", + ], + [ + '.self-center', + 'align-self: center;', + "Align item along the center of the cross axis.", + ], + [ + '.self-end', + 'align-self: flex-end;', + "Align item against the end of the cross axis.", + ], + [ + '.self-stretch', + 'align-self: stretch;', + "Stretch item to fill the cross axis.", + ], + ] +]) ### Auto Default diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 2df29a466..a449cfe0c 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -9,39 +9,30 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.flex-rowflex-direction: row;Position flex items in the normal horizontal direction.
.flex-row-reverseflex-direction: row-reverse;Position flex items in the reverse horizontal direction.
.flex-colflex-direction: column;Position flex items vertically.
.flex-col-reverseflex-direction: column-reverse;Position flex items vertically in the reverse direction.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.flex-row', + 'flex-direction: row;', + "Position flex items in the normal horizontal direction.", + ], + [ + '.flex-row-reverse', + 'flex-direction: row-reverse;', + "Position flex items in the reverse horizontal direction.", + ], + [ + '.flex-col', + 'flex-direction: column;', + "Position flex items vertically.", + ], + [ + '.flex-col-reverse', + 'flex-direction: column-reverse;', + "Position flex items vertically in the reverse direction.", + ], + ] +]) ### Row Default diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 2e195f42d..543e52811 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -9,29 +9,20 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.flexdisplay: flex;Create a block-level flex container.
.inline-flexdisplay: inline-flex;Create an inline flex container.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.flex', + 'display: flex;', + "Create a block-level flex container.", + ], + [ + '.inline-flex', + 'display: inline-flex;', + "Create an inline flex container.", + ], + ] +]) ## Flex diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index 27bb64202..e30f8ad20 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -9,59 +9,50 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.flex-initialflex: initial;Allow a flex item to shrink but not grow, taking into account its initial size.
.flex-1flex: 1;Allow a flex item to grow and shrink as needed, ignoring its initial size.
.flex-autoflex: auto;Allow a flex item to grow and shrink, taking into account its initial size.
.flex-noneflex: none;Prevent a flex item from growing or shrinking.
.flex-growflex-grow: 1;Allow a flex item to grow to fill any available space.
.flex-shrinkflex-shrink: 1;Allow a flex item to shrink if needed.
.flex-no-growflex-grow: 0;Prevent a flex item from growing.
.flex-no-shrinkflex-shrink: 0;Prevent a flex item from shrinking.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.flex-initial', + 'flex: initial;', + "Allow a flex item to shrink but not grow, taking into account its initial size.", + ], + [ + '.flex-1', + 'flex: 1;', + "Allow a flex item to grow and shrink as needed, ignoring its initial size.", + ], + [ + '.flex-auto', + 'flex: auto;', + "Allow a flex item to grow and shrink, taking into account its initial size.", + ], + [ + '.flex-none', + 'flex: none;', + "Prevent a flex item from growing or shrinking.", + ], + [ + '.flex-grow', + 'flex-grow: 1;', + "Allow a flex item to grow to fill any available space.", + ], + [ + '.flex-shrink', + 'flex-shrink: 1;', + "Allow a flex item to shrink if needed.", + ], + [ + '.flex-no-grow', + 'flex-grow: 0;', + "Prevent a flex item from growing.", + ], + [ + '.flex-no-shrink', + 'flex-shrink: 0;', + "Prevent a flex item from shrinking.", + ], + ] +]) ### Initial Default diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index d658e6b76..9483a2af0 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -9,49 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.justify-startjustify-content: flex-start;Justify items against the start of the container.
.justify-centerjustify-content: center;Justify items in the center of the container.
.justify-endjustify-content: flex-end;Justify items against the end of the container.
.justify-betweenjustify-content: space-between;Justify items by adding an equal amount of space between each one.
.justify-aroundjustify-content: space-around;Justify items by adding an equal amount of space around each one.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.justify-start', + 'justify-content: flex-start;', + "Justify items against the start of the container.", + ], + [ + '.justify-center', + 'justify-content: center;', + "Justify items in the center of the container.", + ], + [ + '.justify-end', + 'justify-content: flex-end;', + "Justify items against the end of the container.", + ], + [ + '.justify-between', + 'justify-content: space-between;', + "Justify items by adding an equal amount of space between each one.", + ], + [ + '.justify-around', + 'justify-content: space-around;', + "Justify items by adding an equal amount of space around each one.", + ], + ] +]) ### Start Default diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index 774c8b61b..d919eba88 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -9,34 +9,25 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.flex-no-wrapflex-wrap: nowrap;Don't allow flex items to wrap.
.flex-wrapflex-wrap: wrap;Allow flex items to wrap in the normal direction.
.flex-wrap-reverseflex-wrap: wrap-reverse;Allow flex items to wrap in the reverse direction.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.flex-no-wrap', + 'flex-wrap: nowrap;', + "Don't allow flex items to wrap.", + ], + [ + '.flex-wrap', + 'flex-wrap: wrap;', + "Allow flex items to wrap in the normal direction.", + ], + [ + '.flex-wrap-reverse', + 'flex-wrap: wrap-reverse;', + "Allow flex items to wrap in the reverse direction.", + ], + ] +]) ### Don't wrap Default diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index dd3911541..ddb69f140 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -11,29 +11,15 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.appearance-noneappearance: none;Remove any special styling applied to an element by the browser.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.appearance-none', + 'appearance: none;', + "Remove any special styling applied to an element by the browser.", + ], + ] +]) ### Custom Select diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index 258ab6f80..1084bf956 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -11,30 +11,12 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.list-reset - list-style: none;
- margin: 0;
- padding: 0; - 		Disable default browser styling for list elements.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.list-reset', + "list-style: none;\nmargin: 0;\npadding: 0;", + "Disable default browser styling for lists and list items.", + ], + ] +]) diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index 780831ccc..b7793b466 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -9,44 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.opacity-100opacity: 1;Set the opacity of an element to 100%.
.opacity-75opacity: .75;Set the opacity of an element to 75%.
.opacity-50opacity: .5;Set the opacity of an element to 50%.
.opacity-25opacity: .25;Set the opacity of an element to 25%.
.opacity-0opacity: 0;Set the opacity of an element to 0%.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.opacity-100', + 'opacity: 1;', + "Set the opacity of an element to 100%.", + ], + [ + '.opacity-75', + 'opacity: .75;', + "Set the opacity of an element to 75%.", + ], + [ + '.opacity-50', + 'opacity: .5;', + "Set the opacity of an element to 50%.", + ], + [ + '.opacity-25', + 'opacity: .25;', + "Set the opacity of an element to 25%.", + ], + [ + '.opacity-0', + 'opacity: 0;', + "Set the opacity of an element to 0%.", + ], + ] +]) ## Example diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 58506d338..1d92a5c7d 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -9,59 +9,50 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.overflow-visibleoverflow: visible;Don't clip content that overflows the element.
.overflow-autooverflow: auto;Add scrollbars to an element if needed.
.overflow-hiddenoverflow: hidden;Clip any content that overflows the element.
.overflow-x-scrolloverflow-x: auto;Allow horizontal scrolling if needed.
.overflow-y-scrolloverflow-y: auto;Allow vertical scrolling if needed.
.overflow-scrolloverflow: scroll;Add scrollbars to an element.
.scrolling-touch-webkit-overflow-scrolling: touch;Use momentum-based scrolling on touch devices.
.scrolling-auto-webkit-overflow-scrolling: auto;Use "regular" scrolling on touch devices.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.overflow-visible', + 'overflow: visible;', + "Don't clip content that overflows the element.", + ], + [ + '.overflow-auto', + 'overflow: auto;', + "Add scrollbars to an element if needed.", + ], + [ + '.overflow-hidden', + 'overflow: hidden;', + "Clip any content that overflows the element.", + ], + [ + '.overflow-x-scroll', + 'overflow-x: auto;', + "Allow horizontal scrolling if needed.", + ], + [ + '.overflow-y-scroll', + 'overflow-y: auto;', + "Allow vertical scrolling if needed.", + ], + [ + '.overflow-scroll', + 'overflow: scroll;', + "Add scrollbars to an element.", + ], + [ + '.scrolling-touch', + '-webkit-overflow-scrolling: touch;', + "Use momentum-based scrolling on touch devices.", + ], + [ + '.scrolling-auto', + '-webkit-overflow-scrolling: auto;', + "Use \"regular\" scrolling on touch devices.", + ], + ] +]) ### Visible Default diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index 7964d5f6e..d6da015fe 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -11,31 +11,17 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.pointer-events-nonepointer-events: none;Make element not react to pointer events, like :hover or click.
.pointer-events-autopointer-events: auto;Make element react to pointer events, like :hover or click.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.pointer-events-none', + 'pointer-events: none;', + "Make element not react to pointer events, like :hover or click.", + ], + [ + '.pointer-events-auto', + 'pointer-events: auto;', + "Make element react to pointer events, like :hover or click.", + ], + ] +]) diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index d8784c09f..554434052 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -9,87 +9,65 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.staticposition: static;Position an element according to the normal flow of the document.
.fixedposition: fixed;Position an element relative to the browser window.
.absoluteposition: absolute;Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.
.relativeposition: relative;Position an element according to the normal flow of the document.
.pin-ttop: 0;Anchor absolutely positioned element to the top edge of the nearest positioned parent.
.pin-rright: 0;Anchor absolutely positioned element to the right edge of the nearest positioned parent.
.pin-bbottom: 0;Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.
.pin-lleft: 0;Anchor absolutely positioned element to the left edge of the nearest positioned parent.
.pin-y - top: 0;
- bottom: 0; - 		Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.
.pin-x - right: 0;
- left: 0; - 		Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.
.pin - top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%; - 		Anchor absolutely positioned element to all the edges of the nearest positioned parent.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.static', + "position: static;", + "Position an element according to the normal flow of the document.", + ], + [ + '.fixed', + "position: fixed;", + "Position an element relative to the browser window.", + ], + [ + '.absolute', + "position: absolute;", + "Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.", + ], + [ + '.relative', + "position: relative;", + "Position an element according to the normal flow of the document.", + ], + [ + '.pin-t', + "top: 0;", + "Anchor absolutely positioned element to the top edge of the nearest positioned parent.", + ], + [ + '.pin-r', + "right: 0;", + "Anchor absolutely positioned element to the right edge of the nearest positioned parent.", + ], + [ + '.pin-b', + "bottom: 0;", + "Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.", + ], + [ + '.pin-l', + "left: 0;", + "Anchor absolutely positioned element to the left edge of the nearest positioned parent.", + ], + [ + '.pin-y', + "top: 0;\nbottom: 0;", + "Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.", + ], + [ + '.pin-x', + "right: 0;\nleft: 0;", + "Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.", + ], + [ + '.pin', + "top: 0;\nright: 0;\nbottom: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;", + "Anchor absolutely positioned element to all the edges of the nearest positioned parent.", + ], + ] +]) ### Static Default diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index 4cb887994..cfad9a852 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -11,36 +11,23 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.resize-noneresize: none;Make a textarea not resizable.
.resize-yresize: vertical;Make a textarea resizable vertically.
.resize-xresize: horizontal;Make a textarea resizable horizontally.
-
+ +@include('_partials.class-table', [ + 'rows' => [ + [ + '.resize-none', + 'resize: none;', + "Make a textarea not resizable.", + ], + [ + '.resize-y', + 'resize: vertical;', + "Make a textarea resizable vertically.", + ], + [ + '.resize-x', + 'resize: horizontal;', + "Make a textarea resizable horizontally.", + ], + ] +]) diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index e5a492c83..117598cd6 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -9,49 +9,35 @@ features: focus: false --- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.shadowbox-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);Apply a small box shadow to an element.
.shadow-mdbox-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);Apply a medium box shadow to an element.
.shadow-lgbox-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);Apply a large box shadow to an element.
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);Apply a small inner box shadow to an element.
.shadow-nonebox-shadow: none;Remove a box shadow from an element.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.shadow', + "box-shadow:\n 0 2px 4px 0 rgba(0,0,0,0.10);", + "Apply a small box shadow to an element.", + ], + [ + '.shadow-md', + "box-shadow:\n 0 4px 8px 0 rgba(0,0,0,0.12),\n 0 2px 4px 0 rgba(0,0,0,0.08);", + "Apply a medium box shadow to an element.", + ], + [ + '.shadow-lg', + "box-shadow:\n 0 15px 30px 0 rgba(0,0,0,0.11),\n 0 5px 15px 0 rgba(0,0,0,0.08);", + "Apply a large box shadow to an element.", + ], + [ + '.shadow-inner', + "box-shadow:\n inset 0 2px 4px 0 rgba(0,0,0,0.06);", + "Apply a small inner box shadow to an element.", + ], + [ + '.shadow-none', + "box-shadow: none;", + "Remove a box shadow from an element.", + ], + ] +]) ## Outer shadow diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index 545048e07..e499039db 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -11,31 +11,17 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.select-noneuser-select: none;Disable selecting text in an element.
.select-textuser-select: text;Allow selecting text in an element.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.select-none', + 'user-select: none;', + "Disable selecting text in an element.", + ], + [ + '.select-text', + 'user-select: text;', + "Allow selecting text in an element.", + ], + ] +])