@patternfly/patternfly 4.216.4 → 4.217.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 +11 -1
- package/components/Button/button.scss +10 -1
- package/components/Spinner/spinner.css +4 -0
- package/components/Spinner/spinner.scss +7 -0
- package/docs/components/Button/examples/Button.md +26 -6
- package/docs/components/Spinner/examples/Spinner.md +23 -6
- package/docs/demos/Drawer/examples/Drawer.md +168 -144
- package/docs/demos/JumpLinks/examples/JumpLinks.md +168 -144
- package/package.json +1 -1
- package/patternfly-no-reset.css +15 -1
- package/patternfly.css +15 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -89,6 +89,12 @@
|
|
|
89
89
|
--pf-c-button--m-link--m-inline--FontSize: inherit;
|
|
90
90
|
--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
|
|
91
91
|
--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
|
|
92
|
+
--pf-c-button--m-link--m-inline--PaddingTop: 0;
|
|
93
|
+
--pf-c-button--m-link--m-inline--PaddingRight: 0;
|
|
94
|
+
--pf-c-button--m-link--m-inline--PaddingBottom: 0;
|
|
95
|
+
--pf-c-button--m-link--m-inline--PaddingLeft: 0;
|
|
96
|
+
--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
|
|
97
|
+
--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
|
|
92
98
|
--pf-c-button--m-link--m-danger--BackgroundColor: transparent;
|
|
93
99
|
--pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
|
|
94
100
|
--pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
|
|
@@ -287,8 +293,9 @@
|
|
|
287
293
|
}
|
|
288
294
|
.pf-c-button.pf-m-link.pf-m-inline {
|
|
289
295
|
--pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
|
|
296
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
|
|
290
297
|
display: inline;
|
|
291
|
-
padding:
|
|
298
|
+
padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
|
|
292
299
|
text-align: left;
|
|
293
300
|
white-space: normal;
|
|
294
301
|
cursor: pointer;
|
|
@@ -454,6 +461,9 @@
|
|
|
454
461
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
|
|
455
462
|
transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
|
|
456
463
|
}
|
|
464
|
+
.pf-c-button.pf-m-in-progress {
|
|
465
|
+
--pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
|
|
466
|
+
}
|
|
457
467
|
.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
|
|
458
468
|
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
459
469
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
@@ -112,6 +112,12 @@
|
|
|
112
112
|
--pf-c-button--m-link--m-inline--FontSize: inherit;
|
|
113
113
|
--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
|
|
114
114
|
--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
|
|
115
|
+
--pf-c-button--m-link--m-inline--PaddingTop: 0;
|
|
116
|
+
--pf-c-button--m-link--m-inline--PaddingRight: 0;
|
|
117
|
+
--pf-c-button--m-link--m-inline--PaddingBottom: 0;
|
|
118
|
+
--pf-c-button--m-link--m-inline--PaddingLeft: 0;
|
|
119
|
+
--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
|
|
120
|
+
--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
|
|
115
121
|
|
|
116
122
|
// Link danger
|
|
117
123
|
--pf-c-button--m-link--m-danger--BackgroundColor: transparent;
|
|
@@ -368,9 +374,10 @@
|
|
|
368
374
|
|
|
369
375
|
&.pf-m-inline {
|
|
370
376
|
--pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
|
|
377
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
|
|
371
378
|
|
|
372
379
|
display: inline;
|
|
373
|
-
padding:
|
|
380
|
+
padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
|
|
374
381
|
text-align: left;
|
|
375
382
|
white-space: normal;
|
|
376
383
|
cursor: pointer;
|
|
@@ -598,6 +605,8 @@
|
|
|
598
605
|
}
|
|
599
606
|
|
|
600
607
|
&.pf-m-in-progress {
|
|
608
|
+
--pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
|
|
609
|
+
|
|
601
610
|
&:not(.pf-m-plain) {
|
|
602
611
|
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
603
612
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
@@ -7,10 +7,14 @@
|
|
|
7
7
|
--pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
|
|
8
8
|
--pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
|
|
9
9
|
--pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
|
|
10
|
+
--pf-c-spinner--m-inline--diameter: 1em;
|
|
10
11
|
width: var(--pf-c-spinner--Width);
|
|
11
12
|
height: var(--pf-c-spinner--Height);
|
|
12
13
|
overflow: hidden;
|
|
13
14
|
}
|
|
15
|
+
.pf-c-spinner.pf-m-inline {
|
|
16
|
+
--pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
|
|
17
|
+
}
|
|
14
18
|
.pf-c-spinner.pf-m-sm {
|
|
15
19
|
--pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
|
|
16
20
|
}
|
|
@@ -12,11 +12,18 @@
|
|
|
12
12
|
--pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
|
|
13
13
|
--pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
|
|
14
14
|
|
|
15
|
+
// inline
|
|
16
|
+
--pf-c-spinner--m-inline--diameter: 1em;
|
|
17
|
+
|
|
15
18
|
width: var(--pf-c-spinner--Width);
|
|
16
19
|
height: var(--pf-c-spinner--Height);
|
|
17
20
|
overflow: hidden;
|
|
18
21
|
|
|
19
22
|
// Modifiers change the variables for size variations
|
|
23
|
+
&.pf-m-inline {
|
|
24
|
+
--pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
|
|
25
|
+
}
|
|
26
|
+
|
|
20
27
|
&.pf-m-sm {
|
|
21
28
|
--pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
|
|
22
29
|
}
|
|
@@ -380,7 +380,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
380
380
|
</span>
|
|
381
381
|
Primary loading
|
|
382
382
|
</button>
|
|
383
|
-
|
|
383
|
+
<br />
|
|
384
384
|
<button
|
|
385
385
|
class="pf-c-button pf-m-progress pf-m-secondary"
|
|
386
386
|
type="button"
|
|
@@ -403,20 +403,39 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
403
403
|
</span>
|
|
404
404
|
Secondary loading
|
|
405
405
|
</button>
|
|
406
|
-
|
|
406
|
+
<br />
|
|
407
407
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
|
|
408
408
|
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
409
409
|
</button>
|
|
410
410
|
|
|
411
|
+
<button class="pf-c-button pf-m-in-progress pf-m-plain" type="button">
|
|
412
|
+
<span class="pf-c-button__progress">
|
|
413
|
+
<span
|
|
414
|
+
class="pf-c-spinner pf-m-md"
|
|
415
|
+
role="progressbar"
|
|
416
|
+
aria-label="Uploading..."
|
|
417
|
+
>
|
|
418
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
419
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
420
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
421
|
+
</span>
|
|
422
|
+
</span>
|
|
423
|
+
|
|
424
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
425
|
+
</button>
|
|
426
|
+
<br />
|
|
411
427
|
<button
|
|
412
|
-
class="pf-c-button pf-m-
|
|
428
|
+
class="pf-c-button pf-m-progress pf-m-inline pf-m-link"
|
|
429
|
+
type="button"
|
|
430
|
+
>Inline loader</button>
|
|
431
|
+
|
|
432
|
+
<button
|
|
433
|
+
class="pf-c-button pf-m-progress pf-m-in-progress pf-m-inline pf-m-link"
|
|
413
434
|
type="button"
|
|
414
|
-
aria-label="Upload"
|
|
415
435
|
>
|
|
416
|
-
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
417
436
|
<span class="pf-c-button__progress">
|
|
418
437
|
<span
|
|
419
|
-
class="pf-c-spinner pf-m-
|
|
438
|
+
class="pf-c-spinner pf-m-inline"
|
|
420
439
|
role="progressbar"
|
|
421
440
|
aria-label="Loading..."
|
|
422
441
|
>
|
|
@@ -425,6 +444,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
425
444
|
<span class="pf-c-spinner__tail-ball"></span>
|
|
426
445
|
</span>
|
|
427
446
|
</span>
|
|
447
|
+
Inline loading
|
|
428
448
|
</button>
|
|
429
449
|
|
|
430
450
|
```
|
|
@@ -59,6 +59,22 @@ cssPrefix: pf-c-spinner
|
|
|
59
59
|
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
+
### Inline
|
|
63
|
+
|
|
64
|
+
An inline spinner inherits its font-size, so its size will match the content around it.
|
|
65
|
+
|
|
66
|
+
```html isBeta
|
|
67
|
+
<svg
|
|
68
|
+
class="pf-c-spinner pf-m-inline"
|
|
69
|
+
role="progressbar"
|
|
70
|
+
viewBox="0 0 100 100"
|
|
71
|
+
aria-label="Loading..."
|
|
72
|
+
>
|
|
73
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
74
|
+
</svg>
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
|
|
62
78
|
### Custom size
|
|
63
79
|
|
|
64
80
|
```html
|
|
@@ -148,9 +164,10 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
|
|
148
164
|
|
|
149
165
|
### Modifiers
|
|
150
166
|
|
|
151
|
-
| Class
|
|
152
|
-
|
|
|
153
|
-
| `.pf-m-sm`
|
|
154
|
-
| `.pf-m-md`
|
|
155
|
-
| `.pf-m-lg`
|
|
156
|
-
| `.pf-m-xl`
|
|
167
|
+
| Class | Applied to | Outcome |
|
|
168
|
+
| -------------- | --------------- | ------------------------------- |
|
|
169
|
+
| `.pf-m-sm` | `.pf-c-spinner` | Creates a small spinner. |
|
|
170
|
+
| `.pf-m-md` | `.pf-c-spinner` | Creates a medium spinner. |
|
|
171
|
+
| `.pf-m-lg` | `.pf-c-spinner` | Creates a large spinner. |
|
|
172
|
+
| `.pf-m-xl` | `.pf-c-spinner` | Creates an extra-large spinner. |
|
|
173
|
+
| `.pf-m-inline` | `.pf-c-spinner` | Creates an inline spinner. |
|
|
@@ -3790,83 +3790,97 @@ wrapperTag: div
|
|
|
3790
3790
|
class="pf-c-drawer__content"
|
|
3791
3791
|
id="drawer-jump-links-drawer-scrollable-container"
|
|
3792
3792
|
>
|
|
3793
|
-
<div class="pf-c-drawer__body
|
|
3793
|
+
<div class="pf-c-drawer__body">
|
|
3794
3794
|
<div class="pf-c-sidebar">
|
|
3795
3795
|
<div class="pf-c-sidebar__main">
|
|
3796
3796
|
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
3797
|
-
<
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
<
|
|
3803
|
-
<
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
>
|
|
3818
|
-
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
>
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
>
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3797
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
3798
|
+
<nav
|
|
3799
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
3800
|
+
>
|
|
3801
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
3802
|
+
<ul class="pf-c-jump-links__list">
|
|
3803
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
3804
|
+
<a
|
|
3805
|
+
class="pf-c-jump-links__link"
|
|
3806
|
+
href="#drawer-jump-links-jump-links-first"
|
|
3807
|
+
>
|
|
3808
|
+
<span
|
|
3809
|
+
class="pf-c-jump-links__link-text"
|
|
3810
|
+
>First section</span>
|
|
3811
|
+
</a>
|
|
3812
|
+
</li>
|
|
3813
|
+
<li class="pf-c-jump-links__item">
|
|
3814
|
+
<a
|
|
3815
|
+
class="pf-c-jump-links__link"
|
|
3816
|
+
href="#drawer-jump-links-jump-links-second"
|
|
3817
|
+
>
|
|
3818
|
+
<span
|
|
3819
|
+
class="pf-c-jump-links__link-text"
|
|
3820
|
+
>Second section</span>
|
|
3821
|
+
</a>
|
|
3822
|
+
</li>
|
|
3823
|
+
<li class="pf-c-jump-links__item">
|
|
3824
|
+
<a
|
|
3825
|
+
class="pf-c-jump-links__link"
|
|
3826
|
+
href="#drawer-jump-links-jump-links-third"
|
|
3827
|
+
>
|
|
3828
|
+
<span
|
|
3829
|
+
class="pf-c-jump-links__link-text"
|
|
3830
|
+
>Third section</span>
|
|
3831
|
+
</a>
|
|
3832
|
+
</li>
|
|
3833
|
+
<li class="pf-c-jump-links__item">
|
|
3834
|
+
<a
|
|
3835
|
+
class="pf-c-jump-links__link"
|
|
3836
|
+
href="#drawer-jump-links-jump-links-fourth"
|
|
3837
|
+
>
|
|
3838
|
+
<span
|
|
3839
|
+
class="pf-c-jump-links__link-text"
|
|
3840
|
+
>Fourth section</span>
|
|
3841
|
+
</a>
|
|
3842
|
+
</li>
|
|
3843
|
+
<li class="pf-c-jump-links__item">
|
|
3844
|
+
<a
|
|
3845
|
+
class="pf-c-jump-links__link"
|
|
3846
|
+
href="#drawer-jump-links-jump-links-fifth"
|
|
3847
|
+
>
|
|
3848
|
+
<span
|
|
3849
|
+
class="pf-c-jump-links__link-text"
|
|
3850
|
+
>Fifth section</span>
|
|
3851
|
+
</a>
|
|
3852
|
+
</li>
|
|
3853
|
+
</ul>
|
|
3854
|
+
</nav>
|
|
3855
|
+
</section>
|
|
3848
3856
|
</div>
|
|
3849
3857
|
<div class="pf-c-sidebar__content">
|
|
3850
|
-
<
|
|
3851
|
-
<
|
|
3852
|
-
<
|
|
3853
|
-
|
|
3858
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
3859
|
+
<div class="pf-c-content">
|
|
3860
|
+
<p>
|
|
3861
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
3862
|
+
</p>
|
|
3854
3863
|
|
|
3855
|
-
|
|
3856
|
-
|
|
3864
|
+
<h2 id="drawer-jump-links-jump-links-first">First section</h2>
|
|
3865
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3857
3866
|
|
|
3858
|
-
|
|
3859
|
-
|
|
3867
|
+
<h2
|
|
3868
|
+
id="drawer-jump-links-jump-links-second"
|
|
3869
|
+
>Second section</h2>
|
|
3870
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3860
3871
|
|
|
3861
|
-
|
|
3862
|
-
|
|
3872
|
+
<h2 id="drawer-jump-links-jump-links-third">Third section</h2>
|
|
3873
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3863
3874
|
|
|
3864
|
-
|
|
3865
|
-
|
|
3875
|
+
<h2
|
|
3876
|
+
id="drawer-jump-links-jump-links-fourth"
|
|
3877
|
+
>Fourth section</h2>
|
|
3878
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3866
3879
|
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3880
|
+
<h2 id="drawer-jump-links-jump-links-fifth">Fifth section</h2>
|
|
3881
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3882
|
+
</div>
|
|
3883
|
+
</section>
|
|
3870
3884
|
</div>
|
|
3871
3885
|
</div>
|
|
3872
3886
|
</div>
|
|
@@ -4729,93 +4743,103 @@ wrapperTag: div
|
|
|
4729
4743
|
class="pf-c-drawer__content"
|
|
4730
4744
|
id="drawer-expanded-jump-links-drawer-scrollable-container"
|
|
4731
4745
|
>
|
|
4732
|
-
<div class="pf-c-drawer__body
|
|
4746
|
+
<div class="pf-c-drawer__body">
|
|
4733
4747
|
<div class="pf-c-sidebar">
|
|
4734
4748
|
<div class="pf-c-sidebar__main">
|
|
4735
4749
|
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
4736
|
-
<
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
<
|
|
4742
|
-
<
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
>
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
>
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
>
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4750
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
4751
|
+
<nav
|
|
4752
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
4753
|
+
>
|
|
4754
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
4755
|
+
<ul class="pf-c-jump-links__list">
|
|
4756
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
4757
|
+
<a
|
|
4758
|
+
class="pf-c-jump-links__link"
|
|
4759
|
+
href="#drawer-expanded-jump-links-jump-links-first"
|
|
4760
|
+
>
|
|
4761
|
+
<span
|
|
4762
|
+
class="pf-c-jump-links__link-text"
|
|
4763
|
+
>First section</span>
|
|
4764
|
+
</a>
|
|
4765
|
+
</li>
|
|
4766
|
+
<li class="pf-c-jump-links__item">
|
|
4767
|
+
<a
|
|
4768
|
+
class="pf-c-jump-links__link"
|
|
4769
|
+
href="#drawer-expanded-jump-links-jump-links-second"
|
|
4770
|
+
>
|
|
4771
|
+
<span
|
|
4772
|
+
class="pf-c-jump-links__link-text"
|
|
4773
|
+
>Second section</span>
|
|
4774
|
+
</a>
|
|
4775
|
+
</li>
|
|
4776
|
+
<li class="pf-c-jump-links__item">
|
|
4777
|
+
<a
|
|
4778
|
+
class="pf-c-jump-links__link"
|
|
4779
|
+
href="#drawer-expanded-jump-links-jump-links-third"
|
|
4780
|
+
>
|
|
4781
|
+
<span
|
|
4782
|
+
class="pf-c-jump-links__link-text"
|
|
4783
|
+
>Third section</span>
|
|
4784
|
+
</a>
|
|
4785
|
+
</li>
|
|
4786
|
+
<li class="pf-c-jump-links__item">
|
|
4787
|
+
<a
|
|
4788
|
+
class="pf-c-jump-links__link"
|
|
4789
|
+
href="#drawer-expanded-jump-links-jump-links-fourth"
|
|
4790
|
+
>
|
|
4791
|
+
<span
|
|
4792
|
+
class="pf-c-jump-links__link-text"
|
|
4793
|
+
>Fourth section</span>
|
|
4794
|
+
</a>
|
|
4795
|
+
</li>
|
|
4796
|
+
<li class="pf-c-jump-links__item">
|
|
4797
|
+
<a
|
|
4798
|
+
class="pf-c-jump-links__link"
|
|
4799
|
+
href="#drawer-expanded-jump-links-jump-links-fifth"
|
|
4800
|
+
>
|
|
4801
|
+
<span
|
|
4802
|
+
class="pf-c-jump-links__link-text"
|
|
4803
|
+
>Fifth section</span>
|
|
4804
|
+
</a>
|
|
4805
|
+
</li>
|
|
4806
|
+
</ul>
|
|
4807
|
+
</nav>
|
|
4808
|
+
</section>
|
|
4787
4809
|
</div>
|
|
4788
4810
|
<div class="pf-c-sidebar__content">
|
|
4789
|
-
<
|
|
4790
|
-
<
|
|
4791
|
-
<
|
|
4792
|
-
|
|
4811
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
4812
|
+
<div class="pf-c-content">
|
|
4813
|
+
<p>
|
|
4814
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
4815
|
+
</p>
|
|
4793
4816
|
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4817
|
+
<h2
|
|
4818
|
+
id="drawer-expanded-jump-links-jump-links-first"
|
|
4819
|
+
>First section</h2>
|
|
4820
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4798
4821
|
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4822
|
+
<h2
|
|
4823
|
+
id="drawer-expanded-jump-links-jump-links-second"
|
|
4824
|
+
>Second section</h2>
|
|
4825
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4803
4826
|
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4827
|
+
<h2
|
|
4828
|
+
id="drawer-expanded-jump-links-jump-links-third"
|
|
4829
|
+
>Third section</h2>
|
|
4830
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4808
4831
|
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4832
|
+
<h2
|
|
4833
|
+
id="drawer-expanded-jump-links-jump-links-fourth"
|
|
4834
|
+
>Fourth section</h2>
|
|
4835
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4813
4836
|
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4837
|
+
<h2
|
|
4838
|
+
id="drawer-expanded-jump-links-jump-links-fifth"
|
|
4839
|
+
>Fifth section</h2>
|
|
4840
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4841
|
+
</div>
|
|
4842
|
+
</section>
|
|
4819
4843
|
</div>
|
|
4820
4844
|
</div>
|
|
4821
4845
|
</div>
|