@patternfly/patternfly 4.206.1 → 4.206.2

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/Page/page.css +50 -0
  2. package/components/Page/page.scss +20 -6
  3. package/package.json +1 -1
  4. package/patternfly-no-reset.css +50 -0
  5. package/patternfly.css +50 -0
  6. package/patternfly.min.css +1 -1
  7. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -715,6 +715,31 @@
715
715
  .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
716
716
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
717
717
  }
718
+ @media (min-height: 0) {
719
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
720
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
721
+ }
722
+ }
723
+ @media (min-height: 40rem) {
724
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
725
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
726
+ }
727
+ }
728
+ @media (min-height: 48rem) {
729
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
730
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
731
+ }
732
+ }
733
+ @media (min-height: 60rem) {
734
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
735
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
736
+ }
737
+ }
738
+ @media (min-height: 80rem) {
739
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
740
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
741
+ }
742
+ }
718
743
 
719
744
  .pf-c-page__main-subnav {
720
745
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -740,6 +765,31 @@
740
765
  .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
741
766
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
742
767
  }
768
+ @media (min-height: 0) {
769
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
770
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
771
+ }
772
+ }
773
+ @media (min-height: 40rem) {
774
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
775
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
776
+ }
777
+ }
778
+ @media (min-height: 48rem) {
779
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
780
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
781
+ }
782
+ }
783
+ @media (min-height: 60rem) {
784
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
785
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
786
+ }
787
+ }
788
+ @media (min-height: 80rem) {
789
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
790
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
791
+ }
792
+ }
743
793
 
744
794
  .pf-c-page__main-tabs {
745
795
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
package/components/Page/page.scss CHANGED
@@ -548,9 +548,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
548
548
  padding-left: var(--pf-c-page__main-nav--PaddingLeft);
549
549
  background-color: var(--pf-c-page__main-nav--BackgroundColor);
550
550
 
551
- &.pf-m-sticky-top,
552
- .pf-c-page__main-group.pf-m-sticky-top &:last-child {
553
- padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
551
+ // Responsive height modifiers for sticky top/bottom
552
+ @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
553
+ $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
554
+
555
+ @include pf-apply-height-breakpoint($breakpoint) {
556
+ &.pf-m-sticky-top#{$breakpoint-name},
557
+ .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
558
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
559
+ }
560
+ }
554
561
  }
555
562
  }
556
563
 
@@ -580,9 +587,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
580
587
  --pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
581
588
  }
582
589
 
583
- &.pf-m-sticky-top,
584
- .pf-c-page__main-group.pf-m-sticky-top &:last-child {
585
- --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
590
+ // Responsive height modifiers for sticky top/bottom
591
+ @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
592
+ $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
593
+
594
+ @include pf-apply-height-breakpoint($breakpoint) {
595
+ &.pf-m-sticky-top#{$breakpoint-name},
596
+ .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
597
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
598
+ }
599
+ }
586
600
  }
587
601
  }
588
602
 
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.206.1",
4
+ "version": "4.206.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -22032,6 +22032,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22032
22032
  .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
22033
22033
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22034
22034
  }
22035
+ @media (min-height: 0) {
22036
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
22037
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22038
+ }
22039
+ }
22040
+ @media (min-height: 40rem) {
22041
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
22042
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22043
+ }
22044
+ }
22045
+ @media (min-height: 48rem) {
22046
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
22047
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22048
+ }
22049
+ }
22050
+ @media (min-height: 60rem) {
22051
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
22052
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22053
+ }
22054
+ }
22055
+ @media (min-height: 80rem) {
22056
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
22057
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22058
+ }
22059
+ }
22035
22060
 
22036
22061
  .pf-c-page__main-subnav {
22037
22062
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -22057,6 +22082,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22057
22082
  .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
22058
22083
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22059
22084
  }
22085
+ @media (min-height: 0) {
22086
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
22087
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22088
+ }
22089
+ }
22090
+ @media (min-height: 40rem) {
22091
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
22092
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22093
+ }
22094
+ }
22095
+ @media (min-height: 48rem) {
22096
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
22097
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22098
+ }
22099
+ }
22100
+ @media (min-height: 60rem) {
22101
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
22102
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22103
+ }
22104
+ }
22105
+ @media (min-height: 80rem) {
22106
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
22107
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22108
+ }
22109
+ }
22060
22110
 
22061
22111
  .pf-c-page__main-tabs {
22062
22112
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
package/patternfly.css CHANGED
@@ -22159,6 +22159,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22159
22159
  .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
22160
22160
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22161
22161
  }
22162
+ @media (min-height: 0) {
22163
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
22164
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22165
+ }
22166
+ }
22167
+ @media (min-height: 40rem) {
22168
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
22169
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22170
+ }
22171
+ }
22172
+ @media (min-height: 48rem) {
22173
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
22174
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22175
+ }
22176
+ }
22177
+ @media (min-height: 60rem) {
22178
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
22179
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22180
+ }
22181
+ }
22182
+ @media (min-height: 80rem) {
22183
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
22184
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22185
+ }
22186
+ }
22162
22187
 
22163
22188
  .pf-c-page__main-subnav {
22164
22189
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -22184,6 +22209,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22184
22209
  .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
22185
22210
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22186
22211
  }
22212
+ @media (min-height: 0) {
22213
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
22214
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22215
+ }
22216
+ }
22217
+ @media (min-height: 40rem) {
22218
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
22219
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22220
+ }
22221
+ }
22222
+ @media (min-height: 48rem) {
22223
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
22224
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22225
+ }
22226
+ }
22227
+ @media (min-height: 60rem) {
22228
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
22229
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22230
+ }
22231
+ }
22232
+ @media (min-height: 80rem) {
22233
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
22234
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22235
+ }
22236
+ }
22187
22237
 
22188
22238
  .pf-c-page__main-tabs {
22189
22239
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);