diff --git a/site/content/docs/0.0/utilities/overflow.md b/site/content/docs/0.0/utilities/overflow.md index 9030ddfc6f..e5d0f2e61a 100644 --- a/site/content/docs/0.0/utilities/overflow.md +++ b/site/content/docs/0.0/utilities/overflow.md @@ -8,4 +8,94 @@ aliases: - "/docs/utilities/overflow/" --- -{{< callout-soon "page" >}} +## Overflow + +Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default. + +
+
+ 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. +
+
+ This is an example of using .overflow-visible on an element with set width and height dimensions. +
+
+ This is an example of using .overflow-scroll on an element with set width and height dimensions. +
+
+ +```html +
...
+
...
+
...
+
...
+``` + +### `overflow-x` + +Adjust the `overflow-x` property to affect the overflow of content horizontally. + +
+
+
.overflow-x-auto example on an element
+
with set width and height dimensions.
+
+
+
.overflow-x-hidden example
+
on an element with set width and height dimensions.
+
+
+
.overflow-x-visible example
+
on an element with set width and height dimensions.
+
+
+
.overflow-x-scroll example on an element
+
with set width and height dimensions.
+
+
+ +```html +
...
+
...
+
...
+
...
+``` + +### `overflow-y` + +Adjust the `overflow-y` property to affect the overflow of content vertically. + +
+
+ .overflow-y-auto example on an element with set width and height dimensions. +
+
+ .overflow-y-hidden example on an element with set width and height dimensions. +
+
+ .overflow-y-visible example on an element with set width and height dimensions. +
+
+ .overflow-y-scroll example on an element with set width and height dimensions. +
+
+ +```html +
...
+
...
+
...
+
...
+``` + +Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. + +## CSS + +### Sass utilities API + +Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4c2a0d8c98..3f709ae038 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -232,7 +232,6 @@ - title: Opacity draft: true - title: Overflow - draft: true - title: Position draft: true - title: Shadows