@patternfly/patternfly 4.206.3 → 4.207.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/button.css +20 -0
- package/components/Button/button.scss +23 -0
- package/components/Button/themes/dark/button.scss +1 -0
- package/components/Check/check.css +9 -0
- package/components/Check/check.scss +11 -0
- package/components/ContextSelector/context-selector.css +6 -0
- package/components/ContextSelector/context-selector.scss +7 -1
- package/components/Dropdown/dropdown.css +6 -0
- package/components/Dropdown/dropdown.scss +7 -0
- package/components/ExpandableSection/expandable-section.css +18 -1
- package/components/ExpandableSection/expandable-section.scss +25 -1
- package/components/InputGroup/input-group.css +3 -0
- package/components/InputGroup/input-group.scss +4 -0
- package/components/Masthead/masthead.css +6 -3
- package/components/Masthead/masthead.scss +4 -0
- package/components/Menu/menu.css +0 -4
- package/components/Menu/menu.scss +0 -4
- package/components/Select/select.css +6 -0
- package/components/Select/select.scss +7 -0
- package/components/Wizard/themes/dark/wizard.scss +2 -2
- package/components/Wizard/wizard.css +2 -2
- package/docs/components/Avatar/examples/Avatar.md +10 -10
- package/docs/components/Button/examples/Button.md +19 -0
- package/docs/components/Card/examples/Card.css +3 -3
- package/docs/components/Check/examples/Check.md +33 -12
- package/docs/components/CodeBlock/examples/CodeBlock.md +8 -6
- package/docs/components/Dropdown/examples/Dropdown.md +2 -1
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +51 -13
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Masthead/examples/masthead.md +5 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +6 -6
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +38 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
- package/docs/demos/Drawer/examples/Drawer.md +5 -5
- package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
- package/docs/demos/Masthead/examples/Masthead.md +388 -2
- package/docs/demos/Modal/examples/Modal.md +6 -6
- package/docs/demos/Nav/examples/Nav.md +8 -8
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +8 -8
- 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 +14 -14
- package/docs/demos/Tabs/examples/Tabs.md +8 -8
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
- package/docs/demos/Wizard/examples/Wizard.md +8 -8
- package/package.json +1 -1
- package/patternfly-no-reset.css +76 -10
- package/patternfly.css +76 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -20,6 +20,25 @@ cssPrefix: pf-c-check
|
|
|
20
20
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
### Required
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<div class="pf-c-check">
|
|
27
|
+
<input
|
|
28
|
+
class="pf-c-check__input"
|
|
29
|
+
type="checkbox"
|
|
30
|
+
id="check-required"
|
|
31
|
+
name="check-required"
|
|
32
|
+
/>
|
|
33
|
+
|
|
34
|
+
<label class="pf-c-check__label" for="check-required">
|
|
35
|
+
Check
|
|
36
|
+
<span class="pf-c-check__label-required" aria-hidden="true">*</span>
|
|
37
|
+
</label>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|
|
23
42
|
### Checked
|
|
24
43
|
|
|
25
44
|
```html
|
|
@@ -194,18 +213,20 @@ If you extend this component or modify the styles of this component, then make s
|
|
|
194
213
|
|
|
195
214
|
### Accessibility
|
|
196
215
|
|
|
197
|
-
| Attribute | Applied to
|
|
198
|
-
| ---------- |
|
|
199
|
-
| `disabled` |
|
|
216
|
+
| Attribute | Applied to | Outcome |
|
|
217
|
+
| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
218
|
+
| `disabled` | `.pf-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
|
|
219
|
+
| `required` | `.pf-c-check__input` | Indicates that the element is required. |
|
|
200
220
|
|
|
201
221
|
### Usage
|
|
202
222
|
|
|
203
|
-
| Class
|
|
204
|
-
|
|
|
205
|
-
| `.pf-c-check`
|
|
206
|
-
| `.pf-c-check__input`
|
|
207
|
-
| `.pf-c-check__label`
|
|
208
|
-
| `.pf-c-
|
|
209
|
-
| `.pf-c-
|
|
210
|
-
| `.pf-
|
|
211
|
-
| `.pf-m-
|
|
223
|
+
| Class | Applied to | Outcome |
|
|
224
|
+
| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
225
|
+
| `.pf-c-check` | `<div>`, `<label>` | Initiates the check component. **Required** |
|
|
226
|
+
| `.pf-c-check__input` | `<input type="checkbox">` | Initiates a check input. **Required** |
|
|
227
|
+
| `.pf-c-check__label` | `<label>`, `<span>` | Initiates a label. **Required** |
|
|
228
|
+
| `.pf-c-check__label-required` | `<span>` | Initiates a required indicator. |
|
|
229
|
+
| `.pf-c-check__description` | `<span>` | Initiates a check description. |
|
|
230
|
+
| `.pf-c-check__body` | `<span>` | Initiates a check body. |
|
|
231
|
+
| `.pf-m-standalone` | `.pf-c-check` | Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
|
|
232
|
+
| `.pf-m-disabled` | `.pf-c-check__label` | Modifies the check component for the disabled state. **Required when input is disabled** |
|
|
@@ -80,9 +80,10 @@ name: azure-sample-repo<div
|
|
|
80
80
|
class="pf-c-expandable-section__content"
|
|
81
81
|
hidden
|
|
82
82
|
id="code-block-expandable-content"
|
|
83
|
-
>
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
>
|
|
84
|
+
spec:
|
|
85
|
+
connectionConfig:
|
|
86
|
+
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</div>
|
|
86
87
|
</div>
|
|
87
88
|
</code>
|
|
88
89
|
</pre>
|
|
@@ -139,9 +140,10 @@ name: azure-sample-repo<div
|
|
|
139
140
|
><div
|
|
140
141
|
class="pf-c-expandable-section__content"
|
|
141
142
|
id="code-block-expandable-expanded-content"
|
|
142
|
-
>
|
|
143
|
-
|
|
144
|
-
|
|
143
|
+
>
|
|
144
|
+
spec:
|
|
145
|
+
connectionConfig:
|
|
146
|
+
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</div>
|
|
145
147
|
</div>
|
|
146
148
|
</code>
|
|
147
149
|
</pre>
|
|
@@ -1936,8 +1936,8 @@ The dropdown panel is provided for flexibility in allowing various content withi
|
|
|
1936
1936
|
<span class="pf-c-dropdown__toggle-image">
|
|
1937
1937
|
<img
|
|
1938
1938
|
class="pf-c-avatar"
|
|
1939
|
-
src="/assets/images/img_avatar.svg"
|
|
1940
1939
|
alt="Avatar image"
|
|
1940
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1941
1941
|
/>
|
|
1942
1942
|
</span>
|
|
1943
1943
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2106,3 +2106,4 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2106
2106
|
| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
|
|
2107
2107
|
| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
|
|
2108
2108
|
| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
|
|
2109
|
+
| `.pf-m-static` | `.pf-c-dropdown__menu` | Modifies a dropdown menu for popper placement support. |
|
|
@@ -145,6 +145,42 @@ cssPrefix: pf-c-expandable-section
|
|
|
145
145
|
|
|
146
146
|
```
|
|
147
147
|
|
|
148
|
+
### Truncate expansion
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<div class="pf-c-expandable-section pf-m-truncate">
|
|
152
|
+
<div
|
|
153
|
+
class="pf-c-expandable-section__content"
|
|
154
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
|
|
155
|
+
<button
|
|
156
|
+
type="button"
|
|
157
|
+
class="pf-c-expandable-section__toggle"
|
|
158
|
+
aria-expanded="false"
|
|
159
|
+
>
|
|
160
|
+
<span class="pf-c-expandable-section__toggle-text">Show more</span>
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Truncate expansion expanded
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<div class="pf-c-expandable-section pf-m-expanded pf-m-truncate">
|
|
170
|
+
<div
|
|
171
|
+
class="pf-c-expandable-section__content"
|
|
172
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
|
|
173
|
+
<button
|
|
174
|
+
type="button"
|
|
175
|
+
class="pf-c-expandable-section__toggle"
|
|
176
|
+
aria-expanded="true"
|
|
177
|
+
>
|
|
178
|
+
<span class="pf-c-expandable-section__toggle-text">Show less</span>
|
|
179
|
+
</button>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
```
|
|
183
|
+
|
|
148
184
|
## Documentation
|
|
149
185
|
|
|
150
186
|
### Accessibility
|
|
@@ -160,16 +196,18 @@ cssPrefix: pf-c-expandable-section
|
|
|
160
196
|
|
|
161
197
|
### Usage
|
|
162
198
|
|
|
163
|
-
| Class
|
|
164
|
-
|
|
|
165
|
-
| `.pf-c-expandable-section`
|
|
166
|
-
| `.pf-c-expandable-section__toggle`
|
|
167
|
-
| `.pf-c-expandable-section__toggle-text`
|
|
168
|
-
| `.pf-c-expandable-section__toggle-icon`
|
|
169
|
-
| `.pf-c-expandable-section__content`
|
|
170
|
-
| `.pf-m-expanded`
|
|
171
|
-
| `.pf-m-display-lg`
|
|
172
|
-
| `.pf-m-detached`
|
|
173
|
-
| `.pf-m-indented`
|
|
174
|
-
| `.pf-m-
|
|
175
|
-
| `.pf-m-
|
|
199
|
+
| Class | Applied to | Outcome |
|
|
200
|
+
| ----------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
201
|
+
| `.pf-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
|
|
202
|
+
| `.pf-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
|
|
203
|
+
| `.pf-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
|
|
204
|
+
| `.pf-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
|
|
205
|
+
| `.pf-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
|
|
206
|
+
| `.pf-m-expanded` | `.pf-c-expandable-section` | Modifies the component for the expanded state. |
|
|
207
|
+
| `.pf-m-display-lg` | `.pf-c-expandable-section` | Modifies the styling of the component to have large display styling. |
|
|
208
|
+
| `.pf-m-detached` | `.pf-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
|
|
209
|
+
| `.pf-m-indented` | `.pf-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
|
|
210
|
+
| `.pf-m-truncate` | `.pf-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
|
|
211
|
+
| `.pf-m-active` | `.pf-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
|
|
212
|
+
| `.pf-m-expand-top` | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
|
|
213
|
+
| `--pf-c-expandable-section--m-truncate__content--LineClamp` | `.pf-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
|
|
@@ -231,4 +231,5 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
|
|
|
231
231
|
| ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- |
|
|
232
232
|
| `.pf-c-input-group` | `<div>` | Initiates the input group. **Required** |
|
|
233
233
|
| `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
|
|
234
|
+
| `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
|
|
234
235
|
| `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
|
|
@@ -46,11 +46,10 @@ cssPrefix: pf-c-masthead
|
|
|
46
46
|
</div>
|
|
47
47
|
<div class="pf-c-masthead__content">
|
|
48
48
|
<div class="pf-l-flex">
|
|
49
|
-
<span>
|
|
50
|
-
<button class="pf-c-button pf-m-primary" type="button">
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
</div>
|
|
49
|
+
<span>Content</span>
|
|
50
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary</button>
|
|
51
|
+
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
|
|
52
|
+
<button class="pf-c-button pf-m-tertiary" type="button">Tertiary</button>
|
|
54
53
|
</div>
|
|
55
54
|
</div>
|
|
56
55
|
</header>
|
|
@@ -155,7 +154,7 @@ cssPrefix: pf-c-masthead
|
|
|
155
154
|
### Light 200 variant
|
|
156
155
|
|
|
157
156
|
```html
|
|
158
|
-
<header class="pf-c-masthead
|
|
157
|
+
<header class="pf-c-masthead" id="light-200-masthead">
|
|
159
158
|
<span class="pf-c-masthead__toggle">
|
|
160
159
|
<button
|
|
161
160
|
class="pf-c-button pf-m-plain"
|
|
@@ -839,9 +839,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
839
839
|
<button class="pf-c-menu-toggle" type="button" aria-expanded="false">
|
|
840
840
|
<span class="pf-c-menu-toggle__icon">
|
|
841
841
|
<img
|
|
842
|
-
class="pf-c-avatar
|
|
842
|
+
class="pf-c-avatar"
|
|
843
|
+
alt="Avatar image"
|
|
843
844
|
src="/assets/images/img_avatar-light.svg"
|
|
844
|
-
alt="Avatar image light"
|
|
845
845
|
/>
|
|
846
846
|
</span>
|
|
847
847
|
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
@@ -860,9 +860,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
860
860
|
>
|
|
861
861
|
<span class="pf-c-menu-toggle__icon">
|
|
862
862
|
<img
|
|
863
|
-
class="pf-c-avatar
|
|
863
|
+
class="pf-c-avatar"
|
|
864
|
+
alt="Avatar image"
|
|
864
865
|
src="/assets/images/img_avatar-light.svg"
|
|
865
|
-
alt="Avatar image light"
|
|
866
866
|
/>
|
|
867
867
|
</span>
|
|
868
868
|
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
@@ -882,9 +882,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
882
882
|
>
|
|
883
883
|
<span class="pf-c-menu-toggle__icon">
|
|
884
884
|
<img
|
|
885
|
-
class="pf-c-avatar
|
|
885
|
+
class="pf-c-avatar"
|
|
886
|
+
alt="Avatar image"
|
|
886
887
|
src="/assets/images/img_avatar-light.svg"
|
|
887
|
-
alt="Avatar image light"
|
|
888
888
|
/>
|
|
889
889
|
</span>
|
|
890
890
|
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
@@ -646,6 +646,44 @@ cssPrefix: pf-c-text-input-group
|
|
|
646
646
|
|
|
647
647
|
```
|
|
648
648
|
|
|
649
|
+
### Search input group, expandable
|
|
650
|
+
|
|
651
|
+
```html
|
|
652
|
+
<h3>Collapsed</h3>
|
|
653
|
+
<br />
|
|
654
|
+
<div class="pf-c-input-group pf-m-plain">
|
|
655
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Open search">
|
|
656
|
+
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
|
|
657
|
+
</button>
|
|
658
|
+
</div>
|
|
659
|
+
<br />
|
|
660
|
+
<br />
|
|
661
|
+
<h3>Expanded</h3>
|
|
662
|
+
<br />
|
|
663
|
+
<div class="pf-c-input-group pf-m-plain">
|
|
664
|
+
<div class="pf-c-text-input-group">
|
|
665
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
666
|
+
<span class="pf-c-text-input-group__text">
|
|
667
|
+
<span class="pf-c-text-input-group__icon">
|
|
668
|
+
<i class="fas fa-fw fa-search"></i>
|
|
669
|
+
</span>
|
|
670
|
+
<input
|
|
671
|
+
class="pf-c-text-input-group__text-input"
|
|
672
|
+
type="text"
|
|
673
|
+
value
|
|
674
|
+
aria-label="Type to filter"
|
|
675
|
+
placeholder="Search"
|
|
676
|
+
/>
|
|
677
|
+
</span>
|
|
678
|
+
</div>
|
|
679
|
+
</div>
|
|
680
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
|
|
681
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
682
|
+
</button>
|
|
683
|
+
</div>
|
|
684
|
+
|
|
685
|
+
```
|
|
686
|
+
|
|
649
687
|
### Search input group, with submit button
|
|
650
688
|
|
|
651
689
|
```html
|
|
@@ -761,8 +761,8 @@ This demo implements the about modal, including the backdrop.
|
|
|
761
761
|
<span class="pf-c-dropdown__toggle-image">
|
|
762
762
|
<img
|
|
763
763
|
class="pf-c-avatar"
|
|
764
|
-
src="/assets/images/img_avatar.svg"
|
|
765
764
|
alt="Avatar image"
|
|
765
|
+
src="/assets/images/img_avatar-light.svg"
|
|
766
766
|
/>
|
|
767
767
|
</span>
|
|
768
768
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -759,8 +759,8 @@ section: components
|
|
|
759
759
|
<span class="pf-c-dropdown__toggle-image">
|
|
760
760
|
<img
|
|
761
761
|
class="pf-c-avatar"
|
|
762
|
-
src="/assets/images/img_avatar.svg"
|
|
763
762
|
alt="Avatar image"
|
|
763
|
+
src="/assets/images/img_avatar-light.svg"
|
|
764
764
|
/>
|
|
765
765
|
</span>
|
|
766
766
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1752,8 +1752,8 @@ section: components
|
|
|
1752
1752
|
<span class="pf-c-dropdown__toggle-image">
|
|
1753
1753
|
<img
|
|
1754
1754
|
class="pf-c-avatar"
|
|
1755
|
-
src="/assets/images/img_avatar.svg"
|
|
1756
1755
|
alt="Avatar image"
|
|
1756
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1757
1757
|
/>
|
|
1758
1758
|
</span>
|
|
1759
1759
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2795,8 +2795,8 @@ section: components
|
|
|
2795
2795
|
<span class="pf-c-dropdown__toggle-image">
|
|
2796
2796
|
<img
|
|
2797
2797
|
class="pf-c-avatar"
|
|
2798
|
-
src="/assets/images/img_avatar.svg"
|
|
2799
2798
|
alt="Avatar image"
|
|
2799
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2800
2800
|
/>
|
|
2801
2801
|
</span>
|
|
2802
2802
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -760,8 +760,8 @@ cssPrefix: pf-d-back-to-top
|
|
|
760
760
|
<span class="pf-c-dropdown__toggle-image">
|
|
761
761
|
<img
|
|
762
762
|
class="pf-c-avatar"
|
|
763
|
-
src="/assets/images/img_avatar.svg"
|
|
764
763
|
alt="Avatar image"
|
|
764
|
+
src="/assets/images/img_avatar-light.svg"
|
|
765
765
|
/>
|
|
766
766
|
</span>
|
|
767
767
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -762,8 +762,8 @@ wrapperTag: div
|
|
|
762
762
|
<span class="pf-c-dropdown__toggle-image">
|
|
763
763
|
<img
|
|
764
764
|
class="pf-c-avatar"
|
|
765
|
-
src="/assets/images/img_avatar.svg"
|
|
766
765
|
alt="Avatar image"
|
|
766
|
+
src="/assets/images/img_avatar-light.svg"
|
|
767
767
|
/>
|
|
768
768
|
</span>
|
|
769
769
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1899,8 +1899,8 @@ wrapperTag: div
|
|
|
1899
1899
|
<span class="pf-c-dropdown__toggle-image">
|
|
1900
1900
|
<img
|
|
1901
1901
|
class="pf-c-avatar"
|
|
1902
|
-
src="/assets/images/img_avatar.svg"
|
|
1903
1902
|
alt="Avatar image"
|
|
1903
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1904
1904
|
/>
|
|
1905
1905
|
</span>
|
|
1906
1906
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -759,8 +759,8 @@ section: demos
|
|
|
759
759
|
<span class="pf-c-dropdown__toggle-image">
|
|
760
760
|
<img
|
|
761
761
|
class="pf-c-avatar"
|
|
762
|
-
src="/assets/images/img_avatar.svg"
|
|
763
762
|
alt="Avatar image"
|
|
763
|
+
src="/assets/images/img_avatar-light.svg"
|
|
764
764
|
/>
|
|
765
765
|
</span>
|
|
766
766
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1060,8 +1060,8 @@ section: components
|
|
|
1060
1060
|
<span class="pf-c-dropdown__toggle-image">
|
|
1061
1061
|
<img
|
|
1062
1062
|
class="pf-c-avatar"
|
|
1063
|
-
src="/assets/images/img_avatar.svg"
|
|
1064
1063
|
alt="Avatar image"
|
|
1064
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1065
1065
|
/>
|
|
1066
1066
|
</span>
|
|
1067
1067
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2109,8 +2109,8 @@ section: components
|
|
|
2109
2109
|
<span class="pf-c-dropdown__toggle-image">
|
|
2110
2110
|
<img
|
|
2111
2111
|
class="pf-c-avatar"
|
|
2112
|
-
src="/assets/images/img_avatar.svg"
|
|
2113
2112
|
alt="Avatar image"
|
|
2113
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2114
2114
|
/>
|
|
2115
2115
|
</span>
|
|
2116
2116
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3160,8 +3160,8 @@ section: components
|
|
|
3160
3160
|
<span class="pf-c-dropdown__toggle-image">
|
|
3161
3161
|
<img
|
|
3162
3162
|
class="pf-c-avatar"
|
|
3163
|
-
src="/assets/images/img_avatar.svg"
|
|
3164
3163
|
alt="Avatar image"
|
|
3164
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3165
3165
|
/>
|
|
3166
3166
|
</span>
|
|
3167
3167
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -761,8 +761,8 @@ cssPrefix: pf-d-dashboard
|
|
|
761
761
|
<span class="pf-c-dropdown__toggle-image">
|
|
762
762
|
<img
|
|
763
763
|
class="pf-c-avatar"
|
|
764
|
-
src="/assets/images/img_avatar.svg"
|
|
765
764
|
alt="Avatar image"
|
|
765
|
+
src="/assets/images/img_avatar-light.svg"
|
|
766
766
|
/>
|
|
767
767
|
</span>
|
|
768
768
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -760,8 +760,8 @@ wrapperTag: div
|
|
|
760
760
|
<span class="pf-c-dropdown__toggle-image">
|
|
761
761
|
<img
|
|
762
762
|
class="pf-c-avatar"
|
|
763
|
-
src="/assets/images/img_avatar.svg"
|
|
764
763
|
alt="Avatar image"
|
|
764
|
+
src="/assets/images/img_avatar-light.svg"
|
|
765
765
|
/>
|
|
766
766
|
</span>
|
|
767
767
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2284,8 +2284,8 @@ wrapperTag: div
|
|
|
2284
2284
|
<span class="pf-c-dropdown__toggle-image">
|
|
2285
2285
|
<img
|
|
2286
2286
|
class="pf-c-avatar"
|
|
2287
|
-
src="/assets/images/img_avatar.svg"
|
|
2288
2287
|
alt="Avatar image"
|
|
2288
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2289
2289
|
/>
|
|
2290
2290
|
</span>
|
|
2291
2291
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3786,8 +3786,8 @@ wrapperTag: div
|
|
|
3786
3786
|
<span class="pf-c-dropdown__toggle-image">
|
|
3787
3787
|
<img
|
|
3788
3788
|
class="pf-c-avatar"
|
|
3789
|
-
src="/assets/images/img_avatar.svg"
|
|
3790
3789
|
alt="Avatar image"
|
|
3790
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3791
3791
|
/>
|
|
3792
3792
|
</span>
|
|
3793
3793
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5896,8 +5896,8 @@ wrapperTag: div
|
|
|
5896
5896
|
<span class="pf-c-dropdown__toggle-image">
|
|
5897
5897
|
<img
|
|
5898
5898
|
class="pf-c-avatar"
|
|
5899
|
-
src="/assets/images/img_avatar.svg"
|
|
5900
5899
|
alt="Avatar image"
|
|
5900
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5901
5901
|
/>
|
|
5902
5902
|
</span>
|
|
5903
5903
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -761,8 +761,8 @@ cssPrefix: pf-d-description-list
|
|
|
761
761
|
<span class="pf-c-dropdown__toggle-image">
|
|
762
762
|
<img
|
|
763
763
|
class="pf-c-avatar"
|
|
764
|
-
src="/assets/images/img_avatar.svg"
|
|
765
764
|
alt="Avatar image"
|
|
765
|
+
src="/assets/images/img_avatar-light.svg"
|
|
766
766
|
/>
|
|
767
767
|
</span>
|
|
768
768
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1744,8 +1744,8 @@ cssPrefix: pf-d-description-list
|
|
|
1744
1744
|
<span class="pf-c-dropdown__toggle-image">
|
|
1745
1745
|
<img
|
|
1746
1746
|
class="pf-c-avatar"
|
|
1747
|
-
src="/assets/images/img_avatar.svg"
|
|
1748
1747
|
alt="Avatar image"
|
|
1748
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1749
1749
|
/>
|
|
1750
1750
|
</span>
|
|
1751
1751
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3010,8 +3010,8 @@ cssPrefix: pf-d-description-list
|
|
|
3010
3010
|
<span class="pf-c-dropdown__toggle-image">
|
|
3011
3011
|
<img
|
|
3012
3012
|
class="pf-c-avatar"
|
|
3013
|
-
src="/assets/images/img_avatar.svg"
|
|
3014
3013
|
alt="Avatar image"
|
|
3014
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3015
3015
|
/>
|
|
3016
3016
|
</span>
|
|
3017
3017
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -760,8 +760,8 @@ wrapperTag: div
|
|
|
760
760
|
<span class="pf-c-dropdown__toggle-image">
|
|
761
761
|
<img
|
|
762
762
|
class="pf-c-avatar"
|
|
763
|
-
src="/assets/images/img_avatar.svg"
|
|
764
763
|
alt="Avatar image"
|
|
764
|
+
src="/assets/images/img_avatar-light.svg"
|
|
765
765
|
/>
|
|
766
766
|
</span>
|
|
767
767
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1871,8 +1871,8 @@ wrapperTag: div
|
|
|
1871
1871
|
<span class="pf-c-dropdown__toggle-image">
|
|
1872
1872
|
<img
|
|
1873
1873
|
class="pf-c-avatar"
|
|
1874
|
-
src="/assets/images/img_avatar.svg"
|
|
1875
1874
|
alt="Avatar image"
|
|
1875
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1876
1876
|
/>
|
|
1877
1877
|
</span>
|
|
1878
1878
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2808,8 +2808,8 @@ wrapperTag: div
|
|
|
2808
2808
|
<span class="pf-c-dropdown__toggle-image">
|
|
2809
2809
|
<img
|
|
2810
2810
|
class="pf-c-avatar"
|
|
2811
|
-
src="/assets/images/img_avatar.svg"
|
|
2812
2811
|
alt="Avatar image"
|
|
2812
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2813
2813
|
/>
|
|
2814
2814
|
</span>
|
|
2815
2815
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3745,8 +3745,8 @@ wrapperTag: div
|
|
|
3745
3745
|
<span class="pf-c-dropdown__toggle-image">
|
|
3746
3746
|
<img
|
|
3747
3747
|
class="pf-c-avatar"
|
|
3748
|
-
src="/assets/images/img_avatar.svg"
|
|
3749
3748
|
alt="Avatar image"
|
|
3749
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3750
3750
|
/>
|
|
3751
3751
|
</span>
|
|
3752
3752
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4695,8 +4695,8 @@ wrapperTag: div
|
|
|
4695
4695
|
<span class="pf-c-dropdown__toggle-image">
|
|
4696
4696
|
<img
|
|
4697
4697
|
class="pf-c-avatar"
|
|
4698
|
-
src="/assets/images/img_avatar.svg"
|
|
4699
4698
|
alt="Avatar image"
|
|
4699
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4700
4700
|
/>
|
|
4701
4701
|
</span>
|
|
4702
4702
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -762,8 +762,8 @@ section: components
|
|
|
762
762
|
<span class="pf-c-dropdown__toggle-image">
|
|
763
763
|
<img
|
|
764
764
|
class="pf-c-avatar"
|
|
765
|
-
src="/assets/images/img_avatar.svg"
|
|
766
765
|
alt="Avatar image"
|
|
766
|
+
src="/assets/images/img_avatar-light.svg"
|
|
767
767
|
/>
|
|
768
768
|
</span>
|
|
769
769
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1757,8 +1757,8 @@ section: components
|
|
|
1757
1757
|
<span class="pf-c-dropdown__toggle-image">
|
|
1758
1758
|
<img
|
|
1759
1759
|
class="pf-c-avatar"
|
|
1760
|
-
src="/assets/images/img_avatar.svg"
|
|
1761
1760
|
alt="Avatar image"
|
|
1761
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1762
1762
|
/>
|
|
1763
1763
|
</span>
|
|
1764
1764
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2752,8 +2752,8 @@ section: components
|
|
|
2752
2752
|
<span class="pf-c-dropdown__toggle-image">
|
|
2753
2753
|
<img
|
|
2754
2754
|
class="pf-c-avatar"
|
|
2755
|
-
src="/assets/images/img_avatar.svg"
|
|
2756
2755
|
alt="Avatar image"
|
|
2756
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2757
2757
|
/>
|
|
2758
2758
|
</span>
|
|
2759
2759
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3744,8 +3744,8 @@ section: components
|
|
|
3744
3744
|
<span class="pf-c-dropdown__toggle-image">
|
|
3745
3745
|
<img
|
|
3746
3746
|
class="pf-c-avatar"
|
|
3747
|
-
src="/assets/images/img_avatar.svg"
|
|
3748
3747
|
alt="Avatar image"
|
|
3748
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3749
3749
|
/>
|
|
3750
3750
|
</span>
|
|
3751
3751
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4688,8 +4688,8 @@ section: components
|
|
|
4688
4688
|
<span class="pf-c-dropdown__toggle-image">
|
|
4689
4689
|
<img
|
|
4690
4690
|
class="pf-c-avatar"
|
|
4691
|
-
src="/assets/images/img_avatar.svg"
|
|
4692
4691
|
alt="Avatar image"
|
|
4692
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4693
4693
|
/>
|
|
4694
4694
|
</span>
|
|
4695
4695
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5638,8 +5638,8 @@ section: components
|
|
|
5638
5638
|
<span class="pf-c-dropdown__toggle-image">
|
|
5639
5639
|
<img
|
|
5640
5640
|
class="pf-c-avatar"
|
|
5641
|
-
src="/assets/images/img_avatar.svg"
|
|
5642
5641
|
alt="Avatar image"
|
|
5642
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5643
5643
|
/>
|
|
5644
5644
|
</span>
|
|
5645
5645
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|