@patternfly/react-styles 6.5.0-prerelease.13 → 6.5.0-prerelease.15
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/CHANGELOG.md +12 -0
- package/css/assets/images/compass--hero-bg.png +0 -0
- package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/css/assets/images/compass--wallpaper-light.jpg +0 -0
- package/css/assets/images/glass-brand-dark.jpg +0 -0
- package/css/assets/images/glass-brand-dark.png +0 -0
- package/css/assets/images/glass-brand-light.jpg +0 -0
- package/css/assets/images/glass-brand-light.png +0 -0
- package/css/components/Accordion/accordion.css +11 -1
- package/css/components/Accordion/accordion.d.ts +4 -1
- package/css/components/Accordion/accordion.js +4 -1
- package/css/components/Accordion/accordion.mjs +4 -1
- package/css/components/Alert/alert.css +2 -1
- package/css/components/Button/button.css +98 -19
- package/css/components/Button/button.d.ts +3 -0
- package/css/components/Button/button.js +3 -0
- package/css/components/Button/button.mjs +3 -0
- package/css/components/Card/card.css +34 -9
- package/css/components/Card/card.d.ts +1 -0
- package/css/components/Card/card.js +1 -0
- package/css/components/Card/card.mjs +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.css +1 -1
- package/css/components/CodeEditor/code-editor.css +1 -1
- package/css/components/Compass/compass.css +6 -6
- package/css/components/DataList/data-list.css +2 -2
- package/css/components/DataList/data-list.d.ts +3 -1
- package/css/components/DataList/data-list.js +3 -1
- package/css/components/DataList/data-list.mjs +3 -1
- package/css/components/Drawer/drawer.css +117 -22
- package/css/components/Drawer/drawer.d.ts +5 -2
- package/css/components/Drawer/drawer.js +5 -2
- package/css/components/Drawer/drawer.mjs +5 -2
- package/css/components/DualListSelector/dual-list-selector.css +1 -1
- package/css/components/ExpandableSection/expandable-section.css +2 -2
- package/css/components/Form/form.css +1 -1
- package/css/components/JumpLinks/jump-links.css +12 -2
- package/css/components/Login/login.css +7 -3
- package/css/components/Masthead/masthead.css +49 -7
- package/css/components/Masthead/masthead.d.ts +4 -0
- package/css/components/Masthead/masthead.js +4 -0
- package/css/components/Masthead/masthead.mjs +4 -0
- package/css/components/MenuToggle/menu-toggle.css +25 -2
- package/css/components/MenuToggle/menu-toggle.d.ts +3 -0
- package/css/components/MenuToggle/menu-toggle.js +3 -0
- package/css/components/MenuToggle/menu-toggle.mjs +3 -0
- package/css/components/Nav/nav.css +19 -11
- package/css/components/Nav/nav.d.ts +3 -1
- package/css/components/Nav/nav.js +3 -1
- package/css/components/Nav/nav.mjs +3 -1
- package/css/components/NotificationDrawer/notification-drawer.css +11 -3
- package/css/components/Page/page.css +168 -6
- package/css/components/Page/page.d.ts +12 -1
- package/css/components/Page/page.js +12 -1
- package/css/components/Page/page.mjs +12 -1
- package/css/components/Panel/panel.css +14 -0
- package/css/components/Panel/panel.d.ts +2 -1
- package/css/components/Panel/panel.js +2 -1
- package/css/components/Panel/panel.mjs +2 -1
- package/css/components/Progress/progress.css +3 -1
- package/css/components/Table/table-grid.css +4 -4
- package/css/components/Table/table.css +14 -9
- package/css/components/Table/table.d.ts +4 -2
- package/css/components/Table/table.js +4 -2
- package/css/components/Table/table.mjs +4 -2
- package/css/components/Tabs/tabs.css +20 -19
- package/css/components/Tabs/tabs.d.ts +0 -1
- package/css/components/Tabs/tabs.js +0 -1
- package/css/components/Tabs/tabs.mjs +0 -1
- package/css/components/ToggleGroup/toggle-group.css +33 -16
- package/css/components/Toolbar/toolbar.css +1 -1
- package/css/components/TreeView/tree-view.css +1 -1
- package/css/components/Wizard/wizard.css +21 -3
- package/css/components/Wizard/wizard.d.ts +3 -0
- package/css/components/Wizard/wizard.js +3 -0
- package/css/components/Wizard/wizard.mjs +3 -0
- package/css/components/_index.css +678 -154
- package/css/components/_index.d.ts +6 -2
- package/css/components/_index.js +6 -2
- package/css/components/_index.mjs +6 -2
- package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/package.json +3 -3
|
@@ -38,6 +38,12 @@
|
|
|
38
38
|
--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
39
39
|
--pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
40
40
|
--pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
41
|
+
--pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
42
|
+
--pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
|
|
43
|
+
--pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
44
|
+
--pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
45
|
+
--pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
|
|
46
|
+
--pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
.pf-v6-c-panel {
|
|
@@ -79,6 +85,14 @@
|
|
|
79
85
|
--pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
|
|
80
86
|
--pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
|
|
81
87
|
}
|
|
88
|
+
.pf-v6-c-panel.pf-m-glass {
|
|
89
|
+
--pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
|
|
90
|
+
--pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
|
|
91
|
+
--pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
|
|
92
|
+
--pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
|
|
93
|
+
--pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
|
|
94
|
+
backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
|
|
95
|
+
}
|
|
82
96
|
|
|
83
97
|
.pf-v6-c-panel__header {
|
|
84
98
|
padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
|
|
@@ -4,7 +4,8 @@ declare const _default: {
|
|
|
4
4
|
"bordered": "pf-m-bordered",
|
|
5
5
|
"secondary": "pf-m-secondary",
|
|
6
6
|
"raised": "pf-m-raised",
|
|
7
|
-
"scrollable": "pf-m-scrollable"
|
|
7
|
+
"scrollable": "pf-m-scrollable",
|
|
8
|
+
"glass": "pf-m-glass"
|
|
8
9
|
},
|
|
9
10
|
"panel": "pf-v6-c-panel",
|
|
10
11
|
"panelFooter": "pf-v6-c-panel__footer",
|
|
@@ -6,7 +6,8 @@ exports.default = {
|
|
|
6
6
|
"bordered": "pf-m-bordered",
|
|
7
7
|
"secondary": "pf-m-secondary",
|
|
8
8
|
"raised": "pf-m-raised",
|
|
9
|
-
"scrollable": "pf-m-scrollable"
|
|
9
|
+
"scrollable": "pf-m-scrollable",
|
|
10
|
+
"glass": "pf-m-glass"
|
|
10
11
|
},
|
|
11
12
|
"panel": "pf-v6-c-panel",
|
|
12
13
|
"panelFooter": "pf-v6-c-panel__footer",
|
|
@@ -4,7 +4,8 @@ export default {
|
|
|
4
4
|
"bordered": "pf-m-bordered",
|
|
5
5
|
"secondary": "pf-m-secondary",
|
|
6
6
|
"raised": "pf-m-raised",
|
|
7
|
-
"scrollable": "pf-m-scrollable"
|
|
7
|
+
"scrollable": "pf-m-scrollable",
|
|
8
|
+
"glass": "pf-m-glass"
|
|
8
9
|
},
|
|
9
10
|
"panel": "pf-v6-c-panel",
|
|
10
11
|
"panelFooter": "pf-v6-c-panel__footer",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
|
|
3
3
|
--pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
|
|
4
4
|
--pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
5
|
-
--pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--
|
|
5
|
+
--pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
6
6
|
--pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
7
7
|
--pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
8
8
|
--pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
--pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
13
13
|
--pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
|
|
14
14
|
--pf-v6-c-progress__indicator--BorderColor: transparent;
|
|
15
|
+
--pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
15
16
|
--pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
|
|
16
17
|
--pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
|
|
17
18
|
--pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
|
@@ -181,6 +182,7 @@
|
|
|
181
182
|
position: absolute;
|
|
182
183
|
height: var(--pf-v6-c-progress__indicator--Height);
|
|
183
184
|
background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
|
|
185
|
+
border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
|
|
184
186
|
}
|
|
185
187
|
.pf-v6-c-progress__indicator::before {
|
|
186
188
|
position: absolute;
|
|
@@ -367,7 +367,7 @@
|
|
|
367
367
|
--pf-v6-c-table--cell--Width: auto;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
@container pf-v6-contain-table (max-width: 48rem) {
|
|
370
|
+
@container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
|
|
371
371
|
.pf-m-grid-md.pf-v6-c-table {
|
|
372
372
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
373
373
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -677,7 +677,7 @@
|
|
|
677
677
|
}
|
|
678
678
|
}
|
|
679
679
|
|
|
680
|
-
@container pf-v6-contain-table (max-width: 62rem) {
|
|
680
|
+
@container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
|
|
681
681
|
.pf-m-grid-lg.pf-v6-c-table {
|
|
682
682
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
683
683
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -987,7 +987,7 @@
|
|
|
987
987
|
}
|
|
988
988
|
}
|
|
989
989
|
|
|
990
|
-
@container pf-v6-contain-table (max-width: 75rem) {
|
|
990
|
+
@container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
|
|
991
991
|
.pf-m-grid-xl.pf-v6-c-table {
|
|
992
992
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
993
993
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -1297,7 +1297,7 @@
|
|
|
1297
1297
|
}
|
|
1298
1298
|
}
|
|
1299
1299
|
|
|
1300
|
-
@container pf-v6-contain-table (max-width: 90.625rem) {
|
|
1300
|
+
@container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
|
|
1301
1301
|
.pf-m-grid-2xl.pf-v6-c-table {
|
|
1302
1302
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
1303
1303
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
--pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
51
51
|
--pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
52
52
|
--pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
53
|
-
--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate:
|
|
53
|
+
--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
|
|
54
54
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
55
55
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
56
|
-
--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate:
|
|
56
|
+
--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
|
|
57
57
|
--pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
58
58
|
--pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
59
59
|
--pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
@@ -120,14 +120,14 @@
|
|
|
120
120
|
--pf-v6-c-table__th--m-help--MinWidth: 11ch;
|
|
121
121
|
--pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
122
122
|
--pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
123
|
-
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor:
|
|
123
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
|
|
124
124
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
125
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--
|
|
126
|
-
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--
|
|
125
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
126
|
+
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
127
127
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
128
128
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
129
129
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
130
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth:
|
|
130
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
|
|
131
131
|
--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
132
132
|
--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
133
133
|
--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
@@ -169,6 +169,14 @@
|
|
|
169
169
|
width: 100%;
|
|
170
170
|
background-color: var(--pf-v6-c-table--BackgroundColor);
|
|
171
171
|
}
|
|
172
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
|
|
173
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
174
|
+
--pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
|
|
175
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
|
|
176
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
|
|
177
|
+
--pf-v6-c-table__control-row--BackgroundColor: transparent;
|
|
178
|
+
}
|
|
179
|
+
|
|
172
180
|
.pf-v6-c-table.pf-m-fixed {
|
|
173
181
|
table-layout: fixed;
|
|
174
182
|
}
|
|
@@ -209,9 +217,6 @@
|
|
|
209
217
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
210
218
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
211
219
|
}
|
|
212
|
-
.pf-v6-c-table.pf-m-plain {
|
|
213
|
-
--pf-v6-c-table--BackgroundColor: transparent;
|
|
214
|
-
}
|
|
215
220
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
216
221
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
217
222
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -4,10 +4,11 @@ declare const _default: {
|
|
|
4
4
|
"check": "pf-v6-c-check",
|
|
5
5
|
"dirRtl": "pf-v6-m-dir-rtl",
|
|
6
6
|
"modifiers": {
|
|
7
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
8
|
+
"plain": "pf-m-plain",
|
|
7
9
|
"fixed": "pf-m-fixed",
|
|
8
10
|
"stickyHeader": "pf-m-sticky-header",
|
|
9
11
|
"nestedColumnHeader": "pf-m-nested-column-header",
|
|
10
|
-
"plain": "pf-m-plain",
|
|
11
12
|
"striped": "pf-m-striped",
|
|
12
13
|
"expandable": "pf-m-expandable",
|
|
13
14
|
"stripedEven": "pf-m-striped-even",
|
|
@@ -92,6 +93,7 @@ declare const _default: {
|
|
|
92
93
|
"tableThead": "pf-v6-c-table__thead",
|
|
93
94
|
"tableToggle": "pf-v6-c-table__toggle",
|
|
94
95
|
"tableToggleIcon": "pf-v6-c-table__toggle-icon",
|
|
95
|
-
"tableTr": "pf-v6-c-table__tr"
|
|
96
|
+
"tableTr": "pf-v6-c-table__tr",
|
|
97
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
96
98
|
};
|
|
97
99
|
export default _default;
|
|
@@ -6,10 +6,11 @@ exports.default = {
|
|
|
6
6
|
"check": "pf-v6-c-check",
|
|
7
7
|
"dirRtl": "pf-v6-m-dir-rtl",
|
|
8
8
|
"modifiers": {
|
|
9
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
10
|
+
"plain": "pf-m-plain",
|
|
9
11
|
"fixed": "pf-m-fixed",
|
|
10
12
|
"stickyHeader": "pf-m-sticky-header",
|
|
11
13
|
"nestedColumnHeader": "pf-m-nested-column-header",
|
|
12
|
-
"plain": "pf-m-plain",
|
|
13
14
|
"striped": "pf-m-striped",
|
|
14
15
|
"expandable": "pf-m-expandable",
|
|
15
16
|
"stripedEven": "pf-m-striped-even",
|
|
@@ -94,5 +95,6 @@ exports.default = {
|
|
|
94
95
|
"tableThead": "pf-v6-c-table__thead",
|
|
95
96
|
"tableToggle": "pf-v6-c-table__toggle",
|
|
96
97
|
"tableToggleIcon": "pf-v6-c-table__toggle-icon",
|
|
97
|
-
"tableTr": "pf-v6-c-table__tr"
|
|
98
|
+
"tableTr": "pf-v6-c-table__tr",
|
|
99
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
98
100
|
};
|
|
@@ -4,10 +4,11 @@ export default {
|
|
|
4
4
|
"check": "pf-v6-c-check",
|
|
5
5
|
"dirRtl": "pf-v6-m-dir-rtl",
|
|
6
6
|
"modifiers": {
|
|
7
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
8
|
+
"plain": "pf-m-plain",
|
|
7
9
|
"fixed": "pf-m-fixed",
|
|
8
10
|
"stickyHeader": "pf-m-sticky-header",
|
|
9
11
|
"nestedColumnHeader": "pf-m-nested-column-header",
|
|
10
|
-
"plain": "pf-m-plain",
|
|
11
12
|
"striped": "pf-m-striped",
|
|
12
13
|
"expandable": "pf-m-expandable",
|
|
13
14
|
"stripedEven": "pf-m-striped-even",
|
|
@@ -92,5 +93,6 @@ export default {
|
|
|
92
93
|
"tableThead": "pf-v6-c-table__thead",
|
|
93
94
|
"tableToggle": "pf-v6-c-table__toggle",
|
|
94
95
|
"tableToggleIcon": "pf-v6-c-table__toggle-icon",
|
|
95
|
-
"tableTr": "pf-v6-c-table__tr"
|
|
96
|
+
"tableTr": "pf-v6-c-table__tr",
|
|
97
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
96
98
|
};
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
--pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
39
39
|
--pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
|
|
40
40
|
--pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
41
|
-
--pf-v6-c-tabs--m-box__item--m-current--BackgroundColor:
|
|
42
|
-
--pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor:
|
|
41
|
+
--pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
|
|
42
|
+
--pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
|
|
43
43
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
44
44
|
--pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
|
|
45
45
|
--pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
|
|
46
46
|
--pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
|
|
47
47
|
--pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
48
|
-
--pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--
|
|
48
|
+
--pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
49
49
|
--pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
50
50
|
--pf-v6-c-tabs__link--BorderColor: transparent;
|
|
51
51
|
--pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
@@ -55,21 +55,21 @@
|
|
|
55
55
|
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
56
56
|
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
57
57
|
--pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
58
|
-
--pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--
|
|
59
|
-
--pf-v6-c-tabs__link--disabled--BackgroundColor:
|
|
58
|
+
--pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
59
|
+
--pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
|
|
60
60
|
--pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
61
61
|
--pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
|
|
62
62
|
--pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
63
63
|
--pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
64
64
|
--pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
65
65
|
--pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
66
|
-
--pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--
|
|
67
|
-
--pf-v6-c-tabs--m-box__link--disabled--BackgroundColor:
|
|
66
|
+
--pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
67
|
+
--pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
|
|
68
68
|
--pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
69
69
|
--pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
70
70
|
--pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
71
|
-
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--
|
|
72
|
-
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor:
|
|
71
|
+
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
72
|
+
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
|
|
73
73
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
74
74
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
75
75
|
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
@@ -89,6 +89,7 @@
|
|
|
89
89
|
--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
90
90
|
--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
|
|
91
91
|
--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
92
|
+
--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
|
|
92
93
|
--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
|
|
93
94
|
--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
|
|
94
95
|
--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
|
|
@@ -101,7 +102,9 @@
|
|
|
101
102
|
--pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
|
|
102
103
|
--pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
|
|
103
104
|
--pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
|
|
104
|
-
--pf-v6-c-
|
|
105
|
+
--pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
106
|
+
--pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
|
|
107
|
+
--pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
|
|
105
108
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
|
106
109
|
--pf-v6-c-tabs--link-accent--start: 0;
|
|
107
110
|
--pf-v6-c-tabs--link-accent--length: 0;
|
|
@@ -149,7 +152,7 @@
|
|
|
149
152
|
--pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
150
153
|
--pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
|
|
151
154
|
--pf-v6-c-tabs__toggle-icon--Rotate: 0;
|
|
152
|
-
--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate:
|
|
155
|
+
--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
|
|
153
156
|
--pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
|
|
154
157
|
--pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
155
158
|
--pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -175,7 +178,7 @@
|
|
|
175
178
|
--pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
|
|
176
179
|
--pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
|
|
177
180
|
--pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
|
|
178
|
-
--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate:
|
|
181
|
+
--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
|
|
179
182
|
}
|
|
180
183
|
|
|
181
184
|
.pf-v6-c-tabs {
|
|
@@ -242,6 +245,7 @@
|
|
|
242
245
|
--pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
|
|
243
246
|
--pf-v6-c-tabs__link--after--InsetBlockStart: 0;
|
|
244
247
|
--pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
|
|
248
|
+
--pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
|
|
245
249
|
}
|
|
246
250
|
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
|
|
247
251
|
--pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
|
|
@@ -251,7 +255,7 @@
|
|
|
251
255
|
}
|
|
252
256
|
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
|
|
253
257
|
--pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
|
|
254
|
-
--pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-
|
|
258
|
+
--pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
|
|
255
259
|
--pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
|
|
256
260
|
--pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
|
|
257
261
|
--pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
|
|
@@ -421,7 +425,8 @@
|
|
|
421
425
|
--pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
|
|
422
426
|
}
|
|
423
427
|
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
|
|
424
|
-
--pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-
|
|
428
|
+
--pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
|
|
429
|
+
--pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
|
|
425
430
|
--pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
|
426
431
|
}
|
|
427
432
|
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
|
|
@@ -464,11 +469,6 @@
|
|
|
464
469
|
align-items: center;
|
|
465
470
|
}
|
|
466
471
|
|
|
467
|
-
.pf-v6-c-tabs__toggle-button .pf-v6-c-button {
|
|
468
|
-
justify-content: start;
|
|
469
|
-
white-space: normal;
|
|
470
|
-
}
|
|
471
|
-
|
|
472
472
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
|
|
473
473
|
scale: -1 1;
|
|
474
474
|
}
|
|
@@ -599,6 +599,7 @@
|
|
|
599
599
|
border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
|
|
600
600
|
border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
|
|
601
601
|
border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
|
|
602
|
+
border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
|
|
602
603
|
}
|
|
603
604
|
|
|
604
605
|
.pf-v6-c-tabs__link:where(:hover, :focus) {
|
|
@@ -80,7 +80,6 @@ declare const _default: {
|
|
|
80
80
|
"tabsList": "pf-v6-c-tabs__list",
|
|
81
81
|
"tabsScrollButton": "pf-v6-c-tabs__scroll-button",
|
|
82
82
|
"tabsToggle": "pf-v6-c-tabs__toggle",
|
|
83
|
-
"tabsToggleButton": "pf-v6-c-tabs__toggle-button",
|
|
84
83
|
"tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
|
|
85
84
|
};
|
|
86
85
|
export default _default;
|
|
@@ -6,30 +6,37 @@
|
|
|
6
6
|
--pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
|
|
7
7
|
--pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
8
8
|
--pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
|
|
9
|
-
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--
|
|
9
|
+
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
10
10
|
--pf-v6-c-toggle-group__button--ZIndex: auto;
|
|
11
|
-
--pf-v6-c-toggle-group__button--hover--
|
|
11
|
+
--pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
|
|
12
|
+
--pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
|
|
12
13
|
--pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
|
|
13
|
-
--pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--
|
|
14
|
+
--pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
|
|
14
15
|
--pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
15
16
|
--pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
16
17
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
|
|
17
18
|
--pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
|
|
18
|
-
--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--
|
|
19
|
-
--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--
|
|
20
|
-
--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--
|
|
21
|
-
--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--
|
|
19
|
+
--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
|
|
20
|
+
--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
|
|
21
|
+
--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
|
|
22
|
+
--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
|
|
22
23
|
--pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
23
|
-
--pf-v6-c-toggle-
|
|
24
|
-
--pf-v6-c-toggle-
|
|
25
|
-
--pf-v6-c-toggle-
|
|
26
|
-
--pf-v6-c-toggle-
|
|
24
|
+
--pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
25
|
+
--pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
|
|
26
|
+
--pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
|
|
27
|
+
--pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
|
|
28
|
+
--pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
|
|
29
|
+
--pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
|
|
30
|
+
--pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
|
|
31
|
+
--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
32
|
+
--pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
|
|
33
|
+
--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
34
|
+
--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
|
|
27
35
|
--pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
|
|
28
|
-
--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
29
36
|
--pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
30
37
|
--pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
31
|
-
--pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--
|
|
32
|
-
--pf-v6-c-toggle-group__button--disabled
|
|
38
|
+
--pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
|
|
39
|
+
--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
|
|
33
40
|
--pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
|
|
34
41
|
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
|
|
35
42
|
--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -97,9 +104,11 @@
|
|
|
97
104
|
}
|
|
98
105
|
.pf-v6-c-toggle-group__button:is(:hover, :focus) {
|
|
99
106
|
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
|
|
107
|
+
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
|
|
100
108
|
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
|
|
101
109
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
|
|
102
110
|
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
|
|
111
|
+
--pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
|
|
103
112
|
text-decoration-line: none;
|
|
104
113
|
}
|
|
105
114
|
.pf-v6-c-toggle-group__button.pf-m-selected {
|
|
@@ -107,22 +116,30 @@
|
|
|
107
116
|
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
|
|
108
117
|
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
|
|
109
118
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
|
|
119
|
+
--pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
|
|
120
|
+
--pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
|
|
110
121
|
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
|
|
122
|
+
--pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
|
|
111
123
|
}
|
|
112
124
|
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
|
|
113
125
|
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
|
|
114
126
|
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
|
|
115
127
|
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
|
|
116
128
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
|
|
129
|
+
--pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
|
|
117
130
|
pointer-events: none;
|
|
118
131
|
}
|
|
119
132
|
|
|
120
133
|
.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
|
|
121
|
-
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected
|
|
134
|
+
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
|
|
122
135
|
}
|
|
123
136
|
|
|
124
137
|
.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
|
|
125
|
-
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled
|
|
138
|
+
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.pf-v6-c-toggle-group__icon {
|
|
142
|
+
color: var(--pf-v6-c-toggle-group__icon--Color);
|
|
126
143
|
}
|
|
127
144
|
|
|
128
145
|
.pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
|
|
45
45
|
--pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
46
46
|
--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
47
|
-
--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate:
|
|
47
|
+
--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
|
|
48
48
|
--pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
|
|
49
49
|
--pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
50
50
|
--pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
--pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
67
67
|
--pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
|
|
68
68
|
--pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
|
|
69
|
-
--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate:
|
|
69
|
+
--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
|
|
70
70
|
--pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
71
71
|
--pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
|
|
72
72
|
--pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
--pf-v6-c-wizard--Height--base: 100%;
|
|
4
4
|
--pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
|
|
5
5
|
--pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
6
|
+
--pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
|
|
6
7
|
--pf-v6-c-wizard__header--ZIndex: auto;
|
|
7
8
|
--pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
8
9
|
--pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
--pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
36
37
|
--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
37
38
|
--pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
38
|
-
--pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--
|
|
39
|
+
--pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
39
40
|
--pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
40
41
|
--pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
41
42
|
--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
47
48
|
--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
48
49
|
--pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
|
|
49
|
-
--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate:
|
|
50
|
+
--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
|
|
50
51
|
--pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
|
|
51
52
|
--pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
|
|
52
53
|
--pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
|
|
70
71
|
--pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
71
72
|
--pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
73
|
+
--pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
|
|
72
74
|
--pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
|
|
73
75
|
--pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
74
76
|
--pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
@@ -93,17 +95,20 @@
|
|
|
93
95
|
--pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
94
96
|
--pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
|
|
95
97
|
--pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
|
|
96
|
-
--pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--
|
|
98
|
+
--pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
99
|
+
--pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
|
|
97
100
|
--pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
98
101
|
--pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
|
|
99
102
|
--pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
100
103
|
--pf-v6-c-wizard__nav--Width: 100%;
|
|
104
|
+
--pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
101
105
|
--pf-v6-c-wizard__nav--lg--Width: 15.625rem;
|
|
102
106
|
--pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
103
107
|
--pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
|
|
104
108
|
}
|
|
105
109
|
@media screen and (min-width: 62rem) {
|
|
106
110
|
.pf-v6-c-wizard {
|
|
111
|
+
--pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
|
|
107
112
|
--pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
|
|
108
113
|
--pf-v6-c-wizard__nav--BoxShadow: none;
|
|
109
114
|
--pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
|
|
@@ -118,6 +123,7 @@
|
|
|
118
123
|
--pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
119
124
|
--pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
120
125
|
--pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
126
|
+
--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
|
|
121
127
|
--pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
|
|
122
128
|
--pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
|
|
123
129
|
--pf-v6-c-wizard__main--ZIndex: auto;
|
|
@@ -126,6 +132,7 @@
|
|
|
126
132
|
--pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
127
133
|
--pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
128
134
|
--pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
135
|
+
--pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
|
|
129
136
|
--pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
|
|
130
137
|
--pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
131
138
|
--pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
@@ -156,6 +163,17 @@
|
|
|
156
163
|
.pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
|
|
157
164
|
display: none;
|
|
158
165
|
}
|
|
166
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
|
|
167
|
+
--pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
|
|
168
|
+
--pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
|
|
169
|
+
--pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
|
|
170
|
+
--pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
|
|
171
|
+
}
|
|
172
|
+
@media screen and (min-width: 62rem) {
|
|
173
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
|
|
174
|
+
--pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
159
177
|
|
|
160
178
|
.pf-v6-c-wizard__header {
|
|
161
179
|
position: relative;
|
|
@@ -5,6 +5,8 @@ declare const _default: {
|
|
|
5
5
|
"modalBox": "pf-v6-c-modal-box",
|
|
6
6
|
"modifiers": {
|
|
7
7
|
"finished": "pf-m-finished",
|
|
8
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
9
|
+
"plain": "pf-m-plain",
|
|
8
10
|
"expanded": "pf-m-expanded",
|
|
9
11
|
"danger": "pf-m-danger",
|
|
10
12
|
"warning": "pf-m-warning",
|
|
@@ -14,6 +16,7 @@ declare const _default: {
|
|
|
14
16
|
"disabled": "pf-m-disabled",
|
|
15
17
|
"noPadding": "pf-m-no-padding"
|
|
16
18
|
},
|
|
19
|
+
"themeGlass": "pf-v6-theme-glass",
|
|
17
20
|
"wizard": "pf-v6-c-wizard",
|
|
18
21
|
"wizardClose": "pf-v6-c-wizard__close",
|
|
19
22
|
"wizardDescription": "pf-v6-c-wizard__description",
|