From dd7ed798564643d18d738f20e4cf51ccffd5af99 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sat, 31 Mar 2018 22:07:48 -0700
Subject: [PATCH] Add box-shadow utilities (#25758)
---
_data/nav.yml | 1 +
docs/4.0/utilities/shadows.md | 19 +++++++++++++++++++
scss/_utilities.scss | 1 +
scss/_variables.scss | 4 ++++
scss/utilities/_shadows.scss | 6 ++++++
5 files changed, 31 insertions(+)
create mode 100644 docs/4.0/utilities/shadows.md
create mode 100644 scss/utilities/_shadows.scss
diff --git a/_data/nav.yml b/_data/nav.yml
index 45a512dc11..98bd2c5d5e 100644
--- 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
index 0000000000..54409b5edf
--- /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 7b2a1ebe9d..6c7a7cdd34 100644
--- 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 68095ce127..c08c2b0464 100644
--- 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
index 0000000000..f5d03fcd59
--- /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; }
--
GitLab