@patternfly/patternfly 4.191.0 → 4.192.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.
@@ -11559,42 +11559,58 @@ label.pf-c-check, .pf-c-check__label,
11559
11559
  }
11560
11560
 
11561
11561
  .pf-c-divider {
11562
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
11562
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
11563
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
11564
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
11563
11565
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
11564
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
11565
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
11566
- --pf-c-divider--Display: flex;
11566
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
11567
11567
  --pf-c-divider--after--FlexBasis: 100%;
11568
11568
  --pf-c-divider--after--Inset: 0%;
11569
11569
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
11570
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
11570
+ --pf-c-divider--m-horizontal--Display: flex;
11571
+ --pf-c-divider--m-horizontal--FlexDirection: row;
11572
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
11573
+ --pf-c-divider--m-horizontal--after--Width: auto;
11574
+ --pf-c-divider--m-vertical--Display: inline-flex;
11575
+ --pf-c-divider--m-vertical--FlexDirection: column;
11576
+ --pf-c-divider--m-vertical--after--Height: auto;
11577
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
11571
11578
  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
11579
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11580
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11581
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11582
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11583
+ width: 100%;
11584
+ height: auto;
11585
+ display: var(--pf-c-divider--Display);
11586
+ flex-direction: var(--pf-c-divider--FlexDirection);
11572
11587
  align-items: center;
11573
11588
  align-self: stretch;
11574
11589
  flex-shrink: 0;
11575
11590
  justify-content: center;
11576
- width: 100%;
11577
11591
  border: 0;
11578
11592
  }
11579
11593
  .pf-c-divider::after {
11580
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
11594
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11595
+ }
11596
+ .pf-c-divider::after {
11581
11597
  align-self: stretch;
11598
+ width: var(--pf-c-divider--after--Width);
11582
11599
  height: var(--pf-c-divider--after--Height);
11583
11600
  content: "";
11584
11601
  background-color: var(--pf-c-divider--after--BackgroundColor);
11585
11602
  justify-self: center;
11586
11603
  }
11587
11604
  .pf-c-divider.pf-m-vertical {
11588
- display: inline-flex;
11589
- flex-direction: column;
11605
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11606
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11607
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11608
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11590
11609
  width: auto;
11591
11610
  height: inherit;
11592
- min-height: 100%;
11593
- max-height: 100%;
11594
11611
  }
11595
11612
  .pf-c-divider.pf-m-vertical::after {
11596
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
11597
- width: var(--pf-c-divider--m-vertical--after--Width);
11613
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11598
11614
  }
11599
11615
  .pf-c-divider.pf-m-inset-none {
11600
11616
  --pf-c-divider--after--Inset: 0%;
@@ -11620,6 +11636,32 @@ label.pf-c-check, .pf-c-check__label,
11620
11636
  .pf-c-divider.pf-m-inset-3xl {
11621
11637
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11622
11638
  }
11639
+ @media (min-width: 576px) {
11640
+ .pf-c-divider.pf-m-horizontal-on-sm {
11641
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11642
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11643
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11644
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11645
+ width: 100%;
11646
+ height: auto;
11647
+ }
11648
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
11649
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11650
+ }
11651
+ }
11652
+ @media (min-width: 576px) {
11653
+ .pf-c-divider.pf-m-vertical-on-sm {
11654
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11655
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11656
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11657
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11658
+ width: auto;
11659
+ height: inherit;
11660
+ }
11661
+ .pf-c-divider.pf-m-vertical-on-sm::after {
11662
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11663
+ }
11664
+ }
11623
11665
  @media (min-width: 576px) {
11624
11666
  .pf-c-divider.pf-m-inset-none-on-sm {
11625
11667
  --pf-c-divider--after--Inset: 0%;
@@ -11646,6 +11688,32 @@ label.pf-c-check, .pf-c-check__label,
11646
11688
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11647
11689
  }
11648
11690
  }
11691
+ @media (min-width: 768px) {
11692
+ .pf-c-divider.pf-m-horizontal-on-md {
11693
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11694
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11695
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11696
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11697
+ width: 100%;
11698
+ height: auto;
11699
+ }
11700
+ .pf-c-divider.pf-m-horizontal-on-md::after {
11701
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11702
+ }
11703
+ }
11704
+ @media (min-width: 768px) {
11705
+ .pf-c-divider.pf-m-vertical-on-md {
11706
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11707
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11708
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11709
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11710
+ width: auto;
11711
+ height: inherit;
11712
+ }
11713
+ .pf-c-divider.pf-m-vertical-on-md::after {
11714
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11715
+ }
11716
+ }
11649
11717
  @media (min-width: 768px) {
11650
11718
  .pf-c-divider.pf-m-inset-none-on-md {
11651
11719
  --pf-c-divider--after--Inset: 0%;
@@ -11672,6 +11740,32 @@ label.pf-c-check, .pf-c-check__label,
11672
11740
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11673
11741
  }
11674
11742
  }
11743
+ @media (min-width: 992px) {
11744
+ .pf-c-divider.pf-m-horizontal-on-lg {
11745
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11746
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11747
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11748
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11749
+ width: 100%;
11750
+ height: auto;
11751
+ }
11752
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
11753
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11754
+ }
11755
+ }
11756
+ @media (min-width: 992px) {
11757
+ .pf-c-divider.pf-m-vertical-on-lg {
11758
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11759
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11760
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11761
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11762
+ width: auto;
11763
+ height: inherit;
11764
+ }
11765
+ .pf-c-divider.pf-m-vertical-on-lg::after {
11766
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11767
+ }
11768
+ }
11675
11769
  @media (min-width: 992px) {
11676
11770
  .pf-c-divider.pf-m-inset-none-on-lg {
11677
11771
  --pf-c-divider--after--Inset: 0%;
@@ -11698,6 +11792,32 @@ label.pf-c-check, .pf-c-check__label,
11698
11792
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11699
11793
  }
11700
11794
  }
11795
+ @media (min-width: 1200px) {
11796
+ .pf-c-divider.pf-m-horizontal-on-xl {
11797
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11798
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11799
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11800
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11801
+ width: 100%;
11802
+ height: auto;
11803
+ }
11804
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
11805
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11806
+ }
11807
+ }
11808
+ @media (min-width: 1200px) {
11809
+ .pf-c-divider.pf-m-vertical-on-xl {
11810
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11811
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11812
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11813
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11814
+ width: auto;
11815
+ height: inherit;
11816
+ }
11817
+ .pf-c-divider.pf-m-vertical-on-xl::after {
11818
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11819
+ }
11820
+ }
11701
11821
  @media (min-width: 1200px) {
11702
11822
  .pf-c-divider.pf-m-inset-none-on-xl {
11703
11823
  --pf-c-divider--after--Inset: 0%;
@@ -11724,6 +11844,32 @@ label.pf-c-check, .pf-c-check__label,
11724
11844
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11725
11845
  }
11726
11846
  }
11847
+ @media (min-width: 1450px) {
11848
+ .pf-c-divider.pf-m-horizontal-on-2xl {
11849
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11850
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11851
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11852
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11853
+ width: 100%;
11854
+ height: auto;
11855
+ }
11856
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
11857
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11858
+ }
11859
+ }
11860
+ @media (min-width: 1450px) {
11861
+ .pf-c-divider.pf-m-vertical-on-2xl {
11862
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11863
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11864
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11865
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11866
+ width: auto;
11867
+ height: inherit;
11868
+ }
11869
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
11870
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11871
+ }
11872
+ }
11727
11873
  @media (min-width: 1450px) {
11728
11874
  .pf-c-divider.pf-m-inset-none-on-2xl {
11729
11875
  --pf-c-divider--after--Inset: 0%;
@@ -27373,6 +27519,7 @@ svg.pf-c-spinner.pf-m-xl {
27373
27519
  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
27374
27520
  position: relative;
27375
27521
  display: flex;
27522
+ width: 100%;
27376
27523
  color: var(--pf-c-text-input-group--Color, inherit);
27377
27524
  background-color: var(--pf-c-text-input-group--BackgroundColor);
27378
27525
  }
@@ -27490,6 +27637,10 @@ svg.pf-c-spinner.pf-m-xl {
27490
27637
  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
27491
27638
  }
27492
27639
 
27640
+ .pf-c-text-input-group__group {
27641
+ display: flex;
27642
+ }
27643
+
27493
27644
  .pf-c-tile {
27494
27645
  --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
27495
27646
  --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
@@ -27995,6 +28146,7 @@ svg.pf-c-spinner.pf-m-xl {
27995
28146
  --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
27996
28147
  --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
27997
28148
  --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
28149
+ --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
27998
28150
  --pf-c-tree-view--m-guides__node--before--Width: 1rem;
27999
28151
  --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
28000
28152
  --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
@@ -28055,6 +28207,7 @@ svg.pf-c-spinner.pf-m-xl {
28055
28207
  }
28056
28208
  .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
28057
28209
  top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
28210
+ z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
28058
28211
  width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
28059
28212
  height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
28060
28213
  background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
package/patternfly.css CHANGED
@@ -11686,42 +11686,58 @@ label.pf-c-check, .pf-c-check__label,
11686
11686
  }
11687
11687
 
11688
11688
  .pf-c-divider {
11689
- --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
11689
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
11690
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
11691
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
11690
11692
  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
11691
- --pf-c-divider--after--Height: var(--pf-c-divider--Height);
11692
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
11693
- --pf-c-divider--Display: flex;
11693
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
11694
11694
  --pf-c-divider--after--FlexBasis: 100%;
11695
11695
  --pf-c-divider--after--Inset: 0%;
11696
11696
  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
11697
- --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
11697
+ --pf-c-divider--m-horizontal--Display: flex;
11698
+ --pf-c-divider--m-horizontal--FlexDirection: row;
11699
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
11700
+ --pf-c-divider--m-horizontal--after--Width: auto;
11701
+ --pf-c-divider--m-vertical--Display: inline-flex;
11702
+ --pf-c-divider--m-vertical--FlexDirection: column;
11703
+ --pf-c-divider--m-vertical--after--Height: auto;
11704
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
11698
11705
  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
11706
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11707
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11708
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11709
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11710
+ width: 100%;
11711
+ height: auto;
11712
+ display: var(--pf-c-divider--Display);
11713
+ flex-direction: var(--pf-c-divider--FlexDirection);
11699
11714
  align-items: center;
11700
11715
  align-self: stretch;
11701
11716
  flex-shrink: 0;
11702
11717
  justify-content: center;
11703
- width: 100%;
11704
11718
  border: 0;
11705
11719
  }
11706
11720
  .pf-c-divider::after {
11707
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
11721
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11722
+ }
11723
+ .pf-c-divider::after {
11708
11724
  align-self: stretch;
11725
+ width: var(--pf-c-divider--after--Width);
11709
11726
  height: var(--pf-c-divider--after--Height);
11710
11727
  content: "";
11711
11728
  background-color: var(--pf-c-divider--after--BackgroundColor);
11712
11729
  justify-self: center;
11713
11730
  }
11714
11731
  .pf-c-divider.pf-m-vertical {
11715
- display: inline-flex;
11716
- flex-direction: column;
11732
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11733
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11734
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11735
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11717
11736
  width: auto;
11718
11737
  height: inherit;
11719
- min-height: 100%;
11720
- max-height: 100%;
11721
11738
  }
11722
11739
  .pf-c-divider.pf-m-vertical::after {
11723
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
11724
- width: var(--pf-c-divider--m-vertical--after--Width);
11740
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11725
11741
  }
11726
11742
  .pf-c-divider.pf-m-inset-none {
11727
11743
  --pf-c-divider--after--Inset: 0%;
@@ -11747,6 +11763,32 @@ label.pf-c-check, .pf-c-check__label,
11747
11763
  .pf-c-divider.pf-m-inset-3xl {
11748
11764
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11749
11765
  }
11766
+ @media (min-width: 576px) {
11767
+ .pf-c-divider.pf-m-horizontal-on-sm {
11768
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11769
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11770
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11771
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11772
+ width: 100%;
11773
+ height: auto;
11774
+ }
11775
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
11776
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11777
+ }
11778
+ }
11779
+ @media (min-width: 576px) {
11780
+ .pf-c-divider.pf-m-vertical-on-sm {
11781
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11782
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11783
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11784
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11785
+ width: auto;
11786
+ height: inherit;
11787
+ }
11788
+ .pf-c-divider.pf-m-vertical-on-sm::after {
11789
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11790
+ }
11791
+ }
11750
11792
  @media (min-width: 576px) {
11751
11793
  .pf-c-divider.pf-m-inset-none-on-sm {
11752
11794
  --pf-c-divider--after--Inset: 0%;
@@ -11773,6 +11815,32 @@ label.pf-c-check, .pf-c-check__label,
11773
11815
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11774
11816
  }
11775
11817
  }
11818
+ @media (min-width: 768px) {
11819
+ .pf-c-divider.pf-m-horizontal-on-md {
11820
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11821
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11822
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11823
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11824
+ width: 100%;
11825
+ height: auto;
11826
+ }
11827
+ .pf-c-divider.pf-m-horizontal-on-md::after {
11828
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11829
+ }
11830
+ }
11831
+ @media (min-width: 768px) {
11832
+ .pf-c-divider.pf-m-vertical-on-md {
11833
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11834
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11835
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11836
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11837
+ width: auto;
11838
+ height: inherit;
11839
+ }
11840
+ .pf-c-divider.pf-m-vertical-on-md::after {
11841
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11842
+ }
11843
+ }
11776
11844
  @media (min-width: 768px) {
11777
11845
  .pf-c-divider.pf-m-inset-none-on-md {
11778
11846
  --pf-c-divider--after--Inset: 0%;
@@ -11799,6 +11867,32 @@ label.pf-c-check, .pf-c-check__label,
11799
11867
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11800
11868
  }
11801
11869
  }
11870
+ @media (min-width: 992px) {
11871
+ .pf-c-divider.pf-m-horizontal-on-lg {
11872
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11873
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11874
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11875
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11876
+ width: 100%;
11877
+ height: auto;
11878
+ }
11879
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
11880
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11881
+ }
11882
+ }
11883
+ @media (min-width: 992px) {
11884
+ .pf-c-divider.pf-m-vertical-on-lg {
11885
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11886
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11887
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11888
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11889
+ width: auto;
11890
+ height: inherit;
11891
+ }
11892
+ .pf-c-divider.pf-m-vertical-on-lg::after {
11893
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11894
+ }
11895
+ }
11802
11896
  @media (min-width: 992px) {
11803
11897
  .pf-c-divider.pf-m-inset-none-on-lg {
11804
11898
  --pf-c-divider--after--Inset: 0%;
@@ -11825,6 +11919,32 @@ label.pf-c-check, .pf-c-check__label,
11825
11919
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11826
11920
  }
11827
11921
  }
11922
+ @media (min-width: 1200px) {
11923
+ .pf-c-divider.pf-m-horizontal-on-xl {
11924
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11925
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11926
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11927
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11928
+ width: 100%;
11929
+ height: auto;
11930
+ }
11931
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
11932
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11933
+ }
11934
+ }
11935
+ @media (min-width: 1200px) {
11936
+ .pf-c-divider.pf-m-vertical-on-xl {
11937
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11938
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11939
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11940
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11941
+ width: auto;
11942
+ height: inherit;
11943
+ }
11944
+ .pf-c-divider.pf-m-vertical-on-xl::after {
11945
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11946
+ }
11947
+ }
11828
11948
  @media (min-width: 1200px) {
11829
11949
  .pf-c-divider.pf-m-inset-none-on-xl {
11830
11950
  --pf-c-divider--after--Inset: 0%;
@@ -11851,6 +11971,32 @@ label.pf-c-check, .pf-c-check__label,
11851
11971
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
11852
11972
  }
11853
11973
  }
11974
+ @media (min-width: 1450px) {
11975
+ .pf-c-divider.pf-m-horizontal-on-2xl {
11976
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
11977
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
11978
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
11979
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
11980
+ width: 100%;
11981
+ height: auto;
11982
+ }
11983
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
11984
+ flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
11985
+ }
11986
+ }
11987
+ @media (min-width: 1450px) {
11988
+ .pf-c-divider.pf-m-vertical-on-2xl {
11989
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
11990
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
11991
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
11992
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
11993
+ width: auto;
11994
+ height: inherit;
11995
+ }
11996
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
11997
+ flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
11998
+ }
11999
+ }
11854
12000
  @media (min-width: 1450px) {
11855
12001
  .pf-c-divider.pf-m-inset-none-on-2xl {
11856
12002
  --pf-c-divider--after--Inset: 0%;
@@ -27500,6 +27646,7 @@ svg.pf-c-spinner.pf-m-xl {
27500
27646
  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
27501
27647
  position: relative;
27502
27648
  display: flex;
27649
+ width: 100%;
27503
27650
  color: var(--pf-c-text-input-group--Color, inherit);
27504
27651
  background-color: var(--pf-c-text-input-group--BackgroundColor);
27505
27652
  }
@@ -27617,6 +27764,10 @@ svg.pf-c-spinner.pf-m-xl {
27617
27764
  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
27618
27765
  }
27619
27766
 
27767
+ .pf-c-text-input-group__group {
27768
+ display: flex;
27769
+ }
27770
+
27620
27771
  .pf-c-tile {
27621
27772
  --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
27622
27773
  --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
@@ -28122,6 +28273,7 @@ svg.pf-c-spinner.pf-m-xl {
28122
28273
  --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
28123
28274
  --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
28124
28275
  --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
28276
+ --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
28125
28277
  --pf-c-tree-view--m-guides__node--before--Width: 1rem;
28126
28278
  --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
28127
28279
  --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
@@ -28182,6 +28334,7 @@ svg.pf-c-spinner.pf-m-xl {
28182
28334
  }
28183
28335
  .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
28184
28336
  top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
28337
+ z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
28185
28338
  width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
28186
28339
  height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
28187
28340
  background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);