UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

336 lines (327 loc) • 24.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
.pf-v5-c-context-selector__menu { --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100); --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200); --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100); --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100); --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark); --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover); --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100); --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark); --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark); } .pf-v5-c-context-selector { --pf-v5-c-context-selector--Width: 15.625rem; --pf-v5-c-context-selector__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element); --pf-v5-c-context-selector__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle--ColumnGap: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-context-selector__toggle--Color: var(--pf-v5-global--Color--100); --pf-v5-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-v5-c-context-selector__toggle--BorderWidth); --pf-v5-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-context-selector__toggle--active--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-context-selector__toggle--BackgroundColor: transparent; --pf-v5-c-context-selector__toggle--m-plain--Color: var(--pf-v5-global--Color--200); --pf-v5-c-context-selector__toggle--m-plain--hover--Color: var(--pf-v5-global--Color--100); --pf-v5-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200); --pf-v5-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle-text--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-context-selector__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-context-selector__toggle-text--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-context-selector__toggle-icon--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__toggle-icon--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200); --pf-v5-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100); --pf-v5-c-context-selector__menu--Top: calc(100% + var(--pf-v5-global--spacer--xs)); --pf-v5-c-context-selector__menu--ZIndex: var(--pf-v5-global--ZIndex--sm); --pf-v5-c-context-selector__menu--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100); --pf-v5-c-context-selector__menu--BoxShadow: var(--pf-v5-global--BoxShadow--md); --pf-v5-c-context-selector__menu-search--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-search--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-search--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-search--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-search--BorderBottomColor: var(--pf-v5-global--BorderColor--100); --pf-v5-c-context-selector__menu-search--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-context-selector__menu-footer--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top); --pf-v5-c-context-selector__menu-footer--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-footer--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-footer--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-footer--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector__menu-list--MaxHeight: 12.5rem; --pf-v5-c-context-selector__menu-list--PaddingTop: var(--pf-v5-c-context-selector__menu--PaddingTop); --pf-v5-c-context-selector__menu-list--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__menu-list-item--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-context-selector__menu-list-item--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__menu-list-item--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector__menu-list-item--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-context-selector__menu-list-item--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector__menu-list-item--BackgroundColor: transparent; --pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-context-selector__menu-list-item--disabled--Color: var(--pf-v5-global--Color--dark-200); --pf-v5-c-context-selector__menu-item-icon--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-context-selector__menu-item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm); --pf-v5-c-context-selector__menu-item-icon--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth: 0; --pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-large__toggle--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); position: relative; display: inline-block; width: var(--pf-v5-c-context-selector--Width); max-width: 100%; } @media screen and (min-width: 1200px) { .pf-v5-c-context-selector { --pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingLeft); --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft); --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft); --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight); --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft); } } .pf-v5-c-context-selector.pf-m-full-height { --pf-v5-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-v5-c-context-selector--m-full-height__toggle--active--BorderBottomWidth); --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-v5-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth); --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector--m-full-height__toggle--PaddingRight); --pf-v5-c-context-selector__toggle--PaddingLeft: var(--pf-v5-c-context-selector--m-full-height__toggle--PaddingLeft); display: inline-flex; align-items: center; height: 100%; } .pf-v5-c-context-selector.pf-m-full-height .pf-v5-c-context-selector__toggle { align-self: stretch; } .pf-v5-c-context-selector.pf-m-full-height .pf-v5-c-context-selector__toggle::before { border-block-start-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth); } .pf-v5-c-context-selector.pf-m-full-height:hover .pf-v5-c-context-selector__toggle::before { border-block-end-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth); } .pf-v5-c-context-selector.pf-m-large { --pf-v5-c-context-selector__toggle--PaddingTop: var(--pf-v5-c-context-selector--m-large__toggle--PaddingTop); --pf-v5-c-context-selector__toggle--PaddingBottom: var(--pf-v5-c-context-selector--m-large__toggle--PaddingBottom); --pf-v5-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-v5-c-context-selector--m-large__toggle--hover--BorderBottomWidth); --pf-v5-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-v5-c-context-selector--m-large__toggle--active--BorderBottomWidth); --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-v5-c-context-selector--m-large__toggle--expanded--BorderBottomWidth); } .pf-v5-c-context-selector.pf-m-page-insets { --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight); --pf-v5-c-context-selector__toggle--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft); --pf-v5-c-context-selector__menu-list-item--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight); --pf-v5-c-context-selector__menu-list-item--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft); --pf-v5-c-context-selector__menu-search--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight); --pf-v5-c-context-selector__menu-search--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft); --pf-v5-c-context-selector__menu-footer--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight); --pf-v5-c-context-selector__menu-footer--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft); --pf-v5-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight); --pf-v5-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft); --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight); --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft); } .pf-v5-c-context-selector__toggle { position: relative; display: flex; column-gap: var(--pf-v5-c-context-selector__toggle--ColumnGap); align-items: center; width: 100%; padding-block-start: var(--pf-v5-c-context-selector__toggle--PaddingTop); padding-block-end: var(--pf-v5-c-context-selector__toggle--PaddingBottom); padding-inline-start: var(--pf-v5-c-context-selector__toggle--PaddingLeft); padding-inline-end: var(--pf-v5-c-context-selector__toggle--PaddingRight); color: var(--pf-v5-c-context-selector__toggle--Color); white-space: nowrap; cursor: pointer; background-color: var(--pf-v5-c-context-selector__toggle--BackgroundColor); border: none; } .pf-v5-c-context-selector__toggle::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; content: ""; border: var(--pf-v5-c-context-selector__toggle--BorderWidth) solid; border-block-start-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor); border-block-end-color: var(--pf-v5-c-context-selector__toggle--BorderBottomColor); border-inline-start-color: var(--pf-v5-c-context-selector__toggle--BorderLeftColor); border-inline-end-color: var(--pf-v5-c-context-selector__toggle--BorderRightColor); } .pf-v5-c-context-selector__toggle:hover::before { --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomColor); border-block-end-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth); } .pf-v5-c-context-selector__toggle:active::before, .pf-v5-c-context-selector__toggle.pf-m-active::before, .pf-v5-c-context-selector__toggle:focus-within::before { --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--active--BorderBottomColor); border-block-end-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth); } .pf-m-expanded > .pf-v5-c-context-selector__toggle::before { --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomColor); border-block-end-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth); } .pf-v5-c-context-selector__toggle.pf-m-plain { --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector__toggle--m-plain--PaddingRight); --pf-v5-c-context-selector__toggle--PaddingLeft: var(--pf-v5-c-context-selector__toggle--m-plain--PaddingLeft); --pf-v5-c-context-selector__toggle-icon--Color: var(--pf-v5-c-context-selector--m-plain__toggle-icon--Color); } .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-text { --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight); --pf-v5-c-context-selector__toggle--PaddingLeft: var(--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft); } .pf-v5-c-context-selector__toggle.pf-m-plain:not(.pf-m-text) { display: inline-block; width: auto; color: var(--pf-v5-c-context-selector__toggle--m-plain--Color); } .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-disabled, .pf-v5-c-context-selector__toggle.pf-m-plain:disabled { --pf-v5-c-context-selector__toggle--m-plain--Color: var(--pf-v5-c-context-selector__toggle--m-plain--disabled--Color); } .pf-v5-c-context-selector__toggle.pf-m-plain:hover, .pf-v5-c-context-selector__toggle.pf-m-plain:active, .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-active, .pf-v5-c-context-selector__toggle.pf-m-plain:focus, .pf-v5-c-context-selector.pf-m-expanded > .pf-v5-c-context-selector__toggle.pf-m-plain { --pf-v5-c-context-selector__toggle--m-plain--Color: var(--pf-v5-c-context-selector__toggle--m-plain--hover--Color); --pf-v5-c-context-selector--m-plain__toggle-icon--Color: var(--pf-v5-c-context-selector--m-plain--hover__toggle-icon--Color); } .pf-v5-c-context-selector__toggle.pf-m-plain::before { border: 0; } .pf-v5-c-context-selector__toggle .pf-v5-c-context-selector__toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; font-size: var(--pf-v5-c-context-selector__toggle-text--FontSize); font-weight: var(--pf-v5-c-context-selector__toggle-text--FontWeight); line-height: var(--pf-v5-c-context-selector__toggle-text--LineHeight); text-align: start; } .pf-v5-c-context-selector__toggle-icon { padding-inline-start: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft); padding-inline-end: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight); color: var(--pf-v5-c-context-selector__toggle-icon--Color, inherit); } .pf-v5-c-context-selector__menu { color: var(--pf-v5-global--Color--100); position: absolute; inset-block-start: var(--pf-v5-c-context-selector__menu--Top); z-index: var(--pf-v5-c-context-selector__menu--ZIndex); min-width: 100%; background-color: var(--pf-v5-c-context-selector__menu--BackgroundColor); background-clip: padding-box; box-shadow: var(--pf-v5-c-context-selector__menu--BoxShadow); } .pf-v5-c-context-selector__menu.pf-m-static { position: static; inset-block-start: auto; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: auto; z-index: auto; min-width: min-content; } .pf-v5-c-context-selector__menu-search { position: relative; padding-block-start: var(--pf-v5-c-context-selector__menu-search--PaddingTop); padding-block-end: var(--pf-v5-c-context-selector__menu-search--PaddingBottom); padding-inline-start: var(--pf-v5-c-context-selector__menu-search--PaddingLeft); padding-inline-end: var(--pf-v5-c-context-selector__menu-search--PaddingRight); border-block-end: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor); } .pf-v5-c-context-selector__menu-footer { padding-block-start: var(--pf-v5-c-context-selector__menu-footer--PaddingTop); padding-block-end: var(--pf-v5-c-context-selector__menu-footer--PaddingBottom); padding-inline-start: var(--pf-v5-c-context-selector__menu-footer--PaddingLeft); padding-inline-end: var(--pf-v5-c-context-selector__menu-footer--PaddingRight); box-shadow: var(--pf-v5-c-context-selector__menu-footer--BoxShadow); } .pf-v5-c-context-selector__menu-list { max-height: var(--pf-v5-c-context-selector__menu-list--MaxHeight); padding-block-start: var(--pf-v5-c-context-selector__menu-list--PaddingTop); padding-block-end: var(--pf-v5-c-context-selector__menu-list--PaddingBottom); overflow-y: auto; } .pf-v5-c-context-selector__menu-list-item { display: flex; align-items: center; width: 100%; padding-block-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop); padding-block-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom); padding-inline-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft); padding-inline-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingRight); color: var(--pf-v5-c-context-selector__menu-list-item--Color); white-space: nowrap; background-color: var(--pf-v5-c-context-selector__menu-list-item--BackgroundColor); border: none; } .pf-v5-c-context-selector__menu-list-item:hover, .pf-v5-c-context-selector__menu-list-item:focus { --pf-v5-c-context-selector__menu-list-item--BackgroundColor: var(--pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor); text-decoration: none; } .pf-v5-c-context-selector__menu-list-item.pf-m-disabled, .pf-v5-c-context-selector__menu-list-item:disabled { --pf-v5-c-context-selector__menu-list-item--Color: var(--pf-v5-c-context-selector__menu-list-item--disabled--Color); pointer-events: none; } :where(.pf-v5-theme-dark) .pf-v5-c-context-selector { --pf-v5-c-context-selector__menu--Top: 100%; --pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400); } :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle { background: var(--pf-v5-global--BackgroundColor--400); } :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle.pf-m-plain { background: transparent; } :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu { background: var(--pf-v5-global--BackgroundColor--300); } :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer { border-block-start: 1px solid var(--pf-v5-global--BorderColor--300); }