@patternfly/patternfly 5.0.0-alpha.76 → 5.0.0-alpha.77
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/docs/components/Alert/examples/Alert.md +1 -1
- package/docs/components/AppLauncher/deprecated/application-launcher.css +25 -0
- package/docs/components/AppLauncher/{examples → deprecated}/application-launcher.md +1 -0
- package/docs/components/Card/examples/Card.md +10 -10
- package/docs/components/Chip/examples/Chip.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.css +7 -0
- package/docs/components/ContextSelector/{examples → deprecated}/context-selector.md +1 -0
- package/docs/components/Label/examples/Label.md +1 -1
- package/docs/components/Nav/examples/Navigation.md +4 -4
- package/docs/components/OptionsMenu/deprecated/options-menu.css +25 -0
- package/docs/components/OptionsMenu/{examples → deprecated}/options-menu.md +1 -0
- package/docs/components/Page/deprecated/PageHeader.css +17 -0
- package/docs/components/Page/deprecated/PageHeader.md +261 -0
- package/docs/components/Page/examples/Page.md +106 -51
- package/docs/components/Tabs/examples/Tabs.md +6 -6
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/package.json +5 -5
- package/docs/components/AppLauncher/examples/application-launcher.css +0 -25
- package/docs/components/ContextSelector/examples/context-selector.css +0 -7
- package/docs/components/OptionsMenu/examples/options-menu.css +0 -25
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
#ws-html-deprecated-c-application-launcher-aligned-right,
|
|
2
|
+
#ws-html-deprecated-c-application-launcher-aligned-top,
|
|
3
|
+
#ws-html-deprecated-c-application-launcher-expanded {
|
|
4
|
+
min-height: 216px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
#ws-html-deprecated-c-application-launcher-aligned-right {
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: flex-end;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#ws-html-deprecated-c-application-launcher-aligned-top {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: flex-end;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#ws-html-deprecated-c-application-launcher-with-sections-and-dividers-between-sections,
|
|
18
|
+
#ws-html-deprecated-c-application-launcher-with-sections-and-dividers-between-items,
|
|
19
|
+
#ws-html-deprecated-c-application-launcher-with-sections-dividers-icons-and-external-links {
|
|
20
|
+
min-height: 424px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
#ws-html-deprecated-c-application-launcher-favorites {
|
|
24
|
+
min-height: 540px;
|
|
25
|
+
}
|
|
@@ -891,9 +891,9 @@ cssPrefix: pf-v5-c-card
|
|
|
891
891
|
|
|
892
892
|
```
|
|
893
893
|
|
|
894
|
-
### Hoverable raised
|
|
894
|
+
### Hoverable raised
|
|
895
895
|
|
|
896
|
-
```html
|
|
896
|
+
```html isDeprecated
|
|
897
897
|
<div class="pf-v5-c-card pf-m-hoverable-raised" id="card-hoverable-example">
|
|
898
898
|
<div class="pf-v5-c-card__title">
|
|
899
899
|
<h2 class="pf-v5-c-card__title-text">Title</h2>
|
|
@@ -904,9 +904,9 @@ cssPrefix: pf-v5-c-card
|
|
|
904
904
|
|
|
905
905
|
```
|
|
906
906
|
|
|
907
|
-
### Selectable raised
|
|
907
|
+
### Selectable raised
|
|
908
908
|
|
|
909
|
-
```html
|
|
909
|
+
```html isDeprecated
|
|
910
910
|
<div
|
|
911
911
|
class="pf-v5-c-card pf-m-selectable-raised"
|
|
912
912
|
tabindex="0"
|
|
@@ -921,9 +921,9 @@ cssPrefix: pf-v5-c-card
|
|
|
921
921
|
|
|
922
922
|
```
|
|
923
923
|
|
|
924
|
-
### Selected raised
|
|
924
|
+
### Selected raised
|
|
925
925
|
|
|
926
|
-
```html
|
|
926
|
+
```html isDeprecated
|
|
927
927
|
<div
|
|
928
928
|
class="pf-v5-c-card pf-m-selectable-raised pf-m-selected-raised"
|
|
929
929
|
tabindex="0"
|
|
@@ -938,9 +938,9 @@ cssPrefix: pf-v5-c-card
|
|
|
938
938
|
|
|
939
939
|
```
|
|
940
940
|
|
|
941
|
-
### Selectable raised with a hidden input for improved screen reader accessibility
|
|
941
|
+
### Selectable raised with a hidden input for improved screen reader accessibility
|
|
942
942
|
|
|
943
|
-
```html
|
|
943
|
+
```html isDeprecated
|
|
944
944
|
<input
|
|
945
945
|
class="pf-v5-c-card__sr-input pf-v5-screen-reader"
|
|
946
946
|
type="checkbox"
|
|
@@ -961,9 +961,9 @@ cssPrefix: pf-v5-c-card
|
|
|
961
961
|
|
|
962
962
|
```
|
|
963
963
|
|
|
964
|
-
### Non selectable raised
|
|
964
|
+
### Non selectable raised
|
|
965
965
|
|
|
966
|
-
```html
|
|
966
|
+
```html isDeprecated
|
|
967
967
|
<div
|
|
968
968
|
class="pf-v5-c-card pf-m-non-selectable-raised"
|
|
969
969
|
id="card-non-selectable-raised-example"
|
|
@@ -592,9 +592,9 @@ cssPrefix: pf-v5-c-nav
|
|
|
592
592
|
|
|
593
593
|
```
|
|
594
594
|
|
|
595
|
-
###
|
|
595
|
+
### Tertiary
|
|
596
596
|
|
|
597
|
-
```html
|
|
597
|
+
```html isDeprecated
|
|
598
598
|
<nav class="pf-v5-c-nav pf-m-tertiary" aria-label="Local">
|
|
599
599
|
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
|
|
600
600
|
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
@@ -621,9 +621,9 @@ cssPrefix: pf-v5-c-nav
|
|
|
621
621
|
|
|
622
622
|
```
|
|
623
623
|
|
|
624
|
-
###
|
|
624
|
+
### Tertiary overflow
|
|
625
625
|
|
|
626
|
-
```html
|
|
626
|
+
```html isDeprecated
|
|
627
627
|
<nav class="pf-v5-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local">
|
|
628
628
|
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
|
|
629
629
|
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
#ws-html-deprecated-c-options-menu-single-option,
|
|
2
|
+
#ws-html-deprecated-c-options-menu-plain,
|
|
3
|
+
#ws-html-deprecated-c-options-menu-align-right,
|
|
4
|
+
#ws-html-deprecated-c-options-menu-align-top {
|
|
5
|
+
min-height: 215px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
#ws-html-deprecated-c-options-menu-multiple-options {
|
|
9
|
+
min-height: 350px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#ws-html-deprecated-c-options-menu-plain-with-text {
|
|
13
|
+
min-height: 280px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#ws-html-deprecated-c-options-menu-align-top {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: flex-end;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#ws-html-deprecated-c-options-menu-with-groups,
|
|
22
|
+
#ws-html-deprecated-c-options-menu-with-groups-and-dividers-between-groups,
|
|
23
|
+
#ws-html-deprecated-c-options-menu-with-groups-and-dividers-between-items {
|
|
24
|
+
min-height: 450px;
|
|
25
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.ws-html-deprecated-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
|
|
2
|
+
color: var(--pf-v5-global--Color--light-100);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.ws-html-deprecated-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
|
|
6
|
+
color: var(--pf-v5-global--Color--dark-100);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
#ws-html-deprecated-c-page-with-or-without-fill .ws-preview-html,
|
|
10
|
+
#ws-html-deprecated-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
|
|
11
|
+
height: 500px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#ws-html-deprecated-c-page-multiple-sidebar-body-elements .ws-preview-html,
|
|
15
|
+
#ws-html-deprecated-c-page-using-flex-layout .ws-preview-html {
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: Page
|
|
3
|
+
section: components
|
|
4
|
+
wrapperTag: div
|
|
5
|
+
deprecated: true
|
|
6
|
+
---import './PageHeader.css'
|
|
7
|
+
|
|
8
|
+
## Page header examples
|
|
9
|
+
|
|
10
|
+
### Vertical nav
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<div class="pf-v5-c-page">
|
|
14
|
+
<header class="pf-v5-c-page__header">
|
|
15
|
+
<div class="pf-v5-c-page__header-brand">
|
|
16
|
+
<div class="pf-v5-c-page__header-brand-toggle">toggle</div>
|
|
17
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
20
|
+
</header>
|
|
21
|
+
<div class="pf-v5-c-page__sidebar">
|
|
22
|
+
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
23
|
+
</div>
|
|
24
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
25
|
+
<section class="pf-v5-c-page__main-section pf-m-dark-100">
|
|
26
|
+
This
|
|
27
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
28
|
+
<code>.pf-m-dark-100</code>.
|
|
29
|
+
</section>
|
|
30
|
+
<section class="pf-v5-c-page__main-section pf-m-dark-200">
|
|
31
|
+
This
|
|
32
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
33
|
+
<code>.pf-m-dark-200</code>.
|
|
34
|
+
</section>
|
|
35
|
+
<section class="pf-v5-c-page__main-section pf-m-light">
|
|
36
|
+
This
|
|
37
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
38
|
+
<code>.pf-m-light</code>.
|
|
39
|
+
</section>
|
|
40
|
+
<section class="pf-v5-c-page__main-section">
|
|
41
|
+
This is a default
|
|
42
|
+
<code>.pf-v5-c-page__main-section</code>.
|
|
43
|
+
</section>
|
|
44
|
+
</main>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Horizontal nav
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<div class="pf-v5-c-page">
|
|
53
|
+
<header class="pf-v5-c-page__header">
|
|
54
|
+
<div class="pf-v5-c-page__header-brand">
|
|
55
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
58
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
59
|
+
</header>
|
|
60
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
61
|
+
<section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
|
|
62
|
+
<section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
|
|
63
|
+
<section class="pf-v5-c-page__main-section pf-m-light"></section>
|
|
64
|
+
<section class="pf-v5-c-page__main-section"></section>
|
|
65
|
+
</main>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Multiple sidebar body elements, padding, and fill
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<div class="pf-v5-c-page">
|
|
74
|
+
<header class="pf-v5-c-page__header">
|
|
75
|
+
<div class="pf-v5-c-page__header-brand">
|
|
76
|
+
<div class="pf-v5-c-page__header-brand-toggle">toggle</div>
|
|
77
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
80
|
+
</header>
|
|
81
|
+
<div class="pf-v5-c-page__sidebar">
|
|
82
|
+
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
83
|
+
<div
|
|
84
|
+
class="pf-v5-c-page__sidebar-body pf-m-fill pf-m-page-insets"
|
|
85
|
+
>inset content</div>
|
|
86
|
+
<div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
87
|
+
</div>
|
|
88
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
89
|
+
<section class="pf-v5-c-page__main-section pf-m-light"></section>
|
|
90
|
+
</main>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### With or without fill
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<div class="pf-v5-c-page">
|
|
99
|
+
<header class="pf-v5-c-page__header">
|
|
100
|
+
<div class="pf-v5-c-page__header-brand">
|
|
101
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
104
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
105
|
+
</header>
|
|
106
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
107
|
+
<section
|
|
108
|
+
class="pf-v5-c-page__main-section pf-m-light"
|
|
109
|
+
>A regular page section.</section>
|
|
110
|
+
<section class="pf-v5-c-page__main-section pf-m-fill">
|
|
111
|
+
This section uses
|
|
112
|
+
<code>.pf-m-fill</code> to fill the available space.
|
|
113
|
+
</section>
|
|
114
|
+
<section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
|
|
115
|
+
This section uses
|
|
116
|
+
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
117
|
+
</section>
|
|
118
|
+
</main>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Main section padding
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
<div class="pf-v5-c-page">
|
|
127
|
+
<header class="pf-v5-c-page__header">
|
|
128
|
+
<div class="pf-v5-c-page__header-brand">
|
|
129
|
+
<div class="pf-v5-c-page__header-brand-toggle">toggle</div>
|
|
130
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
133
|
+
</header>
|
|
134
|
+
<div class="pf-v5-c-page__sidebar">
|
|
135
|
+
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
136
|
+
</div>
|
|
137
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
138
|
+
<section class="pf-v5-c-page__main-section">
|
|
139
|
+
This
|
|
140
|
+
<code>.pf-v5-c-page__main-section</code> has default padding.
|
|
141
|
+
</section>
|
|
142
|
+
<section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
|
|
143
|
+
This
|
|
144
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
145
|
+
<code>.pf-m-no-padding</code> to remove all padding.
|
|
146
|
+
</section>
|
|
147
|
+
<section
|
|
148
|
+
class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
|
|
149
|
+
>
|
|
150
|
+
This
|
|
151
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
152
|
+
<code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
|
|
153
|
+
<code>md</code> breakpoint.
|
|
154
|
+
</section>
|
|
155
|
+
</main>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Main section variations
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div class="pf-v5-c-page">
|
|
164
|
+
<header class="pf-v5-c-page__header">
|
|
165
|
+
<div class="pf-v5-c-page__header-brand">
|
|
166
|
+
<div class="pf-v5-c-page__header-brand-toggle">toggle</div>
|
|
167
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
170
|
+
</header>
|
|
171
|
+
<div class="pf-v5-c-page__sidebar">
|
|
172
|
+
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
173
|
+
</div>
|
|
174
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
175
|
+
<section class="pf-v5-c-page__main-subnav">
|
|
176
|
+
<code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
|
|
177
|
+
</section>
|
|
178
|
+
<section class="pf-v5-c-page__main-nav">
|
|
179
|
+
<code>.pf-v5-c-page__main-nav</code> for tertiary navigation
|
|
180
|
+
</section>
|
|
181
|
+
<section class="pf-v5-c-page__main-tabs">
|
|
182
|
+
<code>.pf-v5-c-page__main-tabs</code> for tabs
|
|
183
|
+
</section>
|
|
184
|
+
<div class="pf-v5-c-page__main-group">
|
|
185
|
+
<code>.pf-v5-c-page__main-group</code> for a group of page sections
|
|
186
|
+
</div>
|
|
187
|
+
<section class="pf-v5-c-page__main-breadcrumb">
|
|
188
|
+
<code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
|
|
189
|
+
</section>
|
|
190
|
+
<section class="pf-v5-c-page__main-section">
|
|
191
|
+
<code>.pf-v5-c-page__main-section</code> for main sections
|
|
192
|
+
</section>
|
|
193
|
+
<section class="pf-v5-c-page__main-wizard">
|
|
194
|
+
<code>.pf-v5-c-page__main-wizard</code> for wizards
|
|
195
|
+
</section>
|
|
196
|
+
</main>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Centered section
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<div class="pf-v5-c-page">
|
|
205
|
+
<header class="pf-v5-c-page__header">
|
|
206
|
+
<div class="pf-v5-c-page__header-brand">
|
|
207
|
+
<div class="pf-v5-c-page__header-brand-toggle">toggle</div>
|
|
208
|
+
<a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
211
|
+
</header>
|
|
212
|
+
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
213
|
+
<section
|
|
214
|
+
class="pf-v5-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
215
|
+
>
|
|
216
|
+
<div class="pf-v5-c-page__main-body">
|
|
217
|
+
<div class="pf-v5-c-card">
|
|
218
|
+
<div class="pf-v5-c-card__body">
|
|
219
|
+
When a width limited page section is wider than the value of
|
|
220
|
+
<code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
221
|
+
<br />
|
|
222
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</section>
|
|
227
|
+
</main>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
## Documentation
|
|
233
|
+
|
|
234
|
+
### Overview
|
|
235
|
+
|
|
236
|
+
The page header component is a deprecated approach to building a header on the page component. The recommended approach uses the masthead component instead.
|
|
237
|
+
|
|
238
|
+
### Accessibility
|
|
239
|
+
|
|
240
|
+
| Attribute | Applied to | Outcome |
|
|
241
|
+
| -- | -- | -- |
|
|
242
|
+
| `role="banner"` | `.pf-v5-c-page__header` | Identifies the element that serves as the banner region. |
|
|
243
|
+
| `aria-expanded="true/false"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
|
|
244
|
+
| `aria-controls="[id of nav]"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Identifies the element controlled by the toggle. **Required**
|
|
245
|
+
|
|
246
|
+
### Usage
|
|
247
|
+
|
|
248
|
+
| Class | Applied to | Outcome |
|
|
249
|
+
| -- | -- | -- |
|
|
250
|
+
| `.pf-v5-c-page__header` | `<header>` | Declares the page header. |
|
|
251
|
+
| `.pf-v5-c-page__header-brand` | `<div>` | Creates a header container to nest the brand component. |
|
|
252
|
+
| `.pf-v5-c-page__header-brand-toggle` | `<div>` | Creates a container to nest the sidebar toggle. |
|
|
253
|
+
| `.pf-v5-c-page__header-brand-link` | `<a>`, `<span>` | Creates a link for the brand logo. Use a `<span>` if there is no link. |
|
|
254
|
+
| `.pf-v5-c-page__header-selector` | `<div>` | Creates a header container to nest the context selector component. |
|
|
255
|
+
| `.pf-v5-c-page__header-nav` | `<div>` | Creates a container to nest the navigation component in the header. |
|
|
256
|
+
| `.pf-v5-c-page__header-tools` | `<div>` | Creates a container to nest the icons and menus in header. |
|
|
257
|
+
| `.pf-v5-c-page__header-tools-group` | `<div>` | Creates a container for grouping sets of icons and menus in header. |
|
|
258
|
+
| `.pf-v5-c-page__header-tools-item` | `<div>` | Creates a container for an item in a header tools group. |
|
|
259
|
+
| `.pf-m-selected` | `.pf-v5-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
|
|
260
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
|
|
261
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -11,12 +11,22 @@ wrapperTag: div
|
|
|
11
11
|
|
|
12
12
|
```html
|
|
13
13
|
<div class="pf-v5-c-page">
|
|
14
|
-
<header class="pf-v5-c-
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
14
|
+
<header class="pf-v5-c-masthead">
|
|
15
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
16
|
+
<button
|
|
17
|
+
class="pf-v5-c-button pf-m-plain"
|
|
18
|
+
type="button"
|
|
19
|
+
aria-label="Global navigation"
|
|
20
|
+
>
|
|
21
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
22
|
+
</button>
|
|
23
|
+
</span>
|
|
24
|
+
<div class="pf-v5-c-masthead__main">
|
|
25
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="pf-v5-c-masthead__content">
|
|
28
|
+
<span>Content</span>
|
|
18
29
|
</div>
|
|
19
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
20
30
|
</header>
|
|
21
31
|
<div class="pf-v5-c-page__sidebar">
|
|
22
32
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -50,12 +60,22 @@ wrapperTag: div
|
|
|
50
60
|
|
|
51
61
|
```html
|
|
52
62
|
<div class="pf-v5-c-page">
|
|
53
|
-
<header class="pf-v5-c-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
63
|
+
<header class="pf-v5-c-masthead">
|
|
64
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
65
|
+
<button
|
|
66
|
+
class="pf-v5-c-button pf-m-plain"
|
|
67
|
+
type="button"
|
|
68
|
+
aria-label="Global navigation"
|
|
69
|
+
>
|
|
70
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
71
|
+
</button>
|
|
72
|
+
</span>
|
|
73
|
+
<div class="pf-v5-c-masthead__main">
|
|
74
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="pf-v5-c-masthead__content">
|
|
77
|
+
<span>Content</span>
|
|
56
78
|
</div>
|
|
57
|
-
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
58
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
59
79
|
</header>
|
|
60
80
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
61
81
|
<section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
|
|
@@ -71,12 +91,22 @@ wrapperTag: div
|
|
|
71
91
|
|
|
72
92
|
```html
|
|
73
93
|
<div class="pf-v5-c-page">
|
|
74
|
-
<header class="pf-v5-c-
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
|
|
94
|
+
<header class="pf-v5-c-masthead">
|
|
95
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
96
|
+
<button
|
|
97
|
+
class="pf-v5-c-button pf-m-plain"
|
|
98
|
+
type="button"
|
|
99
|
+
aria-label="Global navigation"
|
|
100
|
+
>
|
|
101
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
102
|
+
</button>
|
|
103
|
+
</span>
|
|
104
|
+
<div class="pf-v5-c-masthead__main">
|
|
105
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="pf-v5-c-masthead__content">
|
|
108
|
+
<span>Content</span>
|
|
78
109
|
</div>
|
|
79
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
80
110
|
</header>
|
|
81
111
|
<div class="pf-v5-c-page__sidebar">
|
|
82
112
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -96,12 +126,22 @@ wrapperTag: div
|
|
|
96
126
|
|
|
97
127
|
```html
|
|
98
128
|
<div class="pf-v5-c-page">
|
|
99
|
-
<header class="pf-v5-c-
|
|
100
|
-
<
|
|
101
|
-
<
|
|
129
|
+
<header class="pf-v5-c-masthead">
|
|
130
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
131
|
+
<button
|
|
132
|
+
class="pf-v5-c-button pf-m-plain"
|
|
133
|
+
type="button"
|
|
134
|
+
aria-label="Global navigation"
|
|
135
|
+
>
|
|
136
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
137
|
+
</button>
|
|
138
|
+
</span>
|
|
139
|
+
<div class="pf-v5-c-masthead__main">
|
|
140
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="pf-v5-c-masthead__content">
|
|
143
|
+
<span>Content</span>
|
|
102
144
|
</div>
|
|
103
|
-
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
104
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
105
145
|
</header>
|
|
106
146
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
107
147
|
<section
|
|
@@ -124,12 +164,22 @@ wrapperTag: div
|
|
|
124
164
|
|
|
125
165
|
```html
|
|
126
166
|
<div class="pf-v5-c-page">
|
|
127
|
-
<header class="pf-v5-c-
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
|
|
167
|
+
<header class="pf-v5-c-masthead">
|
|
168
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
169
|
+
<button
|
|
170
|
+
class="pf-v5-c-button pf-m-plain"
|
|
171
|
+
type="button"
|
|
172
|
+
aria-label="Global navigation"
|
|
173
|
+
>
|
|
174
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
175
|
+
</button>
|
|
176
|
+
</span>
|
|
177
|
+
<div class="pf-v5-c-masthead__main">
|
|
178
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="pf-v5-c-masthead__content">
|
|
181
|
+
<span>Content</span>
|
|
131
182
|
</div>
|
|
132
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
133
183
|
</header>
|
|
134
184
|
<div class="pf-v5-c-page__sidebar">
|
|
135
185
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -161,12 +211,22 @@ wrapperTag: div
|
|
|
161
211
|
|
|
162
212
|
```html
|
|
163
213
|
<div class="pf-v5-c-page">
|
|
164
|
-
<header class="pf-v5-c-
|
|
165
|
-
<
|
|
166
|
-
<
|
|
167
|
-
|
|
214
|
+
<header class="pf-v5-c-masthead">
|
|
215
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-v5-c-button pf-m-plain"
|
|
218
|
+
type="button"
|
|
219
|
+
aria-label="Global navigation"
|
|
220
|
+
>
|
|
221
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
222
|
+
</button>
|
|
223
|
+
</span>
|
|
224
|
+
<div class="pf-v5-c-masthead__main">
|
|
225
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="pf-v5-c-masthead__content">
|
|
228
|
+
<span>Content</span>
|
|
168
229
|
</div>
|
|
169
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
170
230
|
</header>
|
|
171
231
|
<div class="pf-v5-c-page__sidebar">
|
|
172
232
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -202,12 +262,22 @@ wrapperTag: div
|
|
|
202
262
|
|
|
203
263
|
```html
|
|
204
264
|
<div class="pf-v5-c-page">
|
|
205
|
-
<header class="pf-v5-c-
|
|
206
|
-
<
|
|
207
|
-
<
|
|
208
|
-
|
|
265
|
+
<header class="pf-v5-c-masthead">
|
|
266
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
267
|
+
<button
|
|
268
|
+
class="pf-v5-c-button pf-m-plain"
|
|
269
|
+
type="button"
|
|
270
|
+
aria-label="Global navigation"
|
|
271
|
+
>
|
|
272
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
273
|
+
</button>
|
|
274
|
+
</span>
|
|
275
|
+
<div class="pf-v5-c-masthead__main">
|
|
276
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="pf-v5-c-masthead__content">
|
|
279
|
+
<span>Content</span>
|
|
209
280
|
</div>
|
|
210
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
211
281
|
</header>
|
|
212
282
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
213
283
|
<section
|
|
@@ -233,18 +303,15 @@ wrapperTag: div
|
|
|
233
303
|
|
|
234
304
|
### Overview
|
|
235
305
|
|
|
236
|
-
This component provides the basic chrome for a page, including sidebar
|
|
306
|
+
This component provides the basic chrome for a page, including sidebar and main areas.
|
|
237
307
|
|
|
238
308
|
### Accessibility
|
|
239
309
|
|
|
240
310
|
| Attribute | Applied to | Outcome |
|
|
241
311
|
| -- | -- | -- |
|
|
242
|
-
| `role="banner"` | `.pf-v5-c-page__header` | Identifies the element that serves as the banner region. |
|
|
243
312
|
| `role="main"` | `.pf-v5-c-page__main` | Identifies the element that serves as the main region. |
|
|
244
313
|
| `tabindex="-1"` | `.pf-v5-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
|
|
245
314
|
| `id="[id]"` | `.pf-v5-c-page__main` | Provides a hook for sending focus to new content. **Required** |
|
|
246
|
-
| `aria-expanded="true/false"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
|
|
247
|
-
| `aria-controls="[id of nav]"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Identifies the element controlled by the toggle. **Required**
|
|
248
315
|
| `tabindex="0"` | `.pf-v5-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
|
|
249
316
|
|
|
250
317
|
### Usage
|
|
@@ -252,15 +319,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
252
319
|
| Class | Applied to | Outcome |
|
|
253
320
|
| -- | -- | -- |
|
|
254
321
|
| `.pf-v5-c-page` | `<div>` | Declares the page component. |
|
|
255
|
-
| `.pf-v5-c-page__header` | `<header>` | Declares the page header. |
|
|
256
|
-
| `.pf-v5-c-page__header-brand` | `<div>` | Creates a header container to nest the brand component. |
|
|
257
|
-
| `.pf-v5-c-page__header-brand-toggle` | `<div>` | Creates a container to nest the sidebar toggle. |
|
|
258
|
-
| `.pf-v5-c-page__header-brand-link` | `<a>`, `<span>` | Creates a link for the brand logo. Use a `<span>` if there is no link. |
|
|
259
|
-
| `.pf-v5-c-page__header-selector` | `<div>` | Creates a header container to nest the context selector component. |
|
|
260
|
-
| `.pf-v5-c-page__header-nav` | `<div>` | Creates a container to nest the navigation component in the header. |
|
|
261
|
-
| `.pf-v5-c-page__header-tools` | `<div>` | Creates a container to nest the icons and menus in header. |
|
|
262
|
-
| `.pf-v5-c-page__header-tools-group` | `<div>` | Creates a container for grouping sets of icons and menus in header. |
|
|
263
|
-
| `.pf-v5-c-page__header-tools-item` | `<div>` | Creates a container for an item in a header tools group. |
|
|
264
322
|
| `.pf-v5-c-page__sidebar` | `<aside>` | Declares the page sidebar. |
|
|
265
323
|
| `.pf-v5-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v5-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
|
|
266
324
|
| `.pf-v5-c-page__main` | `<main>` | Declares the main page area. |
|
|
@@ -272,7 +330,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
272
330
|
| `.pf-v5-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v5-c-page__main-section`** |
|
|
273
331
|
| `.pf-v5-c-page__main-group` | `<div>` | Creates the group of `.pf-v5-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
|
|
274
332
|
| `.pf-v5-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
|
|
275
|
-
| `.pf-m-selected` | `.pf-v5-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
|
|
276
333
|
| `.pf-m-expanded` | `.pf-v5-c-page__sidebar` | Modifies the sidebar for the expanded state. |
|
|
277
334
|
| `.pf-m-collapsed` | `.pf-v5-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
|
|
278
335
|
| `.pf-m-page-insets` | `.pf-v5-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
|
|
@@ -286,8 +343,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
286
343
|
| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v5-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
287
344
|
| `.pf-m-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
|
|
288
345
|
| `.pf-m-no-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
|
|
289
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
|
|
290
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
291
346
|
| `.pf-m-limit-width` | `.pf-v5-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
|
|
292
347
|
| `.pf-m-align-center` | `.pf-v5-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
|
|
293
348
|
| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v5-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
|
|
@@ -786,9 +786,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
786
786
|
|
|
787
787
|
```
|
|
788
788
|
|
|
789
|
-
### Vertical expandable example (
|
|
789
|
+
### Vertical expandable example (deprecated)
|
|
790
790
|
|
|
791
|
-
```html
|
|
791
|
+
```html isDeprecated
|
|
792
792
|
<div
|
|
793
793
|
class="pf-v5-c-tabs pf-m-expandable pf-m-vertical"
|
|
794
794
|
id="vertical-expandable-legacy"
|
|
@@ -875,9 +875,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
875
875
|
|
|
876
876
|
```
|
|
877
877
|
|
|
878
|
-
### Vertical expanded example (
|
|
878
|
+
### Vertical expanded example (deprecated)
|
|
879
879
|
|
|
880
|
-
```html
|
|
880
|
+
```html isDeprecated
|
|
881
881
|
<div
|
|
882
882
|
class="pf-v5-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
|
|
883
883
|
id="vertical-expanded-legacy"
|
|
@@ -964,9 +964,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
964
964
|
|
|
965
965
|
```
|
|
966
966
|
|
|
967
|
-
### Vertical expandable responsive example (
|
|
967
|
+
### Vertical expandable responsive example (deprecated)
|
|
968
968
|
|
|
969
|
-
```html
|
|
969
|
+
```html isDeprecated
|
|
970
970
|
<div
|
|
971
971
|
class="pf-v5-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
|
|
972
972
|
id="vertical-expandable-responsive-legacy"
|
|
@@ -6088,9 +6088,9 @@ section: components
|
|
|
6088
6088
|
|
|
6089
6089
|
```
|
|
6090
6090
|
|
|
6091
|
-
###
|
|
6091
|
+
### Tertiary nav
|
|
6092
6092
|
|
|
6093
|
-
```html isFullscreen
|
|
6093
|
+
```html isFullscreen isDeprecated
|
|
6094
6094
|
<div class="pf-v5-c-page" id="nav-legacy-teriary-example">
|
|
6095
6095
|
<div class="pf-v5-c-skip-to-content">
|
|
6096
6096
|
<a
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "5.0.0-alpha.
|
|
4
|
+
"version": "5.0.0-alpha.77",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"@commitlint/config-conventional": "^17.4.2",
|
|
43
43
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
44
44
|
"@octokit/rest": "^19.0.7",
|
|
45
|
-
"@patternfly/documentation-framework": "2.0.0-alpha.
|
|
45
|
+
"@patternfly/documentation-framework": "2.0.0-alpha.50",
|
|
46
46
|
"@patternfly/patternfly-a11y": "4.3.1",
|
|
47
|
-
"@patternfly/react-code-editor": "5.0.0-alpha.
|
|
48
|
-
"@patternfly/react-core": "5.0.0-alpha.
|
|
49
|
-
"@patternfly/react-table": "5.0.0-alpha.
|
|
47
|
+
"@patternfly/react-code-editor": "5.0.0-alpha.116",
|
|
48
|
+
"@patternfly/react-core": "5.0.0-alpha.115",
|
|
49
|
+
"@patternfly/react-table": "5.0.0-alpha.117",
|
|
50
50
|
"@starptech/prettyhtml": "^0.10.0",
|
|
51
51
|
"cheerio": "^1.0.0-rc.12",
|
|
52
52
|
"commander": "^10.0.0",
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
#ws-core-c-application-launcher-aligned-right,
|
|
2
|
-
#ws-core-c-application-launcher-aligned-top,
|
|
3
|
-
#ws-core-c-application-launcher-expanded {
|
|
4
|
-
min-height: 216px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
#ws-core-c-application-launcher-aligned-right {
|
|
8
|
-
display: flex;
|
|
9
|
-
justify-content: flex-end;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
#ws-core-c-application-launcher-aligned-top {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: flex-end;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
#ws-core-c-application-launcher-with-sections-and-dividers-between-sections,
|
|
18
|
-
#ws-core-c-application-launcher-with-sections-and-dividers-between-items,
|
|
19
|
-
#ws-core-c-application-launcher-with-sections-dividers-icons-and-external-links {
|
|
20
|
-
min-height: 424px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
#ws-core-c-application-launcher-favorites {
|
|
24
|
-
min-height: 540px;
|
|
25
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
#ws-core-c-options-menu-single-option,
|
|
2
|
-
#ws-core-c-options-menu-plain,
|
|
3
|
-
#ws-core-c-options-menu-align-right,
|
|
4
|
-
#ws-core-c-options-menu-align-top {
|
|
5
|
-
min-height: 215px;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
#ws-core-c-options-menu-multiple-options {
|
|
9
|
-
min-height: 350px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
#ws-core-c-options-menu-plain-with-text {
|
|
13
|
-
min-height: 280px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
#ws-core-c-options-menu-align-top {
|
|
17
|
-
display: flex;
|
|
18
|
-
align-items: flex-end;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#ws-core-c-options-menu-with-groups,
|
|
22
|
-
#ws-core-c-options-menu-with-groups-and-dividers-between-groups,
|
|
23
|
-
#ws-core-c-options-menu-with-groups-and-dividers-between-items {
|
|
24
|
-
min-height: 450px;
|
|
25
|
-
}
|