@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39
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/CODE_OF_CONDUCT.md +1 -2
- package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
- package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
- package/assets/images/PF-IconLogo-color.svg +17 -0
- package/components/Backdrop/backdrop.css +6 -2
- package/components/Backdrop/backdrop.scss +5 -2
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +5 -0
- package/components/Card/card.css +3 -0
- package/components/Card/card.scss +8 -0
- package/components/Divider/divider.css +97 -177
- package/components/Divider/divider.scss +60 -79
- package/components/Form/form.css +6 -0
- package/components/Form/form.scss +4 -1
- package/components/Masthead/masthead.css +267 -435
- package/components/Masthead/masthead.scss +118 -233
- package/components/MenuToggle/menu-toggle.css +1 -0
- package/components/MenuToggle/menu-toggle.scss +2 -0
- package/components/Popover/popover.css +0 -2
- package/components/Popover/popover.scss +2 -2
- package/components/SimpleList/simple-list.css +35 -52
- package/components/SimpleList/simple-list.scss +41 -51
- package/components/Table/table.scss +1 -0
- package/components/Tooltip/tooltip.css +0 -2
- package/components/Tooltip/tooltip.scss +3 -3
- package/components/Truncate/truncate.css +4 -0
- package/components/Truncate/truncate.scss +3 -0
- package/docs/components/Accordion/examples/Accordion.md +6 -6
- package/docs/components/Alert/examples/Alert.md +2 -2
- package/docs/components/Brand/examples/Brand.md +9 -33
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Card/examples/Card.md +18 -20
- package/docs/components/Check/examples/Check.md +1 -0
- package/docs/components/Content/examples/Content.md +5 -5
- package/docs/components/Divider/examples/Divider.css +3 -1
- package/docs/components/Divider/examples/Divider.md +4 -5
- package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
- package/docs/components/Label/examples/Label.md +11 -11
- package/docs/components/Masthead/examples/masthead.md +441 -16
- package/docs/components/Nav/examples/Navigation.css +18 -2
- package/docs/components/Nav/examples/Navigation.md +1 -1
- package/docs/components/Radio/examples/Radio.md +1 -1
- package/docs/components/SimpleList/examples/SimpleList.md +3 -3
- package/docs/components/Table/examples/Table.md +8 -8
- package/docs/components/Truncate/examples/Truncate.css +2 -2
- package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
- package/docs/demos/Alert/examples/Alert.md +120 -126
- package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
- package/docs/demos/Banner/examples/Banner.md +79 -80
- package/docs/demos/CardView/examples/CardView.md +40 -42
- package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
- package/docs/demos/DataList/examples/DataList.md +160 -279
- package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
- package/docs/demos/Drawer/examples/Drawer.md +200 -210
- package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
- package/docs/demos/Masthead/examples/Masthead.md +143 -224
- package/docs/demos/Modal/examples/Modal.md +240 -252
- package/docs/demos/Nav/examples/Nav.md +320 -336
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
- package/docs/demos/Page/examples/Page.md +360 -378
- package/docs/demos/Page/examples/Penta.md +8 -15
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
- package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
- package/docs/demos/Table/examples/Table.md +617 -647
- package/docs/demos/Tabs/examples/Tabs.md +240 -252
- package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
- package/docs/demos/Wizard/examples/Wizard.md +360 -378
- package/docs/layouts/Flex/examples/Flex.md +11 -11
- package/package.json +32 -32
- package/patternfly-no-globals.css +422 -673
- package/patternfly-theme-dark-unversioned.css +422 -673
- package/patternfly.css +422 -673
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/SimpleList/themes/dark/simple-list.scss +0 -14
|
@@ -25,20 +25,16 @@ cssPrefix: pf-d-back-to-top
|
|
|
25
25
|
</button>
|
|
26
26
|
</span>
|
|
27
27
|
<div class="pf-v5-c-masthead__main">
|
|
28
|
-
<a
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
style="--pf-v5-c-brand--Height: 36px;"
|
|
32
|
-
>
|
|
33
|
-
<svg height="36px" viewBox="0 0 679 158" role="img">
|
|
34
|
-
<title>Patternfly logo</title>
|
|
28
|
+
<a class="pf-v5-c-masthead__brand" href="#">
|
|
29
|
+
<svg height="40px" viewBox="0 0 679 158">
|
|
30
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
35
31
|
<defs>
|
|
36
32
|
<linearGradient
|
|
37
33
|
x1="68%"
|
|
38
34
|
y1="2.25860997e-13%"
|
|
39
35
|
x2="32%"
|
|
40
36
|
y2="100%"
|
|
41
|
-
id="linearGradient-
|
|
37
|
+
id="linearGradient-back-to-top-basic-example-masthead"
|
|
42
38
|
>
|
|
43
39
|
<stop stop-color="#2B9AF3" offset="0%" />
|
|
44
40
|
<stop
|
|
@@ -48,13 +44,7 @@ cssPrefix: pf-d-back-to-top
|
|
|
48
44
|
/>
|
|
49
45
|
</linearGradient>
|
|
50
46
|
</defs>
|
|
51
|
-
<g
|
|
52
|
-
id="PF-HorizontalLogo-Color"
|
|
53
|
-
stroke="none"
|
|
54
|
-
stroke-width="1"
|
|
55
|
-
fill="none"
|
|
56
|
-
fill-rule="evenodd"
|
|
57
|
-
>
|
|
47
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
58
48
|
<g
|
|
59
49
|
transform="translate(206.000000, 45.750000)"
|
|
60
50
|
fill="var(--pf-t--global--text--color--regular)"
|
|
@@ -89,19 +79,18 @@ cssPrefix: pf-d-back-to-top
|
|
|
89
79
|
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
90
80
|
/>
|
|
91
81
|
</g>
|
|
92
|
-
<g
|
|
82
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
93
83
|
<path
|
|
94
84
|
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
95
|
-
|
|
96
|
-
fill="var(--pf-t--global--color--brand--200)"
|
|
85
|
+
fill="#0066CC"
|
|
97
86
|
/>
|
|
98
87
|
<path
|
|
99
88
|
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
100
|
-
fill="url(#linearGradient-
|
|
89
|
+
fill="url(#linearGradient-back-to-top-basic-example-masthead)"
|
|
101
90
|
/>
|
|
102
91
|
<path
|
|
103
92
|
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
104
|
-
fill="url(#linearGradient-
|
|
93
|
+
fill="url(#linearGradient-back-to-top-basic-example-masthead)"
|
|
105
94
|
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
106
95
|
/>
|
|
107
96
|
</g>
|
|
@@ -116,8 +105,38 @@ cssPrefix: pf-d-back-to-top
|
|
|
116
105
|
>
|
|
117
106
|
<div class="pf-v5-c-toolbar__content">
|
|
118
107
|
<div class="pf-v5-c-toolbar__content-section">
|
|
108
|
+
<div class="pf-v5-c-toolbar__item">
|
|
109
|
+
<button
|
|
110
|
+
class="pf-v5-c-menu-toggle"
|
|
111
|
+
type="button"
|
|
112
|
+
aria-expanded="false"
|
|
113
|
+
>
|
|
114
|
+
<span class="pf-v5-c-menu-toggle__text">Overview</span>
|
|
115
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
116
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
117
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
118
|
+
</span>
|
|
119
|
+
</span>
|
|
120
|
+
</button>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="pf-v5-c-toolbar__item">
|
|
124
|
+
<button
|
|
125
|
+
class="pf-v5-c-menu-toggle"
|
|
126
|
+
type="button"
|
|
127
|
+
aria-expanded="false"
|
|
128
|
+
>
|
|
129
|
+
<span class="pf-v5-c-menu-toggle__text">Services</span>
|
|
130
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
131
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
132
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
133
|
+
</span>
|
|
134
|
+
</span>
|
|
135
|
+
</button>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
119
138
|
<div
|
|
120
|
-
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
139
|
+
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
121
140
|
>
|
|
122
141
|
<div
|
|
123
142
|
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
@@ -164,27 +183,6 @@ cssPrefix: pf-d-back-to-top
|
|
|
164
183
|
</button>
|
|
165
184
|
</div>
|
|
166
185
|
</div>
|
|
167
|
-
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
168
|
-
<button
|
|
169
|
-
class="pf-v5-c-menu-toggle pf-m-full-height"
|
|
170
|
-
type="button"
|
|
171
|
-
aria-expanded="false"
|
|
172
|
-
>
|
|
173
|
-
<span class="pf-v5-c-menu-toggle__icon">
|
|
174
|
-
<img
|
|
175
|
-
class="pf-v5-c-avatar"
|
|
176
|
-
alt="Avatar image"
|
|
177
|
-
src="/assets/images/img_avatar-light.svg"
|
|
178
|
-
/>
|
|
179
|
-
</span>
|
|
180
|
-
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
|
|
181
|
-
<span class="pf-v5-c-menu-toggle__controls">
|
|
182
|
-
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
183
|
-
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
184
|
-
</span>
|
|
185
|
-
</span>
|
|
186
|
-
</button>
|
|
187
|
-
</div>
|
|
188
186
|
</div>
|
|
189
187
|
</div>
|
|
190
188
|
</div>
|
|
@@ -26,20 +26,16 @@ wrapperTag: div
|
|
|
26
26
|
</button>
|
|
27
27
|
</span>
|
|
28
28
|
<div class="pf-v5-c-masthead__main">
|
|
29
|
-
<a
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
style="--pf-v5-c-brand--Height: 36px;"
|
|
33
|
-
>
|
|
34
|
-
<svg height="36px" viewBox="0 0 679 158" role="img">
|
|
35
|
-
<title>Patternfly logo</title>
|
|
29
|
+
<a class="pf-v5-c-masthead__brand" href="#">
|
|
30
|
+
<svg height="40px" viewBox="0 0 679 158">
|
|
31
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
36
32
|
<defs>
|
|
37
33
|
<linearGradient
|
|
38
34
|
x1="68%"
|
|
39
35
|
y1="2.25860997e-13%"
|
|
40
36
|
x2="32%"
|
|
41
37
|
y2="100%"
|
|
42
|
-
id="linearGradient-
|
|
38
|
+
id="linearGradient-banner-basic-example-masthead"
|
|
43
39
|
>
|
|
44
40
|
<stop stop-color="#2B9AF3" offset="0%" />
|
|
45
41
|
<stop
|
|
@@ -49,13 +45,7 @@ wrapperTag: div
|
|
|
49
45
|
/>
|
|
50
46
|
</linearGradient>
|
|
51
47
|
</defs>
|
|
52
|
-
<g
|
|
53
|
-
id="PF-HorizontalLogo-Color"
|
|
54
|
-
stroke="none"
|
|
55
|
-
stroke-width="1"
|
|
56
|
-
fill="none"
|
|
57
|
-
fill-rule="evenodd"
|
|
58
|
-
>
|
|
48
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
59
49
|
<g
|
|
60
50
|
transform="translate(206.000000, 45.750000)"
|
|
61
51
|
fill="var(--pf-t--global--text--color--regular)"
|
|
@@ -90,19 +80,18 @@ wrapperTag: div
|
|
|
90
80
|
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
91
81
|
/>
|
|
92
82
|
</g>
|
|
93
|
-
<g
|
|
83
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
94
84
|
<path
|
|
95
85
|
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
96
|
-
|
|
97
|
-
fill="var(--pf-t--global--color--brand--200)"
|
|
86
|
+
fill="#0066CC"
|
|
98
87
|
/>
|
|
99
88
|
<path
|
|
100
89
|
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
101
|
-
fill="url(#linearGradient-
|
|
90
|
+
fill="url(#linearGradient-banner-basic-example-masthead)"
|
|
102
91
|
/>
|
|
103
92
|
<path
|
|
104
93
|
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
105
|
-
fill="url(#linearGradient-
|
|
94
|
+
fill="url(#linearGradient-banner-basic-example-masthead)"
|
|
106
95
|
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
107
96
|
/>
|
|
108
97
|
</g>
|
|
@@ -117,8 +106,38 @@ wrapperTag: div
|
|
|
117
106
|
>
|
|
118
107
|
<div class="pf-v5-c-toolbar__content">
|
|
119
108
|
<div class="pf-v5-c-toolbar__content-section">
|
|
109
|
+
<div class="pf-v5-c-toolbar__item">
|
|
110
|
+
<button
|
|
111
|
+
class="pf-v5-c-menu-toggle"
|
|
112
|
+
type="button"
|
|
113
|
+
aria-expanded="false"
|
|
114
|
+
>
|
|
115
|
+
<span class="pf-v5-c-menu-toggle__text">Overview</span>
|
|
116
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
117
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
118
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
119
|
+
</span>
|
|
120
|
+
</span>
|
|
121
|
+
</button>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="pf-v5-c-toolbar__item">
|
|
125
|
+
<button
|
|
126
|
+
class="pf-v5-c-menu-toggle"
|
|
127
|
+
type="button"
|
|
128
|
+
aria-expanded="false"
|
|
129
|
+
>
|
|
130
|
+
<span class="pf-v5-c-menu-toggle__text">Services</span>
|
|
131
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
132
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
133
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
134
|
+
</span>
|
|
135
|
+
</span>
|
|
136
|
+
</button>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
120
139
|
<div
|
|
121
|
-
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
140
|
+
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
122
141
|
>
|
|
123
142
|
<div
|
|
124
143
|
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
@@ -165,27 +184,6 @@ wrapperTag: div
|
|
|
165
184
|
</button>
|
|
166
185
|
</div>
|
|
167
186
|
</div>
|
|
168
|
-
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
169
|
-
<button
|
|
170
|
-
class="pf-v5-c-menu-toggle pf-m-full-height"
|
|
171
|
-
type="button"
|
|
172
|
-
aria-expanded="false"
|
|
173
|
-
>
|
|
174
|
-
<span class="pf-v5-c-menu-toggle__icon">
|
|
175
|
-
<img
|
|
176
|
-
class="pf-v5-c-avatar"
|
|
177
|
-
alt="Avatar image"
|
|
178
|
-
src="/assets/images/img_avatar-light.svg"
|
|
179
|
-
/>
|
|
180
|
-
</span>
|
|
181
|
-
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
|
|
182
|
-
<span class="pf-v5-c-menu-toggle__controls">
|
|
183
|
-
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
184
|
-
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
185
|
-
</span>
|
|
186
|
-
</span>
|
|
187
|
-
</button>
|
|
188
|
-
</div>
|
|
189
187
|
</div>
|
|
190
188
|
</div>
|
|
191
189
|
</div>
|
|
@@ -489,20 +487,16 @@ wrapperTag: div
|
|
|
489
487
|
</button>
|
|
490
488
|
</span>
|
|
491
489
|
<div class="pf-v5-c-masthead__main">
|
|
492
|
-
<a
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
style="--pf-v5-c-brand--Height: 36px;"
|
|
496
|
-
>
|
|
497
|
-
<svg height="36px" viewBox="0 0 679 158" role="img">
|
|
498
|
-
<title>Patternfly logo</title>
|
|
490
|
+
<a class="pf-v5-c-masthead__brand" href="#">
|
|
491
|
+
<svg height="40px" viewBox="0 0 679 158">
|
|
492
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
499
493
|
<defs>
|
|
500
494
|
<linearGradient
|
|
501
495
|
x1="68%"
|
|
502
496
|
y1="2.25860997e-13%"
|
|
503
497
|
x2="32%"
|
|
504
498
|
y2="100%"
|
|
505
|
-
id="linearGradient-
|
|
499
|
+
id="linearGradient-banner-top-bottom-example-masthead"
|
|
506
500
|
>
|
|
507
501
|
<stop stop-color="#2B9AF3" offset="0%" />
|
|
508
502
|
<stop
|
|
@@ -513,7 +507,6 @@ wrapperTag: div
|
|
|
513
507
|
</linearGradient>
|
|
514
508
|
</defs>
|
|
515
509
|
<g
|
|
516
|
-
id="PF-HorizontalLogo-Color"
|
|
517
510
|
stroke="none"
|
|
518
511
|
stroke-width="1"
|
|
519
512
|
fill="none"
|
|
@@ -555,19 +548,18 @@ wrapperTag: div
|
|
|
555
548
|
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
556
549
|
/>
|
|
557
550
|
</g>
|
|
558
|
-
<g
|
|
551
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
559
552
|
<path
|
|
560
553
|
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
561
|
-
|
|
562
|
-
fill="var(--pf-t--global--color--brand--200)"
|
|
554
|
+
fill="#0066CC"
|
|
563
555
|
/>
|
|
564
556
|
<path
|
|
565
557
|
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
566
|
-
fill="url(#linearGradient-
|
|
558
|
+
fill="url(#linearGradient-banner-top-bottom-example-masthead)"
|
|
567
559
|
/>
|
|
568
560
|
<path
|
|
569
561
|
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
570
|
-
fill="url(#linearGradient-
|
|
562
|
+
fill="url(#linearGradient-banner-top-bottom-example-masthead)"
|
|
571
563
|
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
572
564
|
/>
|
|
573
565
|
</g>
|
|
@@ -582,8 +574,38 @@ wrapperTag: div
|
|
|
582
574
|
>
|
|
583
575
|
<div class="pf-v5-c-toolbar__content">
|
|
584
576
|
<div class="pf-v5-c-toolbar__content-section">
|
|
577
|
+
<div class="pf-v5-c-toolbar__item">
|
|
578
|
+
<button
|
|
579
|
+
class="pf-v5-c-menu-toggle"
|
|
580
|
+
type="button"
|
|
581
|
+
aria-expanded="false"
|
|
582
|
+
>
|
|
583
|
+
<span class="pf-v5-c-menu-toggle__text">Overview</span>
|
|
584
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
585
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
586
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
587
|
+
</span>
|
|
588
|
+
</span>
|
|
589
|
+
</button>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
592
|
+
<div class="pf-v5-c-toolbar__item">
|
|
593
|
+
<button
|
|
594
|
+
class="pf-v5-c-menu-toggle"
|
|
595
|
+
type="button"
|
|
596
|
+
aria-expanded="false"
|
|
597
|
+
>
|
|
598
|
+
<span class="pf-v5-c-menu-toggle__text">Services</span>
|
|
599
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
600
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
601
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
602
|
+
</span>
|
|
603
|
+
</span>
|
|
604
|
+
</button>
|
|
605
|
+
</div>
|
|
606
|
+
|
|
585
607
|
<div
|
|
586
|
-
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
608
|
+
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
587
609
|
>
|
|
588
610
|
<div
|
|
589
611
|
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
@@ -630,29 +652,6 @@ wrapperTag: div
|
|
|
630
652
|
</button>
|
|
631
653
|
</div>
|
|
632
654
|
</div>
|
|
633
|
-
<div
|
|
634
|
-
class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"
|
|
635
|
-
>
|
|
636
|
-
<button
|
|
637
|
-
class="pf-v5-c-menu-toggle pf-m-full-height"
|
|
638
|
-
type="button"
|
|
639
|
-
aria-expanded="false"
|
|
640
|
-
>
|
|
641
|
-
<span class="pf-v5-c-menu-toggle__icon">
|
|
642
|
-
<img
|
|
643
|
-
class="pf-v5-c-avatar"
|
|
644
|
-
alt="Avatar image"
|
|
645
|
-
src="/assets/images/img_avatar-light.svg"
|
|
646
|
-
/>
|
|
647
|
-
</span>
|
|
648
|
-
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
|
|
649
|
-
<span class="pf-v5-c-menu-toggle__controls">
|
|
650
|
-
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
651
|
-
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
652
|
-
</span>
|
|
653
|
-
</span>
|
|
654
|
-
</button>
|
|
655
|
-
</div>
|
|
656
655
|
</div>
|
|
657
656
|
</div>
|
|
658
657
|
</div>
|
|
@@ -24,20 +24,16 @@ section: patterns
|
|
|
24
24
|
</button>
|
|
25
25
|
</span>
|
|
26
26
|
<div class="pf-v5-c-masthead__main">
|
|
27
|
-
<a
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
style="--pf-v5-c-brand--Height: 36px;"
|
|
31
|
-
>
|
|
32
|
-
<svg height="36px" viewBox="0 0 679 158" role="img">
|
|
33
|
-
<title>Patternfly logo</title>
|
|
27
|
+
<a class="pf-v5-c-masthead__brand" href="#">
|
|
28
|
+
<svg height="40px" viewBox="0 0 679 158">
|
|
29
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
34
30
|
<defs>
|
|
35
31
|
<linearGradient
|
|
36
32
|
x1="68%"
|
|
37
33
|
y1="2.25860997e-13%"
|
|
38
34
|
x2="32%"
|
|
39
35
|
y2="100%"
|
|
40
|
-
id="linearGradient-
|
|
36
|
+
id="linearGradient-card-view-basic-example-masthead"
|
|
41
37
|
>
|
|
42
38
|
<stop stop-color="#2B9AF3" offset="0%" />
|
|
43
39
|
<stop
|
|
@@ -47,13 +43,7 @@ section: patterns
|
|
|
47
43
|
/>
|
|
48
44
|
</linearGradient>
|
|
49
45
|
</defs>
|
|
50
|
-
<g
|
|
51
|
-
id="PF-HorizontalLogo-Color"
|
|
52
|
-
stroke="none"
|
|
53
|
-
stroke-width="1"
|
|
54
|
-
fill="none"
|
|
55
|
-
fill-rule="evenodd"
|
|
56
|
-
>
|
|
46
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
57
47
|
<g
|
|
58
48
|
transform="translate(206.000000, 45.750000)"
|
|
59
49
|
fill="var(--pf-t--global--text--color--regular)"
|
|
@@ -88,19 +78,18 @@ section: patterns
|
|
|
88
78
|
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
89
79
|
/>
|
|
90
80
|
</g>
|
|
91
|
-
<g
|
|
81
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
92
82
|
<path
|
|
93
83
|
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
94
|
-
|
|
95
|
-
fill="var(--pf-t--global--color--brand--200)"
|
|
84
|
+
fill="#0066CC"
|
|
96
85
|
/>
|
|
97
86
|
<path
|
|
98
87
|
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
99
|
-
fill="url(#linearGradient-
|
|
88
|
+
fill="url(#linearGradient-card-view-basic-example-masthead)"
|
|
100
89
|
/>
|
|
101
90
|
<path
|
|
102
91
|
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
103
|
-
fill="url(#linearGradient-
|
|
92
|
+
fill="url(#linearGradient-card-view-basic-example-masthead)"
|
|
104
93
|
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
105
94
|
/>
|
|
106
95
|
</g>
|
|
@@ -115,8 +104,38 @@ section: patterns
|
|
|
115
104
|
>
|
|
116
105
|
<div class="pf-v5-c-toolbar__content">
|
|
117
106
|
<div class="pf-v5-c-toolbar__content-section">
|
|
107
|
+
<div class="pf-v5-c-toolbar__item">
|
|
108
|
+
<button
|
|
109
|
+
class="pf-v5-c-menu-toggle"
|
|
110
|
+
type="button"
|
|
111
|
+
aria-expanded="false"
|
|
112
|
+
>
|
|
113
|
+
<span class="pf-v5-c-menu-toggle__text">Overview</span>
|
|
114
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
115
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
116
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
117
|
+
</span>
|
|
118
|
+
</span>
|
|
119
|
+
</button>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="pf-v5-c-toolbar__item">
|
|
123
|
+
<button
|
|
124
|
+
class="pf-v5-c-menu-toggle"
|
|
125
|
+
type="button"
|
|
126
|
+
aria-expanded="false"
|
|
127
|
+
>
|
|
128
|
+
<span class="pf-v5-c-menu-toggle__text">Services</span>
|
|
129
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
130
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
131
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
132
|
+
</span>
|
|
133
|
+
</span>
|
|
134
|
+
</button>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
118
137
|
<div
|
|
119
|
-
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
138
|
+
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
120
139
|
>
|
|
121
140
|
<div
|
|
122
141
|
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
@@ -163,27 +182,6 @@ section: patterns
|
|
|
163
182
|
</button>
|
|
164
183
|
</div>
|
|
165
184
|
</div>
|
|
166
|
-
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
167
|
-
<button
|
|
168
|
-
class="pf-v5-c-menu-toggle pf-m-full-height"
|
|
169
|
-
type="button"
|
|
170
|
-
aria-expanded="false"
|
|
171
|
-
>
|
|
172
|
-
<span class="pf-v5-c-menu-toggle__icon">
|
|
173
|
-
<img
|
|
174
|
-
class="pf-v5-c-avatar"
|
|
175
|
-
alt="Avatar image"
|
|
176
|
-
src="/assets/images/img_avatar-light.svg"
|
|
177
|
-
/>
|
|
178
|
-
</span>
|
|
179
|
-
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
|
|
180
|
-
<span class="pf-v5-c-menu-toggle__controls">
|
|
181
|
-
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
182
|
-
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
183
|
-
</span>
|
|
184
|
-
</span>
|
|
185
|
-
</button>
|
|
186
|
-
</div>
|
|
187
185
|
</div>
|
|
188
186
|
</div>
|
|
189
187
|
</div>
|