Add box-shadow utilities (#25758)

diff --git a/_data/nav.yml b/_data/nav.yml
index 45a512dc11fed741b835bfc3758efb7e942152a8..98bd2c5d5e79bb0812efa950f784340e5277e277 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..54409b5
--- /dev/null
+++ 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
index 7b2a1ebe9d020a0744ddfd4c2a12745131c86953..6c7a7cdd341adeba2db6dab494abb63af315e8ce 100644 (file)
--- 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
index 68095ce127c9df435989d1707a81bfcb68c13d74..c08c2b0464bc0ef109dcfef1426c613755554f94 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..f5d03fc
--- /dev/null
+++ 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; }