diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php new file mode 100644 index 000000000..5eff24194 --- /dev/null +++ b/docs/source/_partials/feature-badges.blade.php @@ -0,0 +1,65 @@ +
+ @if ($responsive) + + + + + Responsive + + @else + + + + + Responsive + + @endif + + @if ($customizable) + + + + + Customizable + + @else + + + + + Customizable + + @endif + + @if ($hover) + + + + + Hover + + @else + + + + + Hover + + @endif + + @if ($focus) + + + + + Focus + + @else + + + + + Focus + + @endif +
diff --git a/docs/source/styles/opacity.blade.md b/docs/source/styles/opacity.blade.md index aa30fe081..e3328dfee 100644 --- a/docs/source/styles/opacity.blade.md +++ b/docs/source/styles/opacity.blade.md @@ -9,35 +9,12 @@ title: "Opacity" Utilities for controlling the opacity of an element. -
- - - - - Responsive - - - - - - - Customizable - - - - - - - Hover - - - - - - - Focus - -
+@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +])
diff --git a/docs/source/styles/shadows.blade.md b/docs/source/styles/shadows.blade.md index 1eec4b581..798d4c75c 100644 --- a/docs/source/styles/shadows.blade.md +++ b/docs/source/styles/shadows.blade.md @@ -5,13 +5,59 @@ title: "Shadows" # Shadows -
+
Utilities for controlling the box shadow of an element.
-
- Responsive - Customizing +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.shadowbox-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15);Apply a small box shadow to an element.
.shadow-mdbox-shadow: 0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13);Apply a medium box shadow to an element.
.shadow-lgbox-shadow: 0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13);Apply a large box shadow to an element.
.shadow-innerbox-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05)Apply a small inner box shadow to an element.
.shadow-nonebox-shadow: none;Remove a box shadow from an element.
Box shadows can be applied using the `.shadow-{size}` utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the `.shadow` utility without a suffix, you'll get the default shadow.