@patternfly/patternfly 4.160.1 → 4.162.2

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 (66) hide show
  1. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Black.woff2 +0 -0
  2. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BlackItalic.woff2 +0 -0
  3. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2 +0 -0
  4. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BoldItalic.woff2 +0 -0
  5. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Light.woff2 +0 -0
  7. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-LightItalic.woff2 +0 -0
  8. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2 +0 -0
  9. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-MediumItalic.woff2 +0 -0
  10. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2 +0 -0
  11. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated-Italic.woff2 +0 -0
  12. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated.woff2 +0 -0
  13. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Bold.woff2 +0 -0
  14. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-BoldItalic.woff2 +0 -0
  15. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Italic.woff2 +0 -0
  16. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Light.woff2 +0 -0
  17. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-LightItalic.woff2 +0 -0
  18. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Medium.woff2 +0 -0
  19. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-MediumItalic.woff2 +0 -0
  20. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2 +0 -0
  21. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2 +0 -0
  22. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2 +0 -0
  23. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Bold.woff2 +0 -0
  24. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-BoldItalic.woff2 +0 -0
  25. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Italic.woff2 +0 -0
  26. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Light.woff2 +0 -0
  27. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-LightItalic.woff2 +0 -0
  28. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2 +0 -0
  29. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-MediumItalic.woff2 +0 -0
  30. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2 +0 -0
  31. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated-Italic.woff2 +0 -0
  32. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated.woff2 +0 -0
  33. package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2 +0 -0
  34. package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2 +0 -0
  35. package/assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2 +0 -0
  36. package/assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2 +0 -0
  37. package/base/_common.scss +5 -1
  38. package/base/_fonts.scss +100 -0
  39. package/base/_variables.scss +25 -1
  40. package/base/patternfly-common.css +4 -0
  41. package/base/patternfly-fonts.css +84 -0
  42. package/base/patternfly-variables.css +21 -0
  43. package/components/DataList/data-list.scss +1 -1
  44. package/components/DescriptionList/description-list.css +14 -0
  45. package/components/DescriptionList/description-list.scss +19 -0
  46. package/components/Dropdown/dropdown.css +15 -7
  47. package/components/Dropdown/dropdown.scss +24 -13
  48. package/components/Table/table.css +14 -3
  49. package/components/Table/table.scss +16 -3
  50. package/components/_all.scss +88 -88
  51. package/docs/components/DescriptionList/examples/DescriptionList.md +174 -0
  52. package/docs/components/Dropdown/examples/Dropdown.md +90 -0
  53. package/docs/components/Table/examples/Table.md +1079 -925
  54. package/docs/demos/Table/examples/Table.md +100 -100
  55. package/package.json +7 -7
  56. package/patternfly-addons.scss +10 -10
  57. package/patternfly-base-no-reset.css +109 -0
  58. package/patternfly-base-no-reset.scss +1 -1
  59. package/patternfly-base.css +109 -0
  60. package/patternfly-no-reset.css +152 -10
  61. package/patternfly-no-reset.scss +1 -1
  62. package/patternfly.css +152 -10
  63. package/patternfly.min.css +1 -1
  64. package/patternfly.min.css.map +1 -1
  65. package/patternfly.scss +1 -1
  66. package/sass-utilities/scss-variables.scss +6 -0
package/base/_common.scss CHANGED
@@ -17,9 +17,13 @@
17
17
  html {
18
18
  font-size: unset !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
19
19
  }
20
+ // stylelint-enable
20
21
  }
21
22
 
22
23
  .pf-screen-reader {
23
24
  @include pf-u-screen-reader; // for use with assistive technologies
24
25
  }
25
- // stylelint-enable
26
+
27
+ .pf-m-tabular-nums {
28
+ font-variant-numeric: tabular-nums;
29
+ }
package/base/_fonts.scss CHANGED
@@ -56,6 +56,106 @@
56
56
  text-rendering: optimizeLegibility;
57
57
  }
58
58
 
59
+ // RedHatFont-updated
60
+ @font-face {
61
+ font-family: "RedHatDisplayUpdated";
62
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
63
+ font-style: normal;
64
+ font-weight: 300;
65
+ text-rendering: optimizeLegibility;
66
+ }
67
+
68
+ @font-face {
69
+ font-family: "RedHatDisplayUpdated";
70
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
71
+ font-style: normal;
72
+ font-weight: 400;
73
+ text-rendering: optimizeLegibility;
74
+ }
75
+
76
+ @font-face {
77
+ font-family: "RedHatDisplayUpdated";
78
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
79
+ font-style: normal;
80
+ font-weight: 700;
81
+ text-rendering: optimizeLegibility;
82
+ }
83
+
84
+ @font-face {
85
+ font-family: "RedHatTextUpdated";
86
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
87
+ font-style: normal;
88
+ font-weight: 400;
89
+ text-rendering: optimizeLegibility;
90
+ }
91
+
92
+ @font-face {
93
+ font-family: "RedHatTextUpdated";
94
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
95
+ font-style: normal;
96
+ font-weight: 700;
97
+ text-rendering: optimizeLegibility;
98
+ }
99
+
100
+ // RedHatMono
101
+ @font-face {
102
+ font-family: "RedHatMono";
103
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
104
+ font-style: normal;
105
+ font-weight: 400;
106
+ font-display: fallback;
107
+ }
108
+
109
+ // Variable fonts
110
+ @font-face {
111
+ font-family: "RedHatDisplayVF";
112
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
113
+ font-style: normal;
114
+ font-weight: 300 900;
115
+ font-display: fallback;
116
+ }
117
+
118
+ @font-face {
119
+ font-family: "RedHatDisplayVF";
120
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
121
+ font-style: italic;
122
+ font-weight: 300 900;
123
+ font-display: fallback;
124
+ }
125
+
126
+ @font-face {
127
+ font-family: "RedHatTextVF";
128
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
129
+ font-style: normal;
130
+ font-weight: 400 500;
131
+ font-display: fallback;
132
+ }
133
+
134
+ @font-face {
135
+ font-family: "RedHatTextVF";
136
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
137
+ font-style: italic;
138
+ font-weight: 400 500;
139
+ font-display: fallback;
140
+ }
141
+
142
+ @font-face {
143
+ font-family: "RedHatMonoVF";
144
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
145
+ font-style: normal;
146
+ font-weight: 300 700;
147
+ font-display: fallback;
148
+ }
149
+
150
+ @font-face {
151
+ font-family: "RedHatMonoVF";
152
+ src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
153
+ font-style: italic;
154
+ font-weight: 300 700;
155
+ font-display: fallback;
156
+ }
157
+
158
+
59
159
  @if $pf-global--enable-font-overpass-cdn {
60
160
  @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
61
161
  } @else {
@@ -234,6 +234,12 @@
234
234
  --pf-global--FontFamily--sans-serif: #{$pf-global--FontFamily--sans-serif};
235
235
  --pf-global--FontFamily--heading--sans-serif: #{$pf-global--FontFamily--heading--sans-serif};
236
236
  --pf-global--FontFamily--monospace: #{$pf-global--FontFamily--monospace};
237
+ --pf-global--FontFamily--redhat-updated--sans-serif: #{$pf-global--FontFamily--redhat-updated--sans-serif};
238
+ --pf-global--FontFamily--redhat-updated--heading--sans-serif: #{$pf-global--FontFamily--redhat-updated--heading--sans-serif};
239
+ --pf-global--FontFamily--redhat--monospace: #{$pf-global--FontFamily--redhat--monospace};
240
+ --pf-global--FontFamily--redhatVF--sans-serif: #{$pf-global--FontFamily--redhatVF--sans-serif};
241
+ --pf-global--FontFamily--redhatVF--heading--sans-serif: #{$pf-global--FontFamily--redhatVF--heading--sans-serif};
242
+ --pf-global--FontFamily--redhatVF--monospace: #{$pf-global--FontFamily--redhatVF--monospace};
237
243
  --pf-global--FontFamily--overpass--sans-serif: #{$pf-global--FontFamily--overpass--sans-serif};
238
244
  --pf-global--FontFamily--overpass--monospace: #{$pf-global--FontFamily--overpass--monospace};
239
245
 
@@ -274,7 +280,7 @@
274
280
  --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
275
281
  }
276
282
 
277
- // RedHat Font overrides
283
+ // Overpass font overrides
278
284
  @include pf-m-overpass-font {
279
285
  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
280
286
  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
@@ -282,3 +288,21 @@
282
288
  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
283
289
  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
284
290
  }
291
+
292
+ // RedHatFont updated font overrides
293
+ .pf-m-redhat-updated-font {
294
+ --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
295
+ --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
296
+ }
297
+
298
+ // RedHatMono font overrides
299
+ .pf-m-redhatmono-font {
300
+ --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhat--monospace);
301
+ }
302
+
303
+ // RedHat variable font overrides
304
+ .pf-m-redhatVF-font {
305
+ --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
306
+ --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
307
+ --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
308
+ }
@@ -16,4 +16,8 @@ html {
16
16
  clip: rect(0, 0, 0, 0);
17
17
  white-space: nowrap;
18
18
  border: 0;
19
+ }
20
+
21
+ .pf-m-tabular-nums {
22
+ font-variant-numeric: tabular-nums;
19
23
  }
@@ -33,6 +33,90 @@
33
33
  font-weight: 700;
34
34
  text-rendering: optimizeLegibility;
35
35
  }
36
+ @font-face {
37
+ font-family: "RedHatDisplayUpdated";
38
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
39
+ font-style: normal;
40
+ font-weight: 300;
41
+ text-rendering: optimizeLegibility;
42
+ }
43
+ @font-face {
44
+ font-family: "RedHatDisplayUpdated";
45
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
46
+ font-style: normal;
47
+ font-weight: 400;
48
+ text-rendering: optimizeLegibility;
49
+ }
50
+ @font-face {
51
+ font-family: "RedHatDisplayUpdated";
52
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
53
+ font-style: normal;
54
+ font-weight: 700;
55
+ text-rendering: optimizeLegibility;
56
+ }
57
+ @font-face {
58
+ font-family: "RedHatTextUpdated";
59
+ src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
60
+ font-style: normal;
61
+ font-weight: 400;
62
+ text-rendering: optimizeLegibility;
63
+ }
64
+ @font-face {
65
+ font-family: "RedHatTextUpdated";
66
+ src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
67
+ font-style: normal;
68
+ font-weight: 700;
69
+ text-rendering: optimizeLegibility;
70
+ }
71
+ @font-face {
72
+ font-family: "RedHatMono";
73
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
74
+ font-style: normal;
75
+ font-weight: 400;
76
+ font-display: fallback;
77
+ }
78
+ @font-face {
79
+ font-family: "RedHatDisplayVF";
80
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
81
+ font-style: normal;
82
+ font-weight: 300 900;
83
+ font-display: fallback;
84
+ }
85
+ @font-face {
86
+ font-family: "RedHatDisplayVF";
87
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
88
+ font-style: italic;
89
+ font-weight: 300 900;
90
+ font-display: fallback;
91
+ }
92
+ @font-face {
93
+ font-family: "RedHatTextVF";
94
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
95
+ font-style: normal;
96
+ font-weight: 400 500;
97
+ font-display: fallback;
98
+ }
99
+ @font-face {
100
+ font-family: "RedHatTextVF";
101
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
102
+ font-style: italic;
103
+ font-weight: 400 500;
104
+ font-display: fallback;
105
+ }
106
+ @font-face {
107
+ font-family: "RedHatMonoVF";
108
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
109
+ font-style: normal;
110
+ font-weight: 300 700;
111
+ font-display: fallback;
112
+ }
113
+ @font-face {
114
+ font-family: "RedHatMonoVF";
115
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
116
+ font-style: italic;
117
+ font-weight: 300 700;
118
+ font-display: fallback;
119
+ }
36
120
  @font-face {
37
121
  font-family: "overpass";
38
122
  font-style: normal;
@@ -198,6 +198,12 @@
198
198
  --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
199
199
  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
200
200
  --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
201
+ --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
202
+ --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
203
+ --pf-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
204
+ --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
205
+ --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
206
+ --pf-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
201
207
  --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
202
208
  --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
203
209
  --pf-global--FontSize--4xl: 2.25rem;
@@ -232,4 +238,19 @@
232
238
  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
233
239
  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
234
240
  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
241
+ }
242
+
243
+ .pf-m-redhat-updated-font {
244
+ --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
245
+ --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
246
+ }
247
+
248
+ .pf-m-redhatmono-font {
249
+ --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhat--monospace);
250
+ }
251
+
252
+ .pf-m-redhatVF-font {
253
+ --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
254
+ --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
255
+ --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
235
256
  }
@@ -1,4 +1,4 @@
1
- @import "./data-list-grid.scss";
1
+ @import "./data-list-grid";
2
2
 
3
3
  .pf-c-data-list {
4
4
  --pf-c-data-list--FontSize: 1em; // inherit font-size, update this to global variable at breaking change
@@ -104,6 +104,20 @@
104
104
  .pf-c-description-list.pf-m-fluid {
105
105
  --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
106
106
  }
107
+ .pf-c-description-list.pf-m-fill-columns {
108
+ display: block;
109
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
110
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
111
+ }
112
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
113
+ display: inline-grid;
114
+ width: 100%;
115
+ margin-bottom: var(--pf-c-description-list--RowGap);
116
+ break-inside: avoid;
117
+ page-break-inside: avoid;
118
+ -webkit-column-break-inside: avoid;
119
+ -moz-column-break-inside: avoid;
120
+ }
107
121
 
108
122
  .pf-c-description-list__group {
109
123
  display: grid;
@@ -77,6 +77,25 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
77
77
  &.pf-m-fluid {
78
78
  --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
79
79
  }
80
+
81
+ &.pf-m-fill-columns {
82
+ display: block;
83
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
84
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
85
+
86
+ .pf-c-description-list__group {
87
+ display: inline-grid;
88
+ width: 100%;
89
+ margin-bottom: var(--pf-c-description-list--RowGap);
90
+ break-inside: avoid;
91
+ page-break-inside: avoid;
92
+
93
+ // stylelint-disable property-no-vendor-prefix
94
+ -webkit-column-break-inside: avoid;
95
+ -moz-column-break-inside: avoid;
96
+ // stylelint-enable
97
+ }
98
+ }
80
99
  }
81
100
 
82
101
  .pf-c-description-list__group {
@@ -191,6 +191,7 @@
191
191
  border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
192
192
  }
193
193
  .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
194
+ --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
194
195
  pointer-events: none;
195
196
  }
196
197
  .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
@@ -202,13 +203,15 @@
202
203
  .pf-c-dropdown__toggle.pf-m-split-button {
203
204
  padding: 0;
204
205
  }
206
+ .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
207
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
208
+ }
205
209
  .pf-c-dropdown__toggle.pf-m-split-button > * {
206
210
  position: relative;
207
211
  padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
208
212
  padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
209
213
  padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
210
214
  padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
211
- background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
212
215
  }
213
216
  .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
214
217
  --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -232,6 +235,9 @@
232
235
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
233
236
  border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
234
237
  }
238
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
239
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
240
+ }
235
241
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
236
242
  display: flex;
237
243
  align-items: center;
@@ -308,12 +314,12 @@
308
314
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
309
315
  }
310
316
  .pf-c-dropdown__toggle.pf-m-primary {
311
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
312
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
313
317
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
314
318
  }
315
- .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
319
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
316
320
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
321
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
322
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
317
323
  }
318
324
  .pf-c-dropdown__toggle.pf-m-primary::before {
319
325
  border: 0;
@@ -327,15 +333,17 @@
327
333
  .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
328
334
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
329
335
  }
330
- .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
336
+ .pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
331
337
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
332
338
  }
333
339
  .pf-c-dropdown__toggle.pf-m-secondary {
340
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
341
+ }
342
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
334
343
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
335
344
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
336
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
337
345
  }
338
- .pf-c-dropdown__toggle.pf-m-secondary::before {
346
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
339
347
  border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
340
348
  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
341
349
  }
@@ -247,6 +247,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
247
247
 
248
248
  &.pf-m-disabled,
249
249
  &:disabled {
250
+ --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
251
+
250
252
  pointer-events: none;
251
253
 
252
254
  &:not(.pf-m-plain) {
@@ -261,13 +263,16 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
261
263
  &.pf-m-split-button {
262
264
  padding: 0;
263
265
 
266
+ &:not(.pf-m-disabled) {
267
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
268
+ }
269
+
264
270
  > * {
265
271
  position: relative;
266
272
  padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
267
273
  padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
268
274
  padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
269
275
  padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
270
- background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
271
276
 
272
277
  &:first-child {
273
278
  --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -297,10 +302,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
297
302
  }
298
303
 
299
304
  &.pf-m-primary {
300
- // stylelint-disable max-nesting-depth
305
+ // stylelint-disable max-nesting-depth, selector-max-class
301
306
  > :not(:first-child) {
302
307
  border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
303
308
  }
309
+
310
+ &.pf-m-disabled,
311
+ &[disabled] {
312
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
313
+ }
304
314
  // stylelint-enable
305
315
  }
306
316
  }
@@ -426,11 +436,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
426
436
  }
427
437
 
428
438
  &.pf-m-primary {
429
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
430
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
431
-
432
- &:not(.pf-m-disabled) {
439
+ &:not(.pf-m-disabled):not([disabled]) {
433
440
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
441
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
442
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
434
443
  }
435
444
 
436
445
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
@@ -452,20 +461,22 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
452
461
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
453
462
  }
454
463
 
455
- .pf-m-expanded > & {
464
+ .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
456
465
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
457
466
  }
458
467
  }
459
468
 
460
469
  &.pf-m-secondary {
461
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
462
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
463
-
464
470
  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
465
471
 
466
- &::before {
467
- border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
468
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
472
+ &:not(.pf-m-disabled):not([disabled]) {
473
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
474
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
475
+
476
+ &::before {
477
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
478
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
479
+ }
469
480
  }
470
481
 
471
482
  &:hover {
@@ -394,9 +394,14 @@
394
394
  outline-offset: var(--pf-c-table--thead--m-nested-column-header--button--OutlineOffset);
395
395
  }
396
396
  .pf-c-table thead.pf-m-nested-column-header th,
397
- .pf-c-table thead.pf-m-nested-column-header td {
397
+ .pf-c-table thead.pf-m-nested-column-header td,
398
+ .pf-c-table thead.pf-m-nested-column-header input {
398
399
  vertical-align: middle;
399
400
  }
401
+ .pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
402
+ display: flex;
403
+ align-items: center;
404
+ }
400
405
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
401
406
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
402
407
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -429,7 +434,7 @@
429
434
  background-color: transparent;
430
435
  border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
431
436
  }
432
- .pf-c-table tbody .pf-c-table__check > input {
437
+ .pf-c-table tbody .pf-c-table__check input {
433
438
  margin-top: var(--pf-c-table__check--input--MarginTop);
434
439
  vertical-align: top;
435
440
  }
@@ -716,9 +721,15 @@
716
721
  .pf-c-table__check {
717
722
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
718
723
  }
719
- .pf-c-table__check > input:not([disabled]) {
724
+ .pf-c-table__check label:not([disabled]),
725
+ .pf-c-table__check input:not([disabled]) {
720
726
  cursor: pointer;
721
727
  }
728
+ .pf-c-table__check label {
729
+ display: block;
730
+ padding: inherit;
731
+ margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
732
+ }
722
733
 
723
734
  .pf-c-table__favorite .pf-c-button {
724
735
  --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);