@patternfly/patternfly 5.4.0-prerelease.2 → 5.4.0-prerelease.3
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/docs/components/Panel/examples/Panel.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.css +4 -2
- package/docs/components/Sidebar/examples/Sidebar.md +3 -3
- package/docs/components/Table/examples/Table.md +471 -44
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -32
- package/docs/utilities/Display/examples/Display.css +1 -8
- package/docs/utilities/Display/examples/Display.md +16 -7
- package/package.json +5 -5
- package/patternfly-addons.css +38 -0
- package/utilities/Display/display.css +38 -0
- package/utilities/Display/display.scss +3 -1
|
@@ -89,7 +89,7 @@ cssPrefix: pf-v5-c-panel
|
|
|
89
89
|
|
|
90
90
|
```html
|
|
91
91
|
<div class="pf-v5-c-panel pf-m-scrollable">
|
|
92
|
-
<div class="pf-v5-c-panel__main">
|
|
92
|
+
<div class="pf-v5-c-panel__main" tabindex="0">
|
|
93
93
|
<div class="pf-v5-c-panel__main-body">
|
|
94
94
|
Main content
|
|
95
95
|
<br />
|
|
@@ -120,7 +120,7 @@ cssPrefix: pf-v5-c-panel
|
|
|
120
120
|
<div class="pf-v5-c-panel pf-m-scrollable">
|
|
121
121
|
<div class="pf-v5-c-panel__header">Header content</div>
|
|
122
122
|
<hr class="pf-v5-c-divider" />
|
|
123
|
-
<div class="pf-v5-c-panel__main">
|
|
123
|
+
<div class="pf-v5-c-panel__main" tabindex="0">
|
|
124
124
|
<div class="pf-v5-c-panel__main-body">
|
|
125
125
|
Main content
|
|
126
126
|
<br />
|
|
@@ -122,7 +122,7 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
122
122
|
### Sticky panel
|
|
123
123
|
|
|
124
124
|
```html
|
|
125
|
-
<div class="pf-v5-c-sidebar">
|
|
125
|
+
<div class="pf-v5-c-sidebar" tabindex="0">
|
|
126
126
|
<div class="pf-v5-c-sidebar__main">
|
|
127
127
|
<div class="pf-v5-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
|
|
128
128
|
<div class="pf-v5-c-sidebar__content">
|
|
@@ -140,7 +140,7 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
140
140
|
### Static panel
|
|
141
141
|
|
|
142
142
|
```html
|
|
143
|
-
<div class="pf-v5-c-sidebar">
|
|
143
|
+
<div class="pf-v5-c-sidebar" tabindex="0">
|
|
144
144
|
<div class="pf-v5-c-sidebar__main">
|
|
145
145
|
<div class="pf-v5-c-sidebar__panel pf-m-static">Sidebar panel</div>
|
|
146
146
|
<div class="pf-v5-c-sidebar__content">
|
|
@@ -158,7 +158,7 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
158
158
|
### Responsive panel width
|
|
159
159
|
|
|
160
160
|
```html
|
|
161
|
-
<div class="pf-v5-c-sidebar">
|
|
161
|
+
<div class="pf-v5-c-sidebar" tabindex="0">
|
|
162
162
|
<div class="pf-v5-c-sidebar__main">
|
|
163
163
|
<div
|
|
164
164
|
class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"
|
|
@@ -24712,96 +24712,523 @@ There are a few ways this can be handled:
|
|
|
24712
24712
|
```html
|
|
24713
24713
|
<div class="pf-v5-c-scroll-inner-wrapper">
|
|
24714
24714
|
<table
|
|
24715
|
-
class="pf-v5-c-table pf-m-
|
|
24715
|
+
class="pf-v5-c-table pf-m-sticky-header"
|
|
24716
24716
|
role="grid"
|
|
24717
|
-
aria-label="This is a table
|
|
24718
|
-
id="
|
|
24717
|
+
aria-label="This is a scrollable table"
|
|
24718
|
+
id="sticky-header-example"
|
|
24719
24719
|
>
|
|
24720
24720
|
<thead class="pf-v5-c-table__thead">
|
|
24721
24721
|
<tr class="pf-v5-c-table__tr" role="row">
|
|
24722
|
+
<th
|
|
24723
|
+
class="pf-v5-c-table__th pf-v5-c-table__sort"
|
|
24724
|
+
role="columnheader"
|
|
24725
|
+
aria-sort="none"
|
|
24726
|
+
data-label="Example th"
|
|
24727
|
+
scope="col"
|
|
24728
|
+
>
|
|
24729
|
+
<button class="pf-v5-c-table__button">
|
|
24730
|
+
<div class="pf-v5-c-table__button-content">
|
|
24731
|
+
<span class="pf-v5-c-table__text">Fact</span>
|
|
24732
|
+
<span class="pf-v5-c-table__sort-indicator">
|
|
24733
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
24734
|
+
</span>
|
|
24735
|
+
</div>
|
|
24736
|
+
</button>
|
|
24737
|
+
</th>
|
|
24738
|
+
<th
|
|
24739
|
+
class="pf-v5-c-table__th pf-v5-c-table__sort"
|
|
24740
|
+
role="columnheader"
|
|
24741
|
+
aria-sort="none"
|
|
24742
|
+
data-label="Example th"
|
|
24743
|
+
scope="col"
|
|
24744
|
+
>
|
|
24745
|
+
<button class="pf-v5-c-table__button">
|
|
24746
|
+
<div class="pf-v5-c-table__button-content">
|
|
24747
|
+
<span class="pf-v5-c-table__text">State</span>
|
|
24748
|
+
<span class="pf-v5-c-table__sort-indicator">
|
|
24749
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
24750
|
+
</span>
|
|
24751
|
+
</div>
|
|
24752
|
+
</button>
|
|
24753
|
+
</th>
|
|
24754
|
+
<th
|
|
24755
|
+
class="pf-v5-c-table__th"
|
|
24756
|
+
role="columnheader"
|
|
24757
|
+
data-label="Example th"
|
|
24758
|
+
scope="col"
|
|
24759
|
+
>Header 3</th>
|
|
24760
|
+
<th
|
|
24761
|
+
class="pf-v5-c-table__th"
|
|
24762
|
+
role="columnheader"
|
|
24763
|
+
data-label="Example th"
|
|
24764
|
+
scope="col"
|
|
24765
|
+
>Header 4</th>
|
|
24766
|
+
<th
|
|
24767
|
+
class="pf-v5-c-table__th"
|
|
24768
|
+
role="columnheader"
|
|
24769
|
+
data-label="Example th"
|
|
24770
|
+
scope="col"
|
|
24771
|
+
>Header 5</th>
|
|
24722
24772
|
<th
|
|
24723
24773
|
class="pf-v5-c-table__th"
|
|
24724
24774
|
role="columnheader"
|
|
24775
|
+
data-label="Example th"
|
|
24725
24776
|
scope="col"
|
|
24726
|
-
>
|
|
24727
|
-
<th
|
|
24777
|
+
>Header 6</th>
|
|
24778
|
+
<th
|
|
24779
|
+
class="pf-v5-c-table__th"
|
|
24780
|
+
role="columnheader"
|
|
24781
|
+
data-label="Example th"
|
|
24782
|
+
scope="col"
|
|
24783
|
+
>Header 7</th>
|
|
24728
24784
|
<th
|
|
24729
24785
|
class="pf-v5-c-table__th"
|
|
24730
24786
|
role="columnheader"
|
|
24787
|
+
data-label="Example th"
|
|
24731
24788
|
scope="col"
|
|
24732
|
-
>
|
|
24733
|
-
|
|
24789
|
+
>Header 8</th>
|
|
24790
|
+
|
|
24734
24791
|
<th
|
|
24735
24792
|
class="pf-v5-c-table__th"
|
|
24736
24793
|
role="columnheader"
|
|
24794
|
+
data-label="Example th"
|
|
24737
24795
|
scope="col"
|
|
24738
|
-
>
|
|
24796
|
+
>Header 9</th>
|
|
24739
24797
|
</tr>
|
|
24740
24798
|
</thead>
|
|
24741
24799
|
|
|
24742
24800
|
<tbody class="pf-v5-c-table__tbody" role="rowgroup">
|
|
24743
24801
|
<tr class="pf-v5-c-table__tr" role="row">
|
|
24744
24802
|
<td
|
|
24745
|
-
class="pf-v5-c-table__td"
|
|
24803
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24746
24804
|
role="cell"
|
|
24747
|
-
data-label="
|
|
24748
|
-
>
|
|
24749
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24750
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24751
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24805
|
+
data-label="Example td"
|
|
24806
|
+
>Fact 1</td>
|
|
24752
24807
|
<td
|
|
24753
|
-
class="pf-v5-c-table__td"
|
|
24808
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24809
|
+
role="cell"
|
|
24810
|
+
data-label="Example td"
|
|
24811
|
+
>State 1</td>
|
|
24812
|
+
<td
|
|
24813
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24814
|
+
role="cell"
|
|
24815
|
+
data-label="Example td"
|
|
24816
|
+
>Test cell 1-3</td>
|
|
24817
|
+
<td
|
|
24818
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24819
|
+
role="cell"
|
|
24820
|
+
data-label="Example td"
|
|
24821
|
+
>Test cell 1-4</td>
|
|
24822
|
+
<td
|
|
24823
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24824
|
+
role="cell"
|
|
24825
|
+
data-label="Example td"
|
|
24826
|
+
>Test cell 1-5</td>
|
|
24827
|
+
<td
|
|
24828
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24829
|
+
role="cell"
|
|
24830
|
+
data-label="Example td"
|
|
24831
|
+
>Test cell 1-6</td>
|
|
24832
|
+
<td
|
|
24833
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24834
|
+
role="cell"
|
|
24835
|
+
data-label="Example td"
|
|
24836
|
+
>Test cell 1-7</td>
|
|
24837
|
+
<td
|
|
24838
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24839
|
+
role="cell"
|
|
24840
|
+
data-label="Example td"
|
|
24841
|
+
>Test cell 1-8</td>
|
|
24842
|
+
|
|
24843
|
+
<td
|
|
24844
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24754
24845
|
role="cell"
|
|
24755
|
-
data-label="
|
|
24756
|
-
>
|
|
24846
|
+
data-label="Example td"
|
|
24847
|
+
>Test cell 1-9</td>
|
|
24757
24848
|
</tr>
|
|
24849
|
+
<tr class="pf-v5-c-table__tr" role="row">
|
|
24850
|
+
<td
|
|
24851
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24852
|
+
role="cell"
|
|
24853
|
+
data-label="Example td"
|
|
24854
|
+
>Fact 2</td>
|
|
24855
|
+
<td
|
|
24856
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24857
|
+
role="cell"
|
|
24858
|
+
data-label="Example td"
|
|
24859
|
+
>State 2</td>
|
|
24860
|
+
<td
|
|
24861
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24862
|
+
role="cell"
|
|
24863
|
+
data-label="Example td"
|
|
24864
|
+
>Test cell 2-3</td>
|
|
24865
|
+
<td
|
|
24866
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24867
|
+
role="cell"
|
|
24868
|
+
data-label="Example td"
|
|
24869
|
+
>Test cell 2-4</td>
|
|
24870
|
+
<td
|
|
24871
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24872
|
+
role="cell"
|
|
24873
|
+
data-label="Example td"
|
|
24874
|
+
>Test cell 2-5</td>
|
|
24875
|
+
<td
|
|
24876
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24877
|
+
role="cell"
|
|
24878
|
+
data-label="Example td"
|
|
24879
|
+
>Test cell 2-6</td>
|
|
24880
|
+
<td
|
|
24881
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24882
|
+
role="cell"
|
|
24883
|
+
data-label="Example td"
|
|
24884
|
+
>Test cell 2-7</td>
|
|
24885
|
+
<td
|
|
24886
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24887
|
+
role="cell"
|
|
24888
|
+
data-label="Example td"
|
|
24889
|
+
>Test cell 2-8</td>
|
|
24758
24890
|
|
|
24891
|
+
<td
|
|
24892
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24893
|
+
role="cell"
|
|
24894
|
+
data-label="Example td"
|
|
24895
|
+
>Test cell 2-9</td>
|
|
24896
|
+
</tr>
|
|
24759
24897
|
<tr class="pf-v5-c-table__tr" role="row">
|
|
24760
24898
|
<td
|
|
24761
|
-
class="pf-v5-c-table__td"
|
|
24899
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24762
24900
|
role="cell"
|
|
24763
|
-
data-label="
|
|
24764
|
-
>
|
|
24765
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24766
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24767
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24901
|
+
data-label="Example td"
|
|
24902
|
+
>Fact 3</td>
|
|
24768
24903
|
<td
|
|
24769
|
-
class="pf-v5-c-table__td"
|
|
24904
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24905
|
+
role="cell"
|
|
24906
|
+
data-label="Example td"
|
|
24907
|
+
>State 3</td>
|
|
24908
|
+
<td
|
|
24909
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24910
|
+
role="cell"
|
|
24911
|
+
data-label="Example td"
|
|
24912
|
+
>Test cell 3-3</td>
|
|
24913
|
+
<td
|
|
24914
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24915
|
+
role="cell"
|
|
24916
|
+
data-label="Example td"
|
|
24917
|
+
>Test cell 3-4</td>
|
|
24918
|
+
<td
|
|
24919
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24920
|
+
role="cell"
|
|
24921
|
+
data-label="Example td"
|
|
24922
|
+
>Test cell 3-5</td>
|
|
24923
|
+
<td
|
|
24924
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24925
|
+
role="cell"
|
|
24926
|
+
data-label="Example td"
|
|
24927
|
+
>Test cell 3-6</td>
|
|
24928
|
+
<td
|
|
24929
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24930
|
+
role="cell"
|
|
24931
|
+
data-label="Example td"
|
|
24932
|
+
>Test cell 3-7</td>
|
|
24933
|
+
<td
|
|
24934
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24935
|
+
role="cell"
|
|
24936
|
+
data-label="Example td"
|
|
24937
|
+
>Test cell 3-8</td>
|
|
24938
|
+
|
|
24939
|
+
<td
|
|
24940
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24941
|
+
role="cell"
|
|
24942
|
+
data-label="Example td"
|
|
24943
|
+
>Test cell 3-9</td>
|
|
24944
|
+
</tr>
|
|
24945
|
+
<tr class="pf-v5-c-table__tr" role="row">
|
|
24946
|
+
<td
|
|
24947
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24948
|
+
role="cell"
|
|
24949
|
+
data-label="Example td"
|
|
24950
|
+
>Fact 4</td>
|
|
24951
|
+
<td
|
|
24952
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24953
|
+
role="cell"
|
|
24954
|
+
data-label="Example td"
|
|
24955
|
+
>State 4</td>
|
|
24956
|
+
<td
|
|
24957
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24958
|
+
role="cell"
|
|
24959
|
+
data-label="Example td"
|
|
24960
|
+
>Test cell 4-3</td>
|
|
24961
|
+
<td
|
|
24962
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24963
|
+
role="cell"
|
|
24964
|
+
data-label="Example td"
|
|
24965
|
+
>Test cell 4-4</td>
|
|
24966
|
+
<td
|
|
24967
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24968
|
+
role="cell"
|
|
24969
|
+
data-label="Example td"
|
|
24970
|
+
>Test cell 4-5</td>
|
|
24971
|
+
<td
|
|
24972
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24973
|
+
role="cell"
|
|
24974
|
+
data-label="Example td"
|
|
24975
|
+
>Test cell 4-6</td>
|
|
24976
|
+
<td
|
|
24977
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24978
|
+
role="cell"
|
|
24979
|
+
data-label="Example td"
|
|
24980
|
+
>Test cell 4-7</td>
|
|
24981
|
+
<td
|
|
24982
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24983
|
+
role="cell"
|
|
24984
|
+
data-label="Example td"
|
|
24985
|
+
>Test cell 4-8</td>
|
|
24986
|
+
|
|
24987
|
+
<td
|
|
24988
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24770
24989
|
role="cell"
|
|
24771
|
-
data-label="
|
|
24772
|
-
>
|
|
24990
|
+
data-label="Example td"
|
|
24991
|
+
>Test cell 4-9</td>
|
|
24773
24992
|
</tr>
|
|
24993
|
+
<tr class="pf-v5-c-table__tr" role="row">
|
|
24994
|
+
<td
|
|
24995
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24996
|
+
role="cell"
|
|
24997
|
+
data-label="Example td"
|
|
24998
|
+
>Fact 5</td>
|
|
24999
|
+
<td
|
|
25000
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25001
|
+
role="cell"
|
|
25002
|
+
data-label="Example td"
|
|
25003
|
+
>State 5</td>
|
|
25004
|
+
<td
|
|
25005
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25006
|
+
role="cell"
|
|
25007
|
+
data-label="Example td"
|
|
25008
|
+
>Test cell 5-3</td>
|
|
25009
|
+
<td
|
|
25010
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25011
|
+
role="cell"
|
|
25012
|
+
data-label="Example td"
|
|
25013
|
+
>Test cell 5-4</td>
|
|
25014
|
+
<td
|
|
25015
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25016
|
+
role="cell"
|
|
25017
|
+
data-label="Example td"
|
|
25018
|
+
>Test cell 5-5</td>
|
|
25019
|
+
<td
|
|
25020
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25021
|
+
role="cell"
|
|
25022
|
+
data-label="Example td"
|
|
25023
|
+
>Test cell 5-6</td>
|
|
25024
|
+
<td
|
|
25025
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25026
|
+
role="cell"
|
|
25027
|
+
data-label="Example td"
|
|
25028
|
+
>Test cell 5-7</td>
|
|
25029
|
+
<td
|
|
25030
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25031
|
+
role="cell"
|
|
25032
|
+
data-label="Example td"
|
|
25033
|
+
>Test cell 5-8</td>
|
|
24774
25034
|
|
|
25035
|
+
<td
|
|
25036
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25037
|
+
role="cell"
|
|
25038
|
+
data-label="Example td"
|
|
25039
|
+
>Test cell 5-9</td>
|
|
25040
|
+
</tr>
|
|
24775
25041
|
<tr class="pf-v5-c-table__tr" role="row">
|
|
24776
25042
|
<td
|
|
24777
|
-
class="pf-v5-c-table__td"
|
|
25043
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25044
|
+
role="cell"
|
|
25045
|
+
data-label="Example td"
|
|
25046
|
+
>Fact 6</td>
|
|
25047
|
+
<td
|
|
25048
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24778
25049
|
role="cell"
|
|
24779
|
-
data-label="
|
|
24780
|
-
>
|
|
24781
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24782
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24783
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
25050
|
+
data-label="Example td"
|
|
25051
|
+
>State 6</td>
|
|
24784
25052
|
<td
|
|
24785
|
-
class="pf-v5-c-table__td"
|
|
25053
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25054
|
+
role="cell"
|
|
25055
|
+
data-label="Example td"
|
|
25056
|
+
>Test cell 6-3</td>
|
|
25057
|
+
<td
|
|
25058
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25059
|
+
role="cell"
|
|
25060
|
+
data-label="Example td"
|
|
25061
|
+
>Test cell 6-4</td>
|
|
25062
|
+
<td
|
|
25063
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25064
|
+
role="cell"
|
|
25065
|
+
data-label="Example td"
|
|
25066
|
+
>Test cell 6-5</td>
|
|
25067
|
+
<td
|
|
25068
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25069
|
+
role="cell"
|
|
25070
|
+
data-label="Example td"
|
|
25071
|
+
>Test cell 6-6</td>
|
|
25072
|
+
<td
|
|
25073
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25074
|
+
role="cell"
|
|
25075
|
+
data-label="Example td"
|
|
25076
|
+
>Test cell 6-7</td>
|
|
25077
|
+
<td
|
|
25078
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25079
|
+
role="cell"
|
|
25080
|
+
data-label="Example td"
|
|
25081
|
+
>Test cell 6-8</td>
|
|
25082
|
+
|
|
25083
|
+
<td
|
|
25084
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24786
25085
|
role="cell"
|
|
24787
|
-
data-label="
|
|
24788
|
-
>
|
|
25086
|
+
data-label="Example td"
|
|
25087
|
+
>Test cell 6-9</td>
|
|
24789
25088
|
</tr>
|
|
25089
|
+
<tr class="pf-v5-c-table__tr" role="row">
|
|
25090
|
+
<td
|
|
25091
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25092
|
+
role="cell"
|
|
25093
|
+
data-label="Example td"
|
|
25094
|
+
>Fact 7</td>
|
|
25095
|
+
<td
|
|
25096
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25097
|
+
role="cell"
|
|
25098
|
+
data-label="Example td"
|
|
25099
|
+
>State 7</td>
|
|
25100
|
+
<td
|
|
25101
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25102
|
+
role="cell"
|
|
25103
|
+
data-label="Example td"
|
|
25104
|
+
>Test cell 7-3</td>
|
|
25105
|
+
<td
|
|
25106
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25107
|
+
role="cell"
|
|
25108
|
+
data-label="Example td"
|
|
25109
|
+
>Test cell 7-4</td>
|
|
25110
|
+
<td
|
|
25111
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25112
|
+
role="cell"
|
|
25113
|
+
data-label="Example td"
|
|
25114
|
+
>Test cell 7-5</td>
|
|
25115
|
+
<td
|
|
25116
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25117
|
+
role="cell"
|
|
25118
|
+
data-label="Example td"
|
|
25119
|
+
>Test cell 7-6</td>
|
|
25120
|
+
<td
|
|
25121
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25122
|
+
role="cell"
|
|
25123
|
+
data-label="Example td"
|
|
25124
|
+
>Test cell 7-7</td>
|
|
25125
|
+
<td
|
|
25126
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25127
|
+
role="cell"
|
|
25128
|
+
data-label="Example td"
|
|
25129
|
+
>Test cell 7-8</td>
|
|
24790
25130
|
|
|
25131
|
+
<td
|
|
25132
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25133
|
+
role="cell"
|
|
25134
|
+
data-label="Example td"
|
|
25135
|
+
>Test cell 7-9</td>
|
|
25136
|
+
</tr>
|
|
24791
25137
|
<tr class="pf-v5-c-table__tr" role="row">
|
|
24792
25138
|
<td
|
|
24793
|
-
class="pf-v5-c-table__td"
|
|
25139
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25140
|
+
role="cell"
|
|
25141
|
+
data-label="Example td"
|
|
25142
|
+
>Fact 8</td>
|
|
25143
|
+
<td
|
|
25144
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24794
25145
|
role="cell"
|
|
24795
|
-
data-label="
|
|
24796
|
-
>
|
|
24797
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24798
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24799
|
-
<td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
25146
|
+
data-label="Example td"
|
|
25147
|
+
>State 8</td>
|
|
24800
25148
|
<td
|
|
24801
|
-
class="pf-v5-c-table__td"
|
|
25149
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25150
|
+
role="cell"
|
|
25151
|
+
data-label="Example td"
|
|
25152
|
+
>Test cell 8-3</td>
|
|
25153
|
+
<td
|
|
25154
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25155
|
+
role="cell"
|
|
25156
|
+
data-label="Example td"
|
|
25157
|
+
>Test cell 8-4</td>
|
|
25158
|
+
<td
|
|
25159
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25160
|
+
role="cell"
|
|
25161
|
+
data-label="Example td"
|
|
25162
|
+
>Test cell 8-5</td>
|
|
25163
|
+
<td
|
|
25164
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
24802
25165
|
role="cell"
|
|
24803
|
-
data-label="
|
|
24804
|
-
>
|
|
25166
|
+
data-label="Example td"
|
|
25167
|
+
>Test cell 8-6</td>
|
|
25168
|
+
<td
|
|
25169
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25170
|
+
role="cell"
|
|
25171
|
+
data-label="Example td"
|
|
25172
|
+
>Test cell 8-7</td>
|
|
25173
|
+
<td
|
|
25174
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25175
|
+
role="cell"
|
|
25176
|
+
data-label="Example td"
|
|
25177
|
+
>Test cell 8-8</td>
|
|
25178
|
+
|
|
25179
|
+
<td
|
|
25180
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25181
|
+
role="cell"
|
|
25182
|
+
data-label="Example td"
|
|
25183
|
+
>Test cell 8-9</td>
|
|
25184
|
+
</tr>
|
|
25185
|
+
<tr class="pf-v5-c-table__tr" role="row">
|
|
25186
|
+
<td
|
|
25187
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25188
|
+
role="cell"
|
|
25189
|
+
data-label="Example td"
|
|
25190
|
+
>Fact 9</td>
|
|
25191
|
+
<td
|
|
25192
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25193
|
+
role="cell"
|
|
25194
|
+
data-label="Example td"
|
|
25195
|
+
>State 9</td>
|
|
25196
|
+
<td
|
|
25197
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25198
|
+
role="cell"
|
|
25199
|
+
data-label="Example td"
|
|
25200
|
+
>Test cell 9-3</td>
|
|
25201
|
+
<td
|
|
25202
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25203
|
+
role="cell"
|
|
25204
|
+
data-label="Example td"
|
|
25205
|
+
>Test cell 9-4</td>
|
|
25206
|
+
<td
|
|
25207
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25208
|
+
role="cell"
|
|
25209
|
+
data-label="Example td"
|
|
25210
|
+
>Test cell 9-5</td>
|
|
25211
|
+
<td
|
|
25212
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25213
|
+
role="cell"
|
|
25214
|
+
data-label="Example td"
|
|
25215
|
+
>Test cell 9-6</td>
|
|
25216
|
+
<td
|
|
25217
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25218
|
+
role="cell"
|
|
25219
|
+
data-label="Example td"
|
|
25220
|
+
>Test cell 9-7</td>
|
|
25221
|
+
<td
|
|
25222
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25223
|
+
role="cell"
|
|
25224
|
+
data-label="Example td"
|
|
25225
|
+
>Test cell 9-8</td>
|
|
25226
|
+
|
|
25227
|
+
<td
|
|
25228
|
+
class="pf-v5-c-table__td pf-m-nowrap"
|
|
25229
|
+
role="cell"
|
|
25230
|
+
data-label="Example td"
|
|
25231
|
+
>Test cell 9-9</td>
|
|
24805
25232
|
</tr>
|
|
24806
25233
|
</tbody>
|
|
24807
25234
|
</table>
|
|
@@ -13,14 +13,7 @@ section: components
|
|
|
13
13
|
class="pf-v5-c-form__label"
|
|
14
14
|
for="password-strength-demo--initial-password"
|
|
15
15
|
>
|
|
16
|
-
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label
|
|
17
|
-
class="pf-v5-c-form__group-label-help"
|
|
18
|
-
aria-label="More information for password field"
|
|
19
|
-
aria-describedby="password-strength-demo--initial-password"
|
|
20
|
-
role="button"
|
|
21
|
-
type="button"
|
|
22
|
-
tabindex="0"
|
|
23
|
-
><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
|
|
16
|
+
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label>
|
|
24
17
|
</div>
|
|
25
18
|
<div class="pf-v5-c-form__group-label-info"></div>
|
|
26
19
|
</div>
|
|
@@ -99,14 +92,7 @@ section: components
|
|
|
99
92
|
class="pf-v5-c-form__label"
|
|
100
93
|
for="password-strength-demo--invalid-password"
|
|
101
94
|
>
|
|
102
|
-
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label
|
|
103
|
-
class="pf-v5-c-form__group-label-help"
|
|
104
|
-
aria-label="More information for password field"
|
|
105
|
-
aria-describedby="password-strength-demo--invalid-password"
|
|
106
|
-
role="button"
|
|
107
|
-
type="button"
|
|
108
|
-
tabindex="0"
|
|
109
|
-
><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
|
|
95
|
+
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label>
|
|
110
96
|
</div>
|
|
111
97
|
<div class="pf-v5-c-form__group-label-info"></div>
|
|
112
98
|
</div>
|
|
@@ -179,14 +165,7 @@ section: components
|
|
|
179
165
|
class="pf-v5-c-form__label"
|
|
180
166
|
for="password-strength-demo--weak-password"
|
|
181
167
|
>
|
|
182
|
-
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label
|
|
183
|
-
class="pf-v5-c-form__group-label-help"
|
|
184
|
-
aria-label="More information for password field"
|
|
185
|
-
aria-describedby="password-strength-demo--weak-password"
|
|
186
|
-
role="button"
|
|
187
|
-
type="button"
|
|
188
|
-
tabindex="0"
|
|
189
|
-
><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
|
|
168
|
+
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label>
|
|
190
169
|
</div>
|
|
191
170
|
<div class="pf-v5-c-form__group-label-info">
|
|
192
171
|
<div class="pf-v5-c-helper-text">
|
|
@@ -268,14 +247,7 @@ section: components
|
|
|
268
247
|
class="pf-v5-c-form__label"
|
|
269
248
|
for="password-strength-demo--strong-password"
|
|
270
249
|
>
|
|
271
|
-
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label
|
|
272
|
-
class="pf-v5-c-form__group-label-help"
|
|
273
|
-
aria-label="More information for password field"
|
|
274
|
-
aria-describedby="password-strength-demo--strong-password"
|
|
275
|
-
role="button"
|
|
276
|
-
type="button"
|
|
277
|
-
tabindex="0"
|
|
278
|
-
><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
|
|
250
|
+
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label>
|
|
279
251
|
</div>
|
|
280
252
|
<div class="pf-v5-c-form__group-label-info">
|
|
281
253
|
<div class="pf-v5-c-helper-text">
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
.ws-core-u-display
|
|
2
|
-
.ws-core-u-display .pf-v5-u-display-block,
|
|
3
|
-
.ws-core-u-display .pf-v5-u-display-flex,
|
|
4
|
-
.ws-core-u-display .pf-v5-u-display-inline-flex,
|
|
5
|
-
.ws-core-u-display .pf-v5-u-display-grid,
|
|
6
|
-
.ws-core-u-display .pf-v5-u-display-inline,
|
|
7
|
-
.ws-core-u-display .pf-v5-u-display-table,
|
|
8
|
-
.ws-core-u-display .pf-v5-u-display-table-cell {
|
|
1
|
+
.ws-core-u-display [class*="pf-v5-u-display-"] {
|
|
9
2
|
padding: .5rem !important;
|
|
10
3
|
border: 2px dashed #393f44;
|
|
11
4
|
}
|
|
@@ -5,10 +5,10 @@ section: utility-classes
|
|
|
5
5
|
|
|
6
6
|
## Examples
|
|
7
7
|
|
|
8
|
-
### Inline
|
|
8
|
+
### Inline
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<div class="pf-v5-u-display-inline
|
|
11
|
+
<div class="pf-v5-u-display-inline">.pf-v5-u-display-inline</div>
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
|
|
@@ -19,6 +19,13 @@ section: utility-classes
|
|
|
19
19
|
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
### Inline block
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<div class="pf-v5-u-display-inline-block">.pf-v5-u-display-inline-block</div>
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
22
29
|
### Flex
|
|
23
30
|
|
|
24
31
|
```html
|
|
@@ -40,14 +47,14 @@ section: utility-classes
|
|
|
40
47
|
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
### Inline
|
|
50
|
+
### Inline grid
|
|
44
51
|
|
|
45
52
|
```html
|
|
46
|
-
<div class="pf-v5-u-display-inline">.pf-v5-u-display-inline</div>
|
|
53
|
+
<div class="pf-v5-u-display-inline-grid">.pf-v5-u-display-inline-grid</div>
|
|
47
54
|
|
|
48
55
|
```
|
|
49
56
|
|
|
50
|
-
### Table
|
|
57
|
+
### Table, table row, table cell
|
|
51
58
|
|
|
52
59
|
```html
|
|
53
60
|
<div class="pf-v5-u-display-table">
|
|
@@ -82,11 +89,13 @@ section: utility-classes
|
|
|
82
89
|
|
|
83
90
|
| Class | Applied to | Outcome |
|
|
84
91
|
| -- | -- | -- |
|
|
85
|
-
| `.pf-v5-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
|
|
86
|
-
| `.pf-v5-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
|
|
87
92
|
| `.pf-v5-u-display-inline{-on-[breakpoint]}` | `*` | Sets display: inline |
|
|
93
|
+
| `.pf-v5-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
|
|
94
|
+
| `.pf-v5-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
|
|
88
95
|
| `.pf-v5-u-display-flex{-on-[breakpoint]}` | `*` | Sets display: flex |
|
|
89
96
|
| `.pf-v5-u-display-inline-flex{-on-[breakpoint]}` | `*` | Sets display: inline-flex |
|
|
97
|
+
| `.pf-v5-u-display-grid{-on-[breakpoint]}` | `*` | Sets display: grid |
|
|
98
|
+
| `.pf-v5-u-display-inline-grid{-on-[breakpoint]}` | `*` | Sets display: inline-grid |
|
|
90
99
|
| `.pf-v5-u-display-table{-on-[breakpoint]}` | `*` | Sets display: table |
|
|
91
100
|
| `.pf-v5-u-display-table-row{-on-[breakpoint]}` | `*` | Sets display: table-row |
|
|
92
101
|
| `.pf-v5-u-display-table-cell{-on-[breakpoint]}` | `*` | Sets display: table-cell |
|
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.4.0-prerelease.
|
|
4
|
+
"version": "5.4.0-prerelease.3",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"@commitlint/config-conventional": "^18.4.3",
|
|
47
47
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
48
48
|
"@octokit/rest": "^20.0.2",
|
|
49
|
-
"@patternfly/documentation-framework": "5.
|
|
49
|
+
"@patternfly/documentation-framework": "5.15.2",
|
|
50
50
|
"@patternfly/patternfly-a11y": "4.3.1",
|
|
51
|
-
"@patternfly/react-code-editor": "5.3.
|
|
52
|
-
"@patternfly/react-core": "5.3.
|
|
53
|
-
"@patternfly/react-table": "5.3.
|
|
51
|
+
"@patternfly/react-code-editor": "5.3.3",
|
|
52
|
+
"@patternfly/react-core": "5.3.3",
|
|
53
|
+
"@patternfly/react-table": "5.3.3",
|
|
54
54
|
"@starptech/prettyhtml": "^0.10.0",
|
|
55
55
|
"backstopjs": "^6.2.2",
|
|
56
56
|
"cheerio": "^1.0.0-rc.12",
|
package/patternfly-addons.css
CHANGED
|
@@ -781,6 +781,14 @@
|
|
|
781
781
|
display: inline-flex !important;
|
|
782
782
|
}
|
|
783
783
|
|
|
784
|
+
.pf-v5-u-display-grid {
|
|
785
|
+
display: grid !important;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.pf-v5-u-display-inline-grid {
|
|
789
|
+
display: inline-grid !important;
|
|
790
|
+
}
|
|
791
|
+
|
|
784
792
|
@media screen and (min-width: 576px) {
|
|
785
793
|
.pf-v5-u-display-none-on-sm {
|
|
786
794
|
display: none !important;
|
|
@@ -809,6 +817,12 @@
|
|
|
809
817
|
.pf-v5-u-display-inline-flex-on-sm {
|
|
810
818
|
display: inline-flex !important;
|
|
811
819
|
}
|
|
820
|
+
.pf-v5-u-display-grid-on-sm {
|
|
821
|
+
display: grid !important;
|
|
822
|
+
}
|
|
823
|
+
.pf-v5-u-display-inline-grid-on-sm {
|
|
824
|
+
display: inline-grid !important;
|
|
825
|
+
}
|
|
812
826
|
}
|
|
813
827
|
@media screen and (min-width: 768px) {
|
|
814
828
|
.pf-v5-u-display-none-on-md {
|
|
@@ -838,6 +852,12 @@
|
|
|
838
852
|
.pf-v5-u-display-inline-flex-on-md {
|
|
839
853
|
display: inline-flex !important;
|
|
840
854
|
}
|
|
855
|
+
.pf-v5-u-display-grid-on-md {
|
|
856
|
+
display: grid !important;
|
|
857
|
+
}
|
|
858
|
+
.pf-v5-u-display-inline-grid-on-md {
|
|
859
|
+
display: inline-grid !important;
|
|
860
|
+
}
|
|
841
861
|
}
|
|
842
862
|
@media screen and (min-width: 992px) {
|
|
843
863
|
.pf-v5-u-display-none-on-lg {
|
|
@@ -867,6 +887,12 @@
|
|
|
867
887
|
.pf-v5-u-display-inline-flex-on-lg {
|
|
868
888
|
display: inline-flex !important;
|
|
869
889
|
}
|
|
890
|
+
.pf-v5-u-display-grid-on-lg {
|
|
891
|
+
display: grid !important;
|
|
892
|
+
}
|
|
893
|
+
.pf-v5-u-display-inline-grid-on-lg {
|
|
894
|
+
display: inline-grid !important;
|
|
895
|
+
}
|
|
870
896
|
}
|
|
871
897
|
@media screen and (min-width: 1200px) {
|
|
872
898
|
.pf-v5-u-display-none-on-xl {
|
|
@@ -896,6 +922,12 @@
|
|
|
896
922
|
.pf-v5-u-display-inline-flex-on-xl {
|
|
897
923
|
display: inline-flex !important;
|
|
898
924
|
}
|
|
925
|
+
.pf-v5-u-display-grid-on-xl {
|
|
926
|
+
display: grid !important;
|
|
927
|
+
}
|
|
928
|
+
.pf-v5-u-display-inline-grid-on-xl {
|
|
929
|
+
display: inline-grid !important;
|
|
930
|
+
}
|
|
899
931
|
}
|
|
900
932
|
@media screen and (min-width: 1450px) {
|
|
901
933
|
.pf-v5-u-display-none-on-2xl {
|
|
@@ -925,6 +957,12 @@
|
|
|
925
957
|
.pf-v5-u-display-inline-flex-on-2xl {
|
|
926
958
|
display: inline-flex !important;
|
|
927
959
|
}
|
|
960
|
+
.pf-v5-u-display-grid-on-2xl {
|
|
961
|
+
display: grid !important;
|
|
962
|
+
}
|
|
963
|
+
.pf-v5-u-display-inline-grid-on-2xl {
|
|
964
|
+
display: inline-grid !important;
|
|
965
|
+
}
|
|
928
966
|
}
|
|
929
967
|
.pf-v5-u-flex-direction-column {
|
|
930
968
|
flex-direction: column !important;
|
|
@@ -34,6 +34,14 @@
|
|
|
34
34
|
display: inline-flex !important;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.pf-v5-u-display-grid {
|
|
38
|
+
display: grid !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pf-v5-u-display-inline-grid {
|
|
42
|
+
display: inline-grid !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
37
45
|
@media screen and (min-width: 576px) {
|
|
38
46
|
.pf-v5-u-display-none-on-sm {
|
|
39
47
|
display: none !important;
|
|
@@ -62,6 +70,12 @@
|
|
|
62
70
|
.pf-v5-u-display-inline-flex-on-sm {
|
|
63
71
|
display: inline-flex !important;
|
|
64
72
|
}
|
|
73
|
+
.pf-v5-u-display-grid-on-sm {
|
|
74
|
+
display: grid !important;
|
|
75
|
+
}
|
|
76
|
+
.pf-v5-u-display-inline-grid-on-sm {
|
|
77
|
+
display: inline-grid !important;
|
|
78
|
+
}
|
|
65
79
|
}
|
|
66
80
|
@media screen and (min-width: 768px) {
|
|
67
81
|
.pf-v5-u-display-none-on-md {
|
|
@@ -91,6 +105,12 @@
|
|
|
91
105
|
.pf-v5-u-display-inline-flex-on-md {
|
|
92
106
|
display: inline-flex !important;
|
|
93
107
|
}
|
|
108
|
+
.pf-v5-u-display-grid-on-md {
|
|
109
|
+
display: grid !important;
|
|
110
|
+
}
|
|
111
|
+
.pf-v5-u-display-inline-grid-on-md {
|
|
112
|
+
display: inline-grid !important;
|
|
113
|
+
}
|
|
94
114
|
}
|
|
95
115
|
@media screen and (min-width: 992px) {
|
|
96
116
|
.pf-v5-u-display-none-on-lg {
|
|
@@ -120,6 +140,12 @@
|
|
|
120
140
|
.pf-v5-u-display-inline-flex-on-lg {
|
|
121
141
|
display: inline-flex !important;
|
|
122
142
|
}
|
|
143
|
+
.pf-v5-u-display-grid-on-lg {
|
|
144
|
+
display: grid !important;
|
|
145
|
+
}
|
|
146
|
+
.pf-v5-u-display-inline-grid-on-lg {
|
|
147
|
+
display: inline-grid !important;
|
|
148
|
+
}
|
|
123
149
|
}
|
|
124
150
|
@media screen and (min-width: 1200px) {
|
|
125
151
|
.pf-v5-u-display-none-on-xl {
|
|
@@ -149,6 +175,12 @@
|
|
|
149
175
|
.pf-v5-u-display-inline-flex-on-xl {
|
|
150
176
|
display: inline-flex !important;
|
|
151
177
|
}
|
|
178
|
+
.pf-v5-u-display-grid-on-xl {
|
|
179
|
+
display: grid !important;
|
|
180
|
+
}
|
|
181
|
+
.pf-v5-u-display-inline-grid-on-xl {
|
|
182
|
+
display: inline-grid !important;
|
|
183
|
+
}
|
|
152
184
|
}
|
|
153
185
|
@media screen and (min-width: 1450px) {
|
|
154
186
|
.pf-v5-u-display-none-on-2xl {
|
|
@@ -178,4 +210,10 @@
|
|
|
178
210
|
.pf-v5-u-display-inline-flex-on-2xl {
|
|
179
211
|
display: inline-flex !important;
|
|
180
212
|
}
|
|
213
|
+
.pf-v5-u-display-grid-on-2xl {
|
|
214
|
+
display: grid !important;
|
|
215
|
+
}
|
|
216
|
+
.pf-v5-u-display-inline-grid-on-2xl {
|
|
217
|
+
display: inline-grid !important;
|
|
218
|
+
}
|
|
181
219
|
}
|
|
@@ -10,7 +10,9 @@ $pf-v5-u-display-options: (
|
|
|
10
10
|
display-table-cell: (display table-cell),
|
|
11
11
|
display-table-row: (display table-row),
|
|
12
12
|
display-flex: (display flex),
|
|
13
|
-
display-inline-flex: (display inline-flex)
|
|
13
|
+
display-inline-flex: (display inline-flex),
|
|
14
|
+
display-grid: (display grid),
|
|
15
|
+
display-inline-grid: (display inline-grid),
|
|
14
16
|
);
|
|
15
17
|
|
|
16
18
|
@include pf-v5-utility-builder($pf-v5-u-display-options, $pf-v5-global--breakpoint-list);
|