@patternfly/patternfly 6.0.0-alpha.84 → 6.0.0-alpha.86
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/Accordion/accordion.css +1 -1
- package/components/Accordion/accordion.scss +1 -1
- package/components/Button/button.css +21 -21
- package/components/Button/button.scss +21 -21
- package/components/DataList/data-list.css +1 -1
- package/components/DataList/data-list.scss +1 -1
- package/components/DualListSelector/dual-list-selector.css +3 -8
- package/components/DualListSelector/dual-list-selector.scss +5 -11
- package/components/Form/form.css +3 -7
- package/components/Form/form.scss +3 -7
- package/components/FormControl/form-control.css +3 -3
- package/components/FormControl/form-control.scss +3 -3
- package/components/Login/login.css +5 -22
- package/components/Login/login.scss +5 -25
- package/components/NotificationBadge/notification-badge.css +4 -4
- package/components/NotificationBadge/notification-badge.scss +4 -4
- package/components/Pagination/pagination.css +1 -1
- package/components/Pagination/pagination.scss +1 -1
- package/components/Table/table-grid.css +3 -3
- package/components/Table/table-grid.scss +3 -3
- package/components/Table/table-tree-view.css +5 -5
- package/components/Table/table-tree-view.scss +1 -1
- package/components/Table/table.css +8 -8
- package/components/Table/table.scss +8 -8
- package/components/Tabs/tabs.css +1 -1
- package/components/Tabs/tabs.scss +1 -1
- package/docs/components/DualListSelector/examples/DualListSelector.md +16 -16
- package/docs/components/Login/examples/Login.md +150 -100
- package/package.json +1 -1
- package/patternfly-no-globals.css +59 -85
- package/patternfly-theme-dark-unversioned.css +59 -85
- package/patternfly.css +59 -85
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--pf-v5-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
3
3
|
--pf-v5-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
|
|
4
4
|
--pf-v5-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
|
|
5
|
-
--pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--
|
|
5
|
+
--pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
6
6
|
--pf-v5-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
7
7
|
--pf-v5-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
8
8
|
--pf-v5-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
// accordion item
|
|
9
9
|
--#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
|
|
10
|
-
--#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--
|
|
10
|
+
--#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
11
11
|
|
|
12
12
|
// accordion toggle
|
|
13
13
|
--#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
@@ -149,28 +149,28 @@
|
|
|
149
149
|
--pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
|
|
150
150
|
--pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
151
151
|
--pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
|
|
152
|
-
--pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--
|
|
152
|
+
--pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
153
153
|
--pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
154
|
-
--pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--
|
|
154
|
+
--pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
155
155
|
--pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
156
|
-
--pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-
|
|
157
|
-
--pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--
|
|
158
|
-
--pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-
|
|
159
|
-
--pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-
|
|
160
|
-
--pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--
|
|
161
|
-
--pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-
|
|
162
|
-
--pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-
|
|
163
|
-
--pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--
|
|
164
|
-
--pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-
|
|
165
|
-
--pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-
|
|
166
|
-
--pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--
|
|
167
|
-
--pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
168
|
-
--pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-
|
|
169
|
-
--pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--
|
|
170
|
-
--pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
171
|
-
--pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-
|
|
172
|
-
--pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--
|
|
173
|
-
--pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
156
|
+
--pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
|
|
157
|
+
--pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
|
|
158
|
+
--pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
|
|
159
|
+
--pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
|
|
160
|
+
--pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
|
|
161
|
+
--pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
|
|
162
|
+
--pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
|
|
163
|
+
--pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
|
|
164
|
+
--pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
|
|
165
|
+
--pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
|
|
166
|
+
--pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
|
|
167
|
+
--pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
|
|
168
|
+
--pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
|
|
169
|
+
--pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
|
|
170
|
+
--pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
|
|
171
|
+
--pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
|
|
172
|
+
--pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
|
|
173
|
+
--pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
|
|
174
174
|
--pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
|
175
175
|
--pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
|
176
176
|
--pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
--pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
|
227
227
|
--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
228
228
|
--pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
|
|
229
|
-
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled
|
|
229
|
+
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
|
|
230
230
|
--pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
231
231
|
--pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
|
232
232
|
--pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
@@ -175,32 +175,32 @@
|
|
|
175
175
|
// Read
|
|
176
176
|
--#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
177
177
|
--#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
|
|
178
|
-
--#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--
|
|
178
|
+
--#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
179
179
|
--#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
180
|
-
--#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--
|
|
180
|
+
--#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
181
181
|
--#{$button}--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
182
182
|
|
|
183
183
|
// Unread
|
|
184
|
-
--#{$button}--m-unread--Color: var(--pf-t--global--text--color--on-
|
|
185
|
-
--#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--
|
|
186
|
-
--#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--on-
|
|
187
|
-
--#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--on-
|
|
188
|
-
--#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--
|
|
189
|
-
--#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-
|
|
190
|
-
--#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-
|
|
191
|
-
--#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--
|
|
192
|
-
--#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-
|
|
184
|
+
--#{$button}--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
|
|
185
|
+
--#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
|
|
186
|
+
--#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
|
|
187
|
+
--#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
|
|
188
|
+
--#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
|
|
189
|
+
--#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
|
|
190
|
+
--#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
|
|
191
|
+
--#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
|
|
192
|
+
--#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
|
|
193
193
|
|
|
194
194
|
// Attention
|
|
195
|
-
--#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--on-
|
|
196
|
-
--#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--
|
|
197
|
-
--#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
198
|
-
--#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-
|
|
199
|
-
--#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--
|
|
200
|
-
--#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
201
|
-
--#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-
|
|
202
|
-
--#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--
|
|
203
|
-
--#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-
|
|
195
|
+
--#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
|
|
196
|
+
--#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
|
|
197
|
+
--#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
|
|
198
|
+
--#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
|
|
199
|
+
--#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
|
|
200
|
+
--#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
|
|
201
|
+
--#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
|
|
202
|
+
--#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
|
|
203
|
+
--#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
|
|
204
204
|
|
|
205
205
|
// Warning
|
|
206
206
|
--#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
|
|
273
273
|
// Count
|
|
274
274
|
--#{$button}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
|
|
275
|
-
--#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled
|
|
275
|
+
--#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
|
|
276
276
|
--#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
277
277
|
--#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
|
278
278
|
--#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
@@ -541,7 +541,7 @@
|
|
|
541
541
|
--pf-v5-c-data-list__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
542
542
|
--pf-v5-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
543
543
|
--pf-v5-c-data-list--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
544
|
-
--pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--
|
|
544
|
+
--pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
|
|
545
545
|
--pf-v5-c-data-list--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
546
546
|
--pf-v5-c-data-list--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
547
547
|
--pf-v5-c-data-list--m-compact__cell--md--PaddingBottom: 0;
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
// compact
|
|
123
123
|
--#{$data-list}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
124
124
|
--#{$data-list}--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
125
|
-
--#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--
|
|
125
|
+
--#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
|
|
126
126
|
--#{$data-list}--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
127
127
|
--#{$data-list}--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
128
128
|
--#{$data-list}--m-compact__cell--md--PaddingBottom: 0;
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
--pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
25
25
|
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
26
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
27
|
--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
29
28
|
--pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
30
29
|
--pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
|
|
@@ -38,7 +37,7 @@
|
|
|
38
37
|
--pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
39
38
|
--pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
40
39
|
--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--
|
|
40
|
+
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
|
|
42
41
|
--pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
43
42
|
--pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
|
|
44
43
|
--pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -55,7 +54,7 @@
|
|
|
55
54
|
--pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
|
|
56
55
|
--pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
|
|
57
56
|
--pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
|
|
58
|
-
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--
|
|
57
|
+
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
.pf-v5-c-dual-list-selector {
|
|
@@ -165,10 +164,6 @@
|
|
|
165
164
|
display: flex;
|
|
166
165
|
font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
|
|
167
166
|
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);
|
|
169
|
-
}
|
|
170
|
-
.pf-v5-c-dual-list-selector__list-item-row:hover {
|
|
171
|
-
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
172
167
|
}
|
|
173
168
|
.pf-v5-c-dual-list-selector__list-item-row.pf-m-selected {
|
|
174
169
|
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
|
|
@@ -177,7 +172,7 @@
|
|
|
177
172
|
--pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
|
|
178
173
|
font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
|
|
179
174
|
}
|
|
180
|
-
.pf-v5-c-dual-list-selector__list-item-row
|
|
175
|
+
.pf-v5-c-dual-list-selector__list-item-row:hover {
|
|
181
176
|
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
182
177
|
}
|
|
183
178
|
.pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
|
|
@@ -38,7 +38,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
38
38
|
--#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
39
39
|
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
40
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
41
|
--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
43
42
|
--#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
44
43
|
--#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
|
|
@@ -56,7 +55,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
56
55
|
// Item text
|
|
57
56
|
--#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
58
57
|
--#{$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--
|
|
58
|
+
--#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
|
|
60
59
|
|
|
61
60
|
// Status
|
|
62
61
|
--#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
@@ -85,7 +84,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
85
84
|
--#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
|
|
86
85
|
--#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
|
|
87
86
|
--#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
|
|
88
|
-
--#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--
|
|
87
|
+
--#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
.#{$dual-list-selector} {
|
|
@@ -215,11 +214,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
215
214
|
display: flex;
|
|
216
215
|
font-size: var(--#{$dual-list-selector}__list-item-row--FontSize);
|
|
217
216
|
background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor);
|
|
218
|
-
border-radius: var(--#{$dual-list-selector}__list-item-row--BorderRadius);
|
|
219
|
-
|
|
220
|
-
&:hover {
|
|
221
|
-
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
|
|
222
|
-
}
|
|
223
217
|
|
|
224
218
|
&.pf-m-selected {
|
|
225
219
|
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor);
|
|
@@ -229,10 +223,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
|
|
|
229
223
|
|
|
230
224
|
font-weight: var(--#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight);
|
|
231
225
|
}
|
|
226
|
+
}
|
|
232
227
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
}
|
|
228
|
+
&:hover {
|
|
229
|
+
--#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
|
|
236
230
|
}
|
|
237
231
|
|
|
238
232
|
&.pf-m-check {
|
package/components/Form/form.css
CHANGED
|
@@ -50,13 +50,13 @@
|
|
|
50
50
|
--pf-v5-c-form__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
51
51
|
--pf-v5-c-form__field-group--field-group--MarginTop: calc(var(--pf-v5-c-form--GridGap) * -1);
|
|
52
52
|
--pf-v5-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v5-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
|
|
53
|
-
--pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-
|
|
53
|
+
--pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-v5-c-form__field-group-header--PaddingTop);
|
|
54
54
|
--pf-v5-c-form__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
|
|
55
55
|
--pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
|
|
56
56
|
--pf-v5-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
|
|
57
57
|
--pf-v5-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
|
|
58
|
-
--pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-
|
|
59
|
-
--pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-
|
|
58
|
+
--pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-v5-c-button--m-plain--PaddingTop) * -1);
|
|
59
|
+
--pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-v5-c-button--m-plain--PaddingBottom) * -1);
|
|
60
60
|
--pf-v5-c-form__field-group-toggle-icon--Transition: var(--pf-v5-global--Transition);
|
|
61
61
|
--pf-v5-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
|
|
62
62
|
--pf-v5-c-form__field-group-toggle-icon--Rotate: 0;
|
|
@@ -70,8 +70,6 @@
|
|
|
70
70
|
--pf-v5-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
|
|
71
71
|
--pf-v5-c-form__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
|
|
72
72
|
--pf-v5-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
|
|
73
|
-
--pf-v5-c-form__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
|
|
74
|
-
--pf-v5-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
|
|
75
73
|
--pf-v5-c-form__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
76
74
|
--pf-v5-c-form__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
77
75
|
--pf-v5-c-form__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
@@ -444,8 +442,6 @@
|
|
|
444
442
|
}
|
|
445
443
|
|
|
446
444
|
.pf-v5-c-form__field-group-header-actions {
|
|
447
|
-
margin-block-start: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
|
|
448
|
-
margin-block-end: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
|
|
449
445
|
margin-inline-start: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
|
|
450
446
|
white-space: nowrap;
|
|
451
447
|
}
|
|
@@ -126,13 +126,13 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
126
126
|
--#{$form}__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
127
127
|
--#{$form}__field-group--field-group--MarginTop: calc(var(--#{$form}--GridGap) * -1);
|
|
128
128
|
--#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
|
|
129
|
-
--#{$form}__field-group-toggle--PaddingTop: var(
|
|
129
|
+
--#{$form}__field-group-toggle--PaddingTop: var(--#{$form}__field-group-header--PaddingTop);
|
|
130
130
|
--#{$form}__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
|
|
131
131
|
--#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
|
|
132
132
|
--#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
|
|
133
133
|
--#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
|
|
134
|
-
--#{$form}__field-group-toggle-button--MarginTop: calc(var(--
|
|
135
|
-
--#{$form}__field-group-toggle-button--MarginBottom: calc(var(--
|
|
134
|
+
--#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$button}--m-plain--PaddingTop) * -1);
|
|
135
|
+
--#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$button}--m-plain--PaddingBottom) * -1);
|
|
136
136
|
--#{$form}__field-group-toggle-icon--Transition: var(--#{$pf-global}--Transition);
|
|
137
137
|
--#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
|
|
138
138
|
--#{$form}__field-group-toggle-icon--Rotate: 0;
|
|
@@ -146,8 +146,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
146
146
|
--#{$form}__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
|
|
147
147
|
--#{$form}__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
|
|
148
148
|
--#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
|
|
149
|
-
--#{$form}__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
|
|
150
|
-
--#{$form}__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
|
|
151
149
|
--#{$form}__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
152
150
|
--#{$form}__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
153
151
|
--#{$form}__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
@@ -443,8 +441,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
443
441
|
}
|
|
444
442
|
|
|
445
443
|
.#{$form}__field-group-header-actions {
|
|
446
|
-
margin-block-start: var(--#{$form}__field-group-header-actions--MarginTop);
|
|
447
|
-
margin-block-end: var(--#{$form}__field-group-header-actions--MarginBottom);
|
|
448
444
|
margin-inline-start: var(--#{$form}__field-group-header-actions--MarginLeft);
|
|
449
445
|
white-space: nowrap;
|
|
450
446
|
}
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
--pf-v5-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
|
|
24
24
|
--pf-v5-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
25
25
|
--pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
26
|
-
--pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--
|
|
26
|
+
--pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
27
27
|
--pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
28
|
-
--pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--
|
|
28
|
+
--pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
29
29
|
--pf-v5-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
30
30
|
--pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
|
|
31
31
|
--pf-v5-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
--pf-v5-c-form-control--m-readonly--BorderColor: transparent;
|
|
36
36
|
--pf-v5-c-form-control--m-readonly--hover--after--BorderColor: revert;
|
|
37
37
|
--pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
38
|
-
--pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--
|
|
38
|
+
--pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
39
39
|
--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
|
|
40
40
|
--pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
|
|
41
41
|
--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
|
|
30
30
|
// focus
|
|
31
31
|
--#{$form-control}--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
32
|
-
--#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--
|
|
32
|
+
--#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
33
33
|
|
|
34
34
|
// expanded
|
|
35
35
|
--#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
36
|
-
--#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--
|
|
36
|
+
--#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
37
37
|
|
|
38
38
|
// placeholder
|
|
39
39
|
--#{$form-control}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
--#{$form-control}--m-readonly--BorderColor: transparent;
|
|
50
50
|
--#{$form-control}--m-readonly--hover--after--BorderColor: revert;
|
|
51
51
|
--#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
52
|
-
--#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--
|
|
52
|
+
--#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
53
53
|
|
|
54
54
|
// readonly plain
|
|
55
55
|
--#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
|
|
@@ -39,13 +39,8 @@
|
|
|
39
39
|
--pf-v5-c-login__main-footer-links--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
40
40
|
--pf-v5-c-login__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
41
41
|
--pf-v5-c-login__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
42
|
-
--pf-v5-c-login__main-footer-links
|
|
43
|
-
--pf-v5-c-login__main-footer-links-item--
|
|
44
|
-
--pf-v5-c-login__main-footer-links-item--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
45
|
-
--pf-v5-c-login__main-footer-links-item-link-svg--Fill: var(--pf-t--global--icon--color--subtle);
|
|
46
|
-
--pf-v5-c-login__main-footer-links-item-link-svg--Width: var(--pf-t--global--icon--size--lg);
|
|
47
|
-
--pf-v5-c-login__main-footer-links-item-link-svg--Height: var(--pf-t--global--icon--size--lg);
|
|
48
|
-
--pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-t--global--icon--color--nonstatus--hover);
|
|
42
|
+
--pf-v5-c-login__main-footer-links--Gap: var(--pf-t--global--spacer--md);
|
|
43
|
+
--pf-v5-c-login__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
|
|
49
44
|
--pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
50
45
|
--pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
|
|
51
46
|
--pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
@@ -224,6 +219,7 @@
|
|
|
224
219
|
.pf-v5-c-login__main-footer-links {
|
|
225
220
|
display: flex;
|
|
226
221
|
flex-wrap: wrap;
|
|
222
|
+
gap: var(--pf-v5-c-login__main-footer-links--Gap);
|
|
227
223
|
justify-content: center;
|
|
228
224
|
padding-block-start: var(--pf-v5-c-login__main-footer-links--PaddingTop);
|
|
229
225
|
padding-block-end: var(--pf-v5-c-login__main-footer-links--PaddingBottom);
|
|
@@ -231,21 +227,8 @@
|
|
|
231
227
|
padding-inline-end: var(--pf-v5-c-login__main-footer-links--PaddingRight);
|
|
232
228
|
}
|
|
233
229
|
|
|
234
|
-
.pf-v5-c-login__main-footer-links-item {
|
|
235
|
-
|
|
236
|
-
padding-inline-end: var(--pf-v5-c-login__main-footer-links-item--PaddingRight);
|
|
237
|
-
margin-block-end: var(--pf-v5-c-login__main-footer-links-item--MarginBottom);
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.pf-v5-c-login__main-footer-links-item-link svg {
|
|
241
|
-
width: 100%;
|
|
242
|
-
max-width: var(--pf-v5-c-login__main-footer-links-item-link-svg--Width);
|
|
243
|
-
height: 100%;
|
|
244
|
-
max-height: var(--pf-v5-c-login__main-footer-links-item-link-svg--Height);
|
|
245
|
-
fill: var(--pf-v5-c-login__main-footer-links-item-link-svg--Fill);
|
|
246
|
-
}
|
|
247
|
-
.pf-v5-c-login__main-footer-links-item-link:hover svg {
|
|
248
|
-
fill: var(--pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill);
|
|
230
|
+
.pf-v5-c-login__main-footer-links-item .pf-v5-c-button {
|
|
231
|
+
--pf-v5-c-button--FontSize: var(--pf-v5-c-login__main-footer-links-item--c-button--FontSize);
|
|
249
232
|
}
|
|
250
233
|
|
|
251
234
|
.pf-v5-c-login__main-footer-band {
|
|
@@ -86,13 +86,8 @@
|
|
|
86
86
|
--#{$login}__main-footer-links--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
87
87
|
--#{$login}__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
88
88
|
--#{$login}__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
89
|
-
--#{$login}__main-footer-links
|
|
90
|
-
--#{$login}__main-footer-links-item--
|
|
91
|
-
--#{$login}__main-footer-links-item--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
92
|
-
--#{$login}__main-footer-links-item-link-svg--Fill: var(--pf-t--global--icon--color--subtle);
|
|
93
|
-
--#{$login}__main-footer-links-item-link-svg--Width: var(--pf-t--global--icon--size--lg);
|
|
94
|
-
--#{$login}__main-footer-links-item-link-svg--Height: var(--pf-t--global--icon--size--lg);
|
|
95
|
-
--#{$login}__main-footer-links-item-link-svg--hover--Fill: var(--pf-t--global--icon--color--nonstatus--hover); // TODO is this needed?
|
|
89
|
+
--#{$login}__main-footer-links--Gap: var(--pf-t--global--spacer--md);
|
|
90
|
+
--#{$login}__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
|
|
96
91
|
--#{$login}__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
97
92
|
--#{$login}__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
|
|
98
93
|
--#{$login}__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
@@ -244,6 +239,7 @@
|
|
|
244
239
|
.#{$login}__main-footer-links {
|
|
245
240
|
display: flex;
|
|
246
241
|
flex-wrap: wrap;
|
|
242
|
+
gap: var(--#{$login}__main-footer-links--Gap);
|
|
247
243
|
justify-content: center;
|
|
248
244
|
padding-block-start: var(--#{$login}__main-footer-links--PaddingTop);
|
|
249
245
|
padding-block-end: var(--#{$login}__main-footer-links--PaddingBottom);
|
|
@@ -252,24 +248,8 @@
|
|
|
252
248
|
}
|
|
253
249
|
|
|
254
250
|
.#{$login}__main-footer-links-item {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
margin-block-end: var(--#{$login}__main-footer-links-item--MarginBottom);
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.#{$login}__main-footer-links-item-link {
|
|
261
|
-
svg {
|
|
262
|
-
width: 100%;
|
|
263
|
-
max-width: var(--#{$login}__main-footer-links-item-link-svg--Width);
|
|
264
|
-
height: 100%;
|
|
265
|
-
max-height: var(--#{$login}__main-footer-links-item-link-svg--Height);
|
|
266
|
-
fill: var(--#{$login}__main-footer-links-item-link-svg--Fill);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
&:hover {
|
|
270
|
-
svg {
|
|
271
|
-
fill: var(--#{$login}__main-footer-links-item-link-svg--hover--Fill);
|
|
272
|
-
}
|
|
251
|
+
.#{$button}{
|
|
252
|
+
--#{$button}--FontSize: var(--#{$login}__main-footer-links-item--c-button--FontSize);
|
|
273
253
|
}
|
|
274
254
|
}
|
|
275
255
|
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
--pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
|
|
17
17
|
--pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
18
18
|
--pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
|
|
19
|
-
--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--
|
|
19
|
+
--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
20
20
|
--pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
21
21
|
--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
22
|
-
--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--
|
|
22
|
+
--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
23
23
|
--pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
|
|
24
24
|
--pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
25
25
|
--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
|
|
26
|
-
--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--
|
|
26
|
+
--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
|
|
27
27
|
--pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
|
|
28
28
|
--pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
|
29
29
|
--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
|
|
30
|
-
--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--
|
|
30
|
+
--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.pf-v5-c-notification-badge {
|
|
@@ -22,22 +22,22 @@
|
|
|
22
22
|
--#{$notification-badge}--m-read--Color: var(--pf-t--global--text--color--regular);
|
|
23
23
|
--#{$notification-badge}--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
24
24
|
--#{$notification-badge}--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
|
|
25
|
-
--#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--
|
|
25
|
+
--#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
26
26
|
--#{$notification-badge}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
27
27
|
--#{$notification-badge}--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
28
|
-
--#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--
|
|
28
|
+
--#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
29
29
|
|
|
30
30
|
// Unread
|
|
31
31
|
--#{$notification-badge}--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
|
|
32
32
|
--#{$notification-badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
33
33
|
--#{$notification-badge}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
|
|
34
|
-
--#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--
|
|
34
|
+
--#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
|
|
35
35
|
|
|
36
36
|
// Attention
|
|
37
37
|
--#{$notification-badge}--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
|
|
38
38
|
--#{$notification-badge}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
|
39
39
|
--#{$notification-badge}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
|
|
40
|
-
--#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--
|
|
40
|
+
--#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.#{$notification-badge} {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--pf-v5-c-pagination--m-display-summary__nav--Display: none;
|
|
16
16
|
--pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
|
|
17
17
|
--pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
18
|
-
--pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--
|
|
18
|
+
--pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
|
|
19
19
|
--pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
20
20
|
--pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v5-c-form-control--PaddingRight) + var(--pf-v5-c-form-control--PaddingLeft)) + (var(--pf-v5-c-form-control--before--BorderWidth) * 2));
|
|
21
21
|
--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
|
|
@@ -17,7 +17,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
17
17
|
--#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
18
18
|
|
|
19
19
|
// nav page select
|
|
20
|
-
--#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--
|
|
20
|
+
--#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
|
|
21
21
|
--#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
22
22
|
--#{$pagination}__nav-page-select--c-form-control--width-base: calc((var(--#{$form-control}--PaddingRight) + var(--#{$form-control}--PaddingLeft)) + (var(--#{$form-control}--before--BorderWidth) * 2));
|
|
23
23
|
--#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
4
4
|
--pf-v5-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
|
|
5
5
|
--pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
|
|
6
|
-
--pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--
|
|
6
|
+
--pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
7
7
|
--pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
8
8
|
--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-c-table__tbody--responsive--border-width--base);
|
|
9
9
|
--pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
--pf-v5-c-table__tbody--after__tr--BorderLeftWidth: 0;
|
|
20
20
|
--pf-v5-c-table__tbody--after__tr--BorderLeftColor: transparent;
|
|
21
21
|
--pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
|
|
22
|
-
--pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--
|
|
22
|
+
--pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
|
|
23
23
|
--pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
|
|
24
|
-
--pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--
|
|
24
|
+
--pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
|
|
25
25
|
--pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
|
|
26
26
|
--pf-v5-c-table--m-grid--cell--PaddingTop: 0;
|
|
27
27
|
--pf-v5-c-table--m-grid--cell--PaddingRight: 0;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
45
45
|
--#{$table}__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
|
|
46
46
|
--#{$table}__tbody--after--BorderLeftWidth: 0;
|
|
47
|
-
--#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--
|
|
47
|
+
--#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
48
48
|
|
|
49
49
|
// Row
|
|
50
50
|
--#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
@@ -66,11 +66,11 @@
|
|
|
66
66
|
--#{$table}__tbody--after__tr--BorderLeftWidth: 0;
|
|
67
67
|
--#{$table}__tbody--after__tr--BorderLeftColor: transparent;
|
|
68
68
|
--#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
|
|
69
|
-
--#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--
|
|
69
|
+
--#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
|
|
70
70
|
|
|
71
71
|
// selected
|
|
72
72
|
--#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
|
|
73
|
-
--#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--
|
|
73
|
+
--#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
|
|
74
74
|
|
|
75
75
|
// Cell display
|
|
76
76
|
--#{$table}--m-grid--cell--hidden-visible--Display: grid;
|