@patternfly/patternfly 4.145.0 → 4.147.0

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.
Files changed (20) hide show
  1. package/components/AppLauncher/app-launcher.css +5 -1
  2. package/components/AppLauncher/app-launcher.scss +7 -3
  3. package/components/Card/card.css +97 -18
  4. package/components/Card/card.scss +127 -19
  5. package/components/Menu/menu.css +4 -2
  6. package/components/Menu/menu.scss +5 -2
  7. package/components/Select/select.css +21 -5
  8. package/components/Select/select.scss +25 -7
  9. package/components/Tile/tile.css +53 -29
  10. package/components/Tile/tile.scss +72 -34
  11. package/docs/components/Card/examples/Card.md +70 -29
  12. package/docs/components/DragDrop/examples/DragDrop.md +1 -1
  13. package/docs/components/Form/examples/Form.md +103 -56
  14. package/docs/components/Tile/examples/Tile.md +2 -2
  15. package/docs/demos/Form/examples/BasicForms.md +20 -4
  16. package/package.json +1 -1
  17. package/patternfly-no-reset.css +180 -55
  18. package/patternfly.css +180 -55
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/components/AppLauncher/app-launcher.css CHANGED
@@ -35,13 +35,15 @@
35
35
  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
36
36
  --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
37
37
  --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
38
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--disabled-color--200);
38
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
39
39
  --pf-c-app-launcher__menu-item--m-action--Width: auto;
40
40
  --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
41
41
  --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
42
42
  --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
43
43
  --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
44
+ --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
44
45
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
46
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
45
47
  --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
46
48
  --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
47
49
  --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
@@ -123,6 +125,7 @@
123
125
  }
124
126
  .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
125
127
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
128
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
126
129
  }
127
130
 
128
131
  .pf-c-app-launcher__menu-item {
@@ -147,6 +150,7 @@
147
150
 
148
151
  .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
149
152
  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
153
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
150
154
  pointer-events: none;
151
155
  }
152
156
  .pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
package/components/AppLauncher/app-launcher.scss CHANGED
@@ -45,13 +45,15 @@
45
45
  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
46
46
  --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
47
47
  --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
48
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--disabled-color--200);
48
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
49
49
  --pf-c-app-launcher__menu-item--m-action--Width: auto;
50
50
  --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
51
51
  --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
52
- --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
52
+ --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200); // remove at breaking change
53
53
  --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
54
+ --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
54
55
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
56
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
55
57
 
56
58
  // Menu item icon
57
59
  --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -157,6 +159,7 @@
157
159
 
158
160
  &.pf-m-favorite {
159
161
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
162
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
160
163
  }
161
164
  }
162
165
 
@@ -172,7 +175,7 @@
172
175
 
173
176
  &:hover,
174
177
  &:focus {
175
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
178
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color); // remove at breaking change
176
179
 
177
180
  text-decoration: none;
178
181
  }
@@ -188,6 +191,7 @@
188
191
  &:disabled,
189
192
  &.pf-m-disabled {
190
193
  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
194
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
191
195
 
192
196
  pointer-events: none;
193
197
  }
package/components/Card/card.css CHANGED
@@ -1,6 +1,24 @@
1
1
  .pf-c-card {
2
2
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
3
3
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
4
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
5
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
6
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
12
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
13
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
14
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
15
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
16
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
17
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
18
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
19
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
20
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
21
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
4
22
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
5
23
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
6
24
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -8,6 +26,35 @@
8
26
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
9
27
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
10
28
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
29
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
30
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
31
+ --pf-c-card--m-selectable-raised--before--Right: 0;
32
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
33
+ --pf-c-card--m-selectable-raised--before--Left: 0;
34
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
35
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
36
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
37
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
38
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
39
+ --pf-c-card--m-selectable-raised--before--Transition: none;
40
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
41
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
42
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
43
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
44
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
45
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
46
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
47
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
48
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
49
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
50
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
51
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
52
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
53
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
54
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
55
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
56
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
57
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
11
58
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
12
59
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
13
60
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -26,25 +73,7 @@
26
73
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
27
74
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
28
75
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
29
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
30
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
31
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
32
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
33
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
34
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
35
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
36
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
37
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
38
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
39
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
40
76
  --pf-c-card--m-full-height--Height: 100%;
41
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
42
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
43
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
44
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
45
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
46
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
47
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
48
77
  --pf-c-card--m-plain--BoxShadow: none;
49
78
  --pf-c-card--m-plain--BackgroundColor: transparent;
50
79
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
@@ -83,6 +112,51 @@
83
112
  content: "";
84
113
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
85
114
  }
115
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
116
+ position: relative;
117
+ }
118
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
119
+ position: absolute;
120
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
121
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
122
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
123
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
124
+ content: "";
125
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
126
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
127
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
128
+ transform-origin: center bottom;
129
+ }
130
+ .pf-c-card.pf-m-hoverable-raised:hover {
131
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
132
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
133
+ }
134
+ .pf-c-card.pf-m-selectable-raised {
135
+ cursor: pointer;
136
+ /*
137
+ &:active {
138
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
139
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
140
+ }
141
+ */
142
+ }
143
+ .pf-c-card.pf-m-selectable-raised:hover {
144
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
145
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
146
+ }
147
+ .pf-c-card.pf-m-selectable-raised:focus {
148
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
149
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
150
+ }
151
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
152
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
153
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
154
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
155
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
156
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
157
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
158
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
159
+ }
86
160
  .pf-c-card.pf-m-compact {
87
161
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
88
162
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -104,6 +178,10 @@
104
178
  }
105
179
  .pf-c-card.pf-m-flat {
106
180
  --pf-c-card--BoxShadow: none;
181
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
182
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
183
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
184
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
107
185
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
108
186
  }
109
187
  .pf-c-card.pf-m-plain {
@@ -111,6 +189,7 @@
111
189
  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
112
190
  }
113
191
  .pf-c-card.pf-m-rounded {
192
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
114
193
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
115
194
  }
116
195
  .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
package/components/Card/card.scss CHANGED
@@ -1,7 +1,28 @@
1
1
  .pf-c-card {
2
- // Component variables
3
2
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
3
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
4
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
5
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
6
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
12
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
13
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
14
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
15
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
16
+
17
+ // Expandable
18
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
19
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
20
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
21
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
22
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
23
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
24
+
25
+ // Hoverable/selectable
5
26
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
6
27
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7
28
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -9,6 +30,39 @@
9
30
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
10
31
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
11
32
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
33
+
34
+ // Hoverable/selectable raised
35
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
36
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
37
+ --pf-c-card--m-selectable-raised--before--Right: 0;
38
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
39
+ --pf-c-card--m-selectable-raised--before--Left: 0;
40
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
41
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
42
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
43
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
44
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
45
+ --pf-c-card--m-selectable-raised--before--Transition: none;
46
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
47
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
48
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
49
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
50
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
51
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
52
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
53
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
54
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
55
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
56
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: #{pf-size-prem(-8px)};
57
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
58
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
59
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
60
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
61
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
62
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
63
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
64
+
65
+ // Compact
12
66
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
13
67
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
14
68
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -17,6 +71,8 @@
17
71
  --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
18
72
  --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
19
73
  --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
74
+
75
+ // Display large
20
76
  --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
21
77
  --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
22
78
  --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
@@ -24,28 +80,16 @@
24
80
  --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
25
81
  --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
26
82
  --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
83
+
84
+ // Flat
27
85
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
28
86
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
87
+
88
+ // Rounded
29
89
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
30
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
31
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
32
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
33
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
34
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
35
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
36
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
37
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
38
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
39
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
40
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
90
+
91
+ // Full height
41
92
  --pf-c-card--m-full-height--Height: 100%;
42
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
43
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
44
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
45
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
46
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
47
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
48
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
49
93
 
50
94
  // No box shadow
51
95
  --pf-c-card--m-plain--BoxShadow: none;
@@ -98,6 +142,64 @@
98
142
  }
99
143
  }
100
144
 
145
+ &.pf-m-hoverable-raised,
146
+ &.pf-m-selectable-raised {
147
+ position: relative;
148
+
149
+ &::before {
150
+ position: absolute;
151
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
152
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
153
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
154
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
155
+ content: "";
156
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
157
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
158
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
159
+ transform-origin: center bottom; // used for scaleY() to make the before scale upward
160
+ }
161
+ }
162
+
163
+ &.pf-m-hoverable-raised {
164
+ &:hover {
165
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
166
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
167
+ }
168
+ }
169
+
170
+ &.pf-m-selectable-raised {
171
+ cursor: pointer;
172
+
173
+ &:hover {
174
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
175
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
176
+ }
177
+
178
+ &:focus {
179
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
180
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
181
+ }
182
+
183
+ /*
184
+ &:active {
185
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
186
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
187
+ }
188
+ */
189
+
190
+ &.pf-m-selected-raised,
191
+ &:active {
192
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
193
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
194
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
195
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
196
+
197
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
198
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
199
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected
200
+ }
201
+ }
202
+
101
203
  &.pf-m-compact {
102
204
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
103
205
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -121,6 +223,10 @@
121
223
 
122
224
  &.pf-m-flat {
123
225
  --pf-c-card--BoxShadow: none;
226
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
227
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
228
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
229
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
124
230
 
125
231
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
126
232
  }
@@ -131,6 +237,8 @@
131
237
  }
132
238
 
133
239
  &.pf-m-rounded {
240
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
241
+
134
242
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
135
243
  }
136
244
 
package/components/Menu/menu.css CHANGED
@@ -161,9 +161,9 @@
161
161
  --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
162
162
  --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
163
163
  --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
164
+ --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
164
165
  --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
165
166
  --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
166
- --pf-c-menu__list-item--m-disabled__item-action--Color: var(--pf-global--disabled-color--200);
167
167
  --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
168
168
  --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
169
169
  --pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
@@ -379,7 +379,6 @@
379
379
  --pf-c-menu__list-item--hover--BackgroundColor: transparent;
380
380
  --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
381
381
  --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
382
- --pf-c-menu__item-action--Color: var(--pf-c-menu__list-item--m-disabled__item-action--Color);
383
382
  --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
384
383
  pointer-events: none;
385
384
  }
@@ -506,6 +505,9 @@
506
505
  .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
507
506
  --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
508
507
  }
508
+ .pf-c-menu__item-action:disabled {
509
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
510
+ }
509
511
 
510
512
  .pf-c-menu__item-action-icon {
511
513
  display: flex;
package/components/Menu/menu.scss CHANGED
@@ -136,9 +136,9 @@
136
136
  --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
137
137
  --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
138
138
  --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
139
+ --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
139
140
  --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
140
141
  --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
141
- --pf-c-menu__list-item--m-disabled__item-action--Color: var(--pf-global--disabled-color--200);
142
142
 
143
143
  // Action icon
144
144
  --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
@@ -431,7 +431,6 @@
431
431
  --pf-c-menu__list-item--hover--BackgroundColor: transparent;
432
432
  --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
433
433
  --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
434
- --pf-c-menu__item-action--Color: var(--pf-c-menu__list-item--m-disabled__item-action--Color);
435
434
  --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
436
435
 
437
436
  pointer-events: none;
@@ -582,6 +581,10 @@
582
581
  &:focus {
583
582
  --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
584
583
  }
584
+
585
+ &:disabled {
586
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
587
+ }
585
588
  }
586
589
 
587
590
  .pf-c-menu__item-action-icon {
package/components/Select/select.css CHANGED
@@ -103,23 +103,29 @@
103
103
  --pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
104
104
  --pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md);
105
105
  --pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100);
106
- --pf-c-select__menu-item--Width: 100%;
107
106
  --pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
107
+ --pf-c-select__menu-item--Width: 100%;
108
108
  --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
109
109
  --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
110
110
  --pf-c-select__menu-item--disabled--BackgroundColor: transparent;
111
111
  --pf-c-select__menu-item--m-link--Width: auto;
112
112
  --pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
113
113
  --pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
114
- --pf-c-select__menu-item--m-action--Color: var(--pf-global--disabled-color--200);
114
+ --pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200);
115
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
116
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100);
117
+ --pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
115
118
  --pf-c-select__menu-item--m-action--Width: auto;
116
119
  --pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
117
120
  --pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
118
121
  --pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
119
122
  --pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
120
- --pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
121
- --pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100);
123
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200);
124
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100);
125
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100);
122
126
  --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400);
127
+ --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500);
128
+ --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500);
123
129
  --pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color);
124
130
  --pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100);
125
131
  --pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
@@ -380,7 +386,9 @@
380
386
  display: flex;
381
387
  }
382
388
  .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
383
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
389
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
390
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
391
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
384
392
  }
385
393
 
386
394
  .pf-c-select__menu-item {
@@ -434,6 +442,14 @@
434
442
  .pf-c-select__menu-item.pf-m-action:focus {
435
443
  --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
436
444
  }
445
+ .pf-c-select__menu-item.pf-m-action:disabled {
446
+ --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
447
+ }
448
+ .pf-c-select__menu-item.pf-m-favorite-action {
449
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
450
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
451
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
452
+ }
437
453
  .pf-c-select__menu-item.pf-m-selected {
438
454
  --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
439
455
  --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
package/components/Select/select.scss CHANGED
@@ -126,23 +126,29 @@
126
126
  --pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
127
127
  --pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md);
128
128
  --pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100);
129
- --pf-c-select__menu-item--Width: 100%;
130
129
  --pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
130
+ --pf-c-select__menu-item--Width: 100%;
131
131
  --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
132
132
  --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
133
133
  --pf-c-select__menu-item--disabled--BackgroundColor: transparent;
134
134
  --pf-c-select__menu-item--m-link--Width: auto;
135
135
  --pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
136
136
  --pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
137
- --pf-c-select__menu-item--m-action--Color: var(--pf-global--disabled-color--200);
137
+ --pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200);
138
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
139
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100);
140
+ --pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
138
141
  --pf-c-select__menu-item--m-action--Width: auto;
139
142
  --pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
140
143
  --pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
141
144
  --pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
142
- --pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
143
- --pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
144
- --pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100);
145
+ --pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200); // remove at breaking change
146
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200);
147
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100);
148
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100);
145
149
  --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400);
150
+ --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500);
151
+ --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500);
146
152
  --pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color);
147
153
 
148
154
  // Menu item icon
@@ -472,7 +478,9 @@
472
478
  display: flex;
473
479
 
474
480
  &.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
475
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
481
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
482
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
483
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
476
484
  }
477
485
  }
478
486
 
@@ -492,7 +500,7 @@
492
500
  &:hover,
493
501
  &:focus,
494
502
  &.pf-m-focus {
495
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
503
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color); // remove at breaking change
496
504
 
497
505
  text-decoration: none;
498
506
  }
@@ -540,6 +548,16 @@
540
548
  &:focus {
541
549
  --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
542
550
  }
551
+
552
+ &:disabled {
553
+ --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
554
+ }
555
+ }
556
+
557
+ &.pf-m-favorite-action {
558
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
559
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
560
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
543
561
  }
544
562
 
545
563
  &.pf-m-selected {