@patternfly/patternfly 5.0.0-alpha.38 → 5.0.0-alpha.39

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 (8) hide show
  1. package/components/Card/card.css +95 -29
  2. package/components/Card/card.scss +142 -37
  3. package/docs/components/Card/examples/Card.md +544 -59
  4. package/package.json +3 -3
  5. package/patternfly-no-globals.css +95 -29
  6. package/patternfly.css +95 -29
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -23,13 +23,23 @@
23
23
  --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
24
24
  --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
25
25
  --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
26
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
26
+ --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
27
+ --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
28
+ --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
29
+ --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
27
30
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
28
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
29
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
30
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
31
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
32
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
31
+ --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
32
+ --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
33
+ --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
34
+ --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
35
+ --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
36
+ --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
37
+ --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
38
+ --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
39
+ --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
40
+ --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
41
+ --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
42
+ --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
33
43
  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
34
44
  --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
35
45
  --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -89,41 +99,49 @@
89
99
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
90
100
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
91
101
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
102
+ position: relative;
92
103
  display: flex;
93
104
  flex-direction: column;
94
105
  background-color: var(--pf-c-card--BackgroundColor);
95
106
  box-shadow: var(--pf-c-card--BoxShadow);
96
107
  }
97
- .pf-c-card.pf-m-hoverable:hover {
98
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
108
+ .pf-c-card.pf-m-selectable, .pf-c-card.pf-m-clickable {
109
+ isolation: isolate;
110
+ box-shadow: none;
99
111
  }
100
- .pf-c-card.pf-m-selectable {
101
- position: relative;
102
- cursor: pointer;
112
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label,
113
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label {
114
+ position: unset;
103
115
  }
104
- .pf-c-card.pf-m-selectable:hover {
105
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
116
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label::before,
117
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label::before {
118
+ position: absolute;
119
+ inset: 0;
120
+ cursor: pointer;
106
121
  }
107
- .pf-c-card.pf-m-selectable:focus {
108
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
122
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
123
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
124
+ --pf-c-card--BackgroundColor: unset;
125
+ --pf-c-card--BorderColor: unset;
109
126
  }
110
- .pf-c-card.pf-m-selectable:active {
111
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
127
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
128
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
129
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
130
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
112
131
  }
113
- .pf-c-card.pf-m-selectable.pf-m-selected {
114
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
132
+ .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
133
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
134
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
115
135
  }
116
- .pf-c-card.pf-m-selectable.pf-m-selected::before {
117
- position: absolute;
118
- top: 0;
119
- right: 0;
120
- left: 0;
121
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
122
- content: "";
123
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
136
+ .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
137
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
138
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
124
139
  }
125
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
126
- position: relative;
140
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
141
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
142
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
143
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
144
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
127
145
  }
128
146
  .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
129
147
  position: absolute;
@@ -276,6 +294,54 @@
276
294
  --pf-c-card__actions--MarginBottom: 0;
277
295
  }
278
296
 
297
+ .pf-c-card__selectable-actions .pf-c-check__label,
298
+ .pf-c-card__selectable-actions .pf-c-radio__label {
299
+ position: absolute;
300
+ inset: 0;
301
+ cursor: pointer;
302
+ }
303
+ .pf-c-card__selectable-actions .pf-c-check__label::before,
304
+ .pf-c-card__selectable-actions .pf-c-radio__label::before {
305
+ position: absolute;
306
+ inset: 0;
307
+ z-index: -1;
308
+ content: "";
309
+ background-color: var(--pf-c-card--BackgroundColor, transparent);
310
+ border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
311
+ box-shadow: var(--pf-c-card--BoxShadow, none);
312
+ }
313
+ .pf-c-card__selectable-actions .pf-c-check__label:hover,
314
+ .pf-c-card__selectable-actions .pf-c-radio__label:hover {
315
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
316
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
317
+ }
318
+
319
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
320
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
321
+ .pf-c-card.pf-m-selected {
322
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
323
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
324
+ }
325
+
326
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
327
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
328
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
329
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
330
+ }
331
+
332
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
333
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
334
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
335
+ }
336
+
337
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
338
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
339
+ .pf-c-card.pf-m-disabled {
340
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
341
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
342
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
343
+ }
344
+
279
345
  .pf-c-card__header,
280
346
  .pf-c-card__title,
281
347
  .pf-c-card__body,
package/components/Card/card.scss CHANGED
@@ -26,16 +26,44 @@
26
26
  --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
27
27
  --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
28
28
 
29
- // Hoverable/selectable
30
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
29
+
30
+ // Selectable/Clickable
31
+ --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
32
+
33
+ // Selected state (checked) of selectable card
34
+ --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
35
+ --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
36
+
37
+ // Hover on selectable card
38
+ --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
31
39
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
32
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
33
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
34
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
35
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
36
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
37
40
 
38
- // Hoverable/selectable raised
41
+ // Focus on selectable card (label)
42
+ --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
43
+ --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
44
+
45
+ // Focus on a selected card (label)
46
+ --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
47
+
48
+ // Disabled state
49
+ --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
50
+ --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
51
+ --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
52
+
53
+ // Selectable AND Clickable
54
+ // Hover on selectable AND clickable card
55
+ --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
56
+ --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
57
+
58
+ // Selected selectable AND clickable card
59
+ --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
60
+ --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
61
+
62
+ // Clicked (pf-m-current) selectable AND clickable card
63
+ --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
64
+ --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
65
+
66
+ // Hoverable/selectable raised (deprecated)
39
67
  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
40
68
  --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
41
69
  --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -108,57 +136,80 @@
108
136
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
109
137
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
110
138
 
111
- // Card input
139
+ // Card input (selectable raised)
112
140
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
113
141
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
114
142
 
143
+ position: relative;
115
144
  display: flex;
116
145
  flex-direction: column;
117
146
  background-color: var(--pf-c-card--BackgroundColor);
118
147
  box-shadow: var(--pf-c-card--BoxShadow);
119
148
 
120
- &.pf-m-hoverable {
121
- &:hover {
122
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
123
- }
149
+ // SELECTABLE CARDS, CLICKABLE CARDS
150
+ &.pf-m-selectable,
151
+ &.pf-m-clickable {
152
+ isolation: isolate;
153
+ box-shadow: none; // box-shadow will come from the input's ::before instead of the card so remove this so there's isn't a double shadow
124
154
  }
125
155
 
126
- &.pf-m-selectable {
127
- position: relative;
128
- cursor: pointer;
129
-
130
- &:hover {
131
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
132
- }
133
-
134
- &:focus {
135
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
156
+ // stylelint-disable selector-max-class
157
+ // Cards that are selectable AND clickable
158
+ &.pf-m-selectable.pf-m-clickable {
159
+ .pf-c-card__selectable-actions .pf-c-check__label,
160
+ .pf-c-card__selectable-actions .pf-c-radio__label {
161
+ position: unset;
162
+
163
+ &::before {
164
+ position: absolute;
165
+ inset: 0;
166
+ cursor: pointer;
167
+ }
136
168
  }
137
169
 
138
- &:active {
139
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
170
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
171
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
172
+ --pf-c-card--BackgroundColor: unset;
173
+ --pf-c-card--BorderColor: unset;
140
174
  }
141
175
 
176
+ // Card is selected
177
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
178
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
142
179
  &.pf-m-selected {
143
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
180
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
181
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
182
+ }
144
183
 
145
- &::before {
146
- position: absolute;
147
- top: 0;
148
- right: 0;
149
- left: 0;
150
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
151
- content: "";
152
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
184
+ // Card is clicked
185
+ &.pf-m-current {
186
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
187
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
188
+
189
+ // a selected card is clicked
190
+ &.pf-m-selected,
191
+ & .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
192
+ & .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
193
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
194
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
153
195
  }
154
196
  }
155
- }
156
197
 
198
+ // Disabled card
199
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
200
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
201
+ &.pf-m-disabled {
202
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
203
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
204
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
205
+ }
206
+ }
207
+ // stylelint-enable selector-max-class
208
+
209
+ // RAISED CARDS
157
210
  &.pf-m-hoverable-raised,
158
211
  &.pf-m-selectable-raised,
159
212
  &.pf-m-non-selectable-raised {
160
- position: relative;
161
-
162
213
  &::before {
163
214
  position: absolute;
164
215
  right: var(--pf-c-card--m-selectable-raised--before--Right);
@@ -345,6 +396,59 @@
345
396
  }
346
397
  }
347
398
 
399
+ // Labels are used to handle states of selectable and clickable cards
400
+ .pf-c-card__selectable-actions .pf-c-check__label,
401
+ .pf-c-card__selectable-actions .pf-c-radio__label {
402
+ position: absolute;
403
+ inset: 0;
404
+ cursor: pointer;
405
+
406
+ &::before {
407
+ position: absolute;
408
+ inset: 0;
409
+ z-index: -1;
410
+ content: '';
411
+ background-color: var(--pf-c-card--BackgroundColor, transparent);
412
+ border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
413
+ box-shadow: var(--pf-c-card--BoxShadow, none);
414
+ }
415
+
416
+ &:hover {
417
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
418
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
419
+ }
420
+ }
421
+
422
+ // Selected card
423
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
424
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
425
+ .pf-c-card.pf-m-selected {
426
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
427
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
428
+ }
429
+
430
+ // Focus on the card (label)
431
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
432
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
433
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
434
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
435
+ }
436
+
437
+ // Focus on a selected card
438
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
439
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
440
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
441
+ }
442
+
443
+ // Disabled card
444
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
445
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
446
+ .pf-c-card.pf-m-disabled {
447
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
448
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
449
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
450
+ }
451
+
348
452
  .pf-c-card__header,
349
453
  .pf-c-card__title,
350
454
  .pf-c-card__body,
@@ -381,6 +485,7 @@
381
485
  font-size: var(--pf-c-card__footer--FontSize);
382
486
  }
383
487
 
488
+ // for the selectable raised
384
489
  .pf-c-card__sr-input:focus + .pf-c-card::after {
385
490
  position: absolute;
386
491
  top: 0;