@patternfly/patternfly 4.184.3 → 4.185.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/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
- package/docs/demos/Alert/examples/Alert.md +2484 -490
- package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
- package/docs/demos/Banner/examples/Banner.md +2074 -1466
- package/docs/demos/Button/examples/Button.md +33 -21
- package/docs/demos/CardView/examples/CardView.md +1065 -260
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
- package/docs/demos/DataList/examples/DataList.md +3777 -1553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
- package/docs/demos/Masthead/examples/Masthead.md +9 -20
- package/docs/demos/Modal/examples/Modal.md +5521 -34
- package/docs/demos/Nav/examples/Nav.md +6453 -1201
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
- package/docs/demos/Page/examples/Page.md +14 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +26 -65
- package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
- package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
- package/docs/demos/Wizard/examples/Wizard.md +3418 -288
- package/docs/pages/icons.md +1 -0
- package/icons/pf-icons.json +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +7 -2
- package/patternfly.css +7 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -7,164 +7,809 @@ cssPrefix: pf-d-back-to-top
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
-
<div class="pf-c-page" id="back-to-top-basic">
|
|
10
|
+
<div class="pf-c-page" id="back-to-top-basic-example">
|
|
11
11
|
<a
|
|
12
12
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
13
|
-
href="#main-content-back-to-top-basic"
|
|
13
|
+
href="#main-content-back-to-top-basic-example"
|
|
14
14
|
>Skip to content</a>
|
|
15
|
-
<header class="pf-c-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
<header class="pf-c-masthead" id="back-to-top-basic-example-masthead">
|
|
16
|
+
<span class="pf-c-masthead__toggle">
|
|
17
|
+
<button
|
|
18
|
+
class="pf-c-button pf-m-plain"
|
|
19
|
+
type="button"
|
|
20
|
+
aria-label="Global navigation"
|
|
21
|
+
>
|
|
22
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
23
|
+
</button>
|
|
24
|
+
</span>
|
|
25
|
+
<div class="pf-c-masthead__main">
|
|
26
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
27
|
+
<picture
|
|
28
|
+
class="pf-c-brand pf-m-picture"
|
|
29
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
25
30
|
>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
<source
|
|
32
|
+
media="(min-width: 768px)"
|
|
33
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
34
|
+
/>
|
|
35
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
36
|
+
<img
|
|
37
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
38
|
+
alt="Fallback patternFly default logo"
|
|
39
|
+
/>
|
|
40
|
+
</picture>
|
|
35
41
|
</a>
|
|
36
42
|
</div>
|
|
37
|
-
<div class="pf-c-
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
>
|
|
47
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
48
|
-
</button>
|
|
49
|
-
</div>
|
|
50
|
-
<div
|
|
51
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
52
|
-
>
|
|
53
|
-
<button
|
|
54
|
-
class="pf-c-button pf-m-plain"
|
|
55
|
-
type="button"
|
|
56
|
-
aria-label="Help"
|
|
57
|
-
>
|
|
58
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
59
|
-
</button>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="pf-c-page__header-tools-group">
|
|
63
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
64
|
-
<div class="pf-c-dropdown">
|
|
65
|
-
<button
|
|
66
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
67
|
-
id="back-to-top-basic-dropdown-kebab-1-button"
|
|
68
|
-
aria-expanded="false"
|
|
69
|
-
type="button"
|
|
70
|
-
aria-label="Actions"
|
|
71
|
-
>
|
|
72
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
73
|
-
</button>
|
|
74
|
-
<ul
|
|
75
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
76
|
-
aria-labelledby="back-to-top-basic-dropdown-kebab-1-button"
|
|
77
|
-
hidden
|
|
43
|
+
<div class="pf-c-masthead__content">
|
|
44
|
+
<div
|
|
45
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
46
|
+
id="back-to-top-basic-example-masthead-toolbar"
|
|
47
|
+
>
|
|
48
|
+
<div class="pf-c-toolbar__content">
|
|
49
|
+
<div class="pf-c-toolbar__content-section">
|
|
50
|
+
<div
|
|
51
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
78
52
|
>
|
|
79
|
-
<
|
|
80
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
81
|
-
</li>
|
|
82
|
-
<li>
|
|
83
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
84
|
-
</li>
|
|
85
|
-
<li>
|
|
86
|
-
<a
|
|
87
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
88
|
-
href="#"
|
|
89
|
-
aria-disabled="true"
|
|
90
|
-
tabindex="-1"
|
|
91
|
-
>Disabled link</a>
|
|
92
|
-
</li>
|
|
93
|
-
<li>
|
|
53
|
+
<div class="pf-c-toolbar__item">
|
|
94
54
|
<button
|
|
95
|
-
class="pf-c-
|
|
55
|
+
class="pf-c-button pf-m-plain"
|
|
96
56
|
type="button"
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
57
|
+
aria-label="Notifications"
|
|
58
|
+
>
|
|
59
|
+
<span class="pf-c-notification-badge">
|
|
60
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
61
|
+
</span>
|
|
62
|
+
</button>
|
|
63
|
+
</div>
|
|
64
|
+
<div
|
|
65
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
66
|
+
>
|
|
67
|
+
<div class="pf-c-toolbar__item">
|
|
68
|
+
<nav
|
|
69
|
+
class="pf-c-app-launcher"
|
|
70
|
+
aria-label="Application launcher"
|
|
71
|
+
id="back-to-top-basic-example-masthead-icon-group--app-launcher"
|
|
72
|
+
>
|
|
73
|
+
<button
|
|
74
|
+
class="pf-c-app-launcher__toggle"
|
|
75
|
+
type="button"
|
|
76
|
+
id="back-to-top-basic-example-masthead-icon-group--app-launcher-button"
|
|
77
|
+
aria-expanded="false"
|
|
78
|
+
aria-label="Application launcher"
|
|
79
|
+
>
|
|
80
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
81
|
+
</button>
|
|
82
|
+
<div
|
|
83
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
84
|
+
hidden
|
|
85
|
+
>
|
|
86
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
87
|
+
<div class="pf-c-search-input">
|
|
88
|
+
<div class="pf-c-search-input__bar">
|
|
89
|
+
<span class="pf-c-search-input__text">
|
|
90
|
+
<span class="pf-c-search-input__icon">
|
|
91
|
+
<i
|
|
92
|
+
class="fas fa-search fa-fw"
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
></i>
|
|
95
|
+
</span>
|
|
96
|
+
<input
|
|
97
|
+
class="pf-c-search-input__text-input"
|
|
98
|
+
type="text"
|
|
99
|
+
placeholder="Filter by name"
|
|
100
|
+
aria-label="Filter by name"
|
|
101
|
+
/>
|
|
102
|
+
</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<section class="pf-c-app-launcher__group">
|
|
107
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
108
|
+
<ul>
|
|
109
|
+
<li
|
|
110
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
111
|
+
>
|
|
112
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
113
|
+
Link 1
|
|
114
|
+
<span
|
|
115
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
116
|
+
>
|
|
117
|
+
<i
|
|
118
|
+
class="fas fa-external-link-alt"
|
|
119
|
+
aria-hidden="true"
|
|
120
|
+
></i>
|
|
121
|
+
</span>
|
|
122
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
123
|
+
</a>
|
|
124
|
+
<button
|
|
125
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
126
|
+
type="button"
|
|
127
|
+
aria-label="Favorite"
|
|
128
|
+
>
|
|
129
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
130
|
+
</button>
|
|
131
|
+
</li>
|
|
132
|
+
<li
|
|
133
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
134
|
+
>
|
|
135
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
136
|
+
Link 2
|
|
137
|
+
<span
|
|
138
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
139
|
+
>
|
|
140
|
+
<i
|
|
141
|
+
class="fas fa-external-link-alt"
|
|
142
|
+
aria-hidden="true"
|
|
143
|
+
></i>
|
|
144
|
+
</span>
|
|
145
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
146
|
+
</a>
|
|
147
|
+
<button
|
|
148
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
149
|
+
type="button"
|
|
150
|
+
aria-label="Favorite"
|
|
151
|
+
>
|
|
152
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
153
|
+
</button>
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</section>
|
|
157
|
+
<hr class="pf-c-divider" />
|
|
158
|
+
<section class="pf-c-app-launcher__group">
|
|
159
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
160
|
+
<ul>
|
|
161
|
+
<li
|
|
162
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
163
|
+
>
|
|
164
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
165
|
+
Link 1
|
|
166
|
+
<span
|
|
167
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
168
|
+
>
|
|
169
|
+
<i
|
|
170
|
+
class="fas fa-external-link-alt"
|
|
171
|
+
aria-hidden="true"
|
|
172
|
+
></i>
|
|
173
|
+
</span>
|
|
174
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
175
|
+
</a>
|
|
176
|
+
<button
|
|
177
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
178
|
+
type="button"
|
|
179
|
+
aria-label="Favorite"
|
|
180
|
+
>
|
|
181
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
182
|
+
</button>
|
|
183
|
+
</li>
|
|
184
|
+
<li
|
|
185
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
186
|
+
>
|
|
187
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
188
|
+
Link 2
|
|
189
|
+
<span
|
|
190
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
191
|
+
>
|
|
192
|
+
<i
|
|
193
|
+
class="fas fa-external-link-alt"
|
|
194
|
+
aria-hidden="true"
|
|
195
|
+
></i>
|
|
196
|
+
</span>
|
|
197
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
198
|
+
</a>
|
|
199
|
+
<button
|
|
200
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
201
|
+
type="button"
|
|
202
|
+
aria-label="Favorite"
|
|
203
|
+
>
|
|
204
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
205
|
+
</button>
|
|
206
|
+
</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</section>
|
|
209
|
+
</div>
|
|
210
|
+
</nav>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="pf-c-toolbar__item">
|
|
213
|
+
<div class="pf-c-dropdown">
|
|
214
|
+
<button
|
|
215
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
216
|
+
id="back-to-top-basic-example-masthead-settings-button"
|
|
217
|
+
aria-expanded="false"
|
|
218
|
+
type="button"
|
|
219
|
+
aria-label="Settings"
|
|
220
|
+
>
|
|
221
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
222
|
+
</button>
|
|
223
|
+
<ul
|
|
224
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
225
|
+
aria-labelledby="back-to-top-basic-example-masthead-settings-button"
|
|
226
|
+
hidden
|
|
227
|
+
>
|
|
228
|
+
<li>
|
|
229
|
+
<button
|
|
230
|
+
class="pf-c-dropdown__menu-item"
|
|
231
|
+
type="button"
|
|
232
|
+
>Settings</button>
|
|
233
|
+
</li>
|
|
234
|
+
<li>
|
|
235
|
+
<button
|
|
236
|
+
class="pf-c-dropdown__menu-item"
|
|
237
|
+
type="button"
|
|
238
|
+
>Use the beta release</button>
|
|
239
|
+
</li>
|
|
240
|
+
</ul>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="pf-c-toolbar__item">
|
|
244
|
+
<div class="pf-c-dropdown">
|
|
245
|
+
<button
|
|
246
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
247
|
+
id="back-to-top-basic-example-masthead-help-button"
|
|
248
|
+
aria-expanded="false"
|
|
249
|
+
type="button"
|
|
250
|
+
aria-label="Help"
|
|
251
|
+
>
|
|
252
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
253
|
+
</button>
|
|
254
|
+
<ul
|
|
255
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
256
|
+
aria-labelledby="back-to-top-basic-example-masthead-help-button"
|
|
257
|
+
hidden
|
|
258
|
+
>
|
|
259
|
+
<li>
|
|
260
|
+
<button
|
|
261
|
+
class="pf-c-dropdown__menu-item"
|
|
262
|
+
type="button"
|
|
263
|
+
>Support options</button>
|
|
264
|
+
</li>
|
|
265
|
+
<li>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-dropdown__menu-item"
|
|
268
|
+
type="button"
|
|
269
|
+
>Open support case</button>
|
|
270
|
+
</li>
|
|
271
|
+
<li>
|
|
272
|
+
<button
|
|
273
|
+
class="pf-c-dropdown__menu-item"
|
|
274
|
+
type="button"
|
|
275
|
+
>API documentation</button>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
282
|
+
<div class="pf-c-dropdown">
|
|
283
|
+
<button
|
|
284
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
285
|
+
type="button"
|
|
286
|
+
aria-expanded="false"
|
|
287
|
+
aria-label="Actions"
|
|
288
|
+
>
|
|
289
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
290
|
+
</button>
|
|
291
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
292
|
+
<div class="pf-c-menu__content">
|
|
293
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
294
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
295
|
+
<li
|
|
296
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
297
|
+
role="none"
|
|
298
|
+
>
|
|
299
|
+
<button
|
|
300
|
+
class="pf-c-menu__item"
|
|
301
|
+
type="button"
|
|
302
|
+
disabled
|
|
303
|
+
role="menuitem"
|
|
304
|
+
>
|
|
305
|
+
<span class="pf-c-menu__item-description">
|
|
306
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
307
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
308
|
+
</span>
|
|
309
|
+
</button>
|
|
310
|
+
</li>
|
|
311
|
+
<li
|
|
312
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
313
|
+
role="none"
|
|
314
|
+
>
|
|
315
|
+
<button
|
|
316
|
+
class="pf-c-menu__item"
|
|
317
|
+
type="button"
|
|
318
|
+
disabled
|
|
319
|
+
role="menuitem"
|
|
320
|
+
>
|
|
321
|
+
<span class="pf-c-menu__item-description">
|
|
322
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
323
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
324
|
+
</span>
|
|
325
|
+
</button>
|
|
326
|
+
</li>
|
|
327
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
328
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
329
|
+
<button
|
|
330
|
+
class="pf-c-menu__item"
|
|
331
|
+
type="button"
|
|
332
|
+
role="menuitem"
|
|
333
|
+
>
|
|
334
|
+
<span class="pf-c-menu__item-main">
|
|
335
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
336
|
+
</span>
|
|
337
|
+
</button>
|
|
338
|
+
</li>
|
|
339
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
340
|
+
<button
|
|
341
|
+
class="pf-c-menu__item"
|
|
342
|
+
type="button"
|
|
343
|
+
role="menuitem"
|
|
344
|
+
>
|
|
345
|
+
<span class="pf-c-menu__item-main">
|
|
346
|
+
<span
|
|
347
|
+
class="pf-c-menu__item-text"
|
|
348
|
+
>User management</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</li>
|
|
352
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
353
|
+
<button
|
|
354
|
+
class="pf-c-menu__item"
|
|
355
|
+
type="button"
|
|
356
|
+
role="menuitem"
|
|
357
|
+
>
|
|
358
|
+
<span class="pf-c-menu__item-main">
|
|
359
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
360
|
+
</span>
|
|
361
|
+
</button>
|
|
362
|
+
</li>
|
|
363
|
+
</ul>
|
|
364
|
+
</section>
|
|
365
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
366
|
+
<section class="pf-c-menu__group">
|
|
367
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
368
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
369
|
+
<button
|
|
370
|
+
class="pf-c-menu__item"
|
|
371
|
+
type="button"
|
|
372
|
+
role="menuitem"
|
|
373
|
+
aria-expanded="false"
|
|
374
|
+
>
|
|
375
|
+
<span class="pf-c-menu__item-main">
|
|
376
|
+
<span class="pf-c-menu__item-icon">
|
|
377
|
+
<i
|
|
378
|
+
class="fas fa-fw fa-cog"
|
|
379
|
+
aria-hidden="true"
|
|
380
|
+
></i>
|
|
381
|
+
</span>
|
|
382
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
383
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
384
|
+
<i class="fas fa-angle-right"></i>
|
|
385
|
+
</span>
|
|
386
|
+
</span>
|
|
387
|
+
</button>
|
|
388
|
+
<div class="pf-c-menu" hidden>
|
|
389
|
+
<div class="pf-c-menu__content">
|
|
390
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
391
|
+
<li
|
|
392
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
393
|
+
role="none"
|
|
394
|
+
>
|
|
395
|
+
<button
|
|
396
|
+
class="pf-c-menu__item"
|
|
397
|
+
type="button"
|
|
398
|
+
role="menuitem"
|
|
399
|
+
>
|
|
400
|
+
<span class="pf-c-menu__item-main">
|
|
401
|
+
<span
|
|
402
|
+
class="pf-c-menu__item-toggle-icon"
|
|
403
|
+
>
|
|
404
|
+
<i class="fas fa-angle-left"></i>
|
|
405
|
+
</span>
|
|
406
|
+
<span class="pf-c-menu__item-icon">
|
|
407
|
+
<i
|
|
408
|
+
class="fas fa-fw fa-cog"
|
|
409
|
+
aria-hidden="true"
|
|
410
|
+
></i>
|
|
411
|
+
</span>
|
|
412
|
+
<span
|
|
413
|
+
class="pf-c-menu__item-text"
|
|
414
|
+
>Settings</span>
|
|
415
|
+
</span>
|
|
416
|
+
</button>
|
|
417
|
+
</li>
|
|
418
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
419
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
420
|
+
<a
|
|
421
|
+
class="pf-c-menu__item"
|
|
422
|
+
href="#"
|
|
423
|
+
role="menuitem"
|
|
424
|
+
>
|
|
425
|
+
<span class="pf-c-menu__item-main">
|
|
426
|
+
<span
|
|
427
|
+
class="pf-c-menu__item-text"
|
|
428
|
+
>Customer support</span>
|
|
429
|
+
</span>
|
|
430
|
+
</a>
|
|
431
|
+
</li>
|
|
432
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
433
|
+
<a
|
|
434
|
+
class="pf-c-menu__item"
|
|
435
|
+
href="#"
|
|
436
|
+
role="menuitem"
|
|
437
|
+
>
|
|
438
|
+
<span class="pf-c-menu__item-main">
|
|
439
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
440
|
+
</span>
|
|
441
|
+
</a>
|
|
442
|
+
</li>
|
|
443
|
+
</ul>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</li>
|
|
447
|
+
|
|
448
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
449
|
+
<button
|
|
450
|
+
class="pf-c-menu__item"
|
|
451
|
+
type="button"
|
|
452
|
+
role="menuitem"
|
|
453
|
+
aria-expanded="false"
|
|
454
|
+
>
|
|
455
|
+
<span class="pf-c-menu__item-main">
|
|
456
|
+
<span class="pf-c-menu__item-icon">
|
|
457
|
+
<i
|
|
458
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
459
|
+
aria-hidden="true"
|
|
460
|
+
></i>
|
|
461
|
+
</span>
|
|
462
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
463
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
464
|
+
<i class="fas fa-angle-right"></i>
|
|
465
|
+
</span>
|
|
466
|
+
</span>
|
|
467
|
+
</button>
|
|
468
|
+
<div class="pf-c-menu" hidden>
|
|
469
|
+
<div class="pf-c-menu__content">
|
|
470
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
471
|
+
<li
|
|
472
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
473
|
+
role="none"
|
|
474
|
+
>
|
|
475
|
+
<button
|
|
476
|
+
class="pf-c-menu__item"
|
|
477
|
+
type="button"
|
|
478
|
+
role="menuitem"
|
|
479
|
+
>
|
|
480
|
+
<span class="pf-c-menu__item-main">
|
|
481
|
+
<span
|
|
482
|
+
class="pf-c-menu__item-toggle-icon"
|
|
483
|
+
>
|
|
484
|
+
<i class="fas fa-angle-left"></i>
|
|
485
|
+
</span>
|
|
486
|
+
<span class="pf-c-menu__item-icon">
|
|
487
|
+
<i
|
|
488
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
489
|
+
aria-hidden="true"
|
|
490
|
+
></i>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</li>
|
|
496
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
497
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
498
|
+
<a
|
|
499
|
+
class="pf-c-menu__item"
|
|
500
|
+
href="#"
|
|
501
|
+
role="menuitem"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu__item-main">
|
|
504
|
+
<span
|
|
505
|
+
class="pf-c-menu__item-text"
|
|
506
|
+
>Support options</span>
|
|
507
|
+
</span>
|
|
508
|
+
</a>
|
|
509
|
+
</li>
|
|
510
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
511
|
+
<a
|
|
512
|
+
class="pf-c-menu__item"
|
|
513
|
+
href="#"
|
|
514
|
+
role="menuitem"
|
|
515
|
+
>
|
|
516
|
+
<span class="pf-c-menu__item-main">
|
|
517
|
+
<span
|
|
518
|
+
class="pf-c-menu__item-text"
|
|
519
|
+
>Open support case</span>
|
|
520
|
+
</span>
|
|
521
|
+
</a>
|
|
522
|
+
</li>
|
|
523
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
524
|
+
<a
|
|
525
|
+
class="pf-c-menu__item"
|
|
526
|
+
href="#"
|
|
527
|
+
role="menuitem"
|
|
528
|
+
>
|
|
529
|
+
<span class="pf-c-menu__item-main">
|
|
530
|
+
<span
|
|
531
|
+
class="pf-c-menu__item-text"
|
|
532
|
+
>API documentation</span>
|
|
533
|
+
</span>
|
|
534
|
+
</a>
|
|
535
|
+
</li>
|
|
536
|
+
</ul>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</li>
|
|
540
|
+
|
|
541
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
542
|
+
<button
|
|
543
|
+
class="pf-c-menu__item"
|
|
544
|
+
type="button"
|
|
545
|
+
role="menuitem"
|
|
546
|
+
>
|
|
547
|
+
<span class="pf-c-menu__item-main">
|
|
548
|
+
<span class="pf-c-menu__item-icon">
|
|
549
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
550
|
+
</span>
|
|
551
|
+
<span
|
|
552
|
+
class="pf-c-menu__item-text"
|
|
553
|
+
>Application launcher</span>
|
|
554
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
555
|
+
<i class="fas fa-angle-right"></i>
|
|
556
|
+
</span>
|
|
557
|
+
</span>
|
|
558
|
+
</button>
|
|
559
|
+
<div class="pf-c-menu" hidden>
|
|
560
|
+
<div class="pf-c-menu__header">
|
|
561
|
+
<button
|
|
562
|
+
class="pf-c-menu__item"
|
|
563
|
+
type="button"
|
|
564
|
+
role="menuitem"
|
|
565
|
+
>
|
|
566
|
+
<span class="pf-c-menu__item-main">
|
|
567
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
568
|
+
<i class="fas fa-angle-left"></i>
|
|
569
|
+
</span>
|
|
570
|
+
<span class="pf-c-menu__item-icon">
|
|
571
|
+
<i
|
|
572
|
+
class="fas fa-fw fa-th"
|
|
573
|
+
aria-hidden="true"
|
|
574
|
+
></i>
|
|
575
|
+
</span>
|
|
576
|
+
<span
|
|
577
|
+
class="pf-c-menu__item-text"
|
|
578
|
+
>Application launcher</span>
|
|
579
|
+
</span>
|
|
580
|
+
</button>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="pf-c-menu__search">
|
|
583
|
+
<div class="pf-c-menu__search-input">
|
|
584
|
+
<div class="pf-c-search-input">
|
|
585
|
+
<div class="pf-c-search-input__bar">
|
|
586
|
+
<span class="pf-c-search-input__text">
|
|
587
|
+
<span class="pf-c-search-input__icon">
|
|
588
|
+
<i
|
|
589
|
+
class="fas fa-search fa-fw"
|
|
590
|
+
aria-hidden="true"
|
|
591
|
+
></i>
|
|
592
|
+
</span>
|
|
593
|
+
<input
|
|
594
|
+
class="pf-c-search-input__text-input"
|
|
595
|
+
type="text"
|
|
596
|
+
placeholder="Search"
|
|
597
|
+
aria-label="Search"
|
|
598
|
+
/>
|
|
599
|
+
</span>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
<hr class="pf-c-divider" />
|
|
605
|
+
<section class="pf-c-menu__group">
|
|
606
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
607
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
608
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
609
|
+
<a
|
|
610
|
+
class="pf-c-menu__item"
|
|
611
|
+
href="#"
|
|
612
|
+
role="menuitem"
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu__item-main">
|
|
615
|
+
<span
|
|
616
|
+
class="pf-c-menu__item-text"
|
|
617
|
+
>Link 1</span>
|
|
618
|
+
</span>
|
|
619
|
+
</a>
|
|
620
|
+
<button
|
|
621
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
622
|
+
type="button"
|
|
623
|
+
aria-label="Starred"
|
|
624
|
+
>
|
|
625
|
+
<span class="pf-c-menu__item-action-icon">
|
|
626
|
+
<i
|
|
627
|
+
class="fas fa-star"
|
|
628
|
+
aria-hidden="true"
|
|
629
|
+
></i>
|
|
630
|
+
</span>
|
|
631
|
+
</button>
|
|
632
|
+
</li>
|
|
633
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
634
|
+
<a
|
|
635
|
+
class="pf-c-menu__item"
|
|
636
|
+
href="#"
|
|
637
|
+
role="menuitem"
|
|
638
|
+
target="_blank"
|
|
639
|
+
>
|
|
640
|
+
<span class="pf-c-menu__item-main">
|
|
641
|
+
<span
|
|
642
|
+
class="pf-c-menu__item-text"
|
|
643
|
+
>Link 2</span>
|
|
644
|
+
<span
|
|
645
|
+
class="pf-c-menu__item-external-icon"
|
|
646
|
+
>
|
|
647
|
+
<i
|
|
648
|
+
class="fas fa-external-link-alt"
|
|
649
|
+
aria-hidden="true"
|
|
650
|
+
></i>
|
|
651
|
+
</span>
|
|
652
|
+
<span
|
|
653
|
+
class="pf-screen-reader"
|
|
654
|
+
>(opens new window)</span>
|
|
655
|
+
</span>
|
|
656
|
+
</a>
|
|
657
|
+
<button
|
|
658
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
659
|
+
type="button"
|
|
660
|
+
aria-label="Not starred"
|
|
661
|
+
>
|
|
662
|
+
<span class="pf-c-menu__item-action-icon">
|
|
663
|
+
<i
|
|
664
|
+
class="fas fa-star"
|
|
665
|
+
aria-hidden="true"
|
|
666
|
+
></i>
|
|
667
|
+
</span>
|
|
668
|
+
</button>
|
|
669
|
+
</li>
|
|
670
|
+
</ul>
|
|
671
|
+
</section>
|
|
672
|
+
<hr class="pf-c-divider" />
|
|
673
|
+
<section class="pf-c-menu__group">
|
|
674
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
675
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
676
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
677
|
+
<a
|
|
678
|
+
class="pf-c-menu__item"
|
|
679
|
+
href="#"
|
|
680
|
+
role="menuitem"
|
|
681
|
+
>
|
|
682
|
+
<span class="pf-c-menu__item-main">
|
|
683
|
+
<span
|
|
684
|
+
class="pf-c-menu__item-text"
|
|
685
|
+
>Link 1</span>
|
|
686
|
+
</span>
|
|
687
|
+
</a>
|
|
688
|
+
<button
|
|
689
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
690
|
+
type="button"
|
|
691
|
+
aria-label="Not starred"
|
|
692
|
+
>
|
|
693
|
+
<span class="pf-c-menu__item-action-icon">
|
|
694
|
+
<i
|
|
695
|
+
class="fas fa-star"
|
|
696
|
+
aria-hidden="true"
|
|
697
|
+
></i>
|
|
698
|
+
</span>
|
|
699
|
+
</button>
|
|
700
|
+
</li>
|
|
701
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
702
|
+
<a
|
|
703
|
+
class="pf-c-menu__item"
|
|
704
|
+
href="#"
|
|
705
|
+
role="menuitem"
|
|
706
|
+
target="_blank"
|
|
707
|
+
>
|
|
708
|
+
<span class="pf-c-menu__item-main">
|
|
709
|
+
<span
|
|
710
|
+
class="pf-c-menu__item-text"
|
|
711
|
+
>Link 2</span>
|
|
712
|
+
<span
|
|
713
|
+
class="pf-c-menu__item-external-icon"
|
|
714
|
+
>
|
|
715
|
+
<i
|
|
716
|
+
class="fas fa-external-link-alt"
|
|
717
|
+
aria-hidden="true"
|
|
718
|
+
></i>
|
|
719
|
+
</span>
|
|
720
|
+
<span
|
|
721
|
+
class="pf-screen-reader"
|
|
722
|
+
>(opens new window)</span>
|
|
723
|
+
</span>
|
|
724
|
+
</a>
|
|
725
|
+
<button
|
|
726
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
727
|
+
type="button"
|
|
728
|
+
aria-label="Starred"
|
|
729
|
+
>
|
|
730
|
+
<span class="pf-c-menu__item-action-icon">
|
|
731
|
+
<i
|
|
732
|
+
class="fas fa-star"
|
|
733
|
+
aria-hidden="true"
|
|
734
|
+
></i>
|
|
735
|
+
</span>
|
|
736
|
+
</button>
|
|
737
|
+
</li>
|
|
738
|
+
</ul>
|
|
739
|
+
</section>
|
|
740
|
+
</div>
|
|
741
|
+
</li>
|
|
742
|
+
</ul>
|
|
743
|
+
</section>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
750
|
+
<div
|
|
751
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
752
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
753
|
+
>
|
|
142
754
|
<button
|
|
143
|
-
class="pf-c-
|
|
755
|
+
class="pf-c-dropdown__toggle"
|
|
756
|
+
id="back-to-top-basic-example-masthead-profile-button"
|
|
757
|
+
aria-expanded="false"
|
|
144
758
|
type="button"
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
759
|
+
>
|
|
760
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
761
|
+
<img
|
|
762
|
+
class="pf-c-avatar"
|
|
763
|
+
src="/assets/images/img_avatar.svg"
|
|
764
|
+
alt="Avatar image"
|
|
765
|
+
/>
|
|
766
|
+
</span>
|
|
767
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
768
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
769
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
770
|
+
</span>
|
|
771
|
+
</button>
|
|
772
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
773
|
+
<section class="pf-c-dropdown__group">
|
|
774
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
775
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
776
|
+
<div>123456789</div>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
779
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
780
|
+
<div>mshaksho@redhat.com</div>
|
|
781
|
+
</div>
|
|
782
|
+
</section>
|
|
783
|
+
<hr class="pf-c-divider" />
|
|
784
|
+
<section class="pf-c-dropdown__group">
|
|
785
|
+
<ul>
|
|
786
|
+
<li>
|
|
787
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
788
|
+
</li>
|
|
789
|
+
<li>
|
|
790
|
+
<a
|
|
791
|
+
class="pf-c-dropdown__menu-item"
|
|
792
|
+
href="#"
|
|
793
|
+
>User management</a>
|
|
794
|
+
</li>
|
|
795
|
+
<li>
|
|
796
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
797
|
+
</li>
|
|
798
|
+
</ul>
|
|
799
|
+
</section>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
153
803
|
</div>
|
|
154
804
|
</div>
|
|
155
805
|
</div>
|
|
156
|
-
<img
|
|
157
|
-
class="pf-c-avatar"
|
|
158
|
-
src="/assets/images/img_avatar.svg"
|
|
159
|
-
alt="Avatar image"
|
|
160
|
-
/>
|
|
161
806
|
</div>
|
|
162
807
|
</header>
|
|
163
808
|
<div class="pf-c-page__sidebar">
|
|
164
809
|
<div class="pf-c-page__sidebar-body">
|
|
165
810
|
<nav
|
|
166
811
|
class="pf-c-nav"
|
|
167
|
-
id="back-to-top-basic-primary-nav"
|
|
812
|
+
id="back-to-top-basic-example-primary-nav"
|
|
168
813
|
aria-label="Global"
|
|
169
814
|
>
|
|
170
815
|
<ul class="pf-c-nav__list">
|
|
@@ -194,7 +839,7 @@ cssPrefix: pf-d-back-to-top
|
|
|
194
839
|
<main
|
|
195
840
|
class="pf-c-page__main"
|
|
196
841
|
tabindex="-1"
|
|
197
|
-
id="main-content-back-to-top-basic"
|
|
842
|
+
id="main-content-back-to-top-basic-example"
|
|
198
843
|
>
|
|
199
844
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
200
845
|
<div class="pf-c-page__main-body">
|
|
@@ -399,7 +1044,7 @@ cssPrefix: pf-d-back-to-top
|
|
|
399
1044
|
<div class="pf-c-back-to-top">
|
|
400
1045
|
<a
|
|
401
1046
|
class="pf-c-button pf-m-primary"
|
|
402
|
-
href="#main-content-back-to-top-basic"
|
|
1047
|
+
href="#main-content-back-to-top-basic-example"
|
|
403
1048
|
>
|
|
404
1049
|
Back to top
|
|
405
1050
|
<span class="pf-c-button__icon pf-m-end">
|