@patternfly/patternfly 6.3.0-prerelease.52 → 6.3.0-prerelease.54

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 (77) hide show
  1. package/README.md +17 -11
  2. package/base/patternfly-variables.css +1208 -1
  3. package/base/patternfly-variables.scss +10 -0
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +13 -1
  7. package/base/tokens/tokens-default.scss +60 -2
  8. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  9. package/base/tokens/tokens-highcontrast.scss +703 -0
  10. package/base/tokens/tokens-local.scss +39 -0
  11. package/base/tokens/tokens-palette.scss +9 -1
  12. package/components/Accordion/accordion.css +21 -0
  13. package/components/Accordion/accordion.scss +27 -1
  14. package/components/Alert/alert-group.css +15 -2
  15. package/components/Alert/alert-group.scss +18 -2
  16. package/components/Badge/badge.css +2 -0
  17. package/components/Badge/badge.scss +2 -0
  18. package/components/Banner/banner.css +4 -0
  19. package/components/Banner/banner.scss +4 -0
  20. package/components/Button/button.css +32 -3
  21. package/components/Button/button.scss +34 -5
  22. package/components/Card/card.css +5 -3
  23. package/components/Card/card.scss +5 -3
  24. package/components/CodeBlock/code-block.css +3 -0
  25. package/components/CodeBlock/code-block.scss +3 -0
  26. package/components/CodeEditor/code-editor.css +8 -3
  27. package/components/CodeEditor/code-editor.scss +11 -6
  28. package/components/Drawer/drawer.css +44 -41
  29. package/components/Drawer/drawer.scss +42 -36
  30. package/components/DualListSelector/dual-list-selector.css +19 -1
  31. package/components/DualListSelector/dual-list-selector.scss +20 -1
  32. package/components/Label/label.css +20 -11
  33. package/components/Label/label.scss +21 -11
  34. package/components/Login/login.css +3 -0
  35. package/components/Login/login.scss +3 -0
  36. package/components/Menu/menu.css +11 -0
  37. package/components/Menu/menu.scss +12 -1
  38. package/components/MenuToggle/menu-toggle.css +12 -5
  39. package/components/MenuToggle/menu-toggle.scss +12 -5
  40. package/components/ModalBox/modal-box.css +3 -0
  41. package/components/ModalBox/modal-box.scss +3 -0
  42. package/components/Nav/nav.css +17 -0
  43. package/components/Nav/nav.scss +20 -0
  44. package/components/Page/page.css +2 -2
  45. package/components/Page/page.scss +2 -2
  46. package/components/Panel/panel.css +7 -1
  47. package/components/Panel/panel.scss +7 -1
  48. package/components/Popover/popover.css +4 -0
  49. package/components/Popover/popover.scss +4 -0
  50. package/components/Progress/progress.css +10 -0
  51. package/components/Progress/progress.scss +11 -0
  52. package/components/SimpleList/simple-list.css +15 -0
  53. package/components/SimpleList/simple-list.scss +17 -1
  54. package/components/Table/table.css +29 -0
  55. package/components/Table/table.scss +33 -0
  56. package/components/Tabs/tabs.css +7 -0
  57. package/components/Tabs/tabs.scss +8 -1
  58. package/components/TreeView/tree-view.css +15 -0
  59. package/components/TreeView/tree-view.scss +17 -0
  60. package/components/Wizard/wizard.css +22 -1
  61. package/components/Wizard/wizard.scss +25 -3
  62. package/components/_index.css +330 -73
  63. package/docs/components/DataList/examples/DataList.md +60 -184
  64. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  65. package/docs/components/Login/examples/Login.md +22 -22
  66. package/docs/components/Table/examples/Table.md +936 -1412
  67. package/docs/demos/Dashboard/examples/Dashboard.md +5 -20
  68. package/docs/demos/DataList/examples/DataList.md +528 -168
  69. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  70. package/docs/demos/Table/examples/Table.md +5 -20
  71. package/package.json +3 -2
  72. package/patternfly-base-no-globals.css +1208 -1
  73. package/patternfly-base.css +1208 -1
  74. package/patternfly-no-globals.css +1538 -74
  75. package/patternfly.css +1538 -74
  76. package/patternfly.min.css +1 -1
  77. package/patternfly.min.css.map +1 -1
package/components/TreeView/tree-view.css CHANGED
@@ -8,6 +8,11 @@
8
8
  --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
9
9
  --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
10
10
  --pf-v6-c-tree-view__node--BackgroundColor: transparent;
11
+ --pf-v6-c-tree-view__node--BorderRadius: var(--pf-v6-c-tree-view__content--BorderRadius);
12
+ --pf-v6-c-tree-view__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
13
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
14
+ --pf-v6-c-tree-view__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
15
+ --pf-v6-c-tree-view__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11
16
  --pf-v6-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
12
17
  --pf-v6-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
13
18
  --pf-v6-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -293,8 +298,17 @@
293
298
  color: var(--pf-v6-c-tree-view__node--Color);
294
299
  background-color: var(--pf-v6-c-tree-view__node--BackgroundColor);
295
300
  }
301
+ .pf-v6-c-tree-view__node::after {
302
+ position: absolute;
303
+ inset: 0;
304
+ pointer-events: none;
305
+ content: "";
306
+ border: var(--pf-v6-c-tree-view__node--BorderWidth) solid var(--pf-v6-c-tree-view__node--BorderColor);
307
+ border-radius: var(--pf-v6-c-tree-view__node--BorderRadius);
308
+ }
296
309
  .pf-v6-c-tree-view__node.pf-m-current {
297
310
  --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-current--Color);
311
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--m-current--BorderWidth);
298
312
  }
299
313
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
300
314
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
@@ -392,6 +406,7 @@ label.pf-v6-c-tree-view__node-text {
392
406
 
393
407
  .pf-v6-c-tree-view__content:hover,
394
408
  .pf-v6-c-tree-view__content:focus-within {
409
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--hover--BorderWidth);
395
410
  background-color: var(--pf-v6-c-tree-view__node--hover--BackgroundColor);
396
411
  }
397
412
 
package/components/TreeView/tree-view.scss CHANGED
@@ -17,6 +17,11 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
17
17
  --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base);
18
18
  --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle);
19
19
  --#{$tree-view}__node--BackgroundColor: transparent;
20
+ --#{$tree-view}__node--BorderRadius: var(--#{$tree-view}__content--BorderRadius);
21
+ --#{$tree-view}__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
22
+ --#{$tree-view}__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
23
+ --#{$tree-view}__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
24
+ --#{$tree-view}__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
20
25
  --#{$tree-view}__node--m-current--Color: var(--pf-t--global--text--color--regular);
21
26
  --#{$tree-view}__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
22
27
  --#{$tree-view}__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -407,8 +412,18 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
407
412
  color: var(--#{$tree-view}__node--Color);
408
413
  background-color: var(--#{$tree-view}__node--BackgroundColor);
409
414
 
415
+ &::after {
416
+ position: absolute;
417
+ inset: 0;
418
+ pointer-events: none;
419
+ content: "";
420
+ border: var(--#{$tree-view}__node--BorderWidth) solid var(--#{$tree-view}__node--BorderColor);
421
+ border-radius: var(--#{$tree-view}__node--BorderRadius);
422
+ }
423
+
410
424
  &.pf-m-current {
411
425
  --#{$tree-view}__node--Color: var(--#{$tree-view}__node--m-current--Color);
426
+ --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--m-current--BorderWidth);
412
427
  }
413
428
 
414
429
  .#{$tree-view}__node-count {
@@ -514,6 +529,8 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
514
529
 
515
530
  .#{$tree-view}__content:hover,
516
531
  .#{$tree-view}__content:focus-within {
532
+ --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--hover--BorderWidth);
533
+
517
534
  background-color: var(--#{$tree-view}__node--hover--BackgroundColor);
518
535
  }
519
536
 
package/components/Wizard/wizard.css CHANGED
@@ -36,6 +36,10 @@
36
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
37
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
38
  --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
+ --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
42
+ --pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
39
43
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
44
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
45
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
@@ -47,13 +51,17 @@
47
51
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
48
52
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
49
53
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
54
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
55
+ --pf-v6-c-wizard__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
50
56
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
51
57
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
52
58
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
53
59
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
54
60
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
61
+ --pf-v6-c-wizard__nav-link--m-current--before--BorderColor: transparent;
55
62
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
56
63
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
64
+ --pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor: transparent;
57
65
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
58
66
  --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
59
67
  --pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -387,14 +395,17 @@
387
395
  .pf-v6-c-wizard__nav-link::before {
388
396
  inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
389
397
  content: counter(wizard-nav-count);
398
+ border: var(--pf-v6-c-wizard__nav-link--before--BorderWidth) solid var(--pf-v6-c-wizard__nav-link--before--BorderColor);
390
399
  }
391
400
  .pf-v6-c-wizard__nav-link.pf-m-current {
392
401
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
393
402
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
403
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth);
394
404
  }
395
405
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
396
406
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
397
407
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
408
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BorderColor);
398
409
  }
399
410
 
400
411
  .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
@@ -412,6 +423,7 @@
412
423
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
413
424
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
414
425
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
426
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth);
415
427
  }
416
428
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
417
429
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
@@ -421,9 +433,11 @@
421
433
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
422
434
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
423
435
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
436
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor);
424
437
  }
425
438
 
426
439
  .pf-v6-c-wizard__nav-link-main {
440
+ position: relative;
427
441
  display: flex;
428
442
  flex-grow: 1;
429
443
  justify-content: space-between;
@@ -432,9 +446,16 @@
432
446
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
433
447
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
434
448
  background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
435
- border: none;
436
449
  border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
437
450
  }
451
+ .pf-v6-c-wizard__nav-link-main::after {
452
+ position: absolute;
453
+ inset: 0;
454
+ pointer-events: none;
455
+ content: "";
456
+ border: var(--pf-v6-c-wizard__nav-link-main--BorderWidth) solid var(--pf-v6-c-wizard__nav-link-main--BorderColor);
457
+ border-radius: inherit;
458
+ }
438
459
 
439
460
  .pf-v6-c-wizard__nav-link-status-icon {
440
461
  position: relative;
package/components/Wizard/wizard.scss CHANGED
@@ -58,6 +58,10 @@
58
58
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
59
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
60
  --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
+ --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
+ --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
64
+ --#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
61
65
 
62
66
  // Nav link toggle icon
63
67
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -73,13 +77,17 @@
73
77
  --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
74
78
  --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
75
79
  --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
80
+ --#{$wizard}__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
+ --#{$wizard}__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
76
82
  --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
77
83
  --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
78
84
  --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
79
85
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
80
86
  --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
87
+ --#{$wizard}__nav-link--m-current--before--BorderColor: transparent;
81
88
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
82
89
  --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
90
+ --#{$wizard}__nav-link--m-disabled--before--BorderColor: transparent;
83
91
 
84
92
  // Nav link status icon
85
93
  --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -472,18 +480,21 @@
472
480
 
473
481
  // Nav step number
474
482
  &::before {
475
- inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
483
+ inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
476
484
  content: counter(wizard-nav-count);
477
- }
485
+ border: var(--#{$wizard}__nav-link--before--BorderWidth) solid var(--#{$wizard}__nav-link--before--BorderColor);
486
+ }
478
487
 
479
488
  &.pf-m-current {
480
489
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
481
490
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
491
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth);
482
492
 
483
493
  @at-root .#{$wizard}__toggle-num,
484
494
  &::before {
485
495
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-current--before--BackgroundColor);
486
496
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-current--before--Color);
497
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-current--before--BorderColor);
487
498
  }
488
499
  }
489
500
 
@@ -508,6 +519,7 @@
508
519
  &:where(:hover, :focus) {
509
520
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
510
521
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
522
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--hover__nav-link-main--BorderWidth);
511
523
  }
512
524
 
513
525
  // override the button background/color for disabled nav links
@@ -521,11 +533,13 @@
521
533
  &::before {
522
534
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--before--BackgroundColor);
523
535
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-disabled--before--Color);
536
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-disabled--before--BorderColor);
524
537
  }
525
538
  }
526
539
  }
527
540
 
528
541
  .#{$wizard}__nav-link-main {
542
+ position: relative;
529
543
  display: flex;
530
544
  flex-grow: 1;
531
545
  justify-content: space-between;
@@ -534,8 +548,16 @@
534
548
  padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart);
535
549
  padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd);
536
550
  background-color: var(--#{$wizard}__nav-link-main--BackgroundColor);
537
- border: none;
538
551
  border-radius: var(--#{$wizard}__nav-link-main--BorderRadius);
552
+
553
+ &::after {
554
+ position: absolute;
555
+ inset: 0;
556
+ pointer-events: none;
557
+ content: "";
558
+ border: var(--#{$wizard}__nav-link-main--BorderWidth) solid var(--#{$wizard}__nav-link-main--BorderColor);
559
+ border-radius: inherit;
560
+ }
539
561
  }
540
562
 
541
563
  .#{$wizard}__nav-link-status-icon {