@patternfly/patternfly 5.0.0-alpha.37 → 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 (15) hide show
  1. package/components/Card/card.css +95 -29
  2. package/components/Card/card.scss +142 -37
  3. package/components/DataList/data-list.css +34 -29
  4. package/components/DataList/data-list.scss +32 -24
  5. package/components/Table/table.css +60 -63
  6. package/components/Table/table.scss +56 -60
  7. package/docs/components/Card/examples/Card.md +544 -59
  8. package/docs/components/DataList/examples/DataList.md +52 -54
  9. package/docs/components/Table/examples/Table.md +136 -2125
  10. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +189 -121
  13. package/patternfly.css +189 -121
  14. package/patternfly.min.css +1 -1
  15. 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;
package/components/DataList/data-list.css CHANGED
@@ -498,25 +498,25 @@
498
498
  --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
499
499
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
500
500
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
501
+ --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
501
502
  --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
502
503
  --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
503
504
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
504
505
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
505
506
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
506
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
507
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
508
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
509
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
510
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
511
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
507
+ --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
508
+ --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
509
+ --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
510
+ --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
511
+ --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
512
512
  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
513
513
  --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
514
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
515
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
514
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
515
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
516
516
  --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
517
517
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
518
518
  --pf-c-data-list__item--before--BackgroundColor: transparent;
519
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
519
+ --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
520
520
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
521
521
  --pf-c-data-list__item--before--Top: 0;
522
522
  --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -576,8 +576,6 @@
576
576
  --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
577
577
  --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
578
578
  --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
579
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
580
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
581
579
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
582
580
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
583
581
  --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
@@ -709,28 +707,28 @@
709
707
  background-color: var(--pf-c-data-list__item--before--BackgroundColor);
710
708
  transition: var(--pf-c-data-list__item--before--Transition);
711
709
  }
712
- .pf-c-data-list__item.pf-m-selectable {
710
+ .pf-c-data-list__item.pf-m-clickable {
713
711
  cursor: pointer;
714
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
712
+ outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
715
713
  }
716
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
714
+ .pf-c-data-list__item.pf-m-clickable:hover, .pf-c-data-list__item.pf-m-clickable:focus {
717
715
  position: relative;
718
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
716
+ z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
719
717
  }
720
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
718
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) {
721
719
  --pf-c-data-list__item--BorderBottomWidth: 0;
722
720
  }
723
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
724
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
721
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
722
+ border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
725
723
  }
726
- .pf-c-data-list__item.pf-m-selectable:hover {
727
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
724
+ .pf-c-data-list__item.pf-m-clickable:hover {
725
+ box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
728
726
  }
729
- .pf-c-data-list__item.pf-m-selectable:focus {
730
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
727
+ .pf-c-data-list__item.pf-m-clickable:focus {
728
+ box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
731
729
  }
732
- .pf-c-data-list__item.pf-m-selectable:active {
733
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
730
+ .pf-c-data-list__item.pf-m-clickable:active {
731
+ box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
734
732
  }
735
733
  .pf-c-data-list__item.pf-m-selected {
736
734
  --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
@@ -750,10 +748,6 @@
750
748
  }
751
749
  .pf-c-data-list__item.pf-m-expanded {
752
750
  --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
753
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
754
- }
755
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
756
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
757
751
  }
758
752
 
759
753
  .pf-c-data-list__item-row {
@@ -885,11 +879,22 @@
885
879
  .pf-c-data-list__expandable-content {
886
880
  max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
887
881
  overflow-y: auto;
888
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
889
882
  }
890
883
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
891
884
  padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
892
885
  }
886
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body > .pf-c-data-list {
887
+ margin-left: var(--pf-c-data-list--MarginLeft);
888
+ }
889
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item:last-child {
890
+ border-bottom: 0;
891
+ }
892
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item-row {
893
+ --pf-c-data-list__item-row--PaddingLeft: 0;
894
+ }
895
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__expandable-content-body {
896
+ --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
897
+ }
893
898
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
894
899
  padding: 0;
895
900
  }
package/components/DataList/data-list.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
8
8
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9
9
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
10
11
 
11
12
  @media screen and (min-width: $pf-global--breakpoint--sm) {
12
13
  --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
@@ -19,16 +20,15 @@
19
20
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
20
21
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
21
22
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
22
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
23
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
24
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
25
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
26
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
27
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
23
+ --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
24
+ --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
25
+ --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
26
+ --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
27
+ --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
28
28
  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
29
29
  --pf-c-data-list__item--BorderBottomWidth: #{pf-size-prem(8px)};
30
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
31
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
30
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
31
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
32
32
  --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
33
33
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
34
34
 
@@ -39,7 +39,7 @@
39
39
 
40
40
  // list item border left
41
41
  --pf-c-data-list__item--before--BackgroundColor: transparent;
42
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
42
+ --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
43
43
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
44
44
  --pf-c-data-list__item--before--Top: 0;
45
45
  --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -122,8 +122,6 @@
122
122
  --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
123
123
 
124
124
  // expandable content
125
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
126
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
127
125
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
128
126
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
129
127
  --pf-c-data-list__expandable-content--MaxHeight: #{pf-size-prem(600px)};
@@ -247,14 +245,14 @@
247
245
  transition: var(--pf-c-data-list__item--before--Transition);
248
246
  }
249
247
 
250
- &.pf-m-selectable {
248
+ &.pf-m-clickable {
251
249
  cursor: pointer;
252
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
250
+ outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
253
251
 
254
252
  &:hover,
255
253
  &:focus {
256
254
  position: relative;
257
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
255
+ z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
258
256
 
259
257
  // stylelint-disable selector-not-notation
260
258
  // update to single :not() in breaking change
@@ -263,22 +261,22 @@
263
261
 
264
262
  // stylelint-disable
265
263
  + .pf-c-data-list__item {
266
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
264
+ border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
267
265
  }
268
266
  // stylelint-enable
269
267
  }
270
268
  }
271
269
 
272
270
  &:hover {
273
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
271
+ box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
274
272
  }
275
273
 
276
274
  &:focus {
277
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
275
+ box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
278
276
  }
279
277
 
280
278
  &:active {
281
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
279
+ box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
282
280
  }
283
281
  }
284
282
 
@@ -305,11 +303,6 @@
305
303
 
306
304
  &.pf-m-expanded {
307
305
  --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
308
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
309
-
310
- &.pf-m-selectable:not(.pf-m-selected) {
311
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
312
- }
313
306
  }
314
307
  }
315
308
 
@@ -465,11 +458,26 @@
465
458
  .pf-c-data-list__expandable-content {
466
459
  max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
467
460
  overflow-y: auto;
468
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
469
461
 
470
462
  .pf-c-data-list__expandable-content-body {
471
463
  padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
472
464
 
465
+ > .pf-c-data-list {
466
+ margin-left: var(--pf-c-data-list--MarginLeft);
467
+ }
468
+
469
+ .pf-c-data-list__item:last-child {
470
+ border-bottom: 0;
471
+ }
472
+
473
+ .pf-c-data-list__item-row {
474
+ --pf-c-data-list__item-row--PaddingLeft: 0;
475
+ }
476
+
477
+ .pf-c-data-list__expandable-content-body {
478
+ --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
479
+ }
480
+
473
481
  &.pf-m-no-padding {
474
482
  padding: 0;
475
483
  }