@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/Masthead/masthead.css +12 -12
  3. package/components/Pagination/pagination.css +12 -12
  4. package/components/Tabs/tabs.css +24 -24
  5. package/components/Toolbar/toolbar.css +54 -54
  6. package/layouts/Flex/flex.css +60 -120
  7. package/layouts/Flex/flex.scss +1 -1
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +174 -234
  10. package/patternfly.css +174 -234
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/sass-utilities/functions.scss +6 -9
package/layouts/Flex/flex.css CHANGED
@@ -1612,18 +1612,14 @@
1612
1612
  --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
1613
1613
  }
1614
1614
  }
1615
- .pf-v5-l-flex.pf-m-gap {
1616
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1617
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1615
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base {
1616
+ --pf-v5-l-flex--RowGap: ;
1617
+ --pf-v5-l-flex--ColumnGap: ;
1618
1618
  }
1619
1619
  .pf-v5-l-flex.pf-m-gap-none {
1620
1620
  --pf-v5-l-flex--RowGap: 0;
1621
1621
  --pf-v5-l-flex--ColumnGap: 0;
1622
1622
  }
1623
- .pf-v5-l-flex.pf-m-gap-xs {
1624
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1625
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1626
- }
1627
1623
  .pf-v5-l-flex.pf-m-gap-sm {
1628
1624
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1629
1625
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1652,23 +1648,19 @@
1652
1648
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1653
1649
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1654
1650
  }
1655
- .pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
1651
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
1656
1652
  --pf-v5-l-flex--spacer--row: 0;
1657
1653
  --pf-v5-l-flex--spacer--column: 0;
1658
1654
  }
1659
1655
  @media (min-width: 576px) {
1660
- .pf-v5-l-flex.pf-m-gap-on-sm {
1661
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1662
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1656
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
1657
+ --pf-v5-l-flex--RowGap: ;
1658
+ --pf-v5-l-flex--ColumnGap: ;
1663
1659
  }
1664
1660
  .pf-v5-l-flex.pf-m-gap-none-on-sm {
1665
1661
  --pf-v5-l-flex--RowGap: 0;
1666
1662
  --pf-v5-l-flex--ColumnGap: 0;
1667
1663
  }
1668
- .pf-v5-l-flex.pf-m-gap-xs-on-sm {
1669
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1670
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1671
- }
1672
1664
  .pf-v5-l-flex.pf-m-gap-sm-on-sm {
1673
1665
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1674
1666
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1697,24 +1689,20 @@
1697
1689
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1698
1690
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1699
1691
  }
1700
- .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-xs-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
1692
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
1701
1693
  --pf-v5-l-flex--spacer--row: 0;
1702
1694
  --pf-v5-l-flex--spacer--column: 0;
1703
1695
  }
1704
1696
  }
1705
1697
  @media (min-width: 768px) {
1706
- .pf-v5-l-flex.pf-m-gap-on-md {
1707
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1708
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1698
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
1699
+ --pf-v5-l-flex--RowGap: ;
1700
+ --pf-v5-l-flex--ColumnGap: ;
1709
1701
  }
1710
1702
  .pf-v5-l-flex.pf-m-gap-none-on-md {
1711
1703
  --pf-v5-l-flex--RowGap: 0;
1712
1704
  --pf-v5-l-flex--ColumnGap: 0;
1713
1705
  }
1714
- .pf-v5-l-flex.pf-m-gap-xs-on-md {
1715
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1716
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1717
- }
1718
1706
  .pf-v5-l-flex.pf-m-gap-sm-on-md {
1719
1707
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1720
1708
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1743,24 +1731,20 @@
1743
1731
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1744
1732
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1745
1733
  }
1746
- .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-xs-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
1734
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
1747
1735
  --pf-v5-l-flex--spacer--row: 0;
1748
1736
  --pf-v5-l-flex--spacer--column: 0;
1749
1737
  }
1750
1738
  }
1751
1739
  @media (min-width: 992px) {
1752
- .pf-v5-l-flex.pf-m-gap-on-lg {
1753
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1754
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1740
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
1741
+ --pf-v5-l-flex--RowGap: ;
1742
+ --pf-v5-l-flex--ColumnGap: ;
1755
1743
  }
1756
1744
  .pf-v5-l-flex.pf-m-gap-none-on-lg {
1757
1745
  --pf-v5-l-flex--RowGap: 0;
1758
1746
  --pf-v5-l-flex--ColumnGap: 0;
1759
1747
  }
1760
- .pf-v5-l-flex.pf-m-gap-xs-on-lg {
1761
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1762
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1763
- }
1764
1748
  .pf-v5-l-flex.pf-m-gap-sm-on-lg {
1765
1749
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1766
1750
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1789,24 +1773,20 @@
1789
1773
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1790
1774
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1791
1775
  }
1792
- .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-xs-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
1776
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
1793
1777
  --pf-v5-l-flex--spacer--row: 0;
1794
1778
  --pf-v5-l-flex--spacer--column: 0;
1795
1779
  }
1796
1780
  }
1797
1781
  @media (min-width: 1200px) {
1798
- .pf-v5-l-flex.pf-m-gap-on-xl {
1799
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1800
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1782
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
1783
+ --pf-v5-l-flex--RowGap: ;
1784
+ --pf-v5-l-flex--ColumnGap: ;
1801
1785
  }
1802
1786
  .pf-v5-l-flex.pf-m-gap-none-on-xl {
1803
1787
  --pf-v5-l-flex--RowGap: 0;
1804
1788
  --pf-v5-l-flex--ColumnGap: 0;
1805
1789
  }
1806
- .pf-v5-l-flex.pf-m-gap-xs-on-xl {
1807
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1808
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1809
- }
1810
1790
  .pf-v5-l-flex.pf-m-gap-sm-on-xl {
1811
1791
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1812
1792
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1835,24 +1815,20 @@
1835
1815
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1836
1816
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1837
1817
  }
1838
- .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-xs-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
1818
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
1839
1819
  --pf-v5-l-flex--spacer--row: 0;
1840
1820
  --pf-v5-l-flex--spacer--column: 0;
1841
1821
  }
1842
1822
  }
1843
1823
  @media (min-width: 1450px) {
1844
- .pf-v5-l-flex.pf-m-gap-on-2xl {
1845
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1846
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1824
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
1825
+ --pf-v5-l-flex--RowGap: ;
1826
+ --pf-v5-l-flex--ColumnGap: ;
1847
1827
  }
1848
1828
  .pf-v5-l-flex.pf-m-gap-none-on-2xl {
1849
1829
  --pf-v5-l-flex--RowGap: 0;
1850
1830
  --pf-v5-l-flex--ColumnGap: 0;
1851
1831
  }
1852
- .pf-v5-l-flex.pf-m-gap-xs-on-2xl {
1853
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1854
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1855
- }
1856
1832
  .pf-v5-l-flex.pf-m-gap-sm-on-2xl {
1857
1833
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1858
1834
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1881,20 +1857,17 @@
1881
1857
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1882
1858
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1883
1859
  }
1884
- .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-xs-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
1860
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
1885
1861
  --pf-v5-l-flex--spacer--row: 0;
1886
1862
  --pf-v5-l-flex--spacer--column: 0;
1887
1863
  }
1888
1864
  }
1889
- .pf-v5-l-flex.pf-m-row-gap {
1890
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1865
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
1866
+ --pf-v5-l-flex--RowGap: ;
1891
1867
  }
1892
1868
  .pf-v5-l-flex.pf-m-row-gap-none {
1893
1869
  --pf-v5-l-flex--RowGap: 0;
1894
1870
  }
1895
- .pf-v5-l-flex.pf-m-row-gap-xs {
1896
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1897
- }
1898
1871
  .pf-v5-l-flex.pf-m-row-gap-sm {
1899
1872
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1900
1873
  }
@@ -1916,19 +1889,16 @@
1916
1889
  .pf-v5-l-flex.pf-m-row-gap-4xl {
1917
1890
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1918
1891
  }
1919
- .pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-xs, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
1892
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
1920
1893
  --pf-v5-l-flex--spacer--row: 0;
1921
1894
  }
1922
1895
  @media (min-width: 576px) {
1923
- .pf-v5-l-flex.pf-m-row-gap-on-sm {
1924
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1896
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
1897
+ --pf-v5-l-flex--RowGap: ;
1925
1898
  }
1926
1899
  .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
1927
1900
  --pf-v5-l-flex--RowGap: 0;
1928
1901
  }
1929
- .pf-v5-l-flex.pf-m-row-gap-xs-on-sm {
1930
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1931
- }
1932
1902
  .pf-v5-l-flex.pf-m-row-gap-sm-on-sm {
1933
1903
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1934
1904
  }
@@ -1950,20 +1920,17 @@
1950
1920
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
1951
1921
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1952
1922
  }
1953
- .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-xs-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
1923
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
1954
1924
  --pf-v5-l-flex--spacer--row: 0;
1955
1925
  }
1956
1926
  }
1957
1927
  @media (min-width: 768px) {
1958
- .pf-v5-l-flex.pf-m-row-gap-on-md {
1959
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1928
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
1929
+ --pf-v5-l-flex--RowGap: ;
1960
1930
  }
1961
1931
  .pf-v5-l-flex.pf-m-row-gap-none-on-md {
1962
1932
  --pf-v5-l-flex--RowGap: 0;
1963
1933
  }
1964
- .pf-v5-l-flex.pf-m-row-gap-xs-on-md {
1965
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1966
- }
1967
1934
  .pf-v5-l-flex.pf-m-row-gap-sm-on-md {
1968
1935
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1969
1936
  }
@@ -1985,20 +1952,17 @@
1985
1952
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
1986
1953
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1987
1954
  }
1988
- .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-xs-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
1955
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
1989
1956
  --pf-v5-l-flex--spacer--row: 0;
1990
1957
  }
1991
1958
  }
1992
1959
  @media (min-width: 992px) {
1993
- .pf-v5-l-flex.pf-m-row-gap-on-lg {
1994
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1960
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
1961
+ --pf-v5-l-flex--RowGap: ;
1995
1962
  }
1996
1963
  .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
1997
1964
  --pf-v5-l-flex--RowGap: 0;
1998
1965
  }
1999
- .pf-v5-l-flex.pf-m-row-gap-xs-on-lg {
2000
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2001
- }
2002
1966
  .pf-v5-l-flex.pf-m-row-gap-sm-on-lg {
2003
1967
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2004
1968
  }
@@ -2020,20 +1984,17 @@
2020
1984
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
2021
1985
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2022
1986
  }
2023
- .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-xs-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
1987
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
2024
1988
  --pf-v5-l-flex--spacer--row: 0;
2025
1989
  }
2026
1990
  }
2027
1991
  @media (min-width: 1200px) {
2028
- .pf-v5-l-flex.pf-m-row-gap-on-xl {
2029
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1992
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
1993
+ --pf-v5-l-flex--RowGap: ;
2030
1994
  }
2031
1995
  .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
2032
1996
  --pf-v5-l-flex--RowGap: 0;
2033
1997
  }
2034
- .pf-v5-l-flex.pf-m-row-gap-xs-on-xl {
2035
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2036
- }
2037
1998
  .pf-v5-l-flex.pf-m-row-gap-sm-on-xl {
2038
1999
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2039
2000
  }
@@ -2055,20 +2016,17 @@
2055
2016
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
2056
2017
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2057
2018
  }
2058
- .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-xs-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
2019
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
2059
2020
  --pf-v5-l-flex--spacer--row: 0;
2060
2021
  }
2061
2022
  }
2062
2023
  @media (min-width: 1450px) {
2063
- .pf-v5-l-flex.pf-m-row-gap-on-2xl {
2064
- --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
2024
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
2025
+ --pf-v5-l-flex--RowGap: ;
2065
2026
  }
2066
2027
  .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
2067
2028
  --pf-v5-l-flex--RowGap: 0;
2068
2029
  }
2069
- .pf-v5-l-flex.pf-m-row-gap-xs-on-2xl {
2070
- --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2071
- }
2072
2030
  .pf-v5-l-flex.pf-m-row-gap-sm-on-2xl {
2073
2031
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2074
2032
  }
@@ -2090,19 +2048,16 @@
2090
2048
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
2091
2049
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2092
2050
  }
2093
- .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-xs-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
2051
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
2094
2052
  --pf-v5-l-flex--spacer--row: 0;
2095
2053
  }
2096
2054
  }
2097
- .pf-v5-l-flex.pf-m-column-gap {
2098
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2055
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
2056
+ --pf-v5-l-flex--ColumnGap: ;
2099
2057
  }
2100
2058
  .pf-v5-l-flex.pf-m-column-gap-none {
2101
2059
  --pf-v5-l-flex--ColumnGap: 0;
2102
2060
  }
2103
- .pf-v5-l-flex.pf-m-column-gap-xs {
2104
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2105
- }
2106
2061
  .pf-v5-l-flex.pf-m-column-gap-sm {
2107
2062
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2108
2063
  }
@@ -2124,19 +2079,16 @@
2124
2079
  .pf-v5-l-flex.pf-m-column-gap-4xl {
2125
2080
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2126
2081
  }
2127
- .pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-xs, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
2082
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
2128
2083
  --pf-v5-l-flex--spacer--column: 0;
2129
2084
  }
2130
2085
  @media (min-width: 576px) {
2131
- .pf-v5-l-flex.pf-m-column-gap-on-sm {
2132
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2086
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
2087
+ --pf-v5-l-flex--ColumnGap: ;
2133
2088
  }
2134
2089
  .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
2135
2090
  --pf-v5-l-flex--ColumnGap: 0;
2136
2091
  }
2137
- .pf-v5-l-flex.pf-m-column-gap-xs-on-sm {
2138
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2139
- }
2140
2092
  .pf-v5-l-flex.pf-m-column-gap-sm-on-sm {
2141
2093
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2142
2094
  }
@@ -2158,20 +2110,17 @@
2158
2110
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
2159
2111
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2160
2112
  }
2161
- .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-xs-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
2113
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
2162
2114
  --pf-v5-l-flex--spacer--column: 0;
2163
2115
  }
2164
2116
  }
2165
2117
  @media (min-width: 768px) {
2166
- .pf-v5-l-flex.pf-m-column-gap-on-md {
2167
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2118
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
2119
+ --pf-v5-l-flex--ColumnGap: ;
2168
2120
  }
2169
2121
  .pf-v5-l-flex.pf-m-column-gap-none-on-md {
2170
2122
  --pf-v5-l-flex--ColumnGap: 0;
2171
2123
  }
2172
- .pf-v5-l-flex.pf-m-column-gap-xs-on-md {
2173
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2174
- }
2175
2124
  .pf-v5-l-flex.pf-m-column-gap-sm-on-md {
2176
2125
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2177
2126
  }
@@ -2193,20 +2142,17 @@
2193
2142
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
2194
2143
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2195
2144
  }
2196
- .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-xs-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
2145
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
2197
2146
  --pf-v5-l-flex--spacer--column: 0;
2198
2147
  }
2199
2148
  }
2200
2149
  @media (min-width: 992px) {
2201
- .pf-v5-l-flex.pf-m-column-gap-on-lg {
2202
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2150
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
2151
+ --pf-v5-l-flex--ColumnGap: ;
2203
2152
  }
2204
2153
  .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
2205
2154
  --pf-v5-l-flex--ColumnGap: 0;
2206
2155
  }
2207
- .pf-v5-l-flex.pf-m-column-gap-xs-on-lg {
2208
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2209
- }
2210
2156
  .pf-v5-l-flex.pf-m-column-gap-sm-on-lg {
2211
2157
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2212
2158
  }
@@ -2228,20 +2174,17 @@
2228
2174
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
2229
2175
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2230
2176
  }
2231
- .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-xs-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
2177
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
2232
2178
  --pf-v5-l-flex--spacer--column: 0;
2233
2179
  }
2234
2180
  }
2235
2181
  @media (min-width: 1200px) {
2236
- .pf-v5-l-flex.pf-m-column-gap-on-xl {
2237
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2182
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
2183
+ --pf-v5-l-flex--ColumnGap: ;
2238
2184
  }
2239
2185
  .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
2240
2186
  --pf-v5-l-flex--ColumnGap: 0;
2241
2187
  }
2242
- .pf-v5-l-flex.pf-m-column-gap-xs-on-xl {
2243
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2244
- }
2245
2188
  .pf-v5-l-flex.pf-m-column-gap-sm-on-xl {
2246
2189
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2247
2190
  }
@@ -2263,20 +2206,17 @@
2263
2206
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
2264
2207
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2265
2208
  }
2266
- .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-xs-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
2209
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
2267
2210
  --pf-v5-l-flex--spacer--column: 0;
2268
2211
  }
2269
2212
  }
2270
2213
  @media (min-width: 1450px) {
2271
- .pf-v5-l-flex.pf-m-column-gap-on-2xl {
2272
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2214
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
2215
+ --pf-v5-l-flex--ColumnGap: ;
2273
2216
  }
2274
2217
  .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
2275
2218
  --pf-v5-l-flex--ColumnGap: 0;
2276
2219
  }
2277
- .pf-v5-l-flex.pf-m-column-gap-xs-on-2xl {
2278
- --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2279
- }
2280
2220
  .pf-v5-l-flex.pf-m-column-gap-sm-on-2xl {
2281
2221
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2282
2222
  }
@@ -2298,7 +2238,7 @@
2298
2238
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
2299
2239
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2300
2240
  }
2301
- .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
2241
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
2302
2242
  --pf-v5-l-flex--spacer--column: 0;
2303
2243
  }
2304
2244
  }
package/layouts/Flex/flex.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // Always keep list of spacers and breakpoints up-to-date
2
2
  $pf-v5-l-flex--breakpoint-map: build-breakpoint-map();
3
3
  $pf-v5-l-flex--spacer-map: build-spacer-map();
4
- $pf-v5-l-flex--gap-map: build-spacer-map($base: true);
4
+ $pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
5
5
  $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v5-l-flex--spacer-map);
6
6
 
7
7
  .#{$flex} {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.52",
4
+ "version": "5.0.0-alpha.53",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {