@patternfly/patternfly 5.0.0-alpha.57 → 5.0.0-alpha.59
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/assets/images/pf_logo.svg +11 -11
- package/base/patternfly-variables.css +3 -1
- package/base/themes/dark/_variables.scss +2 -0
- package/components/Alert/alert.css +7 -7
- package/components/Alert/themes/dark/alert.scss +7 -7
- package/components/AppLauncher/app-launcher.css +1 -0
- package/components/AppLauncher/app-launcher.scss +1 -0
- package/components/Badge/badge.css +1 -0
- package/components/Badge/themes/dark/badge.scss +1 -0
- package/components/Banner/banner.css +6 -8
- package/components/Banner/banner.scss +5 -5
- package/components/Banner/themes/dark/banner.scss +2 -6
- package/components/Button/button.css +4 -0
- package/components/Button/button.scss +2 -0
- package/components/Button/themes/dark/button.scss +4 -2
- package/components/CalendarMonth/calendar-month.css +3 -3
- package/components/CalendarMonth/calendar-month.scss +1 -5
- package/components/CalendarMonth/themes/dark/calendar-month.scss +2 -0
- package/components/DragDrop/drag-drop.css +23 -7
- package/components/DragDrop/drag-drop.scss +36 -17
- package/components/DragDrop/themes/dark/drag-drop.scss +7 -0
- package/components/Dropdown/dropdown.css +2 -0
- package/components/Dropdown/themes/dark/dropdown.scss +2 -0
- package/components/DualListSelector/dual-list-selector.css +9 -3
- package/components/DualListSelector/dual-list-selector.scss +10 -3
- package/components/DualListSelector/themes/dark/dual-list-selector.scss +9 -0
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InputGroup/input-group.css +1 -1
- package/components/InputGroup/themes/dark/input-group.scss +1 -1
- package/components/Label/label.css +6 -0
- package/components/Label/themes/dark/label.scss +6 -0
- package/components/Menu/menu.css +0 -1
- package/components/Menu/themes/dark/menu.scss +0 -1
- package/components/MenuToggle/menu-toggle.css +7 -5
- package/components/MenuToggle/menu-toggle.scss +2 -3
- package/components/MenuToggle/themes/dark/menu-toggle.scss +17 -14
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +1 -1
- package/components/NotificationBadge/notification-badge.css +1 -0
- package/components/NotificationBadge/themes/dark/notification-badge.scss +1 -0
- package/components/Panel/panel.css +6 -0
- package/components/Panel/panel.scss +9 -0
- package/components/Panel/themes/dark/panel.scss +7 -0
- package/components/Popover/popover.css +1 -1
- package/components/Popover/themes/dark/popover.scss +1 -1
- package/components/ProgressStepper/progress-stepper.css +1 -0
- package/components/ProgressStepper/progress-stepper.scss +240 -239
- package/components/Tabs/tabs.css +1 -0
- package/components/Tabs/themes/dark/tabs.scss +1 -0
- package/components/TextInputGroup/text-input-group.css +8 -0
- package/components/TextInputGroup/text-input-group.scss +7 -0
- package/components/TextInputGroup/themes/dark/text-input-group.scss +11 -0
- package/components/ToggleGroup/themes/dark/toggle-group.scss +1 -0
- package/components/ToggleGroup/toggle-group.css +3 -0
- package/components/ToggleGroup/toggle-group.scss +2 -0
- package/components/Wizard/themes/dark/wizard.scss +0 -2
- package/components/Wizard/wizard.css +2 -4
- package/components/Wizard/wizard.scss +2 -2
- package/docs/components/DualListSelector/examples/DualListSelector.md +1 -1
- package/docs/components/Slider/examples/Slider.md +15 -13
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
- package/layouts/Level/level.css +3 -3
- package/layouts/Level/level.scss +3 -3
- package/layouts/Split/split.css +3 -3
- package/layouts/Split/split.scss +3 -3
- package/layouts/Stack/stack.css +3 -3
- package/layouts/Stack/stack.scss +3 -3
- package/package.json +2 -2
- package/patternfly-base-no-globals.css +3 -1
- package/patternfly-base.css +3 -1
- package/patternfly-no-globals.css +159 -52
- package/patternfly.css +159 -52
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +3 -1
- package/sass-utilities/themes/dark/scss-variables.scss +7 -2
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
--#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
|
|
8
8
|
--#{$form-control}--BorderLeftColor: transparent;
|
|
9
9
|
--#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
10
|
-
--#{$form-control}--disabled--Color: var(--#{$pf-global}--
|
|
10
|
+
--#{$form-control}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
|
|
11
11
|
--#{$form-control}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
12
12
|
--#{$form-control}--readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
13
13
|
|
|
@@ -77,7 +77,7 @@ label.pf-v5-c-input-group__text {
|
|
|
77
77
|
--pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
|
|
78
78
|
--pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
79
79
|
--pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
|
|
80
|
-
--pf-v5-c-input-
|
|
80
|
+
--pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
|
|
81
81
|
}
|
|
82
82
|
:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
|
|
83
83
|
--pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
--#{$input-group}__item--m-box--BorderLeftColor: transparent;
|
|
12
12
|
--#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
13
13
|
--#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
|
|
14
|
-
--#{$input-group}
|
|
14
|
+
--#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300);
|
|
15
15
|
|
|
16
16
|
> * + * {
|
|
17
17
|
--#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor);
|
|
@@ -413,6 +413,7 @@ button.pf-v5-c-label__content:focus {
|
|
|
413
413
|
--pf-v5-c-label--m-red--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
414
414
|
--pf-v5-c-label--m-purple--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
415
415
|
--pf-v5-c-label--m-cyan--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
416
|
+
--pf-v5-c-label--m-gold--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
416
417
|
--pf-v5-c-label__content--before--BorderWidth: 0;
|
|
417
418
|
--pf-v5-c-label__content--before--BorderColor: transparent;
|
|
418
419
|
--pf-v5-c-label__content--link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
@@ -447,4 +448,9 @@ button.pf-v5-c-label__content:focus {
|
|
|
447
448
|
--pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
|
|
448
449
|
--pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
|
|
449
450
|
--pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
|
|
451
|
+
--pf-v5-c-label--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
|
|
452
|
+
--pf-v5-c-label--m-outline--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
|
|
453
|
+
--pf-v5-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-v5-global--palette--gold-100);
|
|
454
|
+
--pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--gold-100);
|
|
455
|
+
--pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--gold-100);
|
|
450
456
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
10
10
|
--#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
11
11
|
--#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
12
|
+
--#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
12
13
|
--#{$label}__content--before--BorderWidth: 0;
|
|
13
14
|
--#{$label}__content--before--BorderColor: transparent;
|
|
14
15
|
--#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
|
|
@@ -43,5 +44,10 @@
|
|
|
43
44
|
--#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
|
|
44
45
|
--#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
|
|
45
46
|
--#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
|
|
47
|
+
--#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
|
|
48
|
+
--#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
|
|
49
|
+
--#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
|
|
50
|
+
--#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
|
|
51
|
+
--#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
|
|
46
52
|
}
|
|
47
53
|
}
|
package/components/Menu/menu.css
CHANGED
|
@@ -625,5 +625,4 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
625
625
|
--pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
626
626
|
--pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
627
627
|
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
628
|
-
--pf-v5-c-menu__list-item--m-disabled__item--Color: var(--pf-v5-global--Color--200);
|
|
629
628
|
}
|
|
@@ -5,6 +5,5 @@
|
|
|
5
5
|
--#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
6
6
|
--#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
7
7
|
--#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
8
|
-
--#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--Color--200); // global var?
|
|
9
8
|
}
|
|
10
9
|
}
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
|
|
84
84
|
--pf-v5-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
85
85
|
--pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
86
|
-
--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--
|
|
86
|
+
--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
|
|
87
87
|
--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
|
|
88
88
|
--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
|
|
89
89
|
--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
|
|
@@ -271,6 +271,7 @@
|
|
|
271
271
|
--pf-v5-c-menu-toggle--PaddingRight: 0;
|
|
272
272
|
--pf-v5-c-check__input--MarginTop: 0;
|
|
273
273
|
--pf-v5-c-check__label--Color: currentcolor;
|
|
274
|
+
--pf-v5-c-check__label--disabled--Color: currentcolor;
|
|
274
275
|
align-items: center;
|
|
275
276
|
align-self: stretch;
|
|
276
277
|
}
|
|
@@ -337,8 +338,6 @@
|
|
|
337
338
|
--pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
|
|
338
339
|
}
|
|
339
340
|
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-v5-c-menu-toggle.pf-m-split-button:disabled {
|
|
340
|
-
--pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
341
|
-
--pf-v5-c-menu-toggle--m-split-button--child--Color: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
342
341
|
--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
343
342
|
}
|
|
344
343
|
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::after, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::after {
|
|
@@ -409,9 +408,12 @@
|
|
|
409
408
|
--pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
|
|
410
409
|
--pf-v5-c-menu-toggle--before--BorderLeftColor: transparent;
|
|
411
410
|
--pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
|
|
412
|
-
--pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
|
|
413
|
-
--pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--palette--black-100);
|
|
414
411
|
--pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
412
|
+
--pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
413
|
+
--pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--300);
|
|
414
|
+
--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
415
|
+
--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
|
|
416
|
+
--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
415
417
|
}
|
|
416
418
|
:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
|
|
417
419
|
background: transparent;
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
|
|
121
121
|
// Split button, child
|
|
122
122
|
--#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
|
|
123
|
-
--#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--
|
|
123
|
+
--#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100);
|
|
124
124
|
--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
|
|
125
125
|
--#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm);
|
|
126
126
|
--#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0;
|
|
@@ -363,6 +363,7 @@
|
|
|
363
363
|
--#{$menu-toggle}--PaddingRight: 0;
|
|
364
364
|
--#{$check}__input--MarginTop: 0;
|
|
365
365
|
--#{$check}__label--Color: currentcolor;
|
|
366
|
+
--#{$check}__label--disabled--Color: currentcolor;
|
|
366
367
|
|
|
367
368
|
align-items: center;
|
|
368
369
|
align-self: stretch;
|
|
@@ -469,8 +470,6 @@
|
|
|
469
470
|
// disable accent border
|
|
470
471
|
&.pf-m-disabled,
|
|
471
472
|
&:disabled {
|
|
472
|
-
--#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor);
|
|
473
|
-
--#{$menu-toggle}--m-split-button--child--Color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color);
|
|
474
473
|
--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
475
474
|
|
|
476
475
|
&::before,
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
@import "../../../../sass-utilities/themes/dark/all";
|
|
2
2
|
|
|
3
3
|
@mixin pf-v5-theme-dark-menu-toggle() {
|
|
4
|
-
.#{$menu
|
|
5
|
-
--#{$menu
|
|
6
|
-
--#{$menu
|
|
7
|
-
--#{$menu
|
|
8
|
-
--#{$menu
|
|
9
|
-
--#{$menu
|
|
10
|
-
--#{$menu
|
|
11
|
-
--#{$menu
|
|
12
|
-
--#{$menu
|
|
13
|
-
--#{$menu
|
|
14
|
-
--#{$menu
|
|
15
|
-
--#{$menu
|
|
16
|
-
--#{$menu
|
|
17
|
-
--#{$menu
|
|
4
|
+
.#{$menu-toggle} {
|
|
5
|
+
--#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
6
|
+
--#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
7
|
+
--#{$menu-toggle}--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
8
|
+
--#{$menu-toggle}--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
9
|
+
--#{$menu-toggle}--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
10
|
+
--#{$menu-toggle}--before--BorderTopColor: transparent;
|
|
11
|
+
--#{$menu-toggle}--before--BorderRightColor: transparent;
|
|
12
|
+
--#{$menu-toggle}--before--BorderBottomColor: transparent;
|
|
13
|
+
--#{$menu-toggle}--before--BorderLeftColor: transparent;
|
|
14
|
+
--#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
|
|
15
|
+
--#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
|
|
16
|
+
--#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
17
|
+
--#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
|
|
18
|
+
--#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300);
|
|
19
|
+
--#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300);
|
|
20
|
+
--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
|
|
18
21
|
|
|
19
22
|
&.pf-m-plain {
|
|
20
23
|
background: transparent;
|
package/components/Nav/nav.css
CHANGED
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
--pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom: var(--pf-v5-global--spacer--lg);
|
|
74
74
|
--pf-v5-c-nav--m-horizontal__link--Right: var(--pf-v5-global--spacer--md);
|
|
75
75
|
--pf-v5-c-nav--m-horizontal__link--Left: var(--pf-v5-global--spacer--md);
|
|
76
|
-
--pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-
|
|
76
|
+
--pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-200);
|
|
77
77
|
--pf-v5-c-nav--m-horizontal__link--hover--Color: var(--pf-v5-global--active-color--400);
|
|
78
78
|
--pf-v5-c-nav--m-horizontal__link--focus--Color: var(--pf-v5-global--active-color--400);
|
|
79
79
|
--pf-v5-c-nav--m-horizontal__link--active--Color: var(--pf-v5-global--active-color--400);
|
package/components/Nav/nav.scss
CHANGED
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
--#{$nav}--m-horizontal__link--lg--PaddingBottom: var(--#{$pf-global}--spacer--lg);
|
|
92
92
|
--#{$nav}--m-horizontal__link--Right: var(--#{$pf-global}--spacer--md);
|
|
93
93
|
--#{$nav}--m-horizontal__link--Left: var(--#{$pf-global}--spacer--md);
|
|
94
|
-
--#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-
|
|
94
|
+
--#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-200);
|
|
95
95
|
--#{$nav}--m-horizontal__link--hover--Color: var(--#{$pf-global}--active-color--400);
|
|
96
96
|
--#{$nav}--m-horizontal__link--focus--Color: var(--#{$pf-global}--active-color--400);
|
|
97
97
|
--#{$nav}--m-horizontal__link--active--Color: var(--#{$pf-global}--active-color--400);
|
|
@@ -100,6 +100,7 @@
|
|
|
100
100
|
|
|
101
101
|
:where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
|
|
102
102
|
--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
103
|
+
--pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
|
|
103
104
|
--pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
104
105
|
--pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
|
|
105
106
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@mixin pf-v5-theme-dark-notification-badge() {
|
|
4
4
|
.#{$notification-badge} {
|
|
5
5
|
--#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
|
|
6
|
+
--#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
|
|
6
7
|
--#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300);
|
|
7
8
|
--#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900);
|
|
8
9
|
}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
--pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
11
11
|
--pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
|
|
12
12
|
--pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
|
|
13
|
+
--pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
13
14
|
--pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
|
|
14
15
|
--pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
15
16
|
--pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
|
|
@@ -50,6 +51,7 @@
|
|
|
50
51
|
--pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
|
|
51
52
|
}
|
|
52
53
|
.pf-v5-c-panel.pf-m-raised {
|
|
54
|
+
--pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
|
|
53
55
|
--pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
|
|
54
56
|
--pf-v5-c-panel--ZIndex: var(--pf-v5-c-panel--m-raised--ZIndex);
|
|
55
57
|
}
|
|
@@ -75,4 +77,8 @@
|
|
|
75
77
|
.pf-v5-c-panel__footer {
|
|
76
78
|
padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
|
|
77
79
|
box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-panel {
|
|
83
|
+
--pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
78
84
|
}
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
// raised
|
|
19
19
|
--#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
|
|
20
20
|
--#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
|
|
21
|
+
--#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
|
|
21
22
|
|
|
22
23
|
// header
|
|
23
24
|
--#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
&.pf-m-raised {
|
|
75
|
+
--#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
|
|
74
76
|
--#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
|
|
75
77
|
--#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
|
|
76
78
|
}
|
|
@@ -99,3 +101,10 @@
|
|
|
99
101
|
padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
|
|
100
102
|
box-shadow: var(--#{$panel}__footer--BoxShadow);
|
|
101
103
|
}
|
|
104
|
+
|
|
105
|
+
// stylelint-disable no-invalid-position-at-import-rule
|
|
106
|
+
@import "themes/dark/panel";
|
|
107
|
+
|
|
108
|
+
@include pf-v5-theme-dark {
|
|
109
|
+
@include pf-v5-theme-dark-panel;
|
|
110
|
+
}
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
:where(.pf-v5-theme-dark) .pf-v5-c-popover {
|
|
174
174
|
--pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
175
175
|
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
176
|
-
--pf-v5-c-popover--m-
|
|
176
|
+
--pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
|
|
177
177
|
--pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
|
|
178
178
|
--pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
|
|
179
179
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
.#{$popover} {
|
|
5
5
|
--#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
6
6
|
--#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
|
|
7
|
-
--#{$popover}--m-
|
|
7
|
+
--#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200);
|
|
8
8
|
--#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100);
|
|
9
9
|
--#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100);
|
|
10
10
|
}
|
|
@@ -298,6 +298,7 @@
|
|
|
298
298
|
font-weight: var(--pf-v5-c-progress-stepper__step-title--FontWeight);
|
|
299
299
|
color: var(--pf-v5-c-progress-stepper__step-title--Color);
|
|
300
300
|
text-align: var(--pf-v5-c-progress-stepper__step-title--TextAlign);
|
|
301
|
+
background: none;
|
|
301
302
|
border: 0;
|
|
302
303
|
}
|
|
303
304
|
.pf-v5-c-progress-stepper__step-title.pf-m-help-text {
|