@patternfly/patternfly 6.0.0-alpha.38 → 6.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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/components/Divider/divider.css CHANGED
@@ -47,340 +47,260 @@
47
47
  }
48
48
  }
49
49
 
50
+ :root,
51
+ :where(.pf-v5-c-divider) {
52
+ --pf-v5-c-divider--Display: flex;
53
+ --pf-v5-c-divider--Color: var(--pf-t--global--border--color--default);
54
+ --pf-v5-c-divider--Size: var(--pf-t--global--border--width--divider--default);
55
+ --pf-v5-c-divider--before--FlexBasis: 100%;
56
+ }
57
+
50
58
  .pf-v5-c-divider {
51
- --pf-v5-c-divider--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
52
- --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor);
53
- --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base);
54
- --pf-v5-c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
55
- --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base);
56
- --pf-v5-c-divider--after--FlexBasis: 100%;
57
- --pf-v5-c-divider--after--Inset: 0%;
58
- --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%;
59
- --pf-v5-c-divider--m-horizontal--Display: flex;
60
- --pf-v5-c-divider--m-horizontal--FlexDirection: row;
61
- --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height);
62
- --pf-v5-c-divider--m-horizontal--after--Width: auto;
63
- --pf-v5-c-divider--m-vertical--Display: inline-flex;
64
- --pf-v5-c-divider--m-vertical--FlexDirection: column;
65
- --pf-v5-c-divider--m-vertical--after--Height: auto;
66
- --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base);
67
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
68
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
69
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
70
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
71
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
59
+ flex-direction: row;
72
60
  width: 100%;
73
- height: auto;
74
- flex-direction: var(--pf-v5-c-divider--FlexDirection);
75
- flex-shrink: 0;
76
- align-items: center;
77
- align-self: stretch;
61
+ height: var(--pf-v5-c-divider--Size);
62
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
63
+ align-items: stretch;
78
64
  justify-content: center;
79
65
  border: 0;
80
66
  }
81
- .pf-v5-c-divider::after {
82
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
83
- }
84
- .pf-v5-c-divider::after {
85
- align-self: stretch;
86
- justify-self: center;
87
- width: var(--pf-v5-c-divider--after--Width);
88
- height: var(--pf-v5-c-divider--after--Height);
67
+ .pf-v5-c-divider::before {
68
+ flex-basis: var(--pf-v5-c-divider--before--FlexBasis);
89
69
  content: "";
90
- background-color: var(--pf-v5-c-divider--after--BackgroundColor);
70
+ background-color: var(--pf-v5-c-divider--Color);
91
71
  }
92
- .pf-v5-c-divider.pf-m-vertical {
93
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
94
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
95
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
96
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
97
- width: auto;
98
- height: inherit;
72
+ .pf-v5-c-divider.pf-m-horizontal {
73
+ flex-direction: row;
74
+ width: 100%;
75
+ height: var(--pf-v5-c-divider--Size);
99
76
  }
100
- .pf-v5-c-divider.pf-m-vertical::after {
101
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
77
+ .pf-v5-c-divider.pf-m-vertical {
78
+ flex-direction: column;
79
+ width: var(--pf-v5-c-divider--Size);
80
+ height: 100%;
102
81
  }
103
82
  .pf-v5-c-divider.pf-m-inset-none {
104
- --pf-v5-c-divider--after--Inset: 0%;
83
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
105
84
  }
106
85
  .pf-v5-c-divider.pf-m-inset-xs {
107
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
86
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
108
87
  }
109
88
  .pf-v5-c-divider.pf-m-inset-sm {
110
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
89
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
111
90
  }
112
91
  .pf-v5-c-divider.pf-m-inset-md {
113
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
92
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
114
93
  }
115
94
  .pf-v5-c-divider.pf-m-inset-lg {
116
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
95
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
117
96
  }
118
97
  .pf-v5-c-divider.pf-m-inset-xl {
119
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
98
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
120
99
  }
121
100
  .pf-v5-c-divider.pf-m-inset-2xl {
122
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
101
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
123
102
  }
124
103
  .pf-v5-c-divider.pf-m-inset-3xl {
125
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
104
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
126
105
  }
106
+
127
107
  @media (min-width: 576px) {
128
108
  .pf-v5-c-divider.pf-m-horizontal-on-sm {
129
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
130
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
131
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
132
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
109
+ flex-direction: row;
133
110
  width: 100%;
134
- height: auto;
135
- }
136
- .pf-v5-c-divider.pf-m-horizontal-on-sm::after {
137
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
111
+ height: var(--pf-v5-c-divider--Size);
138
112
  }
139
113
  }
140
114
  @media (min-width: 576px) {
141
115
  .pf-v5-c-divider.pf-m-vertical-on-sm {
142
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
143
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
144
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
145
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
146
- width: auto;
147
- height: inherit;
148
- }
149
- .pf-v5-c-divider.pf-m-vertical-on-sm::after {
150
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
116
+ flex-direction: column;
117
+ width: var(--pf-v5-c-divider--Size);
118
+ height: 100%;
151
119
  }
152
120
  }
153
121
  @media (min-width: 576px) {
154
122
  .pf-v5-c-divider.pf-m-inset-none-on-sm {
155
- --pf-v5-c-divider--after--Inset: 0%;
123
+ --pf-v5-c-divider--before--FlexBasis: 100%;
156
124
  }
157
125
  .pf-v5-c-divider.pf-m-inset-xs-on-sm {
158
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
126
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
159
127
  }
160
128
  .pf-v5-c-divider.pf-m-inset-sm-on-sm {
161
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
129
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
162
130
  }
163
131
  .pf-v5-c-divider.pf-m-inset-md-on-sm {
164
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
132
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
165
133
  }
166
134
  .pf-v5-c-divider.pf-m-inset-lg-on-sm {
167
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
135
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
168
136
  }
169
137
  .pf-v5-c-divider.pf-m-inset-xl-on-sm {
170
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
138
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
171
139
  }
172
140
  .pf-v5-c-divider.pf-m-inset-2xl-on-sm {
173
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
141
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
174
142
  }
175
143
  .pf-v5-c-divider.pf-m-inset-3xl-on-sm {
176
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
144
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
177
145
  }
178
146
  }
179
147
  @media (min-width: 768px) {
180
148
  .pf-v5-c-divider.pf-m-horizontal-on-md {
181
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
182
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
183
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
184
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
149
+ flex-direction: row;
185
150
  width: 100%;
186
- height: auto;
187
- }
188
- .pf-v5-c-divider.pf-m-horizontal-on-md::after {
189
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
151
+ height: var(--pf-v5-c-divider--Size);
190
152
  }
191
153
  }
192
154
  @media (min-width: 768px) {
193
155
  .pf-v5-c-divider.pf-m-vertical-on-md {
194
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
195
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
196
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
197
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
198
- width: auto;
199
- height: inherit;
200
- }
201
- .pf-v5-c-divider.pf-m-vertical-on-md::after {
202
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
156
+ flex-direction: column;
157
+ width: var(--pf-v5-c-divider--Size);
158
+ height: 100%;
203
159
  }
204
160
  }
205
161
  @media (min-width: 768px) {
206
162
  .pf-v5-c-divider.pf-m-inset-none-on-md {
207
- --pf-v5-c-divider--after--Inset: 0%;
163
+ --pf-v5-c-divider--before--FlexBasis: 100%;
208
164
  }
209
165
  .pf-v5-c-divider.pf-m-inset-xs-on-md {
210
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
166
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
211
167
  }
212
168
  .pf-v5-c-divider.pf-m-inset-sm-on-md {
213
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
169
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
214
170
  }
215
171
  .pf-v5-c-divider.pf-m-inset-md-on-md {
216
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
172
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
217
173
  }
218
174
  .pf-v5-c-divider.pf-m-inset-lg-on-md {
219
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
175
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
220
176
  }
221
177
  .pf-v5-c-divider.pf-m-inset-xl-on-md {
222
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
178
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
223
179
  }
224
180
  .pf-v5-c-divider.pf-m-inset-2xl-on-md {
225
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
181
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
226
182
  }
227
183
  .pf-v5-c-divider.pf-m-inset-3xl-on-md {
228
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
184
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
229
185
  }
230
186
  }
231
187
  @media (min-width: 992px) {
232
188
  .pf-v5-c-divider.pf-m-horizontal-on-lg {
233
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
234
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
235
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
236
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
189
+ flex-direction: row;
237
190
  width: 100%;
238
- height: auto;
239
- }
240
- .pf-v5-c-divider.pf-m-horizontal-on-lg::after {
241
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
191
+ height: var(--pf-v5-c-divider--Size);
242
192
  }
243
193
  }
244
194
  @media (min-width: 992px) {
245
195
  .pf-v5-c-divider.pf-m-vertical-on-lg {
246
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
247
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
248
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
249
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
250
- width: auto;
251
- height: inherit;
252
- }
253
- .pf-v5-c-divider.pf-m-vertical-on-lg::after {
254
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
196
+ flex-direction: column;
197
+ width: var(--pf-v5-c-divider--Size);
198
+ height: 100%;
255
199
  }
256
200
  }
257
201
  @media (min-width: 992px) {
258
202
  .pf-v5-c-divider.pf-m-inset-none-on-lg {
259
- --pf-v5-c-divider--after--Inset: 0%;
203
+ --pf-v5-c-divider--before--FlexBasis: 100%;
260
204
  }
261
205
  .pf-v5-c-divider.pf-m-inset-xs-on-lg {
262
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
206
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
263
207
  }
264
208
  .pf-v5-c-divider.pf-m-inset-sm-on-lg {
265
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
209
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
266
210
  }
267
211
  .pf-v5-c-divider.pf-m-inset-md-on-lg {
268
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
212
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
269
213
  }
270
214
  .pf-v5-c-divider.pf-m-inset-lg-on-lg {
271
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
215
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
272
216
  }
273
217
  .pf-v5-c-divider.pf-m-inset-xl-on-lg {
274
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
218
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
275
219
  }
276
220
  .pf-v5-c-divider.pf-m-inset-2xl-on-lg {
277
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
221
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
278
222
  }
279
223
  .pf-v5-c-divider.pf-m-inset-3xl-on-lg {
280
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
224
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
281
225
  }
282
226
  }
283
227
  @media (min-width: 1200px) {
284
228
  .pf-v5-c-divider.pf-m-horizontal-on-xl {
285
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
286
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
287
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
288
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
229
+ flex-direction: row;
289
230
  width: 100%;
290
- height: auto;
291
- }
292
- .pf-v5-c-divider.pf-m-horizontal-on-xl::after {
293
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
231
+ height: var(--pf-v5-c-divider--Size);
294
232
  }
295
233
  }
296
234
  @media (min-width: 1200px) {
297
235
  .pf-v5-c-divider.pf-m-vertical-on-xl {
298
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
299
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
300
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
301
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
302
- width: auto;
303
- height: inherit;
304
- }
305
- .pf-v5-c-divider.pf-m-vertical-on-xl::after {
306
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
236
+ flex-direction: column;
237
+ width: var(--pf-v5-c-divider--Size);
238
+ height: 100%;
307
239
  }
308
240
  }
309
241
  @media (min-width: 1200px) {
310
242
  .pf-v5-c-divider.pf-m-inset-none-on-xl {
311
- --pf-v5-c-divider--after--Inset: 0%;
243
+ --pf-v5-c-divider--before--FlexBasis: 100%;
312
244
  }
313
245
  .pf-v5-c-divider.pf-m-inset-xs-on-xl {
314
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
246
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
315
247
  }
316
248
  .pf-v5-c-divider.pf-m-inset-sm-on-xl {
317
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
249
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
318
250
  }
319
251
  .pf-v5-c-divider.pf-m-inset-md-on-xl {
320
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
252
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
321
253
  }
322
254
  .pf-v5-c-divider.pf-m-inset-lg-on-xl {
323
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
255
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
324
256
  }
325
257
  .pf-v5-c-divider.pf-m-inset-xl-on-xl {
326
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
258
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
327
259
  }
328
260
  .pf-v5-c-divider.pf-m-inset-2xl-on-xl {
329
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
261
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
330
262
  }
331
263
  .pf-v5-c-divider.pf-m-inset-3xl-on-xl {
332
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
264
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
333
265
  }
334
266
  }
335
267
  @media (min-width: 1450px) {
336
268
  .pf-v5-c-divider.pf-m-horizontal-on-2xl {
337
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
338
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
339
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
340
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
269
+ flex-direction: row;
341
270
  width: 100%;
342
- height: auto;
343
- }
344
- .pf-v5-c-divider.pf-m-horizontal-on-2xl::after {
345
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
271
+ height: var(--pf-v5-c-divider--Size);
346
272
  }
347
273
  }
348
274
  @media (min-width: 1450px) {
349
275
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
350
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
351
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
352
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
353
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
354
- width: auto;
355
- height: inherit;
356
- }
357
- .pf-v5-c-divider.pf-m-vertical-on-2xl::after {
358
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
276
+ flex-direction: column;
277
+ width: var(--pf-v5-c-divider--Size);
278
+ height: 100%;
359
279
  }
360
280
  }
361
281
  @media (min-width: 1450px) {
362
282
  .pf-v5-c-divider.pf-m-inset-none-on-2xl {
363
- --pf-v5-c-divider--after--Inset: 0%;
283
+ --pf-v5-c-divider--before--FlexBasis: 100%;
364
284
  }
365
285
  .pf-v5-c-divider.pf-m-inset-xs-on-2xl {
366
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
286
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
367
287
  }
368
288
  .pf-v5-c-divider.pf-m-inset-sm-on-2xl {
369
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
289
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
370
290
  }
371
291
  .pf-v5-c-divider.pf-m-inset-md-on-2xl {
372
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
292
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
373
293
  }
374
294
  .pf-v5-c-divider.pf-m-inset-lg-on-2xl {
375
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
295
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
376
296
  }
377
297
  .pf-v5-c-divider.pf-m-inset-xl-on-2xl {
378
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
298
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
379
299
  }
380
300
  .pf-v5-c-divider.pf-m-inset-2xl-on-2xl {
381
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
301
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
382
302
  }
383
303
  .pf-v5-c-divider.pf-m-inset-3xl-on-2xl {
384
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
304
+ --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
385
305
  }
386
306
  }
package/components/Divider/divider.scss CHANGED
@@ -1,98 +1,80 @@
1
1
  // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
- $pf-v5-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
2
+ $pf-v5-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
3
3
  $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
4
4
 
5
+ // * Divider horizontal
5
6
  @mixin pf-v5-c-divider--m-horizontal {
6
- --#{$divider}--Display: var(--#{$divider}--m-horizontal--Display);
7
- --#{$divider}--FlexDirection: var(--#{$divider}--m-horizontal--FlexDirection);
8
- --#{$divider}--after--Width: var(--#{$divider}--m-horizontal--after--Width);
9
- --#{$divider}--after--Height: var(--#{$divider}--m-horizontal--after--Height);
10
-
11
- width: 100%; // update to var breaking change
12
- height: auto; // update to var breaking change
13
-
14
- &::after {
15
- flex-basis:
16
- calc(
17
- var(--#{$divider}--after--FlexBasis) - calc(var(--#{$divider}--after--Inset) * 2)
18
- ); // update at breaking change
19
- }
7
+ flex-direction: row;
8
+ width: 100%;
9
+ height: var(--#{$divider}--Size); // apply size to height in horizontal orientation
20
10
  }
21
11
 
12
+ // * Divider vertical
22
13
  @mixin pf-v5-c-divider--m-vertical {
23
- --#{$divider}--Display: var(--#{$divider}--m-vertical--Display);
24
- --#{$divider}--FlexDirection: var(--#{$divider}--m-vertical--FlexDirection);
25
- --#{$divider}--after--Width: var(--#{$divider}--m-vertical--after--Width);
26
- --#{$divider}--after--Height: var(--#{$divider}--m-vertical--after--Height);
14
+ flex-direction: column;
15
+ width: var(--#{$divider}--Size); // apply size to width in vertical orientation
16
+ height: 100%;
17
+ }
27
18
 
28
- width: auto; // update to var breaking change
29
- height: inherit; // update to var at breaking change
19
+ :root,
20
+ :where(.#{$divider}) {
21
+ // * Divider
22
+ --#{$divider}--Display: flex;
23
+ --#{$divider}--Color: var(--pf-t--global--border--color--default);
24
+ --#{$divider}--Size: var(--pf-t--global--border--width--divider--default);
30
25
 
31
- &::after {
32
- flex-basis:
33
- calc(
34
- var(--#{$divider}--m-vertical--after--FlexBasis) - var(--#{$divider}--after--Inset)
35
- ); // update at breaking change
36
- }
26
+ // * Divider before
27
+ --#{$divider}--before--FlexBasis: 100%;
37
28
  }
38
29
 
30
+ // - Divider
39
31
  .#{$divider} {
40
- // Base
41
- --#{$divider}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
42
- --#{$divider}--BorderColor--base: var(--#{$divider}--BackgroundColor); // update at breaking change
43
- --#{$divider}--Height: var(--#{$divider}--BorderWidth--base); // remove at breaking change
44
- --#{$divider}--BackgroundColor: var(--#{$pf-global}--BorderColor--100); // remove at breaking change
45
- --#{$divider}--after--BackgroundColor: var(--#{$divider}--BorderColor--base); // remove at breaking change
46
-
47
- // Borders
48
- --#{$divider}--after--FlexBasis: 100%;
49
- --#{$divider}--after--Inset: 0%;
50
-
51
- // Vertical
52
- --#{$divider}--m-vertical--after--FlexBasis: 100%; // remove at breaking change
53
-
54
- // Horizontal mixin
55
- --#{$divider}--m-horizontal--Display: flex;
56
- --#{$divider}--m-horizontal--FlexDirection: row;
57
- --#{$divider}--m-horizontal--after--Height: var(--#{$divider}--Height); // update at breaking change
58
- --#{$divider}--m-horizontal--after--Width: auto;
59
-
60
- // Vertical mixin
61
- --#{$divider}--m-vertical--Display: inline-flex;
62
- --#{$divider}--m-vertical--FlexDirection: column;
63
- --#{$divider}--m-vertical--after--Height: auto;
64
- --#{$divider}--m-vertical--after--Width: var(--#{$divider}--BorderWidth--base); // remove at breaking change
65
-
66
- // Vertical
32
+ @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
67
33
  @include pf-v5-hidden-visible(var(--#{$divider}--Display));
68
- @include pf-v5-c-divider--m-horizontal; // set to default to horizontal
69
34
 
70
- flex-direction: var(--#{$divider}--FlexDirection);
71
- flex-shrink: 0;
72
- align-items: center;
73
- align-self: stretch;
35
+ align-items: stretch;
74
36
  justify-content: center;
75
37
  border: 0; // removes the default border styling on an hr
76
38
 
77
- &::after {
78
- align-self: stretch;
79
- justify-self: center;
80
- width: var(--#{$divider}--after--Width);
81
- height: var(--#{$divider}--after--Height);
39
+ // - Divider before
40
+ &::before {
41
+ flex-basis: var(--#{$divider}--before--FlexBasis);
82
42
  content: "";
83
- background-color: var(--#{$divider}--after--BackgroundColor);
43
+ background-color: var(--#{$divider}--Color);
84
44
  }
85
45
 
86
- // stylelint-disable max-nesting-depth
46
+ // - Divider horizontal
47
+ &.pf-m-horizontal {
48
+ @include pf-v5-c-divider--m-horizontal;
49
+ }
50
+
51
+ // - Divider vertical
52
+ &.pf-m-vertical {
53
+ @include pf-v5-c-divider--m-vertical;
54
+ }
87
55
 
56
+ // - Divider spacer insets
57
+ @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
58
+ @if $spacer == none {
59
+ $spacer-value: 0%;
60
+ }
61
+
62
+ &.pf-m-inset-#{$spacer} {
63
+ --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
64
+ }
65
+ }
66
+ }
67
+
68
+ // TODO: move this loop to separate file for resize observer implementation
69
+ // TODO: make responsive values opt in/out
70
+ // stylelint-disable
71
+ .#{$divider} {
88
72
  @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
89
- $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
73
+ $breakpoint-name: '-on-' + #{$breakpoint};
90
74
 
91
- @if $breakpoint != "base" {
92
- @include pf-v5-apply-breakpoint($breakpoint) {
93
- &.pf-m-horizontal#{$breakpoint-name} {
94
- @include pf-v5-c-divider--m-horizontal;
95
- }
75
+ @include pf-v5-apply-breakpoint($breakpoint) {
76
+ &.pf-m-horizontal#{$breakpoint-name} {
77
+ @include pf-v5-c-divider--m-horizontal;
96
78
  }
97
79
  }
98
80
 
@@ -104,16 +86,15 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
104
86
 
105
87
  @include pf-v5-apply-breakpoint($breakpoint) {
106
88
  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
107
- @if $spacer == none {
108
- $spacer-value: 0%;
109
- }
110
-
111
89
  &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
112
- --#{$divider}--after--Inset: #{$spacer-value};
90
+ @if $spacer == none {
91
+ --#{$divider}--before--FlexBasis: 100%;
92
+ } @else {
93
+ --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
94
+ }
113
95
  }
114
96
  }
115
97
  }
116
98
  }
117
-
118
- // stylelint-enable
119
99
  }
100
+ // stylelint-enable