Permalink
Browse files

Add overflow-auto and overflow-hidden utilities

  • Loading branch information...
mdo committed Sep 19, 2018
1 parent 2301557 commit 29bd5e32186b2d56b7b35a09597bfed6636d66c9
View
@@ -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";
View
@@ -1001,6 +1001,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;
@@ -0,0 +1,5 @@
// stylelint-disable declaration-no-important
@each $value in $overflows {
.overflow-#{$value} { overflow: $value !important; }
}
@@ -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; }
}
View
@@ -62,6 +62,7 @@
- title: Flex
- title: Float
- title: Image replacement
- title: Overflow
- title: Position
- title: Screenreaders
- title: Shadows
@@ -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.
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
</div>
<div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
</div>
</div>
{% highlight html %}
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
{% endhighlight %}
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.

0 comments on commit 29bd5e3

Please sign in to comment.