@patternfly/patternfly 6.0.0-alpha.127 → 6.0.0-alpha.129

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.
Files changed (37) hide show
  1. package/base/patternfly-variables.css +15 -3
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +16 -4
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Breadcrumb/breadcrumb.css +1 -1
  8. package/components/Breadcrumb/breadcrumb.scss +1 -1
  9. package/components/Hint/hint.css +1 -1
  10. package/components/Hint/hint.scss +1 -1
  11. package/components/Login/login.css +2 -9
  12. package/components/Login/login.scss +1 -9
  13. package/components/Page/page.css +0 -19
  14. package/components/Page/page.scss +0 -23
  15. package/components/Table/table-tree-view.css +25 -25
  16. package/components/Table/table-tree-view.scss +5 -5
  17. package/components/_index.css +5269 -7338
  18. package/components/_index.scss +1 -6
  19. package/package.json +1 -1
  20. package/patternfly-base-no-globals.css +15 -3
  21. package/patternfly-base.css +15 -3
  22. package/patternfly-no-globals.css +5283 -7340
  23. package/patternfly.css +5283 -7340
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
  26. package/sass-utilities/namespaces-components.scss +0 -15
  27. package/sass-utilities/scss-variables.scss +1 -0
  28. package/components/AppLauncher/app-launcher.css +0 -234
  29. package/components/AppLauncher/app-launcher.scss +0 -299
  30. package/components/ContextSelector/context-selector.css +0 -306
  31. package/components/ContextSelector/context-selector.scss +0 -375
  32. package/components/Dropdown/dropdown.css +0 -664
  33. package/components/Dropdown/dropdown.scss +0 -814
  34. package/components/OptionsMenu/options-menu.css +0 -264
  35. package/components/OptionsMenu/options-menu.scss +0 -325
  36. package/components/Select/select.css +0 -570
  37. package/components/Select/select.scss +0 -704
package/components/ContextSelector/context-selector.scss DELETED
@@ -1,375 +0,0 @@
1
- @use '../../sass-utilities' as *;
2
-
3
- .#{$context-selector} {
4
- // Context selector
5
- --#{$context-selector}--Width: #{pf-size-prem(250px)};
6
-
7
- // Toggle
8
- --#{$context-selector}__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
9
- --#{$context-selector}__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
10
- --#{$context-selector}__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
11
- --#{$context-selector}__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
12
- --#{$context-selector}__toggle--ColumnGap: var(--#{$pf-global}--spacer--sm);
13
- --#{$context-selector}__toggle--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
14
- --#{$context-selector}__toggle--BorderBlockStartColor: var(--#{$pf-global}--BorderColor--300);
15
- --#{$context-selector}__toggle--BorderInlineEndColor: var(--#{$pf-global}--BorderColor--300);
16
- --#{$context-selector}__toggle--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--200);
17
- --#{$context-selector}__toggle--BorderInlineStartColor: var(--#{$pf-global}--BorderColor--300);
18
- --#{$context-selector}__toggle--Color: var(--#{$pf-global}--Color--100);
19
- --#{$context-selector}__toggle--hover--BorderBlockEndWidth: var(--#{$context-selector}__toggle--BorderWidth);
20
- --#{$context-selector}__toggle--hover--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
21
- --#{$context-selector}__toggle--active--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
22
- --#{$context-selector}__toggle--active--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
23
- --#{$context-selector}__toggle--expanded--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
24
- --#{$context-selector}__toggle--expanded--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
25
- --#{$context-selector}__toggle--BackgroundColor: transparent;
26
- --#{$context-selector}__toggle--m-plain--Color: var(--#{$pf-global}--Color--200);
27
- --#{$context-selector}__toggle--m-plain--hover--Color: var(--#{$pf-global}--Color--100);
28
- --#{$context-selector}__toggle--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
29
- --#{$context-selector}__toggle--m-plain--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
30
- --#{$context-selector}__toggle--m-plain--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
31
- --#{$context-selector}__toggle--m-plain--m-text--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
32
- --#{$context-selector}__toggle--m-plain--m-text--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
33
-
34
- // Toggle text
35
- --#{$context-selector}__toggle-text--FontSize: var(--#{$pf-global}--FontSize--md);
36
- --#{$context-selector}__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
37
- --#{$context-selector}__toggle-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
38
-
39
- // Toggle icon arrow
40
- --#{$context-selector}__toggle-icon--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
41
- --#{$context-selector}__toggle-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
42
- --#{$context-selector}--m-plain__toggle-icon--Color: var(--#{$pf-global}--Color--200);
43
- --#{$context-selector}--m-plain--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
44
-
45
- // Menu
46
- --#{$context-selector}__menu--InsetBlockStart: calc(100% + var(--#{$pf-global}--spacer--xs));
47
- --#{$context-selector}__menu--ZIndex: var(--pf-t--global--z-index--sm);
48
- --#{$context-selector}__menu--PaddingBlockStart: var(--#{$pf-global}--spacer--sm); // remove at breaking change
49
- --#{$context-selector}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
50
- --#{$context-selector}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
51
-
52
- // Menu input
53
- --#{$context-selector}__menu-search--PaddingBlockStart: var(--#{$pf-global}--spacer--md);
54
- --#{$context-selector}__menu-search--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
55
- --#{$context-selector}__menu-search--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
56
- --#{$context-selector}__menu-search--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
57
- --#{$context-selector}__menu-search--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--100);
58
- --#{$context-selector}__menu-search--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--sm);
59
-
60
- // Menu footer
61
- --#{$context-selector}__menu-footer--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
62
- --#{$context-selector}__menu-footer--PaddingBlockStart: var(--#{$pf-global}--spacer--md);
63
- --#{$context-selector}__menu-footer--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
64
- --#{$context-selector}__menu-footer--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
65
- --#{$context-selector}__menu-footer--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
66
-
67
- // Menu list
68
- --#{$context-selector}__menu-list--MaxHeight: #{pf-size-prem(200px)};
69
- --#{$context-selector}__menu-list--PaddingBlockStart: var(--#{$context-selector}__menu--PaddingBlockStart); // reference spacer directly at breaking change
70
- --#{$context-selector}__menu-list--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
71
-
72
- // Menu item
73
- --#{$context-selector}__menu-list-item--Color: var(--#{$pf-global}--Color--dark-100);
74
- --#{$context-selector}__menu-list-item--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
75
- --#{$context-selector}__menu-list-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
76
- --#{$context-selector}__menu-list-item--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
77
- --#{$context-selector}__menu-list-item--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
78
- --#{$context-selector}__menu-list-item--BackgroundColor: transparent;
79
- --#{$context-selector}__menu-list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
80
- --#{$context-selector}__menu-list-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
81
-
82
- // Menu item icon
83
- --#{$context-selector}__menu-item-icon--Color: var(--#{$pf-global}--active-color--100);
84
- --#{$context-selector}__menu-item-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
85
- --#{$context-selector}__menu-item-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
86
-
87
- // Full height
88
- --#{$context-selector}--m-full-height__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
89
- --#{$context-selector}--m-full-height__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
90
- --#{$context-selector}--m-full-height__toggle--before--BorderBlockStartWidth: 0;
91
- --#{$context-selector}--m-full-height__toggle--hover--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
92
- --#{$context-selector}--m-full-height__toggle--active--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
93
- --#{$context-selector}--m-full-height__toggle--expanded--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
94
-
95
- // Large
96
- --#{$context-selector}--m-large__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--md);
97
- --#{$context-selector}--m-large__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
98
- --#{$context-selector}--m-large__toggle--hover--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
99
- --#{$context-selector}--m-large__toggle--active--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
100
- --#{$context-selector}--m-large__toggle--expanded--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--xl);
101
-
102
- // Page insets
103
- --#{$context-selector}--m-page-insets__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
104
- --#{$context-selector}--m-page-insets__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
105
- --#{$context-selector}--m-page-insets__toggle--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
106
- --#{$context-selector}--m-page-insets__toggle--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
107
- --#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
108
- --#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
109
- --#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
110
- --#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
111
- --#{$context-selector}--m-page-insets__menu-search--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
112
- --#{$context-selector}--m-page-insets__menu-search--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
113
- --#{$context-selector}--m-page-insets__menu-search--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
114
- --#{$context-selector}--m-page-insets__menu-search--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
115
- --#{$context-selector}--m-page-insets__menu-footer--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
116
- --#{$context-selector}--m-page-insets__menu-footer--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
117
- --#{$context-selector}--m-page-insets__menu-footer--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
118
- --#{$context-selector}--m-page-insets__menu-footer--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
119
- --#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
120
- --#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
121
- --#{$context-selector}--m-page-insets__toggle--m-plain--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
122
- --#{$context-selector}--m-page-insets__toggle--m-plain--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
123
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
124
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
125
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingInlineEnd: var(--#{$pf-global}--spacer--lg);
126
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
127
-
128
- @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
129
- --#{$context-selector}--m-page-insets__toggle--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingInlineEnd);
130
- --#{$context-selector}--m-page-insets__toggle--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingInlineStart);
131
- --#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingInlineEnd);
132
- --#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingInlineStart);
133
- --#{$context-selector}--m-page-insets__menu-search--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-search--xl--PaddingInlineEnd);
134
- --#{$context-selector}--m-page-insets__menu-search--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-search--xl--PaddingInlineStart);
135
- --#{$context-selector}--m-page-insets__menu-footer--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-footer--xl--PaddingInlineEnd);
136
- --#{$context-selector}--m-page-insets__menu-footer--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-footer--xl--PaddingInlineStart);
137
- --#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--m-plain--xl--PaddingInlineEnd);
138
- --#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--m-plain--xl--PaddingInlineStart);
139
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingInlineEnd);
140
- --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingInlineStart);
141
- }
142
-
143
- position: relative;
144
- display: inline-block;
145
- width: var(--#{$context-selector}--Width);
146
- max-width: 100%;
147
-
148
- &.pf-m-full-height {
149
- --#{$context-selector}__toggle--active--BorderBlockEndWidth: var(--#{$context-selector}--m-full-height__toggle--active--BorderBlockEndWidth);
150
- --#{$context-selector}__toggle--expanded--BorderBlockEndWidth: var(--#{$context-selector}--m-full-height__toggle--expanded--BorderBlockEndWidth);
151
- --#{$context-selector}__toggle--PaddingInlineEnd: var(--#{$context-selector}--m-full-height__toggle--PaddingInlineEnd);
152
- --#{$context-selector}__toggle--PaddingInlineStart: var(--#{$context-selector}--m-full-height__toggle--PaddingInlineStart);
153
-
154
- display: inline-flex;
155
- align-items: center;
156
- height: 100%;
157
-
158
- .#{$context-selector}__toggle {
159
- align-self: stretch;
160
-
161
- &::before {
162
- border-block-start-width: var(--#{$context-selector}--m-full-height__toggle--before--BorderBlockStartWidth);
163
- }
164
- }
165
-
166
- &:hover {
167
- .#{$context-selector}__toggle::before {
168
- border-block-end-width: var(--#{$context-selector}--m-full-height__toggle--hover--BorderBlockEndWidth);
169
- }
170
- }
171
- }
172
-
173
- &.pf-m-large {
174
- --#{$context-selector}__toggle--PaddingBlockStart: var(--#{$context-selector}--m-large__toggle--PaddingBlockStart);
175
- --#{$context-selector}__toggle--PaddingBlockEnd: var(--#{$context-selector}--m-large__toggle--PaddingBlockEnd);
176
- --#{$context-selector}__toggle--hover--BorderBlockEndWidth: var(--#{$context-selector}--m-large__toggle--hover--BorderBlockEndWidth);
177
- --#{$context-selector}__toggle--active--BorderBlockEndWidth: var(--#{$context-selector}--m-large__toggle--active--BorderBlockEndWidth);
178
- --#{$context-selector}__toggle--expanded--BorderBlockEndWidth: var(--#{$context-selector}--m-large__toggle--expanded--BorderBlockEndWidth);
179
- }
180
-
181
- &.pf-m-page-insets {
182
- --#{$context-selector}__toggle--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--PaddingInlineEnd);
183
- --#{$context-selector}__toggle--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--PaddingInlineStart);
184
- --#{$context-selector}__menu-list-item--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineEnd);
185
- --#{$context-selector}__menu-list-item--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-list-item--PaddingInlineStart);
186
- --#{$context-selector}__menu-search--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-search--PaddingInlineEnd);
187
- --#{$context-selector}__menu-search--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-search--PaddingInlineStart);
188
- --#{$context-selector}__menu-footer--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__menu-footer--PaddingInlineEnd);
189
- --#{$context-selector}__menu-footer--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__menu-footer--PaddingInlineStart);
190
- --#{$context-selector}__toggle--m-plain--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineEnd);
191
- --#{$context-selector}__toggle--m-plain--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--m-plain--PaddingInlineStart);
192
- --#{$context-selector}__toggle--m-plain--m-text--PaddingInlineEnd: var(--#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineEnd);
193
- --#{$context-selector}__toggle--m-plain--m-text--PaddingInlineStart: var(--#{$context-selector}--m-page-insets__toggle--m-plain--m-text--PaddingInlineStart);
194
- }
195
- }
196
-
197
- .#{$context-selector}__toggle {
198
- position: relative;
199
- display: flex;
200
- column-gap: var(--#{$context-selector}__toggle--ColumnGap);
201
- align-items: center;
202
- width: 100%;
203
- padding-block-start: var(--#{$context-selector}__toggle--PaddingBlockStart);
204
- padding-block-end: var(--#{$context-selector}__toggle--PaddingBlockEnd);
205
- padding-inline-start: var(--#{$context-selector}__toggle--PaddingInlineStart);
206
- padding-inline-end: var(--#{$context-selector}__toggle--PaddingInlineEnd);
207
- color: var(--#{$context-selector}__toggle--Color);
208
- white-space: nowrap;
209
- cursor: pointer;
210
- background-color: var(--#{$context-selector}__toggle--BackgroundColor);
211
- border: none;
212
-
213
- &::before {
214
- position: absolute;
215
- inset-block-start: 0;
216
- inset-block-end: 0;
217
- inset-inline-start: 0;
218
- inset-inline-end: 0;
219
- content: "";
220
- border: var(--#{$context-selector}__toggle--BorderWidth) solid;
221
- border-block-start-color: var(--#{$context-selector}__toggle--BorderBlockStartColor);
222
- border-block-end-color: var(--#{$context-selector}__toggle--BorderBlockEndColor);
223
- border-inline-start-color: var(--#{$context-selector}__toggle--BorderInlineStartColor);
224
- border-inline-end-color: var(--#{$context-selector}__toggle--BorderInlineEndColor);
225
- }
226
-
227
- &:hover {
228
- &::before {
229
- --#{$context-selector}__toggle--BorderBlockEndColor: var(--#{$context-selector}__toggle--hover--BorderBlockEndColor);
230
-
231
- border-block-end-width: var(--#{$context-selector}__toggle--hover--BorderBlockEndWidth);
232
- }
233
- }
234
-
235
- &:active,
236
- &.pf-m-active,
237
- &:focus-within {
238
- &::before {
239
- --#{$context-selector}__toggle--BorderBlockEndColor: var(--#{$context-selector}__toggle--active--BorderBlockEndColor);
240
-
241
- border-block-end-width: var(--#{$context-selector}__toggle--active--BorderBlockEndWidth);
242
- }
243
- }
244
-
245
- .pf-m-expanded > & {
246
- &::before {
247
- --#{$context-selector}__toggle--BorderBlockEndColor: var(--#{$context-selector}__toggle--expanded--BorderBlockEndColor);
248
-
249
- border-block-end-width: var(--#{$context-selector}__toggle--expanded--BorderBlockEndWidth);
250
- }
251
- }
252
-
253
- &.pf-m-plain {
254
- --#{$context-selector}__toggle--PaddingInlineEnd: var(--#{$context-selector}__toggle--m-plain--PaddingInlineEnd);
255
- --#{$context-selector}__toggle--PaddingInlineStart: var(--#{$context-selector}__toggle--m-plain--PaddingInlineStart);
256
- --#{$context-selector}__toggle-icon--Color: var(--#{$context-selector}--m-plain__toggle-icon--Color);
257
-
258
- &.pf-m-text {
259
- --#{$context-selector}__toggle--PaddingInlineEnd: var(--#{$context-selector}__toggle--m-plain--m-text--PaddingInlineEnd);
260
- --#{$context-selector}__toggle--PaddingInlineStart: var(--#{$context-selector}__toggle--m-plain--m-text--PaddingInlineStart);
261
- }
262
-
263
- &:not(.pf-m-text) {
264
- display: inline-block;
265
- width: auto;
266
- color: var(--#{$context-selector}__toggle--m-plain--Color);
267
- }
268
-
269
- &.pf-m-disabled,
270
- &:disabled {
271
- --#{$context-selector}__toggle--m-plain--Color: var(--#{$context-selector}__toggle--m-plain--disabled--Color);
272
- }
273
-
274
- &:hover,
275
- &:active,
276
- &.pf-m-active,
277
- &:focus,
278
- .#{$context-selector}.pf-m-expanded > & {
279
- --#{$context-selector}__toggle--m-plain--Color: var(--#{$context-selector}__toggle--m-plain--hover--Color);
280
- --#{$context-selector}--m-plain__toggle-icon--Color: var(--#{$context-selector}--m-plain--hover__toggle-icon--Color);
281
- }
282
-
283
- &::before {
284
- border: 0;
285
- }
286
- }
287
-
288
- .#{$context-selector}__toggle-text {
289
- @include pf-v6-text-overflow;
290
-
291
- flex: 1 1 auto;
292
- font-size: var(--#{$context-selector}__toggle-text--FontSize);
293
- font-weight: var(--#{$context-selector}__toggle-text--FontWeight);
294
- line-height: var(--#{$context-selector}__toggle-text--LineHeight);
295
- text-align: start;
296
- }
297
- }
298
-
299
- .#{$context-selector}__toggle-icon {
300
- padding-inline-start: var(--#{$context-selector}__toggle-icon--PaddingInlineStart);
301
- padding-inline-end: var(--#{$context-selector}__toggle-icon--PaddingInlineEnd);
302
- color: var(--#{$context-selector}__toggle-icon--Color, inherit);
303
- }
304
-
305
- .#{$context-selector}__menu {
306
- position: absolute;
307
- inset-block-start: var(--#{$context-selector}__menu--InsetBlockStart);
308
- z-index: var(--#{$context-selector}__menu--ZIndex);
309
- min-width: 100%;
310
- background-color: var(--#{$context-selector}__menu--BackgroundColor);
311
- background-clip: padding-box;
312
- box-shadow: var(--#{$context-selector}__menu--BoxShadow);
313
-
314
- &.pf-m-static {
315
- position: static;
316
- inset-block-start: auto;
317
- inset-block-end: auto;
318
- inset-inline-start: auto;
319
- inset-inline-end: auto;
320
- z-index: auto;
321
- min-width: min-content;
322
- }
323
- }
324
-
325
- .#{$context-selector}__menu-search {
326
- position: relative;
327
- padding-block-start: var(--#{$context-selector}__menu-search--PaddingBlockStart);
328
- padding-block-end: var(--#{$context-selector}__menu-search--PaddingBlockEnd);
329
- padding-inline-start: var(--#{$context-selector}__menu-search--PaddingInlineStart);
330
- padding-inline-end: var(--#{$context-selector}__menu-search--PaddingInlineEnd);
331
- border-block-end: var(--#{$context-selector}__menu-search--BorderBlockEndWidth) solid var(--#{$context-selector}__menu-search--BorderBlockEndColor);
332
- }
333
-
334
- .#{$context-selector}__menu-footer {
335
- padding-block-start: var(--#{$context-selector}__menu-footer--PaddingBlockStart);
336
- padding-block-end: var(--#{$context-selector}__menu-footer--PaddingBlockEnd);
337
- padding-inline-start: var(--#{$context-selector}__menu-footer--PaddingInlineStart);
338
- padding-inline-end: var(--#{$context-selector}__menu-footer--PaddingInlineEnd);
339
- box-shadow: var(--#{$context-selector}__menu-footer--BoxShadow);
340
- }
341
-
342
- .#{$context-selector}__menu-list {
343
- max-height: var(--#{$context-selector}__menu-list--MaxHeight);
344
- padding-block-start: var(--#{$context-selector}__menu-list--PaddingBlockStart);
345
- padding-block-end: var(--#{$context-selector}__menu-list--PaddingBlockEnd);
346
- overflow-y: auto;
347
- }
348
-
349
- .#{$context-selector}__menu-list-item {
350
- display: flex;
351
- align-items: center;
352
- width: 100%;
353
- padding-block-start: var(--#{$context-selector}__menu-list-item--PaddingBlockStart);
354
- padding-block-end: var(--#{$context-selector}__menu-list-item--PaddingBlockEnd);
355
- padding-inline-start: var(--#{$context-selector}__menu-list-item--PaddingInlineStart);
356
- padding-inline-end: var(--#{$context-selector}__menu-list-item--PaddingInlineEnd);
357
- color: var(--#{$context-selector}__menu-list-item--Color);
358
- white-space: nowrap;
359
- background-color: var(--#{$context-selector}__menu-list-item--BackgroundColor);
360
- border: none;
361
-
362
- &:hover,
363
- &:focus {
364
- --#{$context-selector}__menu-list-item--BackgroundColor: var(--#{$context-selector}__menu-list-item--hover--BackgroundColor);
365
-
366
- text-decoration: none;
367
- }
368
-
369
- &.pf-m-disabled,
370
- &:disabled {
371
- --#{$context-selector}__menu-list-item--Color: var(--#{$context-selector}__menu-list-item--disabled--Color);
372
-
373
- pointer-events: none;
374
- }
375
- }