@patternfly/patternfly 6.0.0-alpha.80 → 6.0.0-alpha.82
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/DualListSelector/dual-list-selector.css +56 -48
- package/components/DualListSelector/dual-list-selector.scss +57 -50
- package/components/Wizard/wizard.css +128 -205
- package/components/Wizard/wizard.scss +128 -180
- package/docs/components/Wizard/examples/Wizard.md +31 -7
- package/docs/demos/Wizard/examples/Wizard.md +108 -18
- package/package.json +1 -1
- package/patternfly-no-globals.css +199 -257
- package/patternfly-theme-dark-unversioned.css +199 -257
- package/patternfly.css +199 -257
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
- package/components/Wizard/themes/dark/wizard.scss +0 -12
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.pf-v5-c-dual-list-selector {
|
|
1
|
+
:where(:root), :where(.pf-v5-c-dual-list-selector) {
|
|
2
2
|
--pf-v5-c-dual-list-selector__header--GridArea: pane-header;
|
|
3
3
|
--pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
|
|
4
4
|
--pf-v5-c-dual-list-selector__status--GridArea: pane-status;
|
|
@@ -10,54 +10,55 @@
|
|
|
10
10
|
--pf-v5-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
|
|
11
11
|
--pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
|
|
12
12
|
--pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
|
|
13
|
-
--pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-
|
|
14
|
-
--pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-
|
|
15
|
-
--pf-v5-c-dual-list-
|
|
16
|
-
--pf-v5-c-dual-list-selector__tools
|
|
17
|
-
--pf-v5-c-dual-list-
|
|
18
|
-
--pf-v5-c-dual-list-selector__menu--
|
|
13
|
+
--pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
14
|
+
--pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
15
|
+
--pf-v5-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
16
|
+
--pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-t--global--spacer--md);
|
|
17
|
+
--pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
18
|
+
--pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
19
|
+
--pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
|
|
20
|
+
--pf-v5-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
19
21
|
--pf-v5-c-dual-list-selector__menu--MinHeight: 12.5rem;
|
|
20
22
|
--pf-v5-c-dual-list-selector__menu--MaxHeight: 20rem;
|
|
21
|
-
--pf-v5-c-dual-list-
|
|
22
|
-
--pf-v5-c-dual-list-selector__list-item-row--
|
|
23
|
-
--pf-v5-c-dual-list-selector__list-item-row--
|
|
24
|
-
--pf-v5-c-dual-list-selector__list-item-row--
|
|
25
|
-
--pf-v5-c-dual-list-selector__list-item-row--
|
|
26
|
-
--pf-v5-c-dual-list-selector__list-item--m-
|
|
23
|
+
--pf-v5-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
24
|
+
--pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
25
|
+
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
26
|
+
--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
27
|
+
--pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
|
|
28
|
+
--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
29
|
+
--pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
27
30
|
--pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
|
|
28
|
-
--pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-
|
|
29
|
-
--pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-
|
|
30
|
-
--pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-
|
|
31
|
-
--pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-
|
|
32
|
-
--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft:
|
|
33
|
-
--pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-
|
|
34
|
-
--pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-
|
|
35
|
-
--pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-
|
|
36
|
-
--pf-v5-c-dual-list-selector__item-text--Color: var(--pf-
|
|
37
|
-
--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-
|
|
38
|
-
--pf-v5-c-dual-list-selector__list-item
|
|
39
|
-
--pf-v5-c-dual-list-
|
|
40
|
-
--pf-v5-c-dual-list-selector__status--
|
|
41
|
-
--pf-v5-c-dual-list-selector__status-text--
|
|
42
|
-
--pf-v5-c-dual-list-
|
|
43
|
-
--pf-v5-c-dual-list-selector__controls--
|
|
44
|
-
--pf-v5-c-dual-list-selector__controls--
|
|
45
|
-
--pf-v5-c-dual-list-
|
|
46
|
-
--pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-
|
|
47
|
-
--pf-v5-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
48
|
-
--pf-v5-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
49
|
-
--pf-v5-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-v5-global--spacer--sm) * -1);
|
|
50
|
-
--pf-v5-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
|
|
31
|
+
--pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
32
|
+
--pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-t--global--spacer--md);
|
|
33
|
+
--pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
34
|
+
--pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
35
|
+
--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
36
|
+
--pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
|
|
37
|
+
--pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
|
|
38
|
+
--pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
39
|
+
--pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
40
|
+
--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
|
|
41
|
+
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
|
|
42
|
+
--pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
43
|
+
--pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
|
|
44
|
+
--pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
|
|
45
|
+
--pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-t--global--spacer--md);
|
|
46
|
+
--pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
47
|
+
--pf-v5-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
48
|
+
--pf-v5-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
49
|
+
--pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
51
50
|
--pf-v5-c-dual-list-selector__list__list__item-toggle--Left: 0;
|
|
52
51
|
--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
|
|
53
|
-
--pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-
|
|
54
|
-
--pf-v5-c-dual-list-selector__item-
|
|
55
|
-
--pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
52
|
+
--pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-t--global--spacer--sm);
|
|
53
|
+
--pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
56
54
|
--pf-v5-c-dual-list-selector__item-toggle-icon--Rotate: 0;
|
|
57
55
|
--pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
|
|
58
56
|
--pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
|
|
59
57
|
--pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
|
|
60
|
-
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-
|
|
58
|
+
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.pf-v5-c-dual-list-selector {
|
|
61
62
|
display: grid;
|
|
62
63
|
grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
|
|
63
64
|
grid-template-rows: repeat(3, auto) auto;
|
|
@@ -80,6 +81,7 @@
|
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
.pf-v5-c-dual-list-selector__title-text {
|
|
84
|
+
font-size: var(--pf-v5-c-dual-list-selector__title-text--FontSize);
|
|
83
85
|
font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
|
|
84
86
|
}
|
|
85
87
|
|
|
@@ -116,8 +118,10 @@
|
|
|
116
118
|
grid-area: var(--pf-v5-c-dual-list-selector__menu--GridArea);
|
|
117
119
|
min-height: var(--pf-v5-c-dual-list-selector__menu--MinHeight);
|
|
118
120
|
max-height: var(--pf-v5-c-dual-list-selector__menu--MaxHeight);
|
|
121
|
+
margin-block-start: var(--pf-v5-c-dual-list-selector__menu--MarginBlockStart);
|
|
119
122
|
overflow: auto;
|
|
120
123
|
border: var(--pf-v5-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v5-c-dual-list-selector__menu--BorderColor);
|
|
124
|
+
border-radius: var(--pf-v5-c-dual-list-selector__menu--BorderRadius);
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
.pf-v5-c-dual-list-selector__list {
|
|
@@ -132,7 +136,6 @@
|
|
|
132
136
|
.pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
|
|
133
137
|
transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
|
|
134
138
|
position: absolute;
|
|
135
|
-
inset-block-start: 0;
|
|
136
139
|
inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
|
|
137
140
|
}
|
|
138
141
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
|
|
@@ -144,7 +147,7 @@
|
|
|
144
147
|
}
|
|
145
148
|
|
|
146
149
|
.pf-v5-c-dual-list-selector__list-item:focus {
|
|
147
|
-
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--
|
|
150
|
+
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
148
151
|
}
|
|
149
152
|
.pf-v5-c-dual-list-selector__list-item.pf-m-expandable {
|
|
150
153
|
--pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft);
|
|
@@ -162,6 +165,7 @@
|
|
|
162
165
|
display: flex;
|
|
163
166
|
font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
|
|
164
167
|
background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
|
|
168
|
+
border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
|
|
165
169
|
}
|
|
166
170
|
.pf-v5-c-dual-list-selector__list-item-row:hover {
|
|
167
171
|
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
@@ -173,6 +177,9 @@
|
|
|
173
177
|
--pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
|
|
174
178
|
font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
|
|
175
179
|
}
|
|
180
|
+
.pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
|
|
181
|
+
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
182
|
+
}
|
|
176
183
|
.pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
|
|
177
184
|
--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
|
|
178
185
|
}
|
|
@@ -213,6 +220,7 @@
|
|
|
213
220
|
padding-inline-start: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
|
|
214
221
|
padding-inline-end: var(--pf-v5-c-dual-list-selector__item--PaddingRight);
|
|
215
222
|
cursor: pointer;
|
|
223
|
+
outline-offset: -2px;
|
|
216
224
|
}
|
|
217
225
|
|
|
218
226
|
.pf-v5-c-dual-list-selector__item-count {
|
|
@@ -231,10 +239,16 @@
|
|
|
231
239
|
}
|
|
232
240
|
|
|
233
241
|
.pf-v5-c-dual-list-selector__controls {
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
234
244
|
grid-area: var(--pf-v5-c-dual-list-selector__controls--GridArea);
|
|
245
|
+
gap: var(--pf-v5-c-dual-list-selector__controls--Gap);
|
|
246
|
+
align-items: center;
|
|
235
247
|
align-self: center;
|
|
248
|
+
justify-content: center;
|
|
236
249
|
padding-inline-start: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
|
|
237
250
|
padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
|
|
251
|
+
margin-block-start: var(--pf-v5-c-dual-list-selector__controls--MarginBlockStart);
|
|
238
252
|
}
|
|
239
253
|
|
|
240
254
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
|
|
@@ -309,10 +323,4 @@
|
|
|
309
323
|
.pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item {
|
|
310
324
|
--pf-v5-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v5-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v5-c-dual-list-selector__item--indent--base));
|
|
311
325
|
--pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
|
|
315
|
-
--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
316
|
-
--pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
317
|
-
--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
318
326
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @debug $dual-list-selector; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
$pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
3
3
|
|
|
4
|
-
.#{$dual-list-selector} {
|
|
4
|
+
:where(:root), :where(.#{$dual-list-selector}) {
|
|
5
5
|
// Grid
|
|
6
6
|
--#{$dual-list-selector}__header--GridArea: pane-header;
|
|
7
7
|
--#{$dual-list-selector}__tools--GridArea: pane-tools;
|
|
@@ -16,79 +16,79 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
16
16
|
--#{$dual-list-selector}--GridTemplateColumns--pane--MinMax--max: #{pf-size-prem(450px)};
|
|
17
17
|
|
|
18
18
|
// Header
|
|
19
|
-
--#{$dual-list-selector}__header--MarginBottom: var(
|
|
19
|
+
--#{$dual-list-selector}__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
20
20
|
|
|
21
21
|
// Title
|
|
22
|
-
--#{$dual-list-selector}__title-text--FontWeight: var(
|
|
22
|
+
--#{$dual-list-selector}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
23
|
+
--#{$dual-list-selector}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
23
24
|
|
|
24
25
|
// Tools
|
|
25
|
-
--#{$dual-list-selector}__tools--MarginBottom: var(
|
|
26
|
-
--#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft: var(
|
|
26
|
+
--#{$dual-list-selector}__tools--MarginBottom: var(--pf-t--global--spacer--md);
|
|
27
|
+
--#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
27
28
|
|
|
28
29
|
// Menu
|
|
29
|
-
--#{$dual-list-selector}__menu--BorderWidth: var(
|
|
30
|
-
--#{$dual-list-selector}__menu--BorderColor: var(
|
|
30
|
+
--#{$dual-list-selector}__menu--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
31
|
+
--#{$dual-list-selector}__menu--BorderColor: var(--pf-t--global--border--color--default);
|
|
32
|
+
--#{$dual-list-selector}__menu--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
31
33
|
--#{$dual-list-selector}__menu--MinHeight: #{pf-size-prem(200px)};
|
|
32
34
|
--#{$dual-list-selector}__menu--MaxHeight: #{pf-size-prem(320px)};
|
|
35
|
+
--#{$dual-list-selector}__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
33
36
|
|
|
34
37
|
// List item
|
|
35
|
-
--#{$dual-list-selector}__list-item-row--FontSize: var(
|
|
36
|
-
--#{$dual-list-selector}__list-item-row--BackgroundColor:
|
|
37
|
-
--#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(
|
|
38
|
-
--#{$dual-list-selector}__list-item-row--
|
|
39
|
-
--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(
|
|
40
|
-
--#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(
|
|
38
|
+
--#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
39
|
+
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
40
|
+
--#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
41
|
+
--#{$dual-list-selector}__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
|
|
42
|
+
--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
43
|
+
--#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
41
44
|
--#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
|
|
42
45
|
|
|
43
46
|
// Item
|
|
44
|
-
--#{$dual-list-selector}__item--PaddingTop: var(
|
|
45
|
-
--#{$dual-list-selector}__item--PaddingRight: var(
|
|
46
|
-
--#{$dual-list-selector}__item--PaddingBottom: var(
|
|
47
|
-
--#{$dual-list-selector}__item--PaddingLeft: var(
|
|
48
|
-
--#{$dual-list-selector}__item--m-expandable--PaddingLeft:
|
|
49
|
-
--#{$dual-list-selector}__item--indent--base: calc(var(
|
|
50
|
-
--#{$dual-list-selector}__item--nested-indent--base: calc(var(--#{$dual-list-selector}__item--indent--base) - var(
|
|
51
|
-
--#{$dual-list-selector}__draggable--item--PaddingLeft: var(
|
|
47
|
+
--#{$dual-list-selector}__item--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
48
|
+
--#{$dual-list-selector}__item--PaddingRight: var(--pf-t--global--spacer--md);
|
|
49
|
+
--#{$dual-list-selector}__item--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
50
|
+
--#{$dual-list-selector}__item--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
51
|
+
--#{$dual-list-selector}__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
52
|
+
--#{$dual-list-selector}__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--#{$dual-list-selector}__list-item-row--FontSize));
|
|
53
|
+
--#{$dual-list-selector}__item--nested-indent--base: calc(var(--#{$dual-list-selector}__item--indent--base) - var(--pf-t--global--spacer--md));
|
|
54
|
+
--#{$dual-list-selector}__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
52
55
|
|
|
53
56
|
// Item text
|
|
54
|
-
--#{$dual-list-selector}__item-text--Color: var(
|
|
55
|
-
--#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(
|
|
56
|
-
--#{$dual-list-selector}__list-item
|
|
57
|
-
--#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--#{$pf-global}--disabled-color--100);
|
|
57
|
+
--#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
58
|
+
--#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
|
|
59
|
+
--#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default); // token?
|
|
58
60
|
|
|
59
61
|
// Status
|
|
60
|
-
--#{$dual-list-selector}__status--MarginBottom: var(
|
|
61
|
-
--#{$dual-list-selector}__status-text--FontSize: var(
|
|
62
|
-
--#{$dual-list-selector}__status-text--Color: var(
|
|
62
|
+
--#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
63
|
+
--#{$dual-list-selector}__status-text--FontSize: var(--pf-t--global--font--size--sm);
|
|
64
|
+
--#{$dual-list-selector}__status-text--Color: var(--pf-t--global--text--color--subtle);
|
|
63
65
|
|
|
64
66
|
// Controls
|
|
65
|
-
--#{$dual-list-selector}__controls--PaddingRight: var(
|
|
66
|
-
--#{$dual-list-selector}__controls--PaddingLeft: var(
|
|
67
|
+
--#{$dual-list-selector}__controls--PaddingRight: var(--pf-t--global--spacer--md);
|
|
68
|
+
--#{$dual-list-selector}__controls--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
69
|
+
--#{$dual-list-selector}__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
70
|
+
--#{$dual-list-selector}__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
67
71
|
|
|
68
72
|
// Toggle
|
|
69
|
-
--#{$dual-list-selector}__item-toggle--
|
|
70
|
-
--#{$dual-list-selector}__item-toggle--PaddingRight: var(--#{$pf-global}--spacer--sm);
|
|
71
|
-
--#{$dual-list-selector}__item-toggle--PaddingBottom: var(--#{$pf-global}--spacer--sm);
|
|
72
|
-
--#{$dual-list-selector}__item-toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
|
|
73
|
-
--#{$dual-list-selector}__item-toggle--MarginTop: calc(var(--#{$pf-global}--spacer--sm) * -1);
|
|
74
|
-
--#{$dual-list-selector}__item-toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
|
|
73
|
+
--#{$dual-list-selector}__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
75
74
|
--#{$dual-list-selector}__list__list__item-toggle--Left: 0;
|
|
76
75
|
--#{$dual-list-selector}__list__list__item-toggle--TranslateX: -100%;
|
|
77
76
|
|
|
78
77
|
// Check
|
|
79
|
-
--#{$dual-list-selector}__item-check--MarginRight: var(
|
|
78
|
+
--#{$dual-list-selector}__item-check--MarginRight: var(--pf-t--global--spacer--sm);
|
|
80
79
|
|
|
81
80
|
// Badge
|
|
82
|
-
--#{$dual-list-selector}__item-
|
|
83
|
-
--#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
81
|
+
--#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
84
82
|
|
|
85
83
|
// Icon
|
|
86
84
|
--#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
|
|
87
85
|
--#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
|
|
88
|
-
--#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition);
|
|
86
|
+
--#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
|
|
89
87
|
--#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
|
|
90
|
-
--#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(
|
|
88
|
+
--#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
|
|
89
|
+
}
|
|
91
90
|
|
|
91
|
+
.#{$dual-list-selector} {
|
|
92
92
|
display: grid;
|
|
93
93
|
grid-template-areas:
|
|
94
94
|
"pane-header . pane-header-c"
|
|
@@ -119,6 +119,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.#{$dual-list-selector}__title-text {
|
|
122
|
+
font-size: var(--#{$dual-list-selector}__title-text--FontSize);
|
|
122
123
|
font-weight: var(--#{$dual-list-selector}__title-text--FontWeight);
|
|
123
124
|
}
|
|
124
125
|
|
|
@@ -156,8 +157,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
156
157
|
grid-area: var(--#{$dual-list-selector}__menu--GridArea);
|
|
157
158
|
min-height: var(--#{$dual-list-selector}__menu--MinHeight);
|
|
158
159
|
max-height: var(--#{$dual-list-selector}__menu--MaxHeight);
|
|
160
|
+
margin-block-start: var(--#{$dual-list-selector}__menu--MarginBlockStart);
|
|
159
161
|
overflow: auto;
|
|
160
162
|
border: var(--#{$dual-list-selector}__menu--BorderWidth) solid var(--#{$dual-list-selector}__menu--BorderColor);
|
|
163
|
+
border-radius: var(--#{$dual-list-selector}__menu--BorderRadius);
|
|
161
164
|
}
|
|
162
165
|
|
|
163
166
|
.#{$dual-list-selector}__list {
|
|
@@ -175,7 +178,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
175
178
|
);
|
|
176
179
|
|
|
177
180
|
position: absolute;
|
|
178
|
-
inset-block-start: 0;
|
|
179
181
|
inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
|
|
180
182
|
}
|
|
181
183
|
}
|
|
@@ -190,7 +192,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
190
192
|
|
|
191
193
|
.#{$dual-list-selector}__list-item {
|
|
192
194
|
&:focus {
|
|
193
|
-
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--
|
|
195
|
+
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
|
|
194
196
|
}
|
|
195
197
|
|
|
196
198
|
&.pf-m-expandable {
|
|
@@ -213,6 +215,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
213
215
|
display: flex;
|
|
214
216
|
font-size: var(--#{$dual-list-selector}__list-item-row--FontSize);
|
|
215
217
|
background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor);
|
|
218
|
+
border-radius: var(--#{$dual-list-selector}__list-item-row--BorderRadius);
|
|
216
219
|
|
|
217
220
|
&:hover {
|
|
218
221
|
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
|
|
@@ -226,6 +229,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
226
229
|
|
|
227
230
|
font-weight: var(--#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight);
|
|
228
231
|
}
|
|
232
|
+
|
|
233
|
+
&:hover {
|
|
234
|
+
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
|
|
235
|
+
}
|
|
229
236
|
}
|
|
230
237
|
|
|
231
238
|
&.pf-m-check {
|
|
@@ -275,6 +282,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
275
282
|
padding-inline-start: var(--#{$dual-list-selector}__item--PaddingLeft);
|
|
276
283
|
padding-inline-end: var(--#{$dual-list-selector}__item--PaddingRight);
|
|
277
284
|
cursor: pointer;
|
|
285
|
+
outline-offset: -2px;
|
|
278
286
|
}
|
|
279
287
|
|
|
280
288
|
.#{$dual-list-selector}__item-count {
|
|
@@ -293,10 +301,16 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
293
301
|
}
|
|
294
302
|
|
|
295
303
|
.#{$dual-list-selector}__controls {
|
|
304
|
+
display: flex;
|
|
305
|
+
flex-direction: column;
|
|
296
306
|
grid-area: var(--#{$dual-list-selector}__controls--GridArea);
|
|
307
|
+
gap: var(--#{$dual-list-selector}__controls--Gap);
|
|
308
|
+
align-items: center;
|
|
297
309
|
align-self: center;
|
|
310
|
+
justify-content: center;
|
|
298
311
|
padding-inline-start: var(--#{$dual-list-selector}__controls--PaddingLeft);
|
|
299
312
|
padding-inline-end: var(--#{$dual-list-selector}__controls--PaddingRight);
|
|
313
|
+
margin-block-start: var(--#{$dual-list-selector}__controls--MarginBlockStart);
|
|
300
314
|
}
|
|
301
315
|
|
|
302
316
|
:is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
|
|
@@ -347,10 +361,3 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
347
361
|
}
|
|
348
362
|
}
|
|
349
363
|
// stylelint-enable
|
|
350
|
-
|
|
351
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
352
|
-
@import "themes/dark/dual-list-selector";
|
|
353
|
-
|
|
354
|
-
@include pf-v5-theme-dark {
|
|
355
|
-
@include pf-v5-theme-dark-dual-list-selector;
|
|
356
|
-
}
|