Skip to content

Commit ff6e4e4

Browse files
committed
fix(utilites): merge height values into single group
fixes #22916
1 parent bf90efd commit ff6e4e4

3 files changed

Lines changed: 4 additions & 21 deletions

File tree

packages/docs/src/pages/en/features/sass-variables.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,6 @@ Vuetify includes several utility classes that are not covered by the `$utilities
174174
"gap-column": false,
175175
"gap-row": false,
176176
"gap": false,
177-
"height-screen": false,
178177
"height": false,
179178
"justify-content": false,
180179
"justify-items": false,

packages/docs/src/pages/en/styles/sizing.md

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,13 @@ Sizing utility classes are used to modify the dimensions of an element.
2020
| Class | Description |
2121
| ------------ |------------------|
2222
| **h-auto** | height: auto |
23-
| **h-screen** | height: 100vh |
23+
| **h-screen** | height: 100dvh |
2424
| **h-0** | height: 0 |
2525
| **h-25** | height: 25% |
2626
| **h-50** | height: 50% |
2727
| **h-75** | height: 75% |
2828
| **h-100** | height: 100% |
2929
| **fill-height** | height: 100% |
30-
| **height-screen** | height: 100dvh |
3130
| **w-auto** | width: auto |
3231
| **w-0** | width: 0 |
3332
| **w-33** | width: 33% |
@@ -77,21 +76,14 @@ You can also use the following SASS variables to customize the generated height
7776
class: h,
7877
values: (
7978
auto: auto,
80-
screen: 100vh,
79+
screen: 100dvh,
8180
0: 0,
8281
25: 25%,
8382
50: 50%,
8483
75: 75%,
8584
100: 100%
8685
)
8786
),
88-
"height-screen": (
89-
property: height,
90-
class: h,
91-
values: (
92-
screen: 100dvh
93-
)
94-
),
9587
"width": (
9688
property: width,
9789
responsive: true,
@@ -111,14 +103,13 @@ You can also use the following SASS variables to customize the generated height
111103
);
112104
```
113105

114-
Disable height/width class generation by setting the the fill-height, height, height-screen, and, width variables to **false**.
106+
Disable height/width class generation by setting the the `fill-height`, `height` and `width` variables to **false**.
115107

116108
```scss { resource="src/styles/settings.scss" }
117109
@use 'vuetify/settings' with (
118110
$utilities: (
119111
"fill-height": false,
120112
"height": false,
121-
"height-screen": false,
122113
"width": false
123114
)
124115
);

packages/vuetify/src/styles/settings/_utilities.scss

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -590,21 +590,14 @@ $utilities: () !default;
590590
class: h,
591591
values: (
592592
auto: auto,
593-
screen: 100vh,
593+
screen: 100dvh,
594594
0: 0,
595595
25: 25%,
596596
50: 50%,
597597
75: 75%,
598598
100: 100%
599599
)
600600
),
601-
"height-screen": (
602-
property: height,
603-
class: h,
604-
values: (
605-
screen: 100dvh
606-
)
607-
),
608601
"width": (
609602
property: width,
610603
responsive: true,

0 commit comments

Comments
 (0)