@patternfly/react-core 4.203.2 → 4.205.1

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.
@@ -1486,41 +1486,6 @@ textarea.pf-c-form-control {
1486
1486
  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1487
1487
  }
1488
1488
  }
1489
- .pf-c-back-to-top {
1490
- --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1491
- --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1492
- --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1493
- --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1494
- --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1495
- --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1496
- --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1497
- --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1498
- --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1499
- --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1500
- position: absolute;
1501
- right: var(--pf-c-back-to-top--Right);
1502
- bottom: var(--pf-c-back-to-top--Bottom);
1503
- }
1504
-
1505
- @media (min-width: 768px) {
1506
- .pf-c-back-to-top {
1507
- --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1508
- }
1509
- }
1510
- .pf-c-back-to-top.pf-m-hidden {
1511
- display: none;
1512
- }
1513
-
1514
- .pf-c-back-to-top .pf-c-button {
1515
- --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
1516
- --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
1517
- --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
1518
- --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
1519
- --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
1520
- --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
1521
- box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
1522
- }
1523
-
1524
1489
  .pf-c-background-image {
1525
1490
  --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
1526
1491
  --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
@@ -5230,6 +5195,41 @@ label.pf-c-check, .pf-c-check__label,
5230
5195
  transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5231
5196
  }
5232
5197
 
5198
+ .pf-c-back-to-top {
5199
+ --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
5200
+ --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
5201
+ --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
5202
+ --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
5203
+ --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
5204
+ --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
5205
+ --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
5206
+ --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
5207
+ --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
5208
+ --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
5209
+ position: absolute;
5210
+ right: var(--pf-c-back-to-top--Right);
5211
+ bottom: var(--pf-c-back-to-top--Bottom);
5212
+ }
5213
+
5214
+ @media (min-width: 768px) {
5215
+ .pf-c-back-to-top {
5216
+ --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
5217
+ }
5218
+ }
5219
+ .pf-c-back-to-top.pf-m-hidden {
5220
+ display: none;
5221
+ }
5222
+
5223
+ .pf-c-back-to-top .pf-c-button {
5224
+ --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
5225
+ --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
5226
+ --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
5227
+ --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
5228
+ --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
5229
+ --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
5230
+ box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
5231
+ }
5232
+
5233
5233
  .pf-c-description-list {
5234
5234
  --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
5235
5235
  --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
@@ -5616,27 +5616,45 @@ label.pf-c-check, .pf-c-check__label,
5616
5616
  }
5617
5617
  }
5618
5618
  .pf-c-divider {
5619
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
5619
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
5620
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
5621
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
5620
5622
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
5621
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
5622
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
5623
- --pf-c-divider--Display: flex;
5623
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
5624
5624
  --pf-c-divider--after--FlexBasis: 100%;
5625
5625
  --pf-c-divider--after--Inset: 0%;
5626
5626
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
5627
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
5627
+ --pf-c-divider--m-horizontal--Display: flex;
5628
+ --pf-c-divider--m-horizontal--FlexDirection: row;
5629
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
5630
+ --pf-c-divider--m-horizontal--after--Width: auto;
5631
+ --pf-c-divider--m-vertical--Display: inline-flex;
5632
+ --pf-c-divider--m-vertical--FlexDirection: column;
5633
+ --pf-c-divider--m-vertical--after--Height: auto;
5634
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
5628
5635
  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
5636
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5637
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5638
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5639
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5640
+ width: 100%;
5641
+ height: auto;
5642
+ display: var(--pf-c-divider--Display);
5643
+ flex-direction: var(--pf-c-divider--FlexDirection);
5629
5644
  align-items: center;
5630
5645
  align-self: stretch;
5631
5646
  flex-shrink: 0;
5632
5647
  justify-content: center;
5633
- width: 100%;
5634
5648
  border: 0;
5635
5649
  }
5636
5650
 
5637
5651
  .pf-c-divider::after {
5638
5652
  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5653
+ }
5654
+
5655
+ .pf-c-divider::after {
5639
5656
  align-self: stretch;
5657
+ width: var(--pf-c-divider--after--Width);
5640
5658
  height: var(--pf-c-divider--after--Height);
5641
5659
  content: "";
5642
5660
  background-color: var(--pf-c-divider--after--BackgroundColor);
@@ -5644,17 +5662,16 @@ label.pf-c-check, .pf-c-check__label,
5644
5662
  }
5645
5663
 
5646
5664
  .pf-c-divider.pf-m-vertical {
5647
- display: inline-flex;
5648
- flex-direction: column;
5665
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5666
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5667
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5668
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5649
5669
  width: auto;
5650
5670
  height: inherit;
5651
- min-height: 100%;
5652
- max-height: 100%;
5653
5671
  }
5654
5672
 
5655
5673
  .pf-c-divider.pf-m-vertical::after {
5656
5674
  flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5657
- width: var(--pf-c-divider--m-vertical--after--Width);
5658
5675
  }
5659
5676
 
5660
5677
  .pf-c-divider.pf-m-inset-none {
@@ -5689,6 +5706,34 @@ label.pf-c-check, .pf-c-check__label,
5689
5706
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5690
5707
  }
5691
5708
 
5709
+ @media (min-width: 576px) {
5710
+ .pf-c-divider.pf-m-horizontal-on-sm {
5711
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5712
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5713
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5714
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5715
+ width: 100%;
5716
+ height: auto;
5717
+ }
5718
+
5719
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
5720
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5721
+ }
5722
+ }
5723
+ @media (min-width: 576px) {
5724
+ .pf-c-divider.pf-m-vertical-on-sm {
5725
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5726
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5727
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5728
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5729
+ width: auto;
5730
+ height: inherit;
5731
+ }
5732
+
5733
+ .pf-c-divider.pf-m-vertical-on-sm::after {
5734
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5735
+ }
5736
+ }
5692
5737
  @media (min-width: 576px) {
5693
5738
  .pf-c-divider.pf-m-inset-none-on-sm {
5694
5739
  --pf-c-divider--after--Inset: 0%;
@@ -5722,6 +5767,34 @@ label.pf-c-check, .pf-c-check__label,
5722
5767
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5723
5768
  }
5724
5769
  }
5770
+ @media (min-width: 768px) {
5771
+ .pf-c-divider.pf-m-horizontal-on-md {
5772
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5773
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5774
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5775
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5776
+ width: 100%;
5777
+ height: auto;
5778
+ }
5779
+
5780
+ .pf-c-divider.pf-m-horizontal-on-md::after {
5781
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5782
+ }
5783
+ }
5784
+ @media (min-width: 768px) {
5785
+ .pf-c-divider.pf-m-vertical-on-md {
5786
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5787
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5788
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5789
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5790
+ width: auto;
5791
+ height: inherit;
5792
+ }
5793
+
5794
+ .pf-c-divider.pf-m-vertical-on-md::after {
5795
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5796
+ }
5797
+ }
5725
5798
  @media (min-width: 768px) {
5726
5799
  .pf-c-divider.pf-m-inset-none-on-md {
5727
5800
  --pf-c-divider--after--Inset: 0%;
@@ -5755,6 +5828,34 @@ label.pf-c-check, .pf-c-check__label,
5755
5828
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5756
5829
  }
5757
5830
  }
5831
+ @media (min-width: 992px) {
5832
+ .pf-c-divider.pf-m-horizontal-on-lg {
5833
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5834
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5835
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5836
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5837
+ width: 100%;
5838
+ height: auto;
5839
+ }
5840
+
5841
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
5842
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5843
+ }
5844
+ }
5845
+ @media (min-width: 992px) {
5846
+ .pf-c-divider.pf-m-vertical-on-lg {
5847
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5848
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5849
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5850
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5851
+ width: auto;
5852
+ height: inherit;
5853
+ }
5854
+
5855
+ .pf-c-divider.pf-m-vertical-on-lg::after {
5856
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5857
+ }
5858
+ }
5758
5859
  @media (min-width: 992px) {
5759
5860
  .pf-c-divider.pf-m-inset-none-on-lg {
5760
5861
  --pf-c-divider--after--Inset: 0%;
@@ -5788,6 +5889,34 @@ label.pf-c-check, .pf-c-check__label,
5788
5889
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5789
5890
  }
5790
5891
  }
5892
+ @media (min-width: 1200px) {
5893
+ .pf-c-divider.pf-m-horizontal-on-xl {
5894
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5895
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5896
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5897
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5898
+ width: 100%;
5899
+ height: auto;
5900
+ }
5901
+
5902
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
5903
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5904
+ }
5905
+ }
5906
+ @media (min-width: 1200px) {
5907
+ .pf-c-divider.pf-m-vertical-on-xl {
5908
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5909
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5910
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5911
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5912
+ width: auto;
5913
+ height: inherit;
5914
+ }
5915
+
5916
+ .pf-c-divider.pf-m-vertical-on-xl::after {
5917
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5918
+ }
5919
+ }
5791
5920
  @media (min-width: 1200px) {
5792
5921
  .pf-c-divider.pf-m-inset-none-on-xl {
5793
5922
  --pf-c-divider--after--Inset: 0%;
@@ -5821,6 +5950,34 @@ label.pf-c-check, .pf-c-check__label,
5821
5950
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5822
5951
  }
5823
5952
  }
5953
+ @media (min-width: 1450px) {
5954
+ .pf-c-divider.pf-m-horizontal-on-2xl {
5955
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5956
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5957
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5958
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5959
+ width: 100%;
5960
+ height: auto;
5961
+ }
5962
+
5963
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
5964
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5965
+ }
5966
+ }
5967
+ @media (min-width: 1450px) {
5968
+ .pf-c-divider.pf-m-vertical-on-2xl {
5969
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5970
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5971
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5972
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5973
+ width: auto;
5974
+ height: inherit;
5975
+ }
5976
+
5977
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
5978
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5979
+ }
5980
+ }
5824
5981
  @media (min-width: 1450px) {
5825
5982
  .pf-c-divider.pf-m-inset-none-on-2xl {
5826
5983
  --pf-c-divider--after--Inset: 0%;
@@ -14631,6 +14788,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14631
14788
  --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
14632
14789
  --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
14633
14790
  --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14791
+ --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
14634
14792
  display: grid;
14635
14793
  height: 100%;
14636
14794
  grid-template-columns: 1fr;
@@ -15221,6 +15379,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15221
15379
  --pf-c-page__main-wizard--BorderTopWidth: 0;
15222
15380
  }
15223
15381
 
15382
+ .pf-c-page__main-wizard.pf-m-light-200 {
15383
+ --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
15384
+ }
15385
+
15224
15386
  .pf-c-page__main-wizard .pf-c-page__main-body {
15225
15387
  min-height: 0;
15226
15388
  }
@@ -21779,7 +21941,7 @@ svg.pf-c-spinner.pf-m-xl {
21779
21941
  min-height: 0;
21780
21942
  }
21781
21943
 
21782
- .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
21944
+ .pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
21783
21945
  flex-shrink: 0;
21784
21946
  }
21785
21947