@patternfly/patternfly 4.176.2 → 4.178.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/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Nav/nav.css +3 -0
- package/components/Nav/nav.scss +4 -0
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +8 -5
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +19 -19
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/Nav/examples/Navigation.css +3 -1
- package/docs/components/Nav/examples/Navigation.md +79 -0
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +20 -9
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +4 -5
- package/docs/demos/BackToTop/examples/BackToTop.md +2 -203
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +32 -869
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Drawer/examples/Drawer.md +6 -6
- package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -12
- package/docs/demos/Masthead/examples/Masthead.md +1645 -1028
- package/docs/demos/Nav/examples/Nav.md +16 -17
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
- package/docs/demos/Page/examples/Page.md +4956 -989
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +18950 -12842
- package/docs/demos/Tabs/examples/Tabs.md +8 -102
- package/docs/demos/Toolbar/examples/Toolbar.md +2 -3
- package/docs/demos/Wizard/examples/Wizard.md +4 -4
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +247 -10
- package/patternfly.css +247 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -72,6 +72,83 @@ cssPrefix: pf-c-nav
|
|
|
72
72
|
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
### Grouped nav, no titles
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<nav class="pf-c-nav" aria-label="Global">
|
|
79
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
|
|
80
|
+
<ul class="pf-c-nav__list">
|
|
81
|
+
<li class="pf-c-nav__item">
|
|
82
|
+
<a href="#" class="pf-c-nav__link">Link 1</a>
|
|
83
|
+
</li>
|
|
84
|
+
<li class="pf-c-nav__item">
|
|
85
|
+
<a href="#" class="pf-c-nav__link">Link 2</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li class="pf-c-nav__item">
|
|
88
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
89
|
+
</li>
|
|
90
|
+
</ul>
|
|
91
|
+
</section>
|
|
92
|
+
<hr class="pf-c-divider" />
|
|
93
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
|
|
94
|
+
<ul class="pf-c-nav__list">
|
|
95
|
+
<li class="pf-c-nav__item">
|
|
96
|
+
<a href="#" class="pf-c-nav__link">Section 2, link 1</a>
|
|
97
|
+
</li>
|
|
98
|
+
<li class="pf-c-nav__item">
|
|
99
|
+
<a
|
|
100
|
+
href="#"
|
|
101
|
+
class="pf-c-nav__link pf-m-current"
|
|
102
|
+
aria-current="page"
|
|
103
|
+
>Current link</a>
|
|
104
|
+
</li>
|
|
105
|
+
<li class="pf-c-nav__item">
|
|
106
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
109
|
+
</section>
|
|
110
|
+
</nav>
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Grouped nav, no titles, no margin top
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<nav class="pf-c-nav" aria-label="Global">
|
|
118
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
|
|
119
|
+
<ul class="pf-c-nav__list">
|
|
120
|
+
<li class="pf-c-nav__item">
|
|
121
|
+
<a href="#" class="pf-c-nav__link">Link 1</a>
|
|
122
|
+
</li>
|
|
123
|
+
<li class="pf-c-nav__item">
|
|
124
|
+
<a href="#" class="pf-c-nav__link">Link 2</a>
|
|
125
|
+
</li>
|
|
126
|
+
<li class="pf-c-nav__item">
|
|
127
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
128
|
+
</li>
|
|
129
|
+
</ul>
|
|
130
|
+
</section>
|
|
131
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
|
|
132
|
+
<ul class="pf-c-nav__list">
|
|
133
|
+
<li class="pf-c-nav__item">
|
|
134
|
+
<a href="#" class="pf-c-nav__link">Section 2, link 1</a>
|
|
135
|
+
</li>
|
|
136
|
+
<li class="pf-c-nav__item">
|
|
137
|
+
<a
|
|
138
|
+
href="#"
|
|
139
|
+
class="pf-c-nav__link pf-m-current"
|
|
140
|
+
aria-current="page"
|
|
141
|
+
>Current link</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li class="pf-c-nav__item">
|
|
144
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
145
|
+
</li>
|
|
146
|
+
</ul>
|
|
147
|
+
</section>
|
|
148
|
+
</nav>
|
|
149
|
+
|
|
150
|
+
```
|
|
151
|
+
|
|
75
152
|
### Expanded
|
|
76
153
|
|
|
77
154
|
```html
|
|
@@ -1996,6 +2073,7 @@ The navigation system relies on several different sub-components:
|
|
|
1996
2073
|
| Attribute | Applied to | Outcome |
|
|
1997
2074
|
| -------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1998
2075
|
| `aria-label="[landmark description]"` | `.pf-c-nav` | Describes `<nav>` landmark. |
|
|
2076
|
+
| `aria-label="[section title]"` | `.pf-c-nav__section` | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present. |
|
|
1999
2077
|
| `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav` | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
|
|
2000
2078
|
| `aria-expanded="false"` | `.pf-c-nav__link` | Indicates that subnav section is hidden. |
|
|
2001
2079
|
| `aria-expanded="true"` | `.pf-c-nav__link` | Indicates that subnav section is visible. |
|
|
@@ -2019,6 +2097,7 @@ The navigation system relies on several different sub-components:
|
|
|
2019
2097
|
| `.pf-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
|
|
2020
2098
|
| `.pf-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
|
|
2021
2099
|
| `.pf-m-horizontal` | `.pf-c-nav` | Modifies nav for the horizontal variation. |
|
|
2100
|
+
| `.pf-m-no-title` | `.pf-c-nav__section` | Modifies nav section margin top to 0. |
|
|
2022
2101
|
| `.pf-m-horizontal-subnav` | `.pf-c-nav` | Modifies nav for the horizontal subnav variation. |
|
|
2023
2102
|
| `.pf-m-tertiary` | `.pf-c-nav` | Modifies nav for the tertiary variation. |
|
|
2024
2103
|
| `.pf-m-light` | `.pf-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |
|
|
@@ -205,12 +205,12 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
205
205
|
| `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
|
|
206
206
|
| `.pf-m-dark-200` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
|
|
207
207
|
| `.pf-m-dark-100` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
|
|
208
|
-
| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional breakpoint
|
|
209
|
-
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at
|
|
208
|
+
| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
209
|
+
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
|
|
210
210
|
| `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
|
|
211
211
|
| `.pf-m-no-fill` | `.pf-c-page__main-section` | Modifies a main page section to not grow to fill the available vertical space. |
|
|
212
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at
|
|
213
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at
|
|
212
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
|
|
213
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
214
214
|
| `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
|
|
215
215
|
| `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
|
|
216
216
|
| `.pf-m-sticky-top` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container. |
|
|
@@ -1213,8 +1213,8 @@ Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-se
|
|
|
1213
1213
|
| `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
|
|
1214
1214
|
| `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
|
|
1215
1215
|
| `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
|
|
1216
|
-
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles.
|
|
1217
|
-
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles.
|
|
1216
|
+
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1217
|
+
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1218
1218
|
| `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
|
|
1219
1219
|
| `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
|
|
1220
1220
|
| `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
|
|
@@ -179,17 +179,17 @@ cssPrefix: pf-c-sidebar
|
|
|
179
179
|
|
|
180
180
|
### Usage
|
|
181
181
|
|
|
182
|
-
| Class | Applied to | Outcome
|
|
183
|
-
| ------------------------------------------------------------------ | --------------------------------------------------------------- |
|
|
184
|
-
| `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required**
|
|
185
|
-
| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required**
|
|
186
|
-
| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required**
|
|
187
|
-
| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required**
|
|
188
|
-
| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content.
|
|
189
|
-
| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content.
|
|
190
|
-
| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side.
|
|
191
|
-
| `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content.
|
|
192
|
-
| `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout.
|
|
193
|
-
| `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically.
|
|
194
|
-
| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width. **Note:** does not apply when the panel is stacked on top of the content. |
|
|
195
|
-
| `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background.
|
|
182
|
+
| Class | Applied to | Outcome |
|
|
183
|
+
| ------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
184
|
+
| `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
|
|
185
|
+
| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
|
|
186
|
+
| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
|
|
187
|
+
| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
|
|
188
|
+
| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
|
|
189
|
+
| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
|
|
190
|
+
| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
|
|
191
|
+
| `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
|
|
192
|
+
| `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
|
|
193
|
+
| `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically. |
|
|
194
|
+
| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
|
|
195
|
+
| `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background. |
|
|
@@ -87,10 +87,10 @@ cssPrefix: pf-c-table
|
|
|
87
87
|
|
|
88
88
|
These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
|
|
89
89
|
|
|
90
|
-
| Class | Applied to | Outcome
|
|
91
|
-
| ------------------------------------------------------------------- | ------------- |
|
|
92
|
-
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at
|
|
93
|
-
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.
|
|
90
|
+
| Class | Applied to | Outcome |
|
|
91
|
+
| ------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
93
|
+
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
|
|
94
94
|
|
|
95
95
|
## Sortable
|
|
96
96
|
|
|
@@ -5644,7 +5644,18 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
|
|
|
5644
5644
|
>
|
|
5645
5645
|
<thead>
|
|
5646
5646
|
<tr role="row">
|
|
5647
|
-
<td
|
|
5647
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
5648
|
+
<button
|
|
5649
|
+
class="pf-c-button pf-m-plain"
|
|
5650
|
+
id="table-compact-expandable-expandable-toggle-thead"
|
|
5651
|
+
aria-label="Expand all"
|
|
5652
|
+
>
|
|
5653
|
+
<div class="pf-c-table__toggle-icon">
|
|
5654
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
5655
|
+
</div>
|
|
5656
|
+
</button>
|
|
5657
|
+
</td>
|
|
5658
|
+
|
|
5648
5659
|
<td class="pf-c-table__check" role="cell">
|
|
5649
5660
|
<label>
|
|
5650
5661
|
<input
|
|
@@ -19545,10 +19556,10 @@ Width modifiers control the width of the columns. To control the responsive beha
|
|
|
19545
19556
|
|
|
19546
19557
|
### Hidden/visible breakpoint modifiers usage
|
|
19547
19558
|
|
|
19548
|
-
| Class | Applied to | Outcome
|
|
19549
|
-
| --------------------------------- | -------------------- |
|
|
19550
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at
|
|
19551
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at
|
|
19559
|
+
| Class | Applied to | Outcome |
|
|
19560
|
+
| --------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19561
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
|
|
19562
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
19552
19563
|
|
|
19553
19564
|
## Text control modifiers
|
|
19554
19565
|
|
|
@@ -1895,30 +1895,30 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
1895
1895
|
|
|
1896
1896
|
### Usage
|
|
1897
1897
|
|
|
1898
|
-
| Class | Applied to | Outcome
|
|
1899
|
-
| ---------------------------------------------------------------- | ------------------- |
|
|
1900
|
-
| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required**
|
|
1901
|
-
| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required**
|
|
1902
|
-
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required**
|
|
1903
|
-
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required**
|
|
1904
|
-
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required**
|
|
1905
|
-
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required**
|
|
1906
|
-
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button.
|
|
1907
|
-
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle.
|
|
1908
|
-
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button.
|
|
1909
|
-
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon.
|
|
1910
|
-
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text.
|
|
1911
|
-
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component.
|
|
1912
|
-
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component.
|
|
1913
|
-
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component.
|
|
1914
|
-
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component.
|
|
1915
|
-
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space.
|
|
1916
|
-
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected.
|
|
1917
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components.
|
|
1918
|
-
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements.
|
|
1919
|
-
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors.
|
|
1920
|
-
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle. **Note:** works with vertical tabs only. |
|
|
1921
|
-
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable. |
|
|
1922
|
-
| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state.
|
|
1923
|
-
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles.
|
|
1924
|
-
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable.
|
|
1898
|
+
| Class | Applied to | Outcome |
|
|
1899
|
+
| ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1900
|
+
| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
|
|
1901
|
+
| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
|
|
1902
|
+
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
|
|
1903
|
+
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
|
|
1904
|
+
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
|
|
1905
|
+
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
|
|
1906
|
+
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
1907
|
+
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
|
|
1908
|
+
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
|
|
1909
|
+
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
|
|
1910
|
+
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
|
|
1911
|
+
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
|
|
1912
|
+
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
|
|
1913
|
+
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
|
|
1914
|
+
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
|
|
1915
|
+
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
1916
|
+
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
1917
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
1918
|
+
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
1919
|
+
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|
|
1920
|
+
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
|
|
1921
|
+
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1922
|
+
| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
|
|
1923
|
+
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
|
|
1924
|
+
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
|
|
@@ -26,18 +26,18 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
|
|
|
26
26
|
|
|
27
27
|
### Modifiers
|
|
28
28
|
|
|
29
|
-
| Class | Applied to | Outcome
|
|
30
|
-
| ------------------------------------- | ------------------- |
|
|
31
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional breakpoint. |
|
|
32
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional breakpoint. |
|
|
33
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
|
|
34
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
|
|
29
|
+
| Class | Applied to | Outcome |
|
|
30
|
+
| ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
32
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
33
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
34
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
35
35
|
|
|
36
36
|
### Special notes
|
|
37
37
|
|
|
38
38
|
Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-c-select`, `.pf-c-options-menu`). Rather, `.pf-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
|
|
39
39
|
|
|
40
|
-
**Available breakpoints are: `-on-sm
|
|
40
|
+
**Available [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
|
|
41
41
|
|
|
42
42
|
## Examples
|
|
43
43
|
|
|
@@ -167,9 +167,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
167
167
|
| Class | Applied to | Outcome |
|
|
168
168
|
| ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
169
|
| `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
|
|
170
|
-
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing.
|
|
171
|
-
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing.
|
|
172
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding.
|
|
170
|
+
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
171
|
+
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
172
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
173
173
|
|
|
174
174
|
### Width control
|
|
175
175
|
|
|
@@ -195,10 +195,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
195
195
|
|
|
196
196
|
### Width control usage
|
|
197
197
|
|
|
198
|
-
| Class | Applied to | Outcome
|
|
199
|
-
| ----------------------------------------------------------- | --------------------- |
|
|
200
|
-
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item. |
|
|
201
|
-
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item. |
|
|
198
|
+
| Class | Applied to | Outcome |
|
|
199
|
+
| ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
200
|
+
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
201
|
+
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
202
202
|
|
|
203
203
|
### Group types
|
|
204
204
|
|
|
@@ -1041,11 +1041,11 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1041
1041
|
|
|
1042
1042
|
### Usage
|
|
1043
1043
|
|
|
1044
|
-
| Class | Applied to | Outcome
|
|
1045
|
-
| ------------------------------ | ----------------------------------------------------------------------------- |
|
|
1046
|
-
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
|
|
1047
|
-
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout.
|
|
1048
|
-
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state.
|
|
1044
|
+
| Class | Applied to | Outcome |
|
|
1045
|
+
| ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1046
|
+
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
1047
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
1048
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
1049
1049
|
|
|
1050
1050
|
### Selected
|
|
1051
1051
|
|
|
@@ -4094,10 +4094,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4094
4094
|
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
|
|
4095
4095
|
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
|
|
4096
4096
|
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
|
|
4097
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional breakpoint.
|
|
4098
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional breakpoint.
|
|
4099
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint.
|
|
4100
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint.
|
|
4097
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4098
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4099
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4100
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4101
4101
|
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4102
4102
|
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4103
4103
|
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
@@ -4119,14 +4119,14 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4119
4119
|
|
|
4120
4120
|
### Toggle group usage
|
|
4121
4121
|
|
|
4122
|
-
| Class | Applied to | Outcome
|
|
4123
|
-
| ------------------------------ | ----------------------------------------------------------------------------- |
|
|
4124
|
-
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached.
|
|
4125
|
-
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content.
|
|
4122
|
+
| Class | Applied to | Outcome |
|
|
4123
|
+
| ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4124
|
+
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
|
|
4125
|
+
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
4126
4126
|
|
|
4127
4127
|
### Spacer system
|
|
4128
4128
|
|
|
4129
|
-
| Class | Applied to | Outcome
|
|
4130
|
-
| ------------------------------------------------------------ | --------------------------------------------- |
|
|
4131
|
-
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
|
|
4132
|
-
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
|
|
4129
|
+
| Class | Applied to | Outcome |
|
|
4130
|
+
| ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4131
|
+
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4132
|
+
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -33,7 +33,6 @@ section: components
|
|
|
33
33
|
/>
|
|
34
34
|
</a>
|
|
35
35
|
</div>
|
|
36
|
-
|
|
37
36
|
<div class="pf-c-page__header-tools">
|
|
38
37
|
<div class="pf-c-page__header-tools-group">
|
|
39
38
|
<div
|
|
@@ -55,7 +54,7 @@ section: components
|
|
|
55
54
|
type="button"
|
|
56
55
|
aria-label="Help"
|
|
57
56
|
>
|
|
58
|
-
<i class="
|
|
57
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
59
58
|
</button>
|
|
60
59
|
</div>
|
|
61
60
|
</div>
|
|
@@ -236,7 +235,7 @@ section: components
|
|
|
236
235
|
<div class="pf-c-page__main-body">
|
|
237
236
|
<div class="pf-c-content">
|
|
238
237
|
<h1>Main title</h1>
|
|
239
|
-
<p>This is a
|
|
238
|
+
<p>This is a full page demo.</p>
|
|
240
239
|
</div>
|
|
241
240
|
</div>
|
|
242
241
|
</section>
|
|
@@ -423,7 +422,7 @@ section: components
|
|
|
423
422
|
type="button"
|
|
424
423
|
aria-label="Help"
|
|
425
424
|
>
|
|
426
|
-
<i class="
|
|
425
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
427
426
|
</button>
|
|
428
427
|
</div>
|
|
429
428
|
</div>
|
|
@@ -796,7 +795,7 @@ section: components
|
|
|
796
795
|
type="button"
|
|
797
796
|
aria-label="Help"
|
|
798
797
|
>
|
|
799
|
-
<i class="
|
|
798
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
800
799
|
</button>
|
|
801
800
|
</div>
|
|
802
801
|
</div>
|