@patternfly/patternfly 4.196.6 → 4.196.9
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/RELEASE-NOTES.md +4 -3
- package/base/themes/dark/_chart-globals.scss +39 -0
- package/base/themes/dark/_globals.scss +5 -0
- package/base/themes/dark/_variables.scss +95 -0
- package/components/Menu/menu.css +1 -4
- package/components/Menu/menu.scss +1 -3
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +2 -2
- package/docs/demos/Drawer/examples/Drawer.md +152 -172
- package/docs/demos/JumpLinks/examples/JumpLinks.md +152 -172
- package/docs/demos/Table/examples/Table.md +29 -33
- package/package.json +1 -1
- package/patternfly-no-reset.css +1 -4
- package/patternfly.css +1 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/themes/dark/colors.scss +16 -0
- package/sass-utilities/themes/dark/mixins.scss +5 -0
- package/sass-utilities/themes/dark/placeholders.scss +28 -0
- package/sass-utilities/themes/dark/scss-variables.scss +86 -0
package/RELEASE-NOTES.md
CHANGED
|
@@ -5,7 +5,7 @@ releaseNoteTOC: true
|
|
|
5
5
|
---
|
|
6
6
|
## 2022.07 release notes (2022-06-03)
|
|
7
7
|
Packages released:
|
|
8
|
-
- [@patternfly/patternfly@v4.196.
|
|
8
|
+
- [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
|
|
9
9
|
|
|
10
10
|
### Components
|
|
11
11
|
- **Calendar month:** Improved layout of nav controls ([#4862](https://github.com/patternfly/patternfly/pull/4862))
|
|
@@ -22,7 +22,8 @@ Packages released:
|
|
|
22
22
|
### Other
|
|
23
23
|
- **Theme:**
|
|
24
24
|
* Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
|
|
25
|
-
*
|
|
25
|
+
* Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
|
|
26
|
+
* Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
|
|
26
27
|
- **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
|
|
27
28
|
|
|
28
29
|
|
|
@@ -1102,7 +1103,7 @@ Packages released:
|
|
|
1102
1103
|
Packages released:
|
|
1103
1104
|
- [@patternfly/patternfly@v4.10.31](https://www.npmjs.com/package/@patternfly/patternfly/v/4.10.31)
|
|
1104
1105
|
|
|
1105
|
-
This is our major release. Check out our [upgrade guide](/
|
|
1106
|
+
This is our major release. Check out our [upgrade guide](/developer-resources/upgrade-guide/html) for a list of breaking changes!
|
|
1106
1107
|
|
|
1107
1108
|
## 2020.06 release notes (2020-05-12)
|
|
1108
1109
|
Packages released:
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@import "../../../sass-utilities/colors";
|
|
2
|
+
@import "../../../sass-utilities/scss-variables";
|
|
3
|
+
|
|
4
|
+
// Chart colors
|
|
5
|
+
|
|
6
|
+
// blue
|
|
7
|
+
$pf-chart-color-blue-100: #add6ff;
|
|
8
|
+
$pf-chart-color-blue-200: #85c2ff;
|
|
9
|
+
$pf-chart-color-blue-300: #47a3ff;
|
|
10
|
+
$pf-chart-color-blue-400: #0a85ff;
|
|
11
|
+
$pf-chart-color-blue-500: $pf-color-blue-400;
|
|
12
|
+
|
|
13
|
+
// green
|
|
14
|
+
$pf-chart-color-green-100: #d6eed3;
|
|
15
|
+
$pf-chart-color-green-200: #aedca7;
|
|
16
|
+
$pf-chart-color-green-300: #85cb7c;
|
|
17
|
+
$pf-chart-color-green-400: #5cb950;
|
|
18
|
+
$pf-chart-color-green-500: $pf-color-green-500;
|
|
19
|
+
|
|
20
|
+
// cyan
|
|
21
|
+
$pf-chart-color-cyan-100: #b9feff;
|
|
22
|
+
$pf-chart-color-cyan-200: #86fdff;
|
|
23
|
+
$pf-chart-color-cyan-300: #00b5b8;
|
|
24
|
+
$pf-chart-color-cyan-400: #008c8f;
|
|
25
|
+
$pf-chart-color-cyan-500: $pf-color-cyan-400;
|
|
26
|
+
|
|
27
|
+
// purple
|
|
28
|
+
$pf-chart-color-purple-100: #cec8e4;
|
|
29
|
+
$pf-chart-color-purple-200: #a99fd1;
|
|
30
|
+
$pf-chart-color-purple-300: #9183c3;
|
|
31
|
+
$pf-chart-color-purple-400: #7968b6;
|
|
32
|
+
$pf-chart-color-purple-500: $pf-color-purple-500;
|
|
33
|
+
|
|
34
|
+
// red
|
|
35
|
+
$pf-chart-color-red-100: #ffadad;
|
|
36
|
+
$pf-chart-color-red-200: #ff7070;
|
|
37
|
+
$pf-chart-color-red-300: #ff4747;
|
|
38
|
+
$pf-chart-color-red-400: #ff0a0a;
|
|
39
|
+
$pf-chart-color-red-500: $pf-color-red-200;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@import "../../../sass-utilities/themes/dark/all";
|
|
2
|
+
|
|
3
|
+
@mixin _variables() {
|
|
4
|
+
// palette changes
|
|
5
|
+
--pf-global--palette--black-50: #{$pf-color-black-50};
|
|
6
|
+
--pf-global--palette--black-100: #{$pf-color-black-100};
|
|
7
|
+
--pf-global--palette--black-200: #{$pf-color-black-200};
|
|
8
|
+
--pf-global--palette--black-300: #{$pf-color-black-300};
|
|
9
|
+
--pf-global--palette--black-400: #{$pf-color-black-400};
|
|
10
|
+
--pf-global--palette--black-500: #{$pf-color-black-500};
|
|
11
|
+
--pf-global--palette--black-600: #{$pf-color-black-600};
|
|
12
|
+
--pf-global--palette--black-700: #{$pf-color-black-700};
|
|
13
|
+
--pf-global--palette--black-800: #{$pf-color-black-800};
|
|
14
|
+
--pf-global--palette--black-900: #{$pf-color-black-900};
|
|
15
|
+
--pf-global--palette--red-9999: #{$pf-color-red-9999};
|
|
16
|
+
--pf-global--palette--red-8888: #{$pf-color-red-8888};
|
|
17
|
+
--pf-global--palette--blue-300: #{$pf-color-blue-300};
|
|
18
|
+
|
|
19
|
+
// background colors
|
|
20
|
+
--pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
|
|
21
|
+
--pf-global--BackgroundColor--150: #{$pf-global--BackgroundColor--150};
|
|
22
|
+
--pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
|
|
23
|
+
--pf-global--BackgroundColor--300: #{$pf-global--BackgroundColor--300};
|
|
24
|
+
--pf-global--BackgroundColor--400: #{$pf-global--BackgroundColor--400};
|
|
25
|
+
--pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
|
|
26
|
+
--pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
|
|
27
|
+
--pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
|
|
28
|
+
--pf-global--BorderColor--400: #{$pf-global--BorderColor--400};
|
|
29
|
+
|
|
30
|
+
// text colors
|
|
31
|
+
--pf-global--Color--100: #{$pf-global--Color--100};
|
|
32
|
+
--pf-global--Color--200: #{$pf-global--Color--200};
|
|
33
|
+
--pf-global--active-color--100: #{$pf-global--active-color--100};
|
|
34
|
+
--pf-global--primary-color--100: #{$pf-global--primary-color--100};
|
|
35
|
+
--pf-global--primary-color--300: #{$pf-global--primary-color--300};
|
|
36
|
+
--pf-global--success-color--100: #{$pf-global--success-color--100};
|
|
37
|
+
--pf-global--warning-color--100: #{$pf-global--warning-color--100};
|
|
38
|
+
--pf-global--warning-color--200: #{$pf-global--warning-color--200};
|
|
39
|
+
--pf-global--danger-color--100: #{$pf-global--danger-color--100};
|
|
40
|
+
--pf-global--danger-color--200: #{$pf-global--danger-color--200};
|
|
41
|
+
--pf-global--link--Color: #{$pf-global--link--Color};
|
|
42
|
+
--pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
|
|
43
|
+
--pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
|
|
44
|
+
--pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
|
|
45
|
+
--pf-global--disabled-color--300: #{$pf-global--disabled-color--300};
|
|
46
|
+
|
|
47
|
+
// icons
|
|
48
|
+
--pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
|
|
49
|
+
--pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
|
|
50
|
+
|
|
51
|
+
// theme color resets
|
|
52
|
+
--pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
|
|
53
|
+
--pf-global--Color--dark-200: #{$pf-global--Color--dark-200};
|
|
54
|
+
--pf-global--Color--light-100: #{$pf-global--Color--light-100};
|
|
55
|
+
--pf-global--Color--light-200: #{$pf-global--Color--light-200};
|
|
56
|
+
--pf-global--Color--light-300: #{$pf-global--Color--light-300};
|
|
57
|
+
--pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
|
|
58
|
+
--pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
|
|
59
|
+
--pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
|
|
60
|
+
--pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
|
|
61
|
+
--pf-global--link--Color--light: #{$pf-global--link--Color--light};
|
|
62
|
+
--pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
|
|
63
|
+
--pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
|
|
64
|
+
--pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
|
|
65
|
+
--pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
|
|
66
|
+
--pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
|
|
67
|
+
--pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
|
|
68
|
+
--pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
|
|
69
|
+
--pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
|
|
70
|
+
--pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
|
|
71
|
+
--pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
|
|
72
|
+
|
|
73
|
+
// Shadows
|
|
74
|
+
--pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
|
|
75
|
+
--pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
|
|
76
|
+
--pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
|
|
77
|
+
--pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
|
|
78
|
+
--pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
|
|
79
|
+
--pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
|
|
80
|
+
--pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
|
|
81
|
+
--pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
|
|
82
|
+
--pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
|
|
83
|
+
--pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
|
|
84
|
+
--pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
|
|
85
|
+
--pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
|
|
86
|
+
--pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
|
|
87
|
+
--pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
|
|
88
|
+
--pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
|
|
89
|
+
--pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
|
|
90
|
+
--pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
|
|
91
|
+
--pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
|
|
92
|
+
--pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
|
|
93
|
+
--pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
|
|
94
|
+
--pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};
|
|
95
|
+
}
|
package/components/Menu/menu.css
CHANGED
|
@@ -231,9 +231,6 @@
|
|
|
231
231
|
--pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
|
|
232
232
|
--pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
|
|
233
233
|
}
|
|
234
|
-
.pf-c-menu .pf-c-menu__content {
|
|
235
|
-
overflow: visible hidden;
|
|
236
|
-
}
|
|
237
234
|
.pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
|
|
238
235
|
overflow: visible;
|
|
239
236
|
}
|
|
@@ -268,7 +265,7 @@
|
|
|
268
265
|
}
|
|
269
266
|
.pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
|
|
270
267
|
flex-grow: 1;
|
|
271
|
-
overflow
|
|
268
|
+
overflow: hidden;
|
|
272
269
|
transition: var(--pf-c-menu--m-drilldown__content--Transition);
|
|
273
270
|
}
|
|
274
271
|
.pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
|
|
@@ -196,8 +196,6 @@
|
|
|
196
196
|
box-shadow: var(--pf-c-menu--BoxShadow);
|
|
197
197
|
|
|
198
198
|
.pf-c-menu__content {
|
|
199
|
-
overflow: visible hidden;
|
|
200
|
-
|
|
201
199
|
& & {
|
|
202
200
|
overflow: visible;
|
|
203
201
|
}
|
|
@@ -243,7 +241,7 @@
|
|
|
243
241
|
|
|
244
242
|
> .pf-c-menu__content {
|
|
245
243
|
flex-grow: 1;
|
|
246
|
-
overflow
|
|
244
|
+
overflow: hidden;
|
|
247
245
|
transition: var(--pf-c-menu--m-drilldown__content--Transition);
|
|
248
246
|
}
|
|
249
247
|
|
|
@@ -148,9 +148,9 @@ cssPrefix: pf-c-notification-badge
|
|
|
148
148
|
|
|
149
149
|
### Overview
|
|
150
150
|
|
|
151
|
-
Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](
|
|
151
|
+
Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
|
|
152
152
|
|
|
153
|
-
Note: The [page component](
|
|
153
|
+
Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
|
|
154
154
|
|
|
155
155
|
### Accessibility
|
|
156
156
|
|
|
@@ -3832,94 +3832,82 @@ wrapperTag: div
|
|
|
3832
3832
|
class="pf-c-drawer__content"
|
|
3833
3833
|
id="drawer-jump-links-drawer-scrollable-container"
|
|
3834
3834
|
>
|
|
3835
|
-
<div class="pf-c-drawer__body">
|
|
3836
|
-
<div class="pf-c-
|
|
3837
|
-
<div class="pf-c-
|
|
3838
|
-
<div class="pf-c-
|
|
3839
|
-
<
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
>
|
|
3843
|
-
|
|
3844
|
-
<
|
|
3845
|
-
<
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
>
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
>
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
</nav>
|
|
3897
|
-
</div>
|
|
3898
|
-
<div class="pf-c-sidebar__content">
|
|
3899
|
-
<div class="pf-c-content">
|
|
3900
|
-
<p>
|
|
3901
|
-
<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.
|
|
3902
|
-
</p>
|
|
3835
|
+
<div class="pf-c-drawer__body pf-m-padding">
|
|
3836
|
+
<div class="pf-c-sidebar">
|
|
3837
|
+
<div class="pf-c-sidebar__main">
|
|
3838
|
+
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
3839
|
+
<nav
|
|
3840
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
3841
|
+
>
|
|
3842
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
3843
|
+
<ul class="pf-c-jump-links__list">
|
|
3844
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
3845
|
+
<a
|
|
3846
|
+
class="pf-c-jump-links__link"
|
|
3847
|
+
href="#drawer-jump-links-jump-links-first"
|
|
3848
|
+
>
|
|
3849
|
+
<span class="pf-c-jump-links__link-text">First section</span>
|
|
3850
|
+
</a>
|
|
3851
|
+
</li>
|
|
3852
|
+
<li class="pf-c-jump-links__item">
|
|
3853
|
+
<a
|
|
3854
|
+
class="pf-c-jump-links__link"
|
|
3855
|
+
href="#drawer-jump-links-jump-links-second"
|
|
3856
|
+
>
|
|
3857
|
+
<span
|
|
3858
|
+
class="pf-c-jump-links__link-text"
|
|
3859
|
+
>Second section</span>
|
|
3860
|
+
</a>
|
|
3861
|
+
</li>
|
|
3862
|
+
<li class="pf-c-jump-links__item">
|
|
3863
|
+
<a
|
|
3864
|
+
class="pf-c-jump-links__link"
|
|
3865
|
+
href="#drawer-jump-links-jump-links-third"
|
|
3866
|
+
>
|
|
3867
|
+
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
3868
|
+
</a>
|
|
3869
|
+
</li>
|
|
3870
|
+
<li class="pf-c-jump-links__item">
|
|
3871
|
+
<a
|
|
3872
|
+
class="pf-c-jump-links__link"
|
|
3873
|
+
href="#drawer-jump-links-jump-links-fourth"
|
|
3874
|
+
>
|
|
3875
|
+
<span
|
|
3876
|
+
class="pf-c-jump-links__link-text"
|
|
3877
|
+
>Fourth section</span>
|
|
3878
|
+
</a>
|
|
3879
|
+
</li>
|
|
3880
|
+
<li class="pf-c-jump-links__item">
|
|
3881
|
+
<a
|
|
3882
|
+
class="pf-c-jump-links__link"
|
|
3883
|
+
href="#drawer-jump-links-jump-links-fifth"
|
|
3884
|
+
>
|
|
3885
|
+
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
3886
|
+
</a>
|
|
3887
|
+
</li>
|
|
3888
|
+
</ul>
|
|
3889
|
+
</nav>
|
|
3890
|
+
</div>
|
|
3891
|
+
<div class="pf-c-sidebar__content">
|
|
3892
|
+
<div class="pf-c-content">
|
|
3893
|
+
<p>
|
|
3894
|
+
<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.
|
|
3895
|
+
</p>
|
|
3903
3896
|
|
|
3904
|
-
|
|
3905
|
-
|
|
3897
|
+
<h2 id="drawer-jump-links-jump-links-first">First section</h2>
|
|
3898
|
+
<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>
|
|
3906
3899
|
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
>Second section</h2>
|
|
3910
|
-
<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>
|
|
3900
|
+
<h2 id="drawer-jump-links-jump-links-second">Second section</h2>
|
|
3901
|
+
<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>
|
|
3911
3902
|
|
|
3912
|
-
|
|
3913
|
-
|
|
3903
|
+
<h2 id="drawer-jump-links-jump-links-third">Third section</h2>
|
|
3904
|
+
<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>
|
|
3914
3905
|
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
>Fourth section</h2>
|
|
3918
|
-
<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>
|
|
3906
|
+
<h2 id="drawer-jump-links-jump-links-fourth">Fourth section</h2>
|
|
3907
|
+
<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>
|
|
3919
3908
|
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
</div>
|
|
3909
|
+
<h2 id="drawer-jump-links-jump-links-fifth">Fifth section</h2>
|
|
3910
|
+
<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>
|
|
3923
3911
|
</div>
|
|
3924
3912
|
</div>
|
|
3925
3913
|
</div>
|
|
@@ -4794,100 +4782,92 @@ wrapperTag: div
|
|
|
4794
4782
|
class="pf-c-drawer__content"
|
|
4795
4783
|
id="drawer-expanded-jump-links-drawer-scrollable-container"
|
|
4796
4784
|
>
|
|
4797
|
-
<div class="pf-c-drawer__body">
|
|
4798
|
-
<div class="pf-c-
|
|
4799
|
-
<div class="pf-c-
|
|
4800
|
-
<div class="pf-c-
|
|
4801
|
-
<
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
>
|
|
4805
|
-
|
|
4806
|
-
<
|
|
4807
|
-
<
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
>
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
>
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
</nav>
|
|
4859
|
-
</div>
|
|
4860
|
-
<div class="pf-c-sidebar__content">
|
|
4861
|
-
<div class="pf-c-content">
|
|
4862
|
-
<p>
|
|
4863
|
-
<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.
|
|
4864
|
-
</p>
|
|
4785
|
+
<div class="pf-c-drawer__body pf-m-padding">
|
|
4786
|
+
<div class="pf-c-sidebar">
|
|
4787
|
+
<div class="pf-c-sidebar__main">
|
|
4788
|
+
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
4789
|
+
<nav
|
|
4790
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
4791
|
+
>
|
|
4792
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
4793
|
+
<ul class="pf-c-jump-links__list">
|
|
4794
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
4795
|
+
<a
|
|
4796
|
+
class="pf-c-jump-links__link"
|
|
4797
|
+
href="#drawer-expanded-jump-links-jump-links-first"
|
|
4798
|
+
>
|
|
4799
|
+
<span class="pf-c-jump-links__link-text">First section</span>
|
|
4800
|
+
</a>
|
|
4801
|
+
</li>
|
|
4802
|
+
<li class="pf-c-jump-links__item">
|
|
4803
|
+
<a
|
|
4804
|
+
class="pf-c-jump-links__link"
|
|
4805
|
+
href="#drawer-expanded-jump-links-jump-links-second"
|
|
4806
|
+
>
|
|
4807
|
+
<span
|
|
4808
|
+
class="pf-c-jump-links__link-text"
|
|
4809
|
+
>Second section</span>
|
|
4810
|
+
</a>
|
|
4811
|
+
</li>
|
|
4812
|
+
<li class="pf-c-jump-links__item">
|
|
4813
|
+
<a
|
|
4814
|
+
class="pf-c-jump-links__link"
|
|
4815
|
+
href="#drawer-expanded-jump-links-jump-links-third"
|
|
4816
|
+
>
|
|
4817
|
+
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
4818
|
+
</a>
|
|
4819
|
+
</li>
|
|
4820
|
+
<li class="pf-c-jump-links__item">
|
|
4821
|
+
<a
|
|
4822
|
+
class="pf-c-jump-links__link"
|
|
4823
|
+
href="#drawer-expanded-jump-links-jump-links-fourth"
|
|
4824
|
+
>
|
|
4825
|
+
<span
|
|
4826
|
+
class="pf-c-jump-links__link-text"
|
|
4827
|
+
>Fourth section</span>
|
|
4828
|
+
</a>
|
|
4829
|
+
</li>
|
|
4830
|
+
<li class="pf-c-jump-links__item">
|
|
4831
|
+
<a
|
|
4832
|
+
class="pf-c-jump-links__link"
|
|
4833
|
+
href="#drawer-expanded-jump-links-jump-links-fifth"
|
|
4834
|
+
>
|
|
4835
|
+
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
4836
|
+
</a>
|
|
4837
|
+
</li>
|
|
4838
|
+
</ul>
|
|
4839
|
+
</nav>
|
|
4840
|
+
</div>
|
|
4841
|
+
<div class="pf-c-sidebar__content">
|
|
4842
|
+
<div class="pf-c-content">
|
|
4843
|
+
<p>
|
|
4844
|
+
<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.
|
|
4845
|
+
</p>
|
|
4865
4846
|
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4847
|
+
<h2
|
|
4848
|
+
id="drawer-expanded-jump-links-jump-links-first"
|
|
4849
|
+
>First section</h2>
|
|
4850
|
+
<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>
|
|
4870
4851
|
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4852
|
+
<h2
|
|
4853
|
+
id="drawer-expanded-jump-links-jump-links-second"
|
|
4854
|
+
>Second section</h2>
|
|
4855
|
+
<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>
|
|
4875
4856
|
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4857
|
+
<h2
|
|
4858
|
+
id="drawer-expanded-jump-links-jump-links-third"
|
|
4859
|
+
>Third section</h2>
|
|
4860
|
+
<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>
|
|
4880
4861
|
|
|
4881
|
-
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4862
|
+
<h2
|
|
4863
|
+
id="drawer-expanded-jump-links-jump-links-fourth"
|
|
4864
|
+
>Fourth section</h2>
|
|
4865
|
+
<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>
|
|
4885
4866
|
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
</div>
|
|
4867
|
+
<h2
|
|
4868
|
+
id="drawer-expanded-jump-links-jump-links-fifth"
|
|
4869
|
+
>Fifth section</h2>
|
|
4870
|
+
<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>
|
|
4891
4871
|
</div>
|
|
4892
4872
|
</div>
|
|
4893
4873
|
</div>
|