@patternfly/patternfly 4.191.0 → 4.192.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/Divider/divider.css +159 -13
  2. package/components/Divider/divider.scss +74 -28
  3. package/docs/components/Divider/examples/Divider.css +11 -5
  4. package/docs/components/Divider/examples/Divider.md +14 -0
  5. package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +159 -13
  8. package/patternfly.css +159 -13
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Divider/divider.css CHANGED
@@ -63,42 +63,58 @@
63
63
  }
64
64
 
65
65
  .pf-c-divider {
66
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
66
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
67
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
68
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
67
69
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
68
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
69
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
70
- --pf-c-divider--Display: flex;
70
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
71
71
  --pf-c-divider--after--FlexBasis: 100%;
72
72
  --pf-c-divider--after--Inset: 0%;
73
73
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
74
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
74
+ --pf-c-divider--m-horizontal--Display: flex;
75
+ --pf-c-divider--m-horizontal--FlexDirection: row;
76
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
77
+ --pf-c-divider--m-horizontal--after--Width: auto;
78
+ --pf-c-divider--m-vertical--Display: inline-flex;
79
+ --pf-c-divider--m-vertical--FlexDirection: column;
80
+ --pf-c-divider--m-vertical--after--Height: auto;
81
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
75
82
  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
83
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
84
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
85
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
86
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
87
+ width: 100%;
88
+ height: auto;
89
+ display: var(--pf-c-divider--Display);
90
+ flex-direction: var(--pf-c-divider--FlexDirection);
76
91
  align-items: center;
77
92
  align-self: stretch;
78
93
  flex-shrink: 0;
79
94
  justify-content: center;
80
- width: 100%;
81
95
  border: 0;
82
96
  }
83
97
  .pf-c-divider::after {
84
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
98
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
99
+ }
100
+ .pf-c-divider::after {
85
101
  align-self: stretch;
102
+ width: var(--pf-c-divider--after--Width);
86
103
  height: var(--pf-c-divider--after--Height);
87
104
  content: "";
88
105
  background-color: var(--pf-c-divider--after--BackgroundColor);
89
106
  justify-self: center;
90
107
  }
91
108
  .pf-c-divider.pf-m-vertical {
92
- display: inline-flex;
93
- flex-direction: column;
109
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
110
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
111
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
112
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
94
113
  width: auto;
95
114
  height: inherit;
96
- min-height: 100%;
97
- max-height: 100%;
98
115
  }
99
116
  .pf-c-divider.pf-m-vertical::after {
100
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
101
- width: var(--pf-c-divider--m-vertical--after--Width);
117
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
102
118
  }
103
119
  .pf-c-divider.pf-m-inset-none {
104
120
  --pf-c-divider--after--Inset: 0%;
@@ -124,6 +140,32 @@
124
140
  .pf-c-divider.pf-m-inset-3xl {
125
141
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
126
142
  }
143
+ @media (min-width: 576px) {
144
+ .pf-c-divider.pf-m-horizontal-on-sm {
145
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
146
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
147
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
148
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
149
+ width: 100%;
150
+ height: auto;
151
+ }
152
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
153
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
154
+ }
155
+ }
156
+ @media (min-width: 576px) {
157
+ .pf-c-divider.pf-m-vertical-on-sm {
158
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
159
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
160
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
161
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
162
+ width: auto;
163
+ height: inherit;
164
+ }
165
+ .pf-c-divider.pf-m-vertical-on-sm::after {
166
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
167
+ }
168
+ }
127
169
  @media (min-width: 576px) {
128
170
  .pf-c-divider.pf-m-inset-none-on-sm {
129
171
  --pf-c-divider--after--Inset: 0%;
@@ -150,6 +192,32 @@
150
192
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
151
193
  }
152
194
  }
195
+ @media (min-width: 768px) {
196
+ .pf-c-divider.pf-m-horizontal-on-md {
197
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
198
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
199
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
200
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
201
+ width: 100%;
202
+ height: auto;
203
+ }
204
+ .pf-c-divider.pf-m-horizontal-on-md::after {
205
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
206
+ }
207
+ }
208
+ @media (min-width: 768px) {
209
+ .pf-c-divider.pf-m-vertical-on-md {
210
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
211
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
212
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
213
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
214
+ width: auto;
215
+ height: inherit;
216
+ }
217
+ .pf-c-divider.pf-m-vertical-on-md::after {
218
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
219
+ }
220
+ }
153
221
  @media (min-width: 768px) {
154
222
  .pf-c-divider.pf-m-inset-none-on-md {
155
223
  --pf-c-divider--after--Inset: 0%;
@@ -176,6 +244,32 @@
176
244
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
177
245
  }
178
246
  }
247
+ @media (min-width: 992px) {
248
+ .pf-c-divider.pf-m-horizontal-on-lg {
249
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
250
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
251
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
252
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
253
+ width: 100%;
254
+ height: auto;
255
+ }
256
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
257
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
258
+ }
259
+ }
260
+ @media (min-width: 992px) {
261
+ .pf-c-divider.pf-m-vertical-on-lg {
262
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
263
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
264
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
265
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
266
+ width: auto;
267
+ height: inherit;
268
+ }
269
+ .pf-c-divider.pf-m-vertical-on-lg::after {
270
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
271
+ }
272
+ }
179
273
  @media (min-width: 992px) {
180
274
  .pf-c-divider.pf-m-inset-none-on-lg {
181
275
  --pf-c-divider--after--Inset: 0%;
@@ -202,6 +296,32 @@
202
296
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
203
297
  }
204
298
  }
299
+ @media (min-width: 1200px) {
300
+ .pf-c-divider.pf-m-horizontal-on-xl {
301
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
302
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
303
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
304
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
305
+ width: 100%;
306
+ height: auto;
307
+ }
308
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
309
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
310
+ }
311
+ }
312
+ @media (min-width: 1200px) {
313
+ .pf-c-divider.pf-m-vertical-on-xl {
314
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
315
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
316
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
317
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
318
+ width: auto;
319
+ height: inherit;
320
+ }
321
+ .pf-c-divider.pf-m-vertical-on-xl::after {
322
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
323
+ }
324
+ }
205
325
  @media (min-width: 1200px) {
206
326
  .pf-c-divider.pf-m-inset-none-on-xl {
207
327
  --pf-c-divider--after--Inset: 0%;
@@ -228,6 +348,32 @@
228
348
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
229
349
  }
230
350
  }
351
+ @media (min-width: 1450px) {
352
+ .pf-c-divider.pf-m-horizontal-on-2xl {
353
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
354
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
355
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
356
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
357
+ width: 100%;
358
+ height: auto;
359
+ }
360
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
361
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
362
+ }
363
+ }
364
+ @media (min-width: 1450px) {
365
+ .pf-c-divider.pf-m-vertical-on-2xl {
366
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
367
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
368
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
369
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
370
+ width: auto;
371
+ height: inherit;
372
+ }
373
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
374
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
375
+ }
376
+ }
231
377
  @media (min-width: 1450px) {
232
378
  .pf-c-divider.pf-m-inset-none-on-2xl {
233
379
  --pf-c-divider--after--Inset: 0%;
package/components/Divider/divider.scss CHANGED
@@ -1,62 +1,107 @@
1
1
  $pf-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
2
2
  $pf-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
3
3
 
4
- .pf-c-divider {
5
- // update during breaking change
6
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
7
- --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
8
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
9
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
4
+ @mixin pf-c-divider--m-horizontal {
5
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
7
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
8
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
9
+
10
+ width: 100%; // update to var breaking change
11
+ height: auto; // update to var breaking change
12
+
13
+ &::after {
14
+ flex-basis:
15
+ calc(
16
+ var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2)
17
+ ); // update at breaking change
18
+ }
19
+ }
20
+
21
+ @mixin pf-c-divider--m-vertical {
22
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
23
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
24
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
25
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
10
26
 
11
- // end - update during breaking change
27
+ width: auto; // update to var breaking change
28
+ height: inherit; // update to var at breaking change
12
29
 
13
- --pf-c-divider--Display: flex;
30
+ &::after {
31
+ flex-basis:
32
+ calc(
33
+ var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset)
34
+ ); // update at breaking change
35
+ }
36
+ }
14
37
 
15
- // After
38
+ .pf-c-divider {
39
+ // Base
40
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
41
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor); // update at breaking change
42
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base); // remove at breaking change
43
+ --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100); // remove at breaking change
44
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base); // remove at breaking change
45
+
46
+ // Borders
16
47
  --pf-c-divider--after--FlexBasis: 100%;
17
48
  --pf-c-divider--after--Inset: 0%;
18
49
 
19
50
  // Vertical
20
- --pf-c-divider--m-vertical--after--FlexBasis: 100%;
21
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
51
+ --pf-c-divider--m-vertical--after--FlexBasis: 100%; // remove at breaking change
52
+
53
+ // Horizontal mixin
54
+ --pf-c-divider--m-horizontal--Display: flex;
55
+ --pf-c-divider--m-horizontal--FlexDirection: row;
56
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height); // update at breaking change
57
+ --pf-c-divider--m-horizontal--after--Width: auto;
58
+
59
+ // Vertical mixin
60
+ --pf-c-divider--m-vertical--Display: inline-flex;
61
+ --pf-c-divider--m-vertical--FlexDirection: column;
62
+ --pf-c-divider--m-vertical--after--Height: auto;
63
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base); // remove at breaking change
22
64
 
65
+ // Vertical
23
66
  @include pf-hidden-visible(var(--pf-c-divider--Display));
67
+ @include pf-c-divider--m-horizontal; // set to default to horizontal
24
68
 
69
+ display: var(--pf-c-divider--Display);
70
+ flex-direction: var(--pf-c-divider--FlexDirection);
25
71
  align-items: center;
26
72
  align-self: stretch;
27
73
  flex-shrink: 0;
28
74
  justify-content: center;
29
- width: 100%;
30
75
  border: 0; // removes the default border styling on an hr
31
76
 
32
77
  &::after {
33
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
34
78
  align-self: stretch;
79
+ width: var(--pf-c-divider--after--Width);
35
80
  height: var(--pf-c-divider--after--Height);
36
81
  content: "";
37
82
  background-color: var(--pf-c-divider--after--BackgroundColor);
38
83
  justify-self: center;
39
84
  }
40
85
 
41
- &.pf-m-vertical {
42
- display: inline-flex;
43
- flex-direction: column;
44
- width: auto;
45
- height: inherit;
46
- min-height: 100%;
47
- max-height: 100%;
48
-
49
- &::after {
50
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
51
- width: var(--pf-c-divider--m-vertical--after--Width);
52
- }
53
- }
54
-
55
86
  // stylelint-disable max-nesting-depth
56
- // Build inset modifiers
87
+
57
88
  @each $breakpoint, $breakpoint-value in $pf-c-divider--breakpoint-map {
58
89
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
59
90
 
91
+ @if ($breakpoint != "base") {
92
+ @include pf-apply-breakpoint($breakpoint) {
93
+ &.pf-m-horizontal#{$breakpoint-name} {
94
+ @include pf-c-divider--m-horizontal;
95
+ }
96
+ }
97
+ }
98
+
99
+ @include pf-apply-breakpoint($breakpoint) {
100
+ &.pf-m-vertical#{$breakpoint-name} {
101
+ @include pf-c-divider--m-vertical;
102
+ }
103
+ }
104
+
60
105
  @include pf-apply-breakpoint($breakpoint) {
61
106
  @each $spacer, $spacer-value in $pf-c-divider--spacer-map {
62
107
  @if $spacer == none {
@@ -69,5 +114,6 @@ $pf-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl"
69
114
  }
70
115
  }
71
116
  }
117
+
72
118
  // stylelint-enable
73
119
  }
package/docs/components/Divider/examples/Divider.css CHANGED
@@ -1,7 +1,13 @@
1
- #ws-core-c-divider-vertical .ws-preview-html,
2
- #ws-core-c-divider-vertical-inset-medium .ws-preview-html,
3
- #ws-core-c-divider-vertical-md-inset-no-inset-on-md-lg-inset-on-lg-sm-inset-on-xl .ws-preview-html {
4
- height: 3rem;
5
- display: flex;
1
+ [id*="ws-core-c-divider-vertical"],
2
+ [id*="ws-core-c-divider-horizontal"] .ws-preview-html {
6
3
  align-items: center;
7
4
  }
5
+
6
+ [id*="ws-core-c-divider-vertical"],
7
+ #ws-core-c-divider-horizontal-on-lg {
8
+ height: 4rem;
9
+ }
10
+
11
+ [id*="ws-core-c-divider"] .ws-preview-html {
12
+ height: 100%;
13
+ }
package/docs/components/Divider/examples/Divider.md CHANGED
@@ -72,6 +72,20 @@ cssPrefix: pf-c-divider
72
72
 
73
73
  ```
74
74
 
75
+ ### Vertical on lg
76
+
77
+ ```html
78
+ <div class="pf-c-divider pf-m-horizontal pf-m-vertical-on-lg" role="separator"></div>
79
+
80
+ ```
81
+
82
+ ### Horizontal on lg
83
+
84
+ ```html
85
+ <div class="pf-c-divider pf-m-horizontal-on-lg pf-m-vertical" role="separator"></div>
86
+
87
+ ```
88
+
75
89
  ## Documentation
76
90
 
77
91
  ### Overview
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -1036,7 +1036,7 @@ cssPrefix: pf-d-dashboard
1036
1036
  </div>
1037
1037
  </div>
1038
1038
  </div>
1039
- <hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
1039
+ <hr class="pf-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
1040
1040
  <div
1041
1041
  class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
1042
1042
  >
@@ -1114,7 +1114,7 @@ cssPrefix: pf-d-dashboard
1114
1114
  </div>
1115
1115
  </div>
1116
1116
  </div>
1117
- <hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
1117
+ <hr class="pf-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
1118
1118
  <div
1119
1119
  class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
1120
1120
  >
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.191.0",
4
+ "version": "4.192.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -11559,42 +11559,58 @@ label.pf-c-check, .pf-c-check__label,
11559
11559
  }
11560
11560
 
11561
11561
  .pf-c-divider {
11562
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
11562
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
11563
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
11564
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
11563
11565
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
11564
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
11565
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
11566
- --pf-c-divider--Display: flex;
11566
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
11567
11567
  --pf-c-divider--after--FlexBasis: 100%;
11568
11568
  --pf-c-divider--after--Inset: 0%;
11569
11569
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
11570
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
11570
+ --pf-c-divider--m-horizontal--Display: flex;
11571
+ --pf-c-divider--m-horizontal--FlexDirection: row;
11572
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
11573
+ --pf-c-divider--m-horizontal--after--Width: auto;
11574
+ --pf-c-divider--m-vertical--Display: inline-flex;
11575
+ --pf-c-divider--m-vertical--FlexDirection: column;
11576
+ --pf-c-divider--m-vertical--after--Height: auto;
11577
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
11571
11578
  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
11579
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11580
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11581
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11582
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11583
+ width: 100%;
11584
+ height: auto;
11585
+ display: var(--pf-c-divider--Display);
11586
+ flex-direction: var(--pf-c-divider--FlexDirection);
11572
11587
  align-items: center;
11573
11588
  align-self: stretch;
11574
11589
  flex-shrink: 0;
11575
11590
  justify-content: center;
11576
- width: 100%;
11577
11591
  border: 0;
11578
11592
  }
11579
11593
  .pf-c-divider::after {
11580
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
11594
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11595
+ }
11596
+ .pf-c-divider::after {
11581
11597
  align-self: stretch;
11598
+ width: var(--pf-c-divider--after--Width);
11582
11599
  height: var(--pf-c-divider--after--Height);
11583
11600
  content: "";
11584
11601
  background-color: var(--pf-c-divider--after--BackgroundColor);
11585
11602
  justify-self: center;
11586
11603
  }
11587
11604
  .pf-c-divider.pf-m-vertical {
11588
- display: inline-flex;
11589
- flex-direction: column;
11605
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11606
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11607
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11608
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11590
11609
  width: auto;
11591
11610
  height: inherit;
11592
- min-height: 100%;
11593
- max-height: 100%;
11594
11611
  }
11595
11612
  .pf-c-divider.pf-m-vertical::after {
11596
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
11597
- width: var(--pf-c-divider--m-vertical--after--Width);
11613
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11598
11614
  }
11599
11615
  .pf-c-divider.pf-m-inset-none {
11600
11616
  --pf-c-divider--after--Inset: 0%;
@@ -11620,6 +11636,32 @@ label.pf-c-check, .pf-c-check__label,
11620
11636
  .pf-c-divider.pf-m-inset-3xl {
11621
11637
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11622
11638
  }
11639
+ @media (min-width: 576px) {
11640
+ .pf-c-divider.pf-m-horizontal-on-sm {
11641
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11642
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11643
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11644
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11645
+ width: 100%;
11646
+ height: auto;
11647
+ }
11648
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
11649
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11650
+ }
11651
+ }
11652
+ @media (min-width: 576px) {
11653
+ .pf-c-divider.pf-m-vertical-on-sm {
11654
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11655
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11656
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11657
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11658
+ width: auto;
11659
+ height: inherit;
11660
+ }
11661
+ .pf-c-divider.pf-m-vertical-on-sm::after {
11662
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11663
+ }
11664
+ }
11623
11665
  @media (min-width: 576px) {
11624
11666
  .pf-c-divider.pf-m-inset-none-on-sm {
11625
11667
  --pf-c-divider--after--Inset: 0%;
@@ -11646,6 +11688,32 @@ label.pf-c-check, .pf-c-check__label,
11646
11688
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11647
11689
  }
11648
11690
  }
11691
+ @media (min-width: 768px) {
11692
+ .pf-c-divider.pf-m-horizontal-on-md {
11693
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11694
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11695
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11696
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11697
+ width: 100%;
11698
+ height: auto;
11699
+ }
11700
+ .pf-c-divider.pf-m-horizontal-on-md::after {
11701
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11702
+ }
11703
+ }
11704
+ @media (min-width: 768px) {
11705
+ .pf-c-divider.pf-m-vertical-on-md {
11706
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11707
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11708
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11709
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11710
+ width: auto;
11711
+ height: inherit;
11712
+ }
11713
+ .pf-c-divider.pf-m-vertical-on-md::after {
11714
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11715
+ }
11716
+ }
11649
11717
  @media (min-width: 768px) {
11650
11718
  .pf-c-divider.pf-m-inset-none-on-md {
11651
11719
  --pf-c-divider--after--Inset: 0%;
@@ -11672,6 +11740,32 @@ label.pf-c-check, .pf-c-check__label,
11672
11740
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11673
11741
  }
11674
11742
  }
11743
+ @media (min-width: 992px) {
11744
+ .pf-c-divider.pf-m-horizontal-on-lg {
11745
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11746
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11747
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11748
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11749
+ width: 100%;
11750
+ height: auto;
11751
+ }
11752
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
11753
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11754
+ }
11755
+ }
11756
+ @media (min-width: 992px) {
11757
+ .pf-c-divider.pf-m-vertical-on-lg {
11758
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11759
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11760
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11761
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11762
+ width: auto;
11763
+ height: inherit;
11764
+ }
11765
+ .pf-c-divider.pf-m-vertical-on-lg::after {
11766
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11767
+ }
11768
+ }
11675
11769
  @media (min-width: 992px) {
11676
11770
  .pf-c-divider.pf-m-inset-none-on-lg {
11677
11771
  --pf-c-divider--after--Inset: 0%;
@@ -11698,6 +11792,32 @@ label.pf-c-check, .pf-c-check__label,
11698
11792
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11699
11793
  }
11700
11794
  }
11795
+ @media (min-width: 1200px) {
11796
+ .pf-c-divider.pf-m-horizontal-on-xl {
11797
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11798
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11799
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11800
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11801
+ width: 100%;
11802
+ height: auto;
11803
+ }
11804
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
11805
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11806
+ }
11807
+ }
11808
+ @media (min-width: 1200px) {
11809
+ .pf-c-divider.pf-m-vertical-on-xl {
11810
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11811
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11812
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11813
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11814
+ width: auto;
11815
+ height: inherit;
11816
+ }
11817
+ .pf-c-divider.pf-m-vertical-on-xl::after {
11818
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11819
+ }
11820
+ }
11701
11821
  @media (min-width: 1200px) {
11702
11822
  .pf-c-divider.pf-m-inset-none-on-xl {
11703
11823
  --pf-c-divider--after--Inset: 0%;
@@ -11724,6 +11844,32 @@ label.pf-c-check, .pf-c-check__label,
11724
11844
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11725
11845
  }
11726
11846
  }
11847
+ @media (min-width: 1450px) {
11848
+ .pf-c-divider.pf-m-horizontal-on-2xl {
11849
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11850
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11851
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11852
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11853
+ width: 100%;
11854
+ height: auto;
11855
+ }
11856
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
11857
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11858
+ }
11859
+ }
11860
+ @media (min-width: 1450px) {
11861
+ .pf-c-divider.pf-m-vertical-on-2xl {
11862
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11863
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11864
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11865
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11866
+ width: auto;
11867
+ height: inherit;
11868
+ }
11869
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
11870
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11871
+ }
11872
+ }
11727
11873
  @media (min-width: 1450px) {
11728
11874
  .pf-c-divider.pf-m-inset-none-on-2xl {
11729
11875
  --pf-c-divider--after--Inset: 0%;