diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6c7a7cdd341a..913fb852d58e 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -6,6 +6,7 @@ @import "utilities/embed"; @import "utilities/flex"; @import "utilities/float"; +@import "utilities/overflow"; @import "utilities/position"; @import "utilities/screenreaders"; @import "utilities/shadows"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 4f26be9d4a77..29ca7f67ecdb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -991,6 +991,12 @@ $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; +// Utilities + +$overflows: auto, hidden !default; +$positions: static, relative, absolute, fixed, sticky !default; + + // Printing $print-page-size: a3 !default; diff --git a/scss/utilities/_overflow.scss b/scss/utilities/_overflow.scss new file mode 100644 index 000000000000..8326c30641e6 --- /dev/null +++ b/scss/utilities/_overflow.scss @@ -0,0 +1,5 @@ +// stylelint-disable declaration-no-important + +@each $value in $overflows { + .overflow-#{$value} { overflow: $value !important; } +} diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss index 9ecdeeb9be12..cdf6c115f3d3 100644 --- a/scss/utilities/_position.scss +++ b/scss/utilities/_position.scss @@ -1,11 +1,6 @@ // stylelint-disable declaration-no-important // Common values - -// Sass list not in variables since it's not intended for customization. -// stylelint-disable-next-line scss/dollar-variable-default -$positions: static, relative, absolute, fixed, sticky; - @each $position in $positions { .position-#{$position} { position: $position !important; } } diff --git a/site/_data/nav.yml b/site/_data/nav.yml index 99cb90f84900..7aa92bd2886b 100644 --- a/site/_data/nav.yml +++ b/site/_data/nav.yml @@ -62,6 +62,7 @@ - title: Flex - title: Float - title: Image replacement + - title: Overflow - title: Position - title: Screenreaders - title: Shadows diff --git a/site/docs/4.1/utilities/overflow.md b/site/docs/4.1/utilities/overflow.md new file mode 100644 index 000000000000..33f6d757f1a1 --- /dev/null +++ b/site/docs/4.1/utilities/overflow.md @@ -0,0 +1,25 @@ +--- +layout: docs +title: Overflow +description: Use these shorthand utilities for quickly configuring how content overflows an element. +group: utilities +toc: true +--- + +Barebones `overflow` functionality is provided for two values by default, and they are not responsive. + +
+
+ This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. +
+
+ This is an example of using .overflow-hidden on an element with set width and height dimensions. +
+
+ +{% highlight html %} +
...
+
...
+{% endhighlight %} + +Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.