@patternfly/patternfly 6.5.0-prerelease.67 → 6.5.0-prerelease.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Card/card.css +8 -0
- package/components/Card/card.scss +13 -0
- package/components/OverflowMenu/overflow-menu.css +16 -0
- package/components/OverflowMenu/overflow-menu.scss +20 -1
- package/components/Toolbar/toolbar.css +100 -0
- package/components/Toolbar/toolbar.scss +2 -2
- package/components/_index.css +124 -0
- package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
- package/docs/components/OverflowMenu/examples/overflow-menu.md +21 -0
- package/docs/components/Toolbar/examples/Toolbar.md +39 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +124 -0
- package/patternfly.css +124 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +16 -1
package/components/Card/card.css
CHANGED
|
@@ -188,6 +188,14 @@
|
|
|
188
188
|
--pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
|
|
189
189
|
--pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
|
|
190
190
|
}
|
|
191
|
+
.pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
|
|
192
|
+
--pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
|
|
193
|
+
--pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
|
|
194
|
+
}
|
|
195
|
+
.pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
|
|
196
|
+
--pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
|
|
197
|
+
--pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
|
|
198
|
+
}
|
|
191
199
|
.pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
|
|
192
200
|
transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
|
|
193
201
|
}
|
|
@@ -266,6 +266,19 @@
|
|
|
266
266
|
--#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
|
|
267
267
|
--#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
|
|
268
268
|
--#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
|
|
269
|
+
|
|
270
|
+
// A clickable/selectable plain card should behave like a non-plain card in every way except the background color
|
|
271
|
+
&.pf-m-selectable,
|
|
272
|
+
&.pf-m-clickable {
|
|
273
|
+
--#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
|
|
274
|
+
--#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
|
|
275
|
+
|
|
276
|
+
&.pf-m-current {
|
|
277
|
+
--#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
|
|
278
|
+
--#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
269
282
|
}
|
|
270
283
|
|
|
271
284
|
&.pf-m-expanded {
|
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
.pf-v6-c-overflow-menu {
|
|
2
2
|
--pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
|
|
3
|
+
--pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
|
|
3
4
|
--pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
|
|
5
|
+
--pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
|
|
4
6
|
--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
7
|
+
--pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
|
|
5
8
|
--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
9
|
+
--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
|
|
6
10
|
}
|
|
7
11
|
|
|
8
12
|
.pf-v6-c-overflow-menu {
|
|
9
13
|
display: inline-flex;
|
|
14
|
+
row-gap: var(--pf-v6-c-overflow-menu--RowGap);
|
|
10
15
|
column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
|
|
11
16
|
}
|
|
12
17
|
|
|
18
|
+
.pf-v6-c-overflow-menu.pf-m-vertical,
|
|
19
|
+
.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
|
|
20
|
+
.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
}
|
|
23
|
+
|
|
13
24
|
.pf-v6-c-overflow-menu__content,
|
|
14
25
|
.pf-v6-c-overflow-menu__group {
|
|
15
26
|
display: flex;
|
|
@@ -17,20 +28,25 @@
|
|
|
17
28
|
}
|
|
18
29
|
|
|
19
30
|
.pf-v6-c-overflow-menu__group {
|
|
31
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
|
|
20
32
|
column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
|
|
21
33
|
}
|
|
22
34
|
.pf-v6-c-overflow-menu__group.pf-m-button-group {
|
|
35
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
|
|
23
36
|
column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
|
|
24
37
|
}
|
|
25
38
|
.pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
|
|
39
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
|
|
26
40
|
column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
|
|
27
41
|
}
|
|
28
42
|
|
|
29
43
|
.pf-v6-c-overflow-menu__item {
|
|
44
|
+
row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
|
|
30
45
|
column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
|
|
31
46
|
}
|
|
32
47
|
|
|
33
48
|
.pf-v6-c-overflow-menu__content,
|
|
34
49
|
.pf-v6-c-overflow-menu__control {
|
|
50
|
+
row-gap: var(--pf-v6-c-overflow-menu--RowGap);
|
|
35
51
|
column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
|
|
36
52
|
}
|
|
@@ -2,23 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
@include pf-root($overflow-menu) {
|
|
4
4
|
--#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
|
|
5
|
+
--#{$overflow-menu}--RowGap: var(--pf-t--global--spacer--md);
|
|
5
6
|
|
|
6
7
|
// * Overflow menu group
|
|
7
8
|
--#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
|
|
9
|
+
--#{$overflow-menu}__group--RowGap: var(--pf-t--global--spacer--md);
|
|
8
10
|
|
|
9
11
|
// * Overflow menu button group
|
|
10
12
|
--#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
13
|
+
--#{$overflow-menu}__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
|
|
11
14
|
|
|
12
15
|
// * Overflow menu icon button group
|
|
13
16
|
--#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
17
|
+
--#{$overflow-menu}__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
// - Overflow menu
|
|
17
21
|
.#{$overflow-menu} {
|
|
18
22
|
display: inline-flex;
|
|
23
|
+
row-gap: var(--#{$overflow-menu}--RowGap);
|
|
19
24
|
column-gap: var(--#{$overflow-menu}--ColumnGap);
|
|
20
25
|
}
|
|
21
26
|
|
|
27
|
+
// - Overflow menu - vertical
|
|
28
|
+
.#{$overflow-menu}.pf-m-vertical {
|
|
29
|
+
&,
|
|
30
|
+
.#{$overflow-menu}__content,
|
|
31
|
+
.#{$overflow-menu}__group {
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
22
36
|
// - Overflow menu content - Overflow menu group
|
|
23
37
|
.#{$overflow-menu}__content,
|
|
24
38
|
.#{$overflow-menu}__group {
|
|
@@ -28,26 +42,31 @@
|
|
|
28
42
|
|
|
29
43
|
// - Overflow menu group
|
|
30
44
|
.#{$overflow-menu}__group {
|
|
45
|
+
row-gap: var(--#{$overflow-menu}__group--RowGap);
|
|
31
46
|
column-gap: var(--#{$overflow-menu}__group--ColumnGap);
|
|
32
|
-
|
|
47
|
+
|
|
33
48
|
// - Overflow menu button group
|
|
34
49
|
&.pf-m-button-group {
|
|
50
|
+
row-gap: var(--#{$overflow-menu}__group--m-button-group--RowGap);
|
|
35
51
|
column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
|
|
36
52
|
}
|
|
37
53
|
|
|
38
54
|
// - Overflow menu icon button group
|
|
39
55
|
&.pf-m-icon-button-group {
|
|
56
|
+
row-gap: var(--#{$overflow-menu}__group--m-icon-button-group--RowGap);
|
|
40
57
|
column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
|
|
41
58
|
}
|
|
42
59
|
}
|
|
43
60
|
|
|
44
61
|
// - Oveflow menu item
|
|
45
62
|
.#{$overflow-menu}__item {
|
|
63
|
+
row-gap: var(--#{$overflow-menu}__item--RowGap, var(--#{$overflow-menu}--RowGap));
|
|
46
64
|
column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
|
|
47
65
|
}
|
|
48
66
|
|
|
49
67
|
// - Overflow menu content - Overflow menu control
|
|
50
68
|
.#{$overflow-menu}__content,
|
|
51
69
|
.#{$overflow-menu}__control {
|
|
70
|
+
row-gap: var(--#{$overflow-menu}--RowGap);
|
|
52
71
|
column-gap: var(--#{$overflow-menu}--ColumnGap);
|
|
53
72
|
}
|
|
@@ -66,6 +66,66 @@
|
|
|
66
66
|
.pf-v6-c-toolbar__item.pf-m-hidden {
|
|
67
67
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
68
68
|
}
|
|
69
|
+
@media screen and (min-height: 0) {
|
|
70
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
|
|
71
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
|
|
72
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
|
|
73
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
74
|
+
}
|
|
75
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
|
|
76
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
|
|
77
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
|
|
78
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@media screen and (min-height: 40rem) {
|
|
82
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
|
|
83
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
|
|
84
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
|
|
85
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
86
|
+
}
|
|
87
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
|
|
88
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
|
|
89
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
|
|
90
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
@media screen and (min-height: 48rem) {
|
|
94
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
|
|
95
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
|
|
96
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
|
|
97
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
98
|
+
}
|
|
99
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
|
|
100
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
|
|
101
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
|
|
102
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
@media screen and (min-height: 60rem) {
|
|
106
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
|
|
107
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
|
|
108
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
|
|
109
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
110
|
+
}
|
|
111
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
|
|
112
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
|
|
113
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
|
|
114
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
@media screen and (min-height: 80rem) {
|
|
118
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
|
|
119
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
|
|
120
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
|
|
121
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
122
|
+
}
|
|
123
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
|
|
124
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
|
|
125
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
|
|
126
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
69
129
|
@media screen and (min-width: 36rem) {
|
|
70
130
|
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
|
|
71
131
|
.pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
|
|
@@ -141,6 +201,46 @@
|
|
|
141
201
|
.pf-v6-c-toolbar__content.pf-m-hidden {
|
|
142
202
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
143
203
|
}
|
|
204
|
+
@media screen and (min-height: 0) {
|
|
205
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
|
|
206
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
207
|
+
}
|
|
208
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
|
|
209
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
@media screen and (min-height: 40rem) {
|
|
213
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
|
|
214
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
215
|
+
}
|
|
216
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
|
|
217
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
@media screen and (min-height: 48rem) {
|
|
221
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
|
|
222
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
223
|
+
}
|
|
224
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
|
|
225
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
@media screen and (min-height: 60rem) {
|
|
229
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
|
|
230
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
231
|
+
}
|
|
232
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
|
|
233
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
@media screen and (min-height: 80rem) {
|
|
237
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
|
|
238
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
239
|
+
}
|
|
240
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
|
|
241
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
144
244
|
@media screen and (min-width: 36rem) {
|
|
145
245
|
.pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
|
|
146
246
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
@@ -101,7 +101,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
|
|
|
101
101
|
.#{$toolbar}__content-section,
|
|
102
102
|
.#{$toolbar}__group,
|
|
103
103
|
.#{$toolbar}__item {
|
|
104
|
-
@include pf-v6-hidden-visible(flex);
|
|
104
|
+
@include pf-v6-hidden-visible(flex, $ifIncludeHeight: true);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
// - Toolbar - Toolbar content
|
|
@@ -112,7 +112,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
|
|
|
112
112
|
|
|
113
113
|
// - Toolbar content - Toolbar content section - Toolbar expandable content
|
|
114
114
|
.#{$toolbar}__content {
|
|
115
|
-
@include pf-v6-hidden-visible(grid);
|
|
115
|
+
@include pf-v6-hidden-visible(grid, $ifIncludeHeight: true);
|
|
116
116
|
|
|
117
117
|
row-gap: var(--#{$toolbar}__content--RowGap);
|
|
118
118
|
padding-inline-start: var(--#{$toolbar}__content--PaddingInlineStart);
|
package/components/_index.css
CHANGED
|
@@ -2998,6 +2998,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2998
2998
|
--pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
|
|
2999
2999
|
--pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
|
|
3000
3000
|
}
|
|
3001
|
+
.pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
|
|
3002
|
+
--pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
|
|
3003
|
+
--pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
|
|
3004
|
+
}
|
|
3005
|
+
.pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
|
|
3006
|
+
--pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
|
|
3007
|
+
--pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
|
|
3008
|
+
}
|
|
3001
3009
|
.pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
|
|
3002
3010
|
transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
|
|
3003
3011
|
}
|
|
@@ -13504,16 +13512,27 @@ ul.pf-v6-c-list {
|
|
|
13504
13512
|
|
|
13505
13513
|
.pf-v6-c-overflow-menu {
|
|
13506
13514
|
--pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
|
|
13515
|
+
--pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
|
|
13507
13516
|
--pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
|
|
13517
|
+
--pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
|
|
13508
13518
|
--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
13519
|
+
--pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
|
|
13509
13520
|
--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
13521
|
+
--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
|
|
13510
13522
|
}
|
|
13511
13523
|
|
|
13512
13524
|
.pf-v6-c-overflow-menu {
|
|
13513
13525
|
display: inline-flex;
|
|
13526
|
+
row-gap: var(--pf-v6-c-overflow-menu--RowGap);
|
|
13514
13527
|
column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
|
|
13515
13528
|
}
|
|
13516
13529
|
|
|
13530
|
+
.pf-v6-c-overflow-menu.pf-m-vertical,
|
|
13531
|
+
.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
|
|
13532
|
+
.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
|
|
13533
|
+
flex-direction: column;
|
|
13534
|
+
}
|
|
13535
|
+
|
|
13517
13536
|
.pf-v6-c-overflow-menu__content,
|
|
13518
13537
|
.pf-v6-c-overflow-menu__group {
|
|
13519
13538
|
display: flex;
|
|
@@ -13521,21 +13540,26 @@ ul.pf-v6-c-list {
|
|
|
13521
13540
|
}
|
|
13522
13541
|
|
|
13523
13542
|
.pf-v6-c-overflow-menu__group {
|
|
13543
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
|
|
13524
13544
|
column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
|
|
13525
13545
|
}
|
|
13526
13546
|
.pf-v6-c-overflow-menu__group.pf-m-button-group {
|
|
13547
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
|
|
13527
13548
|
column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
|
|
13528
13549
|
}
|
|
13529
13550
|
.pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
|
|
13551
|
+
row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
|
|
13530
13552
|
column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
|
|
13531
13553
|
}
|
|
13532
13554
|
|
|
13533
13555
|
.pf-v6-c-overflow-menu__item {
|
|
13556
|
+
row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
|
|
13534
13557
|
column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
|
|
13535
13558
|
}
|
|
13536
13559
|
|
|
13537
13560
|
.pf-v6-c-overflow-menu__content,
|
|
13538
13561
|
.pf-v6-c-overflow-menu__control {
|
|
13562
|
+
row-gap: var(--pf-v6-c-overflow-menu--RowGap);
|
|
13539
13563
|
column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
|
|
13540
13564
|
}
|
|
13541
13565
|
|
|
@@ -22442,6 +22466,66 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22442
22466
|
.pf-v6-c-toolbar__item.pf-m-hidden {
|
|
22443
22467
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22444
22468
|
}
|
|
22469
|
+
@media screen and (min-height: 0) {
|
|
22470
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
|
|
22471
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
|
|
22472
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
|
|
22473
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22474
|
+
}
|
|
22475
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
|
|
22476
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
|
|
22477
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
|
|
22478
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22479
|
+
}
|
|
22480
|
+
}
|
|
22481
|
+
@media screen and (min-height: 40rem) {
|
|
22482
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
|
|
22483
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
|
|
22484
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
|
|
22485
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22486
|
+
}
|
|
22487
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
|
|
22488
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
|
|
22489
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
|
|
22490
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22491
|
+
}
|
|
22492
|
+
}
|
|
22493
|
+
@media screen and (min-height: 48rem) {
|
|
22494
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
|
|
22495
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
|
|
22496
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
|
|
22497
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22498
|
+
}
|
|
22499
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
|
|
22500
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
|
|
22501
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
|
|
22502
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22503
|
+
}
|
|
22504
|
+
}
|
|
22505
|
+
@media screen and (min-height: 60rem) {
|
|
22506
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
|
|
22507
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
|
|
22508
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
|
|
22509
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22510
|
+
}
|
|
22511
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
|
|
22512
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
|
|
22513
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
|
|
22514
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22515
|
+
}
|
|
22516
|
+
}
|
|
22517
|
+
@media screen and (min-height: 80rem) {
|
|
22518
|
+
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
|
|
22519
|
+
.pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
|
|
22520
|
+
.pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
|
|
22521
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22522
|
+
}
|
|
22523
|
+
.pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
|
|
22524
|
+
.pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
|
|
22525
|
+
.pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
|
|
22526
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22527
|
+
}
|
|
22528
|
+
}
|
|
22445
22529
|
@media screen and (min-width: 36rem) {
|
|
22446
22530
|
.pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
|
|
22447
22531
|
.pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
|
|
@@ -22517,6 +22601,46 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22517
22601
|
.pf-v6-c-toolbar__content.pf-m-hidden {
|
|
22518
22602
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22519
22603
|
}
|
|
22604
|
+
@media screen and (min-height: 0) {
|
|
22605
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
|
|
22606
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22607
|
+
}
|
|
22608
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
|
|
22609
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22610
|
+
}
|
|
22611
|
+
}
|
|
22612
|
+
@media screen and (min-height: 40rem) {
|
|
22613
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
|
|
22614
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22615
|
+
}
|
|
22616
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
|
|
22617
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22618
|
+
}
|
|
22619
|
+
}
|
|
22620
|
+
@media screen and (min-height: 48rem) {
|
|
22621
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
|
|
22622
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22623
|
+
}
|
|
22624
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
|
|
22625
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22626
|
+
}
|
|
22627
|
+
}
|
|
22628
|
+
@media screen and (min-height: 60rem) {
|
|
22629
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
|
|
22630
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22631
|
+
}
|
|
22632
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
|
|
22633
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22634
|
+
}
|
|
22635
|
+
}
|
|
22636
|
+
@media screen and (min-height: 80rem) {
|
|
22637
|
+
.pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
|
|
22638
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
22639
|
+
}
|
|
22640
|
+
.pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
|
|
22641
|
+
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
22642
|
+
}
|
|
22643
|
+
}
|
|
22520
22644
|
@media screen and (min-width: 36rem) {
|
|
22521
22645
|
.pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
|
|
22522
22646
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__item,
|
|
2
2
|
#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group,
|
|
3
|
-
#ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"])
|
|
3
|
+
#ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]),
|
|
4
|
+
#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__item,
|
|
5
|
+
#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group {
|
|
4
6
|
padding: .5rem;
|
|
5
7
|
border: 2px dashed #393f44;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item
|
|
10
|
+
#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item,
|
|
11
|
+
#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
|
|
9
12
|
padding: 0;
|
|
10
13
|
border: none;
|
|
11
|
-
}
|
|
14
|
+
}
|
|
@@ -60,6 +60,26 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
|
|
|
60
60
|
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
+
### Vertical
|
|
64
|
+
|
|
65
|
+
```html isBeta
|
|
66
|
+
<div
|
|
67
|
+
class="pf-v6-c-overflow-menu pf-m-vertical"
|
|
68
|
+
id="overflow-menu-vertical-expanded"
|
|
69
|
+
>
|
|
70
|
+
<div class="pf-v6-c-overflow-menu__content">
|
|
71
|
+
<div class="pf-v6-c-overflow-menu__item">Item 1</div>
|
|
72
|
+
<div class="pf-v6-c-overflow-menu__item">Item 2</div>
|
|
73
|
+
<div class="pf-v6-c-overflow-menu__group">
|
|
74
|
+
<div class="pf-v6-c-overflow-menu__item">Item 3</div>
|
|
75
|
+
<div class="pf-v6-c-overflow-menu__item">Item 4</div>
|
|
76
|
+
<div class="pf-v6-c-overflow-menu__item">Item 5</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
63
83
|
### Default spacing for items and groups:
|
|
64
84
|
|
|
65
85
|
| Class | CSS Variable | Computed Value |
|
|
@@ -460,5 +480,6 @@ The action group consists of a primary and secondary action. Any additional acti
|
|
|
460
480
|
| `.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
|
|
461
481
|
| `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
|
|
462
482
|
| `.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
|
|
483
|
+
| `.pf-m-vertical` | `.pf-v6-c-overflow-menu` | Modifies the flex direction to "column", for vertically aligned overflow menus. |
|
|
463
484
|
| `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
|
|
464
485
|
| `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |
|
|
@@ -28,6 +28,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
|
|
|
28
28
|
| Class | Applied to | Outcome |
|
|
29
29
|
| -- | -- | -- |
|
|
30
30
|
| `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
|
|
31
|
+
| `.pf-m-[hidden/visible]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option breakpoint. |
|
|
32
|
+
| `.pf-m-[hidden/visible]{-on-[breakpoint]}-height` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option height breakpoint. Primarily for use with vertical toolbars. |
|
|
31
33
|
| `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
|
|
32
34
|
| `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
|
|
33
35
|
| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
|
|
@@ -3585,6 +3587,43 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
|
|
|
3585
3587
|
|
|
3586
3588
|
```
|
|
3587
3589
|
|
|
3590
|
+
### Vertical with height visibility breakpoints
|
|
3591
|
+
|
|
3592
|
+
Visibility can be set per breakpoint to show or hide items and groups based on viewport height.
|
|
3593
|
+
|
|
3594
|
+
```html isBeta
|
|
3595
|
+
<div
|
|
3596
|
+
class="pf-v6-c-toolbar pf-m-vertical"
|
|
3597
|
+
id="toolbar-vertical-height-toggle-example"
|
|
3598
|
+
>
|
|
3599
|
+
<div class="pf-v6-c-toolbar__content">
|
|
3600
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
3601
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
3602
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
3603
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
3604
|
+
<hr class="pf-v6-c-divider" />
|
|
3605
|
+
|
|
3606
|
+
<div class="pf-v6-c-toolbar__group">
|
|
3607
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
3608
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
3609
|
+
<div
|
|
3610
|
+
class="pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md-height"
|
|
3611
|
+
>Item (hidden below md)</div>
|
|
3612
|
+
</div>
|
|
3613
|
+
|
|
3614
|
+
<hr class="pf-v6-c-divider" />
|
|
3615
|
+
|
|
3616
|
+
<div class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg-height">
|
|
3617
|
+
<div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
|
|
3618
|
+
<div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
|
|
3619
|
+
<div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
|
|
3620
|
+
</div>
|
|
3621
|
+
</div>
|
|
3622
|
+
</div>
|
|
3623
|
+
</div>
|
|
3624
|
+
|
|
3625
|
+
```
|
|
3626
|
+
|
|
3588
3627
|
## Documentation
|
|
3589
3628
|
|
|
3590
3629
|
### Overview
|