mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 12:59:05 +02:00
Code Issues Releases Wiki Activity

Rename mh-* and mw-* to max-h/w-*, add additional width and height va… (#41687)

Browse Source 
* Rename mh-* and mw-* to max-h/w-*, add additional width and height values

Fixes #41330, fixes #40674.

* Bump bundlewatch
This commit is contained in:
Mark Otto
2025-08-26 23:05:12 -07:00
committed by Mark Otto
parent 9c9b8a35fa
commit 7c08b3a86d
3 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@@ -22,7 +22,7 @@
}, },
{ {
"path": "./dist/css/bootstrap-utilities.min.css", "path": "./dist/css/bootstrap-utilities.min.css",
"maxSize": "10.75 kB" "maxSize": "11.0 kB"
}, },
{ {
"path": "./dist/css/bootstrap.css", "path": "./dist/css/bootstrap.css",

30
scss/_utilities.scss
View File

@@ -210,14 +210,25 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
) )
), ),
"max-width": ( "max-width": (
property: max-width, property: max-width,
class: mw, class: max-w,
values: (100: 100%) values: (100: 100%)
), ),
"min-width": (
property: min-width,
class: min-w,
values: (
0: 0,
100: 100%
)
),
"viewport-width": ( "viewport-width": (
property: width, property: width,
class: vw, class: vw,
@@ -236,14 +247,25 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
) )
), ),
"max-height": ( "max-height": (
property: max-height, property: max-height,
class: mh, class: max-h,
values: (100: 100%) values: (100: 100%)
), ),
"min-height": (
property: min-height,
class: min-h,
values: (
0: 0,
100: 100%,
),
),
"viewport-height": ( "viewport-height": (
property: height, property: height,
class: vh, class: vh,

4
site/src/content/docs/utilities/sizing.mdx
View File

@@ -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. You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
<Example class="bd-example-flex" code={`<div style="width: 50%; height: 100px;"> <Example class="bd-example-flex" code={`<div style="width: 50%; height: 100px;">
<div class="mw-100" style="width: 200%;">Max-width 100%</div> <div class="max-w-100" style="width: 200%;">Max-width 100%</div>
</div>`} /> </div>`} />
<Example class="bd-example-flex" code={`<div style="height: 100px;"> <Example class="bd-example-flex" code={`<div style="height: 100px;">
<div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div> <div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>`} /> </div>`} />
## Relative to the viewport ## Relative to the viewport