Add box-shadow utilities (#25758)

twbs · Apr 1, 2018 · dd7ed79 · dd7ed79
1 parent a016cbd
commit dd7ed79
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -64,6 +64,7 @@
     - title: Image replacement
     - title: Position
     - title: Screenreaders
+    - title: Shadows
     - title: Sizing
     - title: Spacing
     - title: Text

diff --git a/docs/4.0/utilities/shadows.md b/docs/4.0/utilities/shadows.md
@@ -0,0 +1,19 @@
+---
+layout: docs
+title: Shadows
+description:  Add or remove shadows to elements with `box-shadow` utilities.
+group: utilities
+toc: false
+---
+
+## Examples
+
+While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
+
+{% capture example %}
+<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -8,6 +8,7 @@
 @import "utilities/float";
 @import "utilities/position";
 @import "utilities/screenreaders";
+@import "utilities/shadows";
 @import "utilities/sizing";
 @import "utilities/spacing";
 @import "utilities/text";

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -212,6 +212,10 @@ $border-radius:               .25rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
 $component-active-color:      $white !default;
 $component-active-bg:         theme-color("primary") !default;
 

diff --git a/scss/utilities/_shadows.scss b/scss/utilities/_shadows.scss
@@ -0,0 +1,6 @@
+// stylelint-disable declaration-no-important
+
+.shadow-sm { box-shadow: $box-shadow-sm !important; }
+.shadow { box-shadow: $box-shadow !important; }
+.shadow-lg { box-shadow: $box-shadow-lg !important; }
+.shadow-none { box-shadow: none !important; }