From db46bfc03f3a22752ef6bd91ae577d893872a216 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:40 +0200 Subject: Merging upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/utilities/sizing.md | 60 ------------------------------- 1 file changed, 60 deletions(-) delete mode 100644 site/content/docs/5.2/utilities/sizing.md (limited to 'site/content/docs/5.2/utilities/sizing.md') diff --git a/site/content/docs/5.2/utilities/sizing.md b/site/content/docs/5.2/utilities/sizing.md deleted file mode 100644 index 962575f..0000000 --- a/site/content/docs/5.2/utilities/sizing.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -layout: docs -title: Sizing -description: Easily make an element as wide or as tall with our width and height utilities. -group: utilities -toc: true ---- - -## Relative to the parent - -Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here. - -{{< example >}} -
Width 25%
-
Width 50%
-
Width 75%
-
Width 100%
-
Width auto
-{{< /example >}} - -{{< example >}} -
-
Height 25%
-
Height 50%
-
Height 75%
-
Height 100%
-
Height auto
-
-{{< /example >}} - -You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. - -{{< example >}} -{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}} -{{< /example >}} - -{{< example >}} -
-
Max-height 100%
-
-{{< /example >}} - -## Relative to the viewport - -You can also use utilities to set the width and height relative to the viewport. - -```html -
Min-width 100vw
-
Min-height 100vh
-
Width 100vw
-
Height 100vh
-``` - -## Sass - -### Utilities API - -Sizing 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-sizing" file="scss/_utilities.scss" >}} -- cgit v1.2.3