From 3df16c797551bb7f07eb34804db5e81a7ff9679b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 1 Mar 2018 22:04:53 -0800 Subject: [PATCH 1/4] Stub out first pas on box-shadow utilities --- _data/nav.yml | 1 + docs/4.0/utilities/shadows.md | 17 +++++++++++++++++ scss/_utilities.scss | 1 + scss/_variables.scss | 4 ++++ scss/utilities/_shadows.scss | 5 +++++ 5 files changed, 28 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 45a512dc11fe..98bd2c5d5e79 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 000000000000..bf3203415218 --- /dev/null +++ b/docs/4.0/utilities/shadows.md @@ -0,0 +1,17 @@ +--- +layout: docs +title: Shadows +description: Add shadows to elements with `box-shadow` utilities. +group: utilities +toc: true +--- + +## Examples + +Three sizes of shadows are available via utility classes. + +{% example html %} +
Small shadow
+
Regular shadow
+
Larger shadow
+{% endexample %} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 7b2a1ebe9d02..6c7a7cdd341a 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 11f325530719..cae38c0e4f02 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 000000000000..ac476330910d --- /dev/null +++ b/scss/utilities/_shadows.scss @@ -0,0 +1,5 @@ +@if $enable-shadows { + .shadow-sm { box-shadow: $box-shadow-sm; } + .shadow { box-shadow: $box-shadow; } + .shadow-lg { box-shadow: $box-shadow-lg; } +} From 860d853a70e5f72f2aa2e4825fd5645d1ad4a5a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2018 15:33:25 -0700 Subject: [PATCH 2/4] Don't put behind enable var, update docs, add .shadow-none --- docs/4.0/utilities/shadows.md | 10 ++++++---- scss/utilities/_shadows.scss | 9 ++++----- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/4.0/utilities/shadows.md b/docs/4.0/utilities/shadows.md index bf3203415218..09e59d2a8aef 100644 --- a/docs/4.0/utilities/shadows.md +++ b/docs/4.0/utilities/shadows.md @@ -1,17 +1,19 @@ --- layout: docs title: Shadows -description: Add shadows to elements with `box-shadow` utilities. +description: Add or remove shadows to elements with `box-shadow` utilities. group: utilities toc: true --- ## Examples -Three sizes of shadows are available via utility classes. +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). -{% example html %} +{% capture example %} +
No shadow
Small shadow
Regular shadow
Larger shadow
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} diff --git a/scss/utilities/_shadows.scss b/scss/utilities/_shadows.scss index ac476330910d..f699f65247e0 100644 --- a/scss/utilities/_shadows.scss +++ b/scss/utilities/_shadows.scss @@ -1,5 +1,4 @@ -@if $enable-shadows { - .shadow-sm { box-shadow: $box-shadow-sm; } - .shadow { box-shadow: $box-shadow; } - .shadow-lg { box-shadow: $box-shadow-lg; } -} +.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; } From 56857e2b830564ee15b5e613e4e0c8f8fde7ff2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2018 17:41:02 -0700 Subject: [PATCH 3/4] disable toc --- docs/4.0/utilities/shadows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/utilities/shadows.md b/docs/4.0/utilities/shadows.md index 09e59d2a8aef..54409b5edfb7 100644 --- a/docs/4.0/utilities/shadows.md +++ b/docs/4.0/utilities/shadows.md @@ -3,7 +3,7 @@ layout: docs title: Shadows description: Add or remove shadows to elements with `box-shadow` utilities. group: utilities -toc: true +toc: false --- ## Examples From 8fe80910390e9967579201fb18cab67fc4e0caf2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2018 17:41:47 -0700 Subject: [PATCH 4/4] disable important linter setting --- scss/utilities/_shadows.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scss/utilities/_shadows.scss b/scss/utilities/_shadows.scss index f699f65247e0..f5d03fcd59c1 100644 --- a/scss/utilities/_shadows.scss +++ b/scss/utilities/_shadows.scss @@ -1,3 +1,5 @@ +// 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; }