@patternfly/patternfly 4.191.0 → 4.192.0
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/components/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +159 -13
- package/patternfly.css +159 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
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%;
|