@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.
- package/RELEASE-NOTES.md +26 -0
- package/components/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/components/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -0
- package/components/TreeView/tree-view.css +2 -0
- package/components/TreeView/tree-view.scss +2 -0
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/components/InputGroup/examples/InputGroup.md +5 -5
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +23 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +617 -1
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/package.json +2 -2
- package/patternfly-no-reset.css +166 -13
- package/patternfly.css +166 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css
CHANGED
|
@@ -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--
|
|
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--
|
|
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-
|
|
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
|
-
|
|
11589
|
-
|
|
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--
|
|
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--
|
|
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-
|
|
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
|
-
|
|
11716
|
-
|
|
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);
|