@patternfly/patternfly 5.0.0-alpha.59 → 5.0.0-alpha.60

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 (7) hide show
  1. package/components/Nav/nav.css +15 -2
  2. package/components/Nav/nav.scss +21 -4
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +15 -2
  5. package/patternfly.css +15 -2
  6. package/patternfly.min.css +1 -1
  7. package/patternfly.min.css.map +1 -1
package/components/Nav/nav.css CHANGED
@@ -21,6 +21,8 @@
21
21
  --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
22
22
  --pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
23
23
  --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
24
+ --pf-v5-c-nav__list--PaddingTop: var(--pf-v5-global--spacer--sm);
25
+ --pf-v5-c-nav__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
24
26
  --pf-v5-c-nav__item--MarginTop: 0;
25
27
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
26
28
  --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -146,7 +148,7 @@
146
148
  --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
147
149
  --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
148
150
  --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
149
- --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--md);
151
+ --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm);
150
152
  --pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft);
151
153
  --pf-v5-c-nav__subnav__link--MarginTop: 0;
152
154
  --pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -424,6 +426,8 @@
424
426
  display: flex;
425
427
  }
426
428
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
429
+ --pf-v5-c-nav__list--PaddingTop: 0;
430
+ --pf-v5-c-nav__list--PaddingBottom: 0;
427
431
  flex: 1;
428
432
  max-width: 100%;
429
433
  overflow-x: auto;
@@ -596,11 +600,12 @@
596
600
  .pf-v5-c-nav__list {
597
601
  position: relative;
598
602
  display: block;
603
+ padding-top: var(--pf-v5-c-nav__list--PaddingTop);
604
+ padding-bottom: var(--pf-v5-c-nav__list--PaddingBottom);
599
605
  }
600
606
 
601
607
  .pf-v5-c-nav__item {
602
608
  position: relative;
603
- margin-top: var(--pf-v5-c-nav__item--MarginTop);
604
609
  }
605
610
  .pf-v5-c-nav__item.pf-m-expandable {
606
611
  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
@@ -613,6 +618,9 @@
613
618
  content: "";
614
619
  border-bottom: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
615
620
  }
621
+ .pf-v5-c-nav__item:not(:first-child) {
622
+ margin-top: var(--pf-v5-c-nav__item--MarginTop);
623
+ }
616
624
  .pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
617
625
  transform: rotate(0);
618
626
  }
@@ -786,6 +794,8 @@
786
794
  }
787
795
 
788
796
  .pf-v5-c-nav__subnav {
797
+ --pf-v5-c-nav__list--PaddingTop: 0;
798
+ --pf-v5-c-nav__list--PaddingBottom: 0;
789
799
  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop);
790
800
  --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight);
791
801
  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom);
@@ -871,6 +881,9 @@
871
881
  .pf-v5-c-nav__section.pf-m-no-title {
872
882
  --pf-v5-c-nav__section--MarginTop: 0;
873
883
  }
884
+ .pf-v5-c-nav__section:not(:last-child) {
885
+ --pf-v5-c-nav__list--PaddingBottom: 0;
886
+ }
874
887
 
875
888
  .pf-v5-c-nav__section-title {
876
889
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
package/components/Nav/nav.scss CHANGED
@@ -28,6 +28,10 @@
28
28
  --#{$nav}--m-light__subnav__link--active--after--BorderColor: var(--#{$pf-global}--BorderColor--dark-100);
29
29
  --#{$nav}--m-light__subnav__link--m-current--after--BorderColor: var(--#{$pf-global}--active-color--100);
30
30
 
31
+ // List
32
+ --#{$nav}__list--PaddingTop: var(--#{$pf-global}--spacer--sm);
33
+ --#{$nav}__list--PaddingBottom: var(--#{$pf-global}--spacer--sm);
34
+
31
35
  // Item
32
36
  --#{$nav}__item--MarginTop: 0;
33
37
  --#{$nav}__item--m-current--not--m-expanded__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
@@ -174,7 +178,7 @@
174
178
  --#{$nav}--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
175
179
 
176
180
  // Subnav
177
- --#{$nav}__subnav--PaddingBottom: var(--#{$pf-global}--spacer--md);
181
+ --#{$nav}__subnav--PaddingBottom: var(--#{$pf-global}--spacer--sm);
178
182
  --#{$nav}__subnav--xl--PaddingLeft: var(--#{$nav}__link--PaddingLeft);
179
183
  --#{$nav}__subnav__link--MarginTop: 0;
180
184
  --#{$nav}__subnav__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
@@ -524,6 +528,9 @@
524
528
  overflow: hidden;
525
529
 
526
530
  .#{$nav}__list {
531
+ --#{$nav}__list--PaddingTop: 0;
532
+ --#{$nav}__list--PaddingBottom: 0;
533
+
527
534
  flex: 1;
528
535
  max-width: 100%;
529
536
  overflow-x: auto;
@@ -731,13 +738,14 @@
731
738
  .#{$nav}__list {
732
739
  position: relative;
733
740
  display: block;
741
+ padding-top: var(--#{$nav}__list--PaddingTop);
742
+ padding-bottom: var(--#{$nav}__list--PaddingBottom);
734
743
  }
735
744
 
736
745
  // Borders
737
746
  .#{$nav}__item {
738
747
  position: relative;
739
- margin-top: var(--#{$nav}__item--MarginTop);
740
-
748
+
741
749
  &.pf-m-expandable {
742
750
  --#{$nav}__link--before--BorderBottomWidth: 0;
743
751
 
@@ -751,6 +759,10 @@
751
759
  }
752
760
  }
753
761
 
762
+ &:not(:first-child) {
763
+ margin-top: var(--#{$nav}__item--MarginTop);
764
+ }
765
+
754
766
  .#{$nav}__item {
755
767
  &:not(.pf-m-expanded) .#{$nav}__toggle-icon {
756
768
  transform: rotate(0);
@@ -981,6 +993,8 @@
981
993
 
982
994
  // Subnav
983
995
  .#{$nav}__subnav {
996
+ --#{$nav}__list--PaddingTop: 0;
997
+ --#{$nav}__list--PaddingBottom: 0;
984
998
  --#{$nav}__link--PaddingTop: var(--#{$nav}__subnav__link--PaddingTop);
985
999
  --#{$nav}__link--PaddingRight: var(--#{$nav}__subnav__link--PaddingRight);
986
1000
  --#{$nav}__link--PaddingBottom: var(--#{$nav}__subnav__link--PaddingBottom);
@@ -1010,7 +1024,6 @@
1010
1024
  --#{$nav}__subnav--PaddingLeft: var(--#{$nav}__subnav__subnav--PaddingLeft);
1011
1025
  }
1012
1026
 
1013
-
1014
1027
  // remove at breaking change - not used
1015
1028
  &.pf-m-flyout {
1016
1029
  width: 100%;
@@ -1083,6 +1096,10 @@
1083
1096
  &.pf-m-no-title {
1084
1097
  --#{$nav}__section--MarginTop: 0;
1085
1098
  }
1099
+
1100
+ &:not(:last-child) {
1101
+ --#{$nav}__list--PaddingBottom: 0;
1102
+ }
1086
1103
  }
1087
1104
 
1088
1105
  // Section title
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": "5.0.0-alpha.59",
4
+ "version": "5.0.0-alpha.60",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -18985,6 +18985,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18985
18985
  --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
18986
18986
  --pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
18987
18987
  --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
18988
+ --pf-v5-c-nav__list--PaddingTop: var(--pf-v5-global--spacer--sm);
18989
+ --pf-v5-c-nav__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
18988
18990
  --pf-v5-c-nav__item--MarginTop: 0;
18989
18991
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
18990
18992
  --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -19110,7 +19112,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19110
19112
  --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19111
19113
  --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19112
19114
  --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19113
- --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--md);
19115
+ --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm);
19114
19116
  --pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft);
19115
19117
  --pf-v5-c-nav__subnav__link--MarginTop: 0;
19116
19118
  --pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -19388,6 +19390,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19388
19390
  display: flex;
19389
19391
  }
19390
19392
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
19393
+ --pf-v5-c-nav__list--PaddingTop: 0;
19394
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19391
19395
  flex: 1;
19392
19396
  max-width: 100%;
19393
19397
  overflow-x: auto;
@@ -19560,11 +19564,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19560
19564
  .pf-v5-c-nav__list {
19561
19565
  position: relative;
19562
19566
  display: block;
19567
+ padding-top: var(--pf-v5-c-nav__list--PaddingTop);
19568
+ padding-bottom: var(--pf-v5-c-nav__list--PaddingBottom);
19563
19569
  }
19564
19570
 
19565
19571
  .pf-v5-c-nav__item {
19566
19572
  position: relative;
19567
- margin-top: var(--pf-v5-c-nav__item--MarginTop);
19568
19573
  }
19569
19574
  .pf-v5-c-nav__item.pf-m-expandable {
19570
19575
  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
@@ -19577,6 +19582,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19577
19582
  content: "";
19578
19583
  border-bottom: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
19579
19584
  }
19585
+ .pf-v5-c-nav__item:not(:first-child) {
19586
+ margin-top: var(--pf-v5-c-nav__item--MarginTop);
19587
+ }
19580
19588
  .pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
19581
19589
  transform: rotate(0);
19582
19590
  }
@@ -19750,6 +19758,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19750
19758
  }
19751
19759
 
19752
19760
  .pf-v5-c-nav__subnav {
19761
+ --pf-v5-c-nav__list--PaddingTop: 0;
19762
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19753
19763
  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop);
19754
19764
  --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight);
19755
19765
  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom);
@@ -19835,6 +19845,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19835
19845
  .pf-v5-c-nav__section.pf-m-no-title {
19836
19846
  --pf-v5-c-nav__section--MarginTop: 0;
19837
19847
  }
19848
+ .pf-v5-c-nav__section:not(:last-child) {
19849
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19850
+ }
19838
19851
 
19839
19852
  .pf-v5-c-nav__section-title {
19840
19853
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
package/patternfly.css CHANGED
@@ -19102,6 +19102,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19102
19102
  --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19103
19103
  --pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19104
19104
  --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
19105
+ --pf-v5-c-nav__list--PaddingTop: var(--pf-v5-global--spacer--sm);
19106
+ --pf-v5-c-nav__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
19105
19107
  --pf-v5-c-nav__item--MarginTop: 0;
19106
19108
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19107
19109
  --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -19227,7 +19229,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19227
19229
  --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19228
19230
  --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19229
19231
  --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19230
- --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--md);
19232
+ --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm);
19231
19233
  --pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft);
19232
19234
  --pf-v5-c-nav__subnav__link--MarginTop: 0;
19233
19235
  --pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -19505,6 +19507,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19505
19507
  display: flex;
19506
19508
  }
19507
19509
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
19510
+ --pf-v5-c-nav__list--PaddingTop: 0;
19511
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19508
19512
  flex: 1;
19509
19513
  max-width: 100%;
19510
19514
  overflow-x: auto;
@@ -19677,11 +19681,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19677
19681
  .pf-v5-c-nav__list {
19678
19682
  position: relative;
19679
19683
  display: block;
19684
+ padding-top: var(--pf-v5-c-nav__list--PaddingTop);
19685
+ padding-bottom: var(--pf-v5-c-nav__list--PaddingBottom);
19680
19686
  }
19681
19687
 
19682
19688
  .pf-v5-c-nav__item {
19683
19689
  position: relative;
19684
- margin-top: var(--pf-v5-c-nav__item--MarginTop);
19685
19690
  }
19686
19691
  .pf-v5-c-nav__item.pf-m-expandable {
19687
19692
  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
@@ -19694,6 +19699,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19694
19699
  content: "";
19695
19700
  border-bottom: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
19696
19701
  }
19702
+ .pf-v5-c-nav__item:not(:first-child) {
19703
+ margin-top: var(--pf-v5-c-nav__item--MarginTop);
19704
+ }
19697
19705
  .pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
19698
19706
  transform: rotate(0);
19699
19707
  }
@@ -19867,6 +19875,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19867
19875
  }
19868
19876
 
19869
19877
  .pf-v5-c-nav__subnav {
19878
+ --pf-v5-c-nav__list--PaddingTop: 0;
19879
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19870
19880
  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop);
19871
19881
  --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight);
19872
19882
  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom);
@@ -19952,6 +19962,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19952
19962
  .pf-v5-c-nav__section.pf-m-no-title {
19953
19963
  --pf-v5-c-nav__section--MarginTop: 0;
19954
19964
  }
19965
+ .pf-v5-c-nav__section:not(:last-child) {
19966
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19967
+ }
19955
19968
 
19956
19969
  .pf-v5-c-nav__section-title {
19957
19970
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);