diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 6f680664ca..69e6ca746f 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "10.75 kB" + "maxSize": "11.0 kB" }, { "path": "./dist/css/bootstrap.css", diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 0343850127..8f1039d044 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -210,14 +210,25 @@ $utilities: map-merge( 50: 50%, 75: 75%, 100: 100%, - auto: auto + auto: auto, + min: min-content, + max: max-content, + fit: fit-content, ) ), "max-width": ( property: max-width, - class: mw, + class: max-w, values: (100: 100%) ), + "min-width": ( + property: min-width, + class: min-w, + values: ( + 0: 0, + 100: 100% + ) + ), "viewport-width": ( property: width, class: vw, @@ -236,14 +247,25 @@ $utilities: map-merge( 50: 50%, 75: 75%, 100: 100%, - auto: auto + auto: auto, + min: min-content, + max: max-content, + fit: fit-content, ) ), "max-height": ( property: max-height, - class: mh, + class: max-h, values: (100: 100%) ), + "min-height": ( + property: min-height, + class: min-h, + values: ( + 0: 0, + 100: 100%, + ), + ), "viewport-height": ( property: height, class: vh, diff --git a/site/src/content/docs/utilities/sizing.mdx b/site/src/content/docs/utilities/sizing.mdx index 77f98d71d5..dd554f9331 100644 --- a/site/src/content/docs/utilities/sizing.mdx +++ b/site/src/content/docs/utilities/sizing.mdx @@ -25,11 +25,11 @@ Width and height utilities are generated from the utility API in `_utilities.scs You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. -
Max-width 100%
+
Max-width 100%
`} /> -
Max-height 100%
+
Max-height 100%
`} /> ## Relative to the viewport