@patternfly/patternfly 6.0.0-alpha.49 → 6.0.0-alpha.50

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 (18) hide show
  1. package/components/Button/button.css +12 -2
  2. package/components/Button/button.scss +16 -6
  3. package/components/Nav/nav.css +240 -918
  4. package/components/Nav/nav.scss +300 -1082
  5. package/components/Page/page.scss +1 -1
  6. package/docs/components/Nav/examples/Navigation.css +1 -39
  7. package/docs/components/Nav/examples/Navigation.md +68 -242
  8. package/docs/demos/CardView/examples/CardView.md +4 -8
  9. package/docs/demos/Masthead/examples/Masthead.md +24 -15
  10. package/docs/demos/Nav/examples/Nav.md +79 -874
  11. package/docs/demos/Page/examples/Page.md +24 -12
  12. package/docs/demos/Page/examples/Penta.md +1 -0
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +247 -919
  15. package/patternfly-theme-dark-unversioned.css +247 -919
  16. package/patternfly.css +247 -919
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -13,6 +13,10 @@
13
13
  --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --pf-v5-c-button--TextDecoration: none;
16
+ --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
17
+ --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
18
+ --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
19
+ --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
16
20
  --pf-v5-c-button--hover--BackgroundColor: transparent;
17
21
  --pf-v5-c-button--hover--BorderColor: transparent;
18
22
  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -212,7 +216,10 @@
212
216
 
213
217
  .pf-v5-c-button {
214
218
  position: relative;
215
- display: inline-block;
219
+ display: var(--pf-v5-c-button--Display, initial);
220
+ flex: var(--pf-v5-c-button--Flex, initial);
221
+ align-items: var(--pf-v5-c-button--AlignItems, initial);
222
+ justify-content: var(--pf-v5-c-button--JustifyContent, initial);
216
223
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
217
224
  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
218
225
  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
@@ -228,7 +235,10 @@
228
235
  user-select: none;
229
236
  background-color: var(--pf-v5-c-button--BackgroundColor);
230
237
  border: 0;
231
- border-radius: var(--pf-v5-c-button--BorderRadius);
238
+ border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
239
+ border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
240
+ border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
241
+ border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
232
242
  }
233
243
  .pf-v5-c-button::after {
234
244
  position: absolute;
package/components/Button/button.scss CHANGED
@@ -13,6 +13,10 @@
13
13
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --#{$button}--TextDecoration: none;
16
+ --#{$button}--BorderStartStartRadius: var(--#{$button}--BorderRadius);
17
+ --#{$button}--BorderStartEndRadius: var(--#{$button}--BorderRadius);
18
+ --#{$button}--BorderEndStartRadius: var(--#{$button}--BorderRadius);
19
+ --#{$button}--BorderEndEndRadius: var(--#{$button}--BorderRadius);
16
20
 
17
21
  // Hover
18
22
  --#{$button}--hover--BackgroundColor: transparent;
@@ -213,7 +217,7 @@
213
217
  --#{$button}--m-small--PaddingRight: var(--pf-t--global--spacer--md);
214
218
  --#{$button}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
215
219
  --#{$button}--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
216
-
220
+
217
221
  // Disabled
218
222
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
219
223
  --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
@@ -255,9 +259,12 @@
255
259
 
256
260
  .#{$button} {
257
261
  position: relative;
258
- display: inline-block;
262
+ display: var(--#{$button}--Display, initial);
263
+ flex: var(--#{$button}--Flex, initial);
264
+ align-items: var(--#{$button}--AlignItems, initial);
265
+ justify-content: var(--#{$button}--JustifyContent, initial);
259
266
  padding-block-start: var(--#{$button}--PaddingTop);
260
- padding-block-end: var(--#{$button}--PaddingBottom);
267
+ padding-block-end: var(--#{$button}--PaddingBottom);
261
268
  padding-inline-start: var(--#{$button}--PaddingLeft);
262
269
  padding-inline-end: var(--#{$button}--PaddingRight);
263
270
  font-size: var(--#{$button}--FontSize, inherit);
@@ -271,7 +278,10 @@
271
278
  user-select: none;
272
279
  background-color: var(--#{$button}--BackgroundColor);
273
280
  border: 0;
274
- border-radius: var(--#{$button}--BorderRadius);
281
+ border-start-start-radius: var(--#{$button}--BorderStartStartRadius);
282
+ border-start-end-radius: var(--#{$button}--BorderStartEndRadius);
283
+ border-end-start-radius: var(--#{$button}--BorderEndStartRadius);
284
+ border-end-end-radius: var(--#{$button}--BorderEndEndRadius);
275
285
 
276
286
  &::after {
277
287
  position: absolute;
@@ -408,7 +418,7 @@
408
418
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-warning--m-clicked--BackgroundColor);
409
419
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-warning--m-clicked__icon--Color);
410
420
  }
411
-
421
+
412
422
  // Danger
413
423
  &.pf-m-danger {
414
424
  --#{$button}--Color: var(--#{$button}--m-danger--Color);
@@ -571,7 +581,7 @@
571
581
 
572
582
  color: var(--#{$button}--disabled--Color);
573
583
  background-color: var(--#{$button}--disabled--BackgroundColor);
574
-
584
+
575
585
  &::after {
576
586
  border-color: transparent;
577
587
  }