rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Adding overflow visible as util

Browse Source
This commit is contained in:
Gaurav Behere 2020-07-21 11:24:38 +03:00 committed by XhmikosR
parent f3cfc8e7ec
commit 776afb8e9e
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_utilities.scss
View File

@ -16,7 +16,7 @@ $utilities: map-merge(
),
"overflow": (
property: overflow,
values: auto hidden,
values: auto hidden visible scroll,
),
"display": (
responsive: true,

10
site/content/docs/5.0/utilities/overflow.md
View File

@ -5,7 +5,7 @@ description: Use these shorthand utilities for quickly configuring how content o
group: utilities
---
Barebones `overflow` functionality is provided for two values by default, and they are not responsive.
Barebones `overflow` functionality is provided for four 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;">
@ -14,11 +14,19 @@ Barebones `overflow` functionality is provided for two values by default, and th
<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 class="overflow-visible p-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
</div>
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
</div>
</div>
{{< highlight html >}}
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
{{< /highlight >}}
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.