@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.12
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/css/components/Alert/alert.css +2 -0
- package/css/components/Breadcrumb/breadcrumb.css +9 -1
- package/css/components/Button/button.css +44 -24
- package/css/components/CalendarMonth/calendar-month.css +61 -92
- package/css/components/CalendarMonth/calendar-month.d.ts +2 -4
- package/css/components/CalendarMonth/calendar-month.js +2 -4
- package/css/components/CalendarMonth/calendar-month.mjs +2 -4
- package/css/components/CodeBlock/code-block.css +4 -0
- package/css/components/CodeEditor/code-editor.css +94 -72
- package/css/components/CodeEditor/code-editor.d.ts +4 -4
- package/css/components/CodeEditor/code-editor.js +4 -4
- package/css/components/CodeEditor/code-editor.mjs +4 -4
- package/css/components/DatePicker/date-picker.css +13 -14
- package/css/components/DatePicker/date-picker.d.ts +1 -2
- package/css/components/DatePicker/date-picker.js +1 -2
- package/css/components/DatePicker/date-picker.mjs +1 -2
- package/css/components/Divider/divider.css +8 -6
- package/css/components/DualListSelector/dual-list-selector.css +56 -48
- package/css/components/DualListSelector/dual-list-selector.d.ts +1 -2
- package/css/components/DualListSelector/dual-list-selector.js +1 -2
- package/css/components/DualListSelector/dual-list-selector.mjs +1 -2
- package/css/components/FormControl/form-control.css +3 -3
- package/css/components/Icon/icon.css +27 -27
- package/css/components/Label/label-group.css +1 -1
- package/css/components/Label/label.css +13 -7
- package/css/components/Menu/menu.css +388 -419
- package/css/components/Menu/menu.d.ts +5 -8
- package/css/components/Menu/menu.js +5 -8
- package/css/components/Menu/menu.mjs +5 -8
- package/css/components/MenuToggle/menu-toggle.css +229 -265
- package/css/components/MenuToggle/menu-toggle.d.ts +7 -8
- package/css/components/MenuToggle/menu-toggle.js +7 -8
- package/css/components/MenuToggle/menu-toggle.mjs +7 -8
- package/css/components/Pagination/pagination.css +2 -12
- package/css/components/ProgressStepper/progress-stepper.css +72 -69
- package/css/components/ProgressStepper/progress-stepper.d.ts +1 -0
- package/css/components/ProgressStepper/progress-stepper.js +1 -0
- package/css/components/ProgressStepper/progress-stepper.mjs +1 -0
- package/css/components/Table/table-grid.css +29 -45
- package/css/components/Table/table-scrollable.css +6 -6
- package/css/components/Table/table-tree-view.css +76 -74
- package/css/components/Table/table.css +54 -74
- package/css/components/TextInputGroup/text-input-group.css +0 -14
- package/css/components/TextInputGroup/text-input-group.d.ts +1 -3
- package/css/components/TextInputGroup/text-input-group.js +1 -3
- package/css/components/TextInputGroup/text-input-group.mjs +1 -3
- package/css/components/Tile/tile.css +1 -1
- package/css/components/TreeView/tree-view.css +76 -97
- package/css/components/TreeView/tree-view.d.ts +0 -4
- package/css/components/TreeView/tree-view.js +0 -4
- package/css/components/TreeView/tree-view.mjs +0 -4
- package/css/components/Wizard/wizard.css +128 -205
- package/css/components/Wizard/wizard.d.ts +0 -3
- package/css/components/Wizard/wizard.js +0 -3
- package/css/components/Wizard/wizard.mjs +0 -3
- package/css/docs/components/Menu/examples/Menu.css +7 -11
- package/css/docs/components/Menu/examples/Menu.d.ts +2 -1
- package/css/docs/components/Menu/examples/Menu.js +2 -1
- package/css/docs/components/Menu/examples/Menu.mjs +2 -1
- package/package.json +3 -3
@@ -1,229 +1,311 @@
|
|
1
|
-
.pf-v5-c-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
}
|
12
|
-
|
13
|
-
.pf-v5-c-menu__group, .pf-v5-c-menu__list-item, .pf-v5-c-menu__list {
|
1
|
+
.pf-v5-c-menu__content,
|
2
|
+
.pf-v5-c-menu__list-item,
|
3
|
+
.pf-v5-c-menu__item,
|
4
|
+
.pf-v5-c-menu__item-main,
|
5
|
+
.pf-v5-c-menu__breadcrumb,
|
6
|
+
.pf-v5-c-menu__item-check,
|
7
|
+
.pf-v5-c-menu__item-action,
|
8
|
+
.pf-v5-c-menu__item-action-icon, .pf-v5-c-menu,
|
9
|
+
.pf-v5-c-menu__list,
|
10
|
+
.pf-v5-c-menu__group {
|
14
11
|
--pf-v5-hidden-visible--hidden--Display: none;
|
15
12
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
16
13
|
display: var(--pf-v5-hidden-visible--Display);
|
17
14
|
}
|
18
|
-
.pf-m-hidden.pf-v5-c-
|
15
|
+
.pf-m-hidden.pf-v5-c-menu__content,
|
16
|
+
.pf-m-hidden.pf-v5-c-menu__list-item,
|
17
|
+
.pf-m-hidden.pf-v5-c-menu__item,
|
18
|
+
.pf-m-hidden.pf-v5-c-menu__item-main,
|
19
|
+
.pf-m-hidden.pf-v5-c-menu__breadcrumb,
|
20
|
+
.pf-m-hidden.pf-v5-c-menu__item-check,
|
21
|
+
.pf-m-hidden.pf-v5-c-menu__item-action,
|
22
|
+
.pf-m-hidden.pf-v5-c-menu__item-action-icon, .pf-m-hidden.pf-v5-c-menu,
|
23
|
+
.pf-m-hidden.pf-v5-c-menu__list,
|
24
|
+
.pf-m-hidden.pf-v5-c-menu__group {
|
19
25
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
20
26
|
}
|
21
27
|
@media screen and (min-width: 576px) {
|
22
|
-
.pf-m-hidden-on-sm.pf-v5-c-
|
28
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__content,
|
29
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__list-item,
|
30
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__item,
|
31
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__item-main,
|
32
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__breadcrumb,
|
33
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__item-check,
|
34
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__item-action,
|
35
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__item-action-icon, .pf-m-hidden-on-sm.pf-v5-c-menu,
|
36
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__list,
|
37
|
+
.pf-m-hidden-on-sm.pf-v5-c-menu__group {
|
23
38
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
24
39
|
}
|
25
|
-
.pf-m-visible-on-sm.pf-v5-c-
|
40
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__content,
|
41
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__list-item,
|
42
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__item,
|
43
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__item-main,
|
44
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__breadcrumb,
|
45
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__item-check,
|
46
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__item-action,
|
47
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__item-action-icon, .pf-m-visible-on-sm.pf-v5-c-menu,
|
48
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__list,
|
49
|
+
.pf-m-visible-on-sm.pf-v5-c-menu__group {
|
26
50
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
27
51
|
}
|
28
52
|
}
|
29
53
|
@media screen and (min-width: 768px) {
|
30
|
-
.pf-m-hidden-on-md.pf-v5-c-
|
54
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__content,
|
55
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__list-item,
|
56
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__item,
|
57
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__item-main,
|
58
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__breadcrumb,
|
59
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__item-check,
|
60
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__item-action,
|
61
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__item-action-icon, .pf-m-hidden-on-md.pf-v5-c-menu,
|
62
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__list,
|
63
|
+
.pf-m-hidden-on-md.pf-v5-c-menu__group {
|
31
64
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
32
65
|
}
|
33
|
-
.pf-m-visible-on-md.pf-v5-c-
|
66
|
+
.pf-m-visible-on-md.pf-v5-c-menu__content,
|
67
|
+
.pf-m-visible-on-md.pf-v5-c-menu__list-item,
|
68
|
+
.pf-m-visible-on-md.pf-v5-c-menu__item,
|
69
|
+
.pf-m-visible-on-md.pf-v5-c-menu__item-main,
|
70
|
+
.pf-m-visible-on-md.pf-v5-c-menu__breadcrumb,
|
71
|
+
.pf-m-visible-on-md.pf-v5-c-menu__item-check,
|
72
|
+
.pf-m-visible-on-md.pf-v5-c-menu__item-action,
|
73
|
+
.pf-m-visible-on-md.pf-v5-c-menu__item-action-icon, .pf-m-visible-on-md.pf-v5-c-menu,
|
74
|
+
.pf-m-visible-on-md.pf-v5-c-menu__list,
|
75
|
+
.pf-m-visible-on-md.pf-v5-c-menu__group {
|
34
76
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
35
77
|
}
|
36
78
|
}
|
37
79
|
@media screen and (min-width: 992px) {
|
38
|
-
.pf-m-hidden-on-lg.pf-v5-c-
|
80
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__content,
|
81
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__list-item,
|
82
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__item,
|
83
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__item-main,
|
84
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__breadcrumb,
|
85
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__item-check,
|
86
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__item-action,
|
87
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__item-action-icon, .pf-m-hidden-on-lg.pf-v5-c-menu,
|
88
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__list,
|
89
|
+
.pf-m-hidden-on-lg.pf-v5-c-menu__group {
|
39
90
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
40
91
|
}
|
41
|
-
.pf-m-visible-on-lg.pf-v5-c-
|
92
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__content,
|
93
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__list-item,
|
94
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__item,
|
95
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__item-main,
|
96
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__breadcrumb,
|
97
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__item-check,
|
98
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__item-action,
|
99
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__item-action-icon, .pf-m-visible-on-lg.pf-v5-c-menu,
|
100
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__list,
|
101
|
+
.pf-m-visible-on-lg.pf-v5-c-menu__group {
|
42
102
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
43
103
|
}
|
44
104
|
}
|
45
105
|
@media screen and (min-width: 1200px) {
|
46
|
-
.pf-m-hidden-on-xl.pf-v5-c-
|
106
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__content,
|
107
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__list-item,
|
108
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__item,
|
109
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__item-main,
|
110
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__breadcrumb,
|
111
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__item-check,
|
112
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__item-action,
|
113
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__item-action-icon, .pf-m-hidden-on-xl.pf-v5-c-menu,
|
114
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__list,
|
115
|
+
.pf-m-hidden-on-xl.pf-v5-c-menu__group {
|
47
116
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
48
117
|
}
|
49
|
-
.pf-m-visible-on-xl.pf-v5-c-
|
118
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__content,
|
119
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__list-item,
|
120
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__item,
|
121
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__item-main,
|
122
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__breadcrumb,
|
123
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__item-check,
|
124
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__item-action,
|
125
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__item-action-icon, .pf-m-visible-on-xl.pf-v5-c-menu,
|
126
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__list,
|
127
|
+
.pf-m-visible-on-xl.pf-v5-c-menu__group {
|
50
128
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
51
129
|
}
|
52
130
|
}
|
53
131
|
@media screen and (min-width: 1450px) {
|
54
|
-
.pf-m-hidden-on-2xl.pf-v5-c-
|
132
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__content,
|
133
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__list-item,
|
134
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__item,
|
135
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__item-main,
|
136
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__breadcrumb,
|
137
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__item-check,
|
138
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__item-action,
|
139
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__item-action-icon, .pf-m-hidden-on-2xl.pf-v5-c-menu,
|
140
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__list,
|
141
|
+
.pf-m-hidden-on-2xl.pf-v5-c-menu__group {
|
55
142
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
56
143
|
}
|
57
|
-
.pf-m-visible-on-2xl.pf-v5-c-
|
144
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__content,
|
145
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__list-item,
|
146
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__item,
|
147
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__item-main,
|
148
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__breadcrumb,
|
149
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__item-check,
|
150
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__item-action,
|
151
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__item-action-icon, .pf-m-visible-on-2xl.pf-v5-c-menu,
|
152
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__list,
|
153
|
+
.pf-m-visible-on-2xl.pf-v5-c-menu__group {
|
58
154
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
59
155
|
}
|
60
156
|
}
|
61
157
|
|
62
|
-
|
63
|
-
|
64
|
-
--pf-v5-c-menu--
|
65
|
-
--pf-v5-c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
|
66
|
-
--pf-v5-c-menu--MinWidth: auto;
|
158
|
+
:where(:root),
|
159
|
+
:where(.pf-v5-c-menu) {
|
160
|
+
--pf-v5-c-menu--RowGap: var(--pf-t--global--spacer--sm);
|
67
161
|
--pf-v5-c-menu--Width: auto;
|
68
|
-
--pf-v5-c-menu--
|
69
|
-
--pf-v5-c-menu--
|
70
|
-
--pf-v5-c-menu--
|
71
|
-
--pf-v5-c-menu--
|
72
|
-
--pf-v5-c-menu--
|
73
|
-
--pf-v5-c-menu--
|
74
|
-
--pf-v5-c-menu--
|
75
|
-
--pf-v5-c-menu--
|
162
|
+
--pf-v5-c-menu--MinWidth: auto;
|
163
|
+
--pf-v5-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
164
|
+
--pf-v5-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
165
|
+
--pf-v5-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
166
|
+
--pf-v5-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
|
167
|
+
--pf-v5-c-menu--Color: var(--pf-t--global--text--color--regular);
|
168
|
+
--pf-v5-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
|
169
|
+
--pf-v5-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
|
170
|
+
--pf-v5-c-menu--ZIndex: var(--pf-t--global--Zindex--sm);
|
171
|
+
--pf-v5-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
|
172
|
+
--pf-v5-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
76
173
|
--pf-v5-c-menu--m-plain--BoxShadow: none;
|
77
|
-
--pf-v5-c-
|
78
|
-
--pf-v5-c-menu--m-flyout__menu--left-offset: 0px;
|
79
|
-
--pf-v5-c-menu--m-flyout__menu--m-left--right-offset: 0px;
|
174
|
+
--pf-v5-c-menu__content--RowGap: var(--pf-v5-c-menu--RowGap);
|
80
175
|
--pf-v5-c-menu__content--Height: auto;
|
81
176
|
--pf-v5-c-menu__content--MaxHeight: none;
|
82
177
|
--pf-v5-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
|
83
|
-
--pf-v5-c-
|
84
|
-
--pf-v5-c-
|
85
|
-
--pf-v5-c-
|
86
|
-
--pf-v5-c-
|
87
|
-
--pf-v5-c-
|
88
|
-
--pf-v5-c-
|
89
|
-
--pf-v5-c-
|
90
|
-
--pf-v5-c-
|
91
|
-
--pf-v5-c-
|
92
|
-
--pf-v5-c-
|
93
|
-
--pf-v5-c-
|
94
|
-
--pf-v5-c-
|
95
|
-
--pf-v5-c-
|
96
|
-
--pf-v5-c-
|
97
|
-
--pf-v5-c-
|
98
|
-
--pf-v5-c-
|
99
|
-
--pf-v5-c-
|
100
|
-
--pf-v5-c-
|
101
|
-
--pf-v5-c-
|
102
|
-
--pf-v5-c-
|
103
|
-
--pf-v5-c-
|
104
|
-
--pf-v5-c-
|
105
|
-
--pf-v5-c-
|
106
|
-
--pf-v5-c-
|
107
|
-
--pf-v5-c-
|
108
|
-
--pf-v5-c-
|
109
|
-
--pf-v5-c-
|
110
|
-
--pf-v5-c-
|
111
|
-
--pf-v5-c-
|
112
|
-
--pf-v5-c-
|
113
|
-
--pf-v5-c-
|
114
|
-
--pf-v5-c-
|
115
|
-
--pf-v5-c-
|
116
|
-
--pf-v5-c-
|
117
|
-
--pf-v5-c-
|
118
|
-
--pf-v5-c-
|
119
|
-
--pf-v5-c-
|
120
|
-
--pf-v5-c-
|
121
|
-
--pf-v5-c-
|
122
|
-
--pf-v5-c-
|
123
|
-
--pf-v5-c-
|
124
|
-
--pf-v5-c-
|
125
|
-
--pf-v5-c-
|
126
|
-
--pf-v5-c-
|
127
|
-
--pf-v5-c-
|
128
|
-
--pf-v5-c-
|
129
|
-
--pf-v5-c-
|
130
|
-
--pf-v5-c-
|
131
|
-
--pf-v5-c-
|
132
|
-
--pf-v5-c-
|
133
|
-
--pf-v5-c-
|
134
|
-
--pf-v5-c-menu__item-
|
135
|
-
--pf-v5-c-menu__item-
|
136
|
-
--pf-v5-c-menu__item-
|
137
|
-
--pf-v5-c-
|
138
|
-
--pf-v5-c-
|
139
|
-
--pf-v5-c-
|
140
|
-
--pf-v5-c-
|
141
|
-
--pf-v5-c-
|
142
|
-
--pf-v5-c-
|
143
|
-
--pf-v5-c-
|
144
|
-
--pf-v5-c-
|
145
|
-
--pf-v5-c-
|
146
|
-
--pf-v5-c-
|
147
|
-
--pf-v5-c-menu__item-external-icon--Color: var(--pf-v5-global--link--Color);
|
148
|
-
--pf-v5-c-menu__item-external-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
|
149
|
-
--pf-v5-c-menu__item-external-icon--Opacity: 0;
|
150
|
-
--pf-v5-c-menu__item-action--PaddingTop: var(--pf-v5-global--spacer--sm);
|
151
|
-
--pf-v5-c-menu__item-action--PaddingRight: var(--pf-v5-global--spacer--md);
|
152
|
-
--pf-v5-c-menu__item-action--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
153
|
-
--pf-v5-c-menu__item-action--PaddingLeft: var(--pf-v5-global--spacer--md);
|
154
|
-
--pf-v5-c-menu__item-action--Color: var(--pf-v5-global--Color--200);
|
155
|
-
--pf-v5-c-menu__item-action--BackgroundColor: transparent;
|
156
|
-
--pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-global--Color--100);
|
157
|
-
--pf-v5-c-menu__item-action--disabled--Color: var(--pf-v5-global--disabled-color--200);
|
158
|
-
--pf-v5-c-menu__item-action--m-favorited--Color: var(--pf-v5-global--palette--gold-400);
|
159
|
-
--pf-v5-c-menu__item-action--m-favorited--hover--Color: var(--pf-v5-global--palette--gold-500);
|
160
|
-
--pf-v5-c-menu__item-action-icon--Height: calc(var(--pf-v5-c-menu__item--FontSize) * var(--pf-v5-c-menu__item--LineHeight));
|
161
|
-
--pf-v5-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
|
162
|
-
--pf-v5-c-menu__breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
|
163
|
-
--pf-v5-c-menu__breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
|
164
|
-
--pf-v5-c-menu__breadcrumb--PaddingBottom: var(--pf-v5-global--spacer--md);
|
165
|
-
--pf-v5-c-menu__breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
|
166
|
-
--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--md);
|
167
|
-
--pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--md);
|
168
|
-
--pf-v5-c-menu--m-drilldown--c-menu--Top: 0;
|
169
|
-
--pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
|
170
|
-
--pf-v5-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
|
178
|
+
--pf-v5-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
179
|
+
--pf-v5-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
180
|
+
--pf-v5-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
181
|
+
--pf-v5-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
182
|
+
--pf-v5-c-menu__footer--BoxShadow: none;
|
183
|
+
--pf-v5-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
|
184
|
+
--pf-v5-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
|
185
|
+
--pf-v5-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
186
|
+
--pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
187
|
+
--pf-v5-c-menu__list-item--MixBlendMode: normal;
|
188
|
+
--pf-v5-c-menu__list-item--MixBlendMode--hover: var(--pf-t--global--background--color--action--plain--hover--blend);
|
189
|
+
--pf-v5-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
190
|
+
--pf-v5-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
|
191
|
+
--pf-v5-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
192
|
+
--pf-v5-c-menu__list--divider--MarginTop: var(--pf-t--global--spacer--sm);
|
193
|
+
--pf-v5-c-menu__list--divider--MarginBottom: var(--pf-t--global--spacer--sm);
|
194
|
+
--pf-v5-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
195
|
+
--pf-v5-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
196
|
+
--pf-v5-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
197
|
+
--pf-v5-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
198
|
+
--pf-v5-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
|
199
|
+
--pf-v5-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
|
200
|
+
--pf-v5-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
|
201
|
+
--pf-v5-c-menu__item--Color: var(--pf-t--global--text--color--regular);
|
202
|
+
--pf-v5-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
203
|
+
--pf-v5-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
|
204
|
+
--pf-v5-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
205
|
+
--pf-v5-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
206
|
+
--pf-v5-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
207
|
+
--pf-v5-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
208
|
+
--pf-v5-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
209
|
+
--pf-v5-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
210
|
+
--pf-v5-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
211
|
+
--pf-v5-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
212
|
+
--pf-v5-c-menu__breadcrumb--PaddingBlockStart: 0;
|
213
|
+
--pf-v5-c-menu__breadcrumb--PaddingBlockEnd: 0;
|
214
|
+
--pf-v5-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
215
|
+
--pf-v5-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
216
|
+
--pf-v5-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
217
|
+
--pf-v5-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
218
|
+
--pf-v5-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
219
|
+
--pf-v5-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
220
|
+
--pf-v5-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
|
221
|
+
--pf-v5-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
|
222
|
+
--pf-v5-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
|
223
|
+
--pf-v5-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
|
224
|
+
--pf-v5-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
|
225
|
+
--pf-v5-c-menu__item-action--icon--size: var(--pf-v5-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
|
226
|
+
--pf-v5-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
|
227
|
+
--pf-v5-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
|
228
|
+
--pf-v5-c-menu__item-action--button--MinWidth: calc(var(--pf-v5-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
|
229
|
+
--pf-v5-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
|
230
|
+
--pf-v5-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
|
231
|
+
--pf-v5-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
|
232
|
+
--pf-v5-c-menu--m-flyout__menu--top-offset: 0px;
|
233
|
+
--pf-v5-c-menu--m-flyout__menu--left-offset: 0px;
|
234
|
+
--pf-v5-c-menu--m-flyout__menu--m-left--right-offset: 0px;
|
235
|
+
--pf-v5-c-menu--m-flyout__Zindex: var(--pf-t--global--Zindex--sm);
|
236
|
+
--pf-v5-c-menu--m-flyout__menu--Top: calc(var(--pf-v5-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v5-c-menu--m-flyout__menu--top-offset));
|
237
|
+
--pf-v5-c-menu--m-flyout__menu--Right: auto;
|
238
|
+
--pf-v5-c-menu--m-flyout__menu--Bottom: auto;
|
239
|
+
--pf-v5-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--left-offset));
|
240
|
+
--pf-v5-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-v5-c-menu__list--PaddingBlockStart) * -1);
|
241
|
+
--pf-v5-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--m-left--right-offset));
|
171
242
|
--pf-v5-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-v5-global--TransitionDuration);
|
172
243
|
--pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
|
173
244
|
--pf-v5-c-menu--m-drilldown__content--Transition: transform var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--height);
|
174
245
|
--pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
|
175
246
|
--pf-v5-c-menu--m-drilldown__list--Transition: transform var(--pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform);
|
176
|
-
--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
--pf-v5-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
--pf-v5-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
--pf-v5-c-
|
206
|
-
--pf-v5-c-
|
207
|
-
--pf-v5-c-
|
208
|
-
--pf-v5-c-
|
209
|
-
--pf-v5-c-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
247
|
+
--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--ZIndex--xs);
|
248
|
+
}
|
249
|
+
|
250
|
+
.pf-v5-c-menu,
|
251
|
+
.pf-v5-c-menu__list,
|
252
|
+
.pf-v5-c-menu__group {
|
253
|
+
--pf-v5-hidden-visible--visible--Display: grid;
|
254
|
+
}
|
255
|
+
|
256
|
+
.pf-v5-c-menu__content,
|
257
|
+
.pf-v5-c-menu__list-item,
|
258
|
+
.pf-v5-c-menu__item,
|
259
|
+
.pf-v5-c-menu__item-main,
|
260
|
+
.pf-v5-c-menu__breadcrumb,
|
261
|
+
.pf-v5-c-menu__item-check,
|
262
|
+
.pf-v5-c-menu__item-action,
|
263
|
+
.pf-v5-c-menu__item-action-icon {
|
264
|
+
--pf-v5-hidden-visible--visible--Display: flex;
|
265
|
+
}
|
266
|
+
|
267
|
+
.pf-v5-c-menu__list,
|
268
|
+
.pf-v5-c-menu__list-item,
|
269
|
+
.pf-v5-c-menu__breadcrumb,
|
270
|
+
.pf-v5-c-menu__footer {
|
271
|
+
position: relative;
|
272
|
+
}
|
273
|
+
|
274
|
+
.pf-v5-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
|
275
|
+
.pf-v5-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
|
276
|
+
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__item--m-disabled--Color);
|
277
|
+
--pf-v5-c-menu__item-toggle-icon--Color: var(--pf-v5-c-menu--icon--disabled--Color);
|
278
|
+
--pf-v5-c-menu__item-external-icon--Color: var(--pf-v5-c-menu--icon--disabled--Color);
|
279
|
+
--pf-v5-c-menu__item-description--Color: var(--pf-v5-c-menu--icon--disabled--Color);
|
280
|
+
--pf-v5-c-menu__list-item--BackgroundColor: transparent;
|
281
|
+
pointer-events: none;
|
282
|
+
}
|
283
|
+
|
284
|
+
[class*=pf-v5-c-menu]:is([hidden]) {
|
285
|
+
display: none;
|
286
|
+
}
|
287
|
+
|
288
|
+
.pf-v5-c-menu {
|
289
|
+
row-gap: var(--pf-v5-c-menu--RowGap);
|
216
290
|
width: var(--pf-v5-c-menu--Width);
|
217
291
|
min-width: var(--pf-v5-c-menu--MinWidth);
|
292
|
+
padding-block-start: var(--pf-v5-c-menu--PaddingBlockStart);
|
293
|
+
padding-block-end: var(--pf-v5-c-menu--PaddingBlockEnd);
|
294
|
+
overflow: hidden;
|
295
|
+
color: var(--pf-v5-c-menu--Color);
|
218
296
|
background-color: var(--pf-v5-c-menu--BackgroundColor);
|
297
|
+
border-radius: var(--pf-v5-c-menu--BorderRadius);
|
219
298
|
box-shadow: var(--pf-v5-c-menu--BoxShadow);
|
220
299
|
}
|
300
|
+
.pf-v5-c-menu .pf-v5-c-menu {
|
301
|
+
min-width: 100%;
|
302
|
+
border-radius: 0;
|
303
|
+
}
|
221
304
|
.pf-v5-c-menu .pf-v5-c-menu__content .pf-v5-c-menu .pf-v5-c-menu__content {
|
222
305
|
overflow: visible;
|
223
306
|
}
|
224
|
-
.pf-v5-c-menu .pf-v5-c-
|
225
|
-
|
226
|
-
margin-block-end: var(--pf-v5-c-menu--c-divider--MarginBottom);
|
307
|
+
.pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu, .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content {
|
308
|
+
overflow: visible;
|
227
309
|
}
|
228
310
|
.pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
|
229
311
|
position: absolute;
|
@@ -231,6 +313,8 @@
|
|
231
313
|
inset-block-end: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
|
232
314
|
inset-inline-start: var(--pf-v5-c-menu--m-flyout__menu--Left);
|
233
315
|
inset-inline-end: var(--pf-v5-c-menu--m-flyout__menu--Right);
|
316
|
+
z-index: var(--pf-v5-c-menu--m-flyout__Zindex);
|
317
|
+
border-radius: var(--pf-v5-c-menu--BorderRadius);
|
234
318
|
}
|
235
319
|
.pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__content {
|
236
320
|
overflow-y: visible;
|
@@ -243,18 +327,13 @@
|
|
243
327
|
--pf-v5-c-menu--m-flyout__menu--Right: var(--pf-v5-c-menu--m-flyout__menu--m-left--Right);
|
244
328
|
--pf-v5-c-menu--m-flyout__menu--Left: auto;
|
245
329
|
}
|
246
|
-
.pf-v5-c-menu.pf-m-drilldown {
|
247
|
-
display: flex;
|
248
|
-
flex-direction: column;
|
249
|
-
}
|
250
|
-
.pf-v5-c-menu.pf-m-drilldown[hidden] {
|
251
|
-
display: none;
|
252
|
-
}
|
253
330
|
.pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content {
|
254
|
-
flex-grow: 1;
|
255
331
|
overflow: hidden;
|
256
332
|
transition: var(--pf-v5-c-menu--m-drilldown__content--Transition);
|
257
333
|
}
|
334
|
+
.pf-v5-c-menu.pf-m-drilldown :where(.pf-v5-c-menu) {
|
335
|
+
padding: 0;
|
336
|
+
}
|
258
337
|
.pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list,
|
259
338
|
.pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
|
260
339
|
transform: translateX(-100%);
|
@@ -264,11 +343,11 @@
|
|
264
343
|
}
|
265
344
|
|
266
345
|
.pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
|
267
|
-
--pf-v5-c-menu--BoxShadow: none;
|
268
346
|
position: absolute;
|
269
347
|
inset-block-start: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
|
270
348
|
inset-inline-start: 100%;
|
271
349
|
width: 100%;
|
350
|
+
box-shadow: none;
|
272
351
|
transition: var(--pf-v5-c-menu--m-drilldown--c-menu--Transition);
|
273
352
|
}
|
274
353
|
.pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
|
@@ -279,14 +358,13 @@
|
|
279
358
|
}
|
280
359
|
|
281
360
|
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
|
282
|
-
position: relative;
|
283
361
|
overflow: hidden;
|
284
362
|
visibility: visible;
|
285
363
|
transition: var(--pf-v5-c-menu--m-drilldown__list--Transition);
|
286
364
|
}
|
287
365
|
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list .pf-v5-c-menu__list {
|
288
|
-
--pf-v5-c-menu__list--
|
289
|
-
--pf-v5-c-menu__list--
|
366
|
+
--pf-v5-c-menu__list--PaddingBlockStart: 0;
|
367
|
+
--pf-v5-c-menu__list--PaddingBlockEnd: 0;
|
290
368
|
}
|
291
369
|
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-current-path .pf-v5-c-menu {
|
292
370
|
z-index: var(--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
|
@@ -304,7 +382,7 @@
|
|
304
382
|
display: none;
|
305
383
|
}
|
306
384
|
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__item {
|
307
|
-
outline-offset: var(--pf-v5-c-
|
385
|
+
outline-offset: var(--pf-v5-c-menu--OutlineOffset);
|
308
386
|
}
|
309
387
|
.pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list {
|
310
388
|
overflow: visible;
|
@@ -323,83 +401,54 @@
|
|
323
401
|
.pf-v5-c-menu.pf-m-scrollable {
|
324
402
|
--pf-v5-c-menu__content--MaxHeight: var(--pf-v5-c-menu--m-scrollable__content--MaxHeight);
|
325
403
|
--pf-v5-c-menu__footer--BoxShadow: var(--pf-v5-c-menu--m-scrollable__footer--BoxShadow);
|
326
|
-
--pf-v5-c-menu__footer--
|
404
|
+
--pf-v5-c-menu__footer--PaddingBlockStart: calc(var(--pf-v5-c-menu__item--PaddingBlockStart) + var(--pf-v5-c-menu--RowGap));
|
405
|
+
--pf-v5-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v5-c-menu__item--PaddingBlockStart) + var(--pf-v5-c-menu--RowGap));
|
406
|
+
overflow: hidden;
|
327
407
|
}
|
328
|
-
.pf-v5-c-menu.pf-m-scrollable
|
408
|
+
.pf-v5-c-menu.pf-m-scrollable:has(.pf-v5-c-menu__footer) {
|
409
|
+
--pf-v5-c-menu--PaddingBlockEnd: 0;
|
410
|
+
}
|
411
|
+
.pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__content,
|
412
|
+
.pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__list {
|
329
413
|
overflow-y: auto;
|
330
414
|
}
|
331
|
-
.pf-v5-c-menu.pf-m-
|
332
|
-
--pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-menu--m-nav--BackgroundColor);
|
333
|
-
--pf-v5-c-menu__list--PaddingTop: var(--pf-v5-c-menu--m-nav__list--PaddingTop);
|
334
|
-
--pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-c-menu--m-nav__list--PaddingBottom);
|
335
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor);
|
336
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor);
|
337
|
-
--pf-v5-c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--active--BackgroundColor);
|
338
|
-
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu--m-nav__item--Color);
|
339
|
-
--pf-v5-c-menu__item--FontSize: var(--pf-v5-c-menu--m-nav__item--FontSize);
|
340
|
-
--pf-v5-c-menu__item--OutlineOffset: var(--pf-v5-c-menu--m-nav__item--OutlineOffset);
|
341
|
-
--pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu--m-nav__item--PaddingRight);
|
342
|
-
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu--m-nav__item--PaddingLeft);
|
343
|
-
--pf-v5-c-menu__item-description--Color: var(--pf-v5-c-menu--m-nav__item-description--Color);
|
344
|
-
box-shadow: var(--pf-v5-c-menu--m-nav--BoxShadow);
|
345
|
-
}
|
346
|
-
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item {
|
415
|
+
.pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__content {
|
347
416
|
position: relative;
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
inset-block-end: 0;
|
353
|
-
inset-inline-start: 0;
|
354
|
-
inset-inline-end: 0;
|
355
|
-
content: "";
|
356
|
-
border-block-end: var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
|
357
|
-
}
|
358
|
-
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item:hover::after, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
|
359
|
-
position: absolute;
|
360
|
-
inset-block-start: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
|
361
|
-
inset-block-end: 0;
|
362
|
-
inset-inline-start: 0;
|
363
|
-
content: "";
|
364
|
-
border-inline-start: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
|
365
|
-
}
|
366
|
-
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
|
367
|
-
width: 100%;
|
368
|
-
}
|
369
|
-
.pf-v5-c-menu.pf-m-flyout.pf-m-nav, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu {
|
370
|
-
inset-block-start: var(--pf-v5-c-menu--m-nav--c-menu--Top);
|
371
|
-
inset-inline-start: var(--pf-v5-c-menu--m-nav--c-menu--Left);
|
372
|
-
}
|
373
|
-
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-top {
|
374
|
-
--pf-v5-c-menu--m-nav--c-menu--Top: auto;
|
375
|
-
inset-block-end: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
|
376
|
-
}
|
377
|
-
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-left {
|
378
|
-
--pf-v5-c-menu--m-nav--c-menu--Left: auto;
|
379
|
-
inset-inline-end: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
|
417
|
+
z-index: var(--pf-v5-c-menu--ZIndex);
|
418
|
+
margin-block-start: calc(var(--pf-v5-c-menu--RowGap) * -1);
|
419
|
+
margin-block-end: calc(var(--pf-v5-c-menu--RowGap) * -1);
|
420
|
+
overflow: hidden;
|
380
421
|
}
|
381
|
-
.pf-v5-c-menu.pf-m-
|
382
|
-
|
422
|
+
.pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__list {
|
423
|
+
padding-block-start: var(--pf-v5-c-menu--RowGap);
|
424
|
+
padding-block-end: var(--pf-v5-c-menu--RowGap);
|
383
425
|
}
|
384
|
-
|
385
|
-
|
426
|
+
|
427
|
+
.pf-v5-c-menu__header {
|
428
|
+
padding-block-start: var(--pf-v5-c-menu__header--PaddingBlockStart);
|
429
|
+
padding-block-end: var(--pf-v5-c-menu__header--PaddingBlockEnd);
|
430
|
+
padding-inline-start: var(--pf-v5-c-menu__header--PaddingInlineStart);
|
431
|
+
padding-inline-end: var(--pf-v5-c-menu__header--PaddingInlineEnd);
|
386
432
|
}
|
387
433
|
|
388
|
-
.pf-v5-c-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
padding-
|
393
|
-
padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBottom);
|
394
|
-
padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
|
395
|
-
padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingRight);
|
434
|
+
.pf-v5-c-menu__search {
|
435
|
+
padding-block-start: var(--pf-v5-c-menu__search--PaddingBlockStart);
|
436
|
+
padding-block-end: var(--pf-v5-c-menu__search--PaddingBlockEnd);
|
437
|
+
padding-inline-start: var(--pf-v5-c-menu__search--PaddingInlineStart);
|
438
|
+
padding-inline-end: var(--pf-v5-c-menu__search--PaddingInlineEnd);
|
396
439
|
}
|
397
|
-
|
398
|
-
|
399
|
-
|
440
|
+
|
441
|
+
.pf-v5-c-menu__footer {
|
442
|
+
padding-block-start: var(--pf-v5-c-menu__footer--PaddingBlockStart);
|
443
|
+
padding-block-end: var(--pf-v5-c-menu__footer--PaddingBlockEnd);
|
444
|
+
padding-inline-start: var(--pf-v5-c-menu__footer--PaddingInlineStart);
|
445
|
+
padding-inline-end: var(--pf-v5-c-menu__footer--PaddingInlineEnd);
|
446
|
+
box-shadow: var(--pf-v5-c-menu__footer--BoxShadow);
|
400
447
|
}
|
401
448
|
|
402
449
|
.pf-v5-c-menu__content {
|
450
|
+
flex-direction: column;
|
451
|
+
row-gap: var(--pf-v5-c-menu__content--RowGap);
|
403
452
|
height: var(--pf-v5-c-menu__content--Height);
|
404
453
|
max-height: var(--pf-v5-c-menu__content--MaxHeight);
|
405
454
|
}
|
@@ -407,135 +456,93 @@
|
|
407
456
|
--pf-v5-c-menu__content--Height: auto;
|
408
457
|
}
|
409
458
|
|
410
|
-
.pf-v5-c-
|
411
|
-
|
412
|
-
|
413
|
-
--pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-menu__header--c-menu__item--PaddingBottom);
|
414
|
-
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu__header--c-menu__item--PaddingLeft);
|
415
|
-
padding-block-start: var(--pf-v5-c-menu__header--PaddingTop);
|
416
|
-
padding-block-end: var(--pf-v5-c-menu__header--PaddingBottom);
|
417
|
-
padding-inline-start: var(--pf-v5-c-menu__header--PaddingLeft);
|
418
|
-
padding-inline-end: var(--pf-v5-c-menu__header--PaddingRight);
|
419
|
-
}
|
420
|
-
.pf-v5-c-menu__header > .pf-v5-c-menu__item {
|
421
|
-
--pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--BackgroundColor);
|
422
|
-
margin-block-start: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
|
423
|
-
margin-block-end: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
|
424
|
-
margin-inline-start: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
|
425
|
-
margin-inline-end: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
|
426
|
-
}
|
427
|
-
.pf-v5-c-menu__header > .pf-v5-c-menu__item:hover {
|
428
|
-
--pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor);
|
429
|
-
}
|
430
|
-
.pf-v5-c-menu__header > .pf-v5-c-menu__item:focus {
|
431
|
-
--pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor);
|
432
|
-
}
|
433
|
-
.pf-v5-c-menu__header + .pf-v5-c-menu__search {
|
434
|
-
--pf-v5-c-menu__search--PaddingTop: var(--pf-v5-c-menu__header__search--PaddingTop);
|
435
|
-
}
|
436
|
-
|
437
|
-
.pf-v5-c-menu__search {
|
438
|
-
padding-block-start: var(--pf-v5-c-menu__search--PaddingTop);
|
439
|
-
padding-block-end: var(--pf-v5-c-menu__search--PaddingBottom);
|
440
|
-
padding-inline-start: var(--pf-v5-c-menu__search--PaddingLeft);
|
441
|
-
padding-inline-end: var(--pf-v5-c-menu__search--PaddingRight);
|
442
|
-
}
|
443
|
-
|
444
|
-
.pf-v5-c-menu__list {
|
445
|
-
--pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list--Display);
|
446
|
-
padding-block-start: var(--pf-v5-c-menu__list--PaddingTop);
|
447
|
-
padding-block-end: var(--pf-v5-c-menu__list--PaddingBottom);
|
448
|
-
}
|
449
|
-
.pf-v5-c-menu__list > .pf-v5-c-divider {
|
450
|
-
margin-block-start: var(--pf-v5-c-menu__list--c-divider--MarginTop);
|
451
|
-
margin-block-end: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
|
459
|
+
.pf-v5-c-menu__list :where(.pf-v5-c-divider:is(li)) {
|
460
|
+
margin-block-start: var(--pf-v5-c-menu__list--divider--MarginTop);
|
461
|
+
margin-block-end: var(--pf-v5-c-menu__list--divider--MarginBottom);
|
452
462
|
}
|
453
463
|
|
454
464
|
.pf-v5-c-menu__list-item {
|
455
|
-
|
456
|
-
|
457
|
-
color: var(--pf-v5-c-menu__list-item--Color);
|
458
|
-
background-color: var(--pf-v5-c-menu__list-item--BackgroundColor);
|
459
|
-
}
|
460
|
-
.pf-v5-c-menu__list-item:hover {
|
461
|
-
--pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--hover--BackgroundColor);
|
462
|
-
--pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--hover--Color, inherit);
|
463
|
-
}
|
464
|
-
.pf-v5-c-menu__list-item:focus-within, .pf-v5-c-menu__list-item.pf-m-focus {
|
465
|
-
--pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
|
466
|
-
--pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
|
467
|
-
}
|
468
|
-
.pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
|
469
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
|
470
|
-
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
|
471
|
-
--pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
|
465
|
+
align-items: baseline;
|
466
|
+
min-width: 0;
|
472
467
|
}
|
473
|
-
.pf-v5-c-menu__list-item
|
474
|
-
|
475
|
-
pointer-events: none;
|
468
|
+
.pf-v5-c-menu__list-item > * {
|
469
|
+
position: relative;
|
476
470
|
}
|
477
|
-
.pf-v5-c-menu__list-item
|
478
|
-
|
471
|
+
.pf-v5-c-menu__list-item::before {
|
472
|
+
position: absolute;
|
473
|
+
inset: 0;
|
474
|
+
content: "";
|
475
|
+
background-color: var(--pf-v5-c-menu__list-item--BackgroundColor);
|
476
|
+
mix-blend-mode: var(--pf-v5-c-menu__list-item--MixBlendMode);
|
479
477
|
}
|
480
478
|
.pf-v5-c-menu__list-item.pf-m-load {
|
481
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
|
482
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
|
483
479
|
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-load__item--Color);
|
484
480
|
}
|
485
481
|
.pf-v5-c-menu__list-item.pf-m-loading {
|
486
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
|
487
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
|
488
482
|
justify-content: center;
|
489
|
-
padding-block-start: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
|
490
483
|
overflow: hidden;
|
484
|
+
pointer-events: none;
|
485
|
+
}
|
486
|
+
.pf-v5-c-menu__list-item.pf-m-loading .pf-v5-c-menu__item-text {
|
487
|
+
text-align: center;
|
491
488
|
}
|
492
489
|
.pf-v5-c-menu__list-item.pf-m-danger {
|
493
|
-
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-
|
490
|
+
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-danger--Color);
|
491
|
+
}
|
492
|
+
.pf-v5-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
|
493
|
+
--pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-danger--hover--Color, var(--pf-v5-c-menu__list-item--m-danger--Color));
|
494
|
+
}
|
495
|
+
.pf-v5-c-menu__list-item:has(.pf-v5-c-menu__item-action) {
|
496
|
+
padding-inline-end: var(--pf-v5-c-menu__list-item--has--menu-action--PaddingInlineEnd);
|
497
|
+
}
|
498
|
+
.pf-v5-c-menu__list-item:has(> :hover) {
|
499
|
+
--pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--hover--BackgroundColor);
|
500
|
+
--pf-v5-c-menu__list-item--MixBlendMode: var(--pf-v5-c-menu__list-item--MixBlendMode--hover);
|
501
|
+
}
|
502
|
+
.pf-v5-c-menu__list-item:has(> :hover) .pf-v5-c-menu__item-select-icon,
|
503
|
+
.pf-v5-c-menu__list-item:has(> :hover) .pf-v5-c-menu__item-external-icon {
|
504
|
+
opacity: 1;
|
494
505
|
}
|
495
506
|
|
496
507
|
.pf-v5-c-menu__item {
|
497
|
-
display: flex;
|
498
508
|
flex-basis: 100%;
|
499
509
|
flex-direction: column;
|
500
510
|
min-width: 0;
|
501
|
-
padding-block-start: var(--pf-v5-c-menu__item--
|
502
|
-
padding-block-end: var(--pf-v5-c-menu__item--
|
503
|
-
padding-inline-start: var(--pf-v5-c-menu__item--
|
504
|
-
padding-inline-end: var(--pf-v5-c-menu__item--
|
511
|
+
padding-block-start: var(--pf-v5-c-menu__item--PaddingBlockStart);
|
512
|
+
padding-block-end: var(--pf-v5-c-menu__item--PaddingBlockEnd);
|
513
|
+
padding-inline-start: var(--pf-v5-c-menu__item--PaddingInlineStart);
|
514
|
+
padding-inline-end: var(--pf-v5-c-menu__item--PaddingInlineEnd);
|
505
515
|
font-size: var(--pf-v5-c-menu__item--FontSize);
|
506
516
|
font-weight: var(--pf-v5-c-menu__item--FontWeight);
|
507
517
|
line-height: var(--pf-v5-c-menu__item--LineHeight);
|
508
518
|
color: var(--pf-v5-c-menu__item--Color);
|
509
519
|
text-align: start;
|
510
|
-
background-color: var(--pf-v5-c-menu__item--BackgroundColor);
|
511
|
-
border: none;
|
512
|
-
}
|
513
|
-
.pf-v5-c-menu__item:hover {
|
514
520
|
text-decoration: none;
|
521
|
+
background-color: var(--pf-v5-c-menu__item--BackgroundColor);
|
522
|
+
border: 0;
|
523
|
+
outline-offset: var(--pf-v5-c-menu--OutlineOffset);
|
515
524
|
}
|
516
|
-
.pf-v5-c-menu__item
|
517
|
-
--pf-v5-c-menu__item-
|
525
|
+
.pf-v5-c-menu__item.pf-m-selected {
|
526
|
+
--pf-v5-c-menu__item-select-icon--Color: var(--pf-v5-c-menu__item--m-selected__item-select-icon--Color);
|
518
527
|
}
|
519
|
-
.pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon
|
528
|
+
.pf-v5-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v5-c-menu__item-select-icon,
|
529
|
+
.pf-v5-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v5-c-menu__item-external-icon {
|
520
530
|
opacity: 1;
|
521
531
|
}
|
522
|
-
|
523
|
-
|
532
|
+
.pf-v5-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v5-c-menu__item-external-icon {
|
533
|
+
color: var(--pf-v5-c-menu__item-external--Color);
|
534
|
+
}
|
535
|
+
|
536
|
+
.pf-v5-c-menu__item-select-icon {
|
537
|
+
color: var(--pf-v5-c-menu__item-select-icon--Color);
|
524
538
|
}
|
525
539
|
|
526
540
|
.pf-v5-c-menu__item-main {
|
527
|
-
|
541
|
+
column-gap: var(--pf-v5-c-menu__item-main--ColumnGap);
|
528
542
|
align-items: center;
|
529
543
|
width: 100%;
|
530
544
|
}
|
531
545
|
|
532
|
-
.pf-v5-c-menu__item-external-icon {
|
533
|
-
margin-inline-start: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
|
534
|
-
font-size: var(--pf-v5-c-menu__item-external-icon--FontSize);
|
535
|
-
color: var(--pf-v5-c-menu__item-external-icon--Color);
|
536
|
-
opacity: var(--pf-v5-c-menu__item-external-icon--Opacity);
|
537
|
-
}
|
538
|
-
|
539
546
|
.pf-v5-c-menu__item-text {
|
540
547
|
overflow: hidden;
|
541
548
|
text-overflow: ellipsis;
|
@@ -543,16 +550,13 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
543
550
|
flex-grow: 1;
|
544
551
|
}
|
545
552
|
|
546
|
-
.pf-v5-c-menu__group {
|
547
|
-
--pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__group--Display);
|
548
|
-
}
|
549
|
-
|
550
553
|
.pf-v5-c-menu__group-title {
|
551
|
-
padding-block-start: var(--pf-v5-c-menu__group-title--
|
552
|
-
padding-
|
553
|
-
padding-inline-
|
554
|
-
|
555
|
-
font-
|
554
|
+
padding-block-start: var(--pf-v5-c-menu__group-title--PaddingBlockStart);
|
555
|
+
padding-block-end: var(--pf-v5-c-menu__group-title--PaddingBlockEnd);
|
556
|
+
padding-inline-start: var(--pf-v5-c-menu__group-title--PaddingInlineStart);
|
557
|
+
padding-inline-end: var(--pf-v5-c-menu__group-title--PaddingInlineEnd);
|
558
|
+
font-size: var(--pf-v5-c-menu__group-title--FontSize, inherit);
|
559
|
+
font-weight: var(--pf-v5-c-menu__group-title--FontWeight, inherit);
|
556
560
|
color: var(--pf-v5-c-menu__group-title--Color);
|
557
561
|
}
|
558
562
|
|
@@ -562,91 +566,56 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
562
566
|
word-break: break-word;
|
563
567
|
}
|
564
568
|
|
565
|
-
.pf-v5-c-menu__item-icon {
|
566
|
-
margin-inline-end: var(--pf-v5-c-menu__item-icon--MarginRight);
|
567
|
-
}
|
568
|
-
|
569
|
-
.pf-v5-c-menu__item-check {
|
570
|
-
display: flex;
|
571
|
-
align-items: center;
|
572
|
-
margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
|
573
|
-
}
|
574
569
|
.pf-v5-c-menu__item-check .pf-v5-c-check {
|
575
570
|
--pf-v5-c-check__input--TranslateY: none;
|
576
571
|
}
|
572
|
+
.pf-v5-c-menu__item-check .pf-v5-c-check input::before {
|
573
|
+
position: absolute;
|
574
|
+
inset: 0;
|
575
|
+
content: "";
|
576
|
+
}
|
577
577
|
|
578
578
|
.pf-v5-c-menu__item-toggle-icon {
|
579
|
-
|
580
|
-
padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
|
581
|
-
color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
|
579
|
+
color: var(--pf-v5-c-menu__item-toggle-icon--Color, inherit);
|
582
580
|
}
|
583
581
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
|
584
582
|
scale: -1 1;
|
585
583
|
}
|
586
584
|
|
587
|
-
.pf-v5-c-menu__item-
|
588
|
-
|
589
|
-
}
|
590
|
-
|
591
|
-
.pf-v5-c-menu__item-toggle-icon + .pf-v5-c-menu__item-text {
|
592
|
-
margin-inline-start: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
|
585
|
+
.pf-v5-c-menu__item-icon {
|
586
|
+
color: var(--pf-v5-c-menu__item--icon--Color, inherit);
|
593
587
|
}
|
594
588
|
|
595
|
-
.pf-v5-c-menu__item-select-icon
|
596
|
-
|
597
|
-
font-size: var(--pf-v5-c-menu__item-select-icon--FontSize);
|
598
|
-
color: var(--pf-v5-c-menu__item-select-icon--Color);
|
589
|
+
.pf-v5-c-menu__item-select-icon,
|
590
|
+
.pf-v5-c-menu__item-external-icon {
|
599
591
|
opacity: 0;
|
600
592
|
}
|
601
593
|
|
602
|
-
.pf-v5-c-menu__item-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
padding-inline-end: var(--pf-v5-c-menu__item-action--PaddingRight);
|
608
|
-
color: var(--pf-v5-c-menu__item-action--Color);
|
609
|
-
background-color: var(--pf-v5-c-menu__item-action--BackgroundColor);
|
610
|
-
border: none;
|
611
|
-
}
|
612
|
-
.pf-v5-c-menu__item-action.pf-m-favorite .pf-v5-c-menu__item-action-icon {
|
613
|
-
font-size: var(--pf-v5-c-menu__item-action--m-favorite__icon--FontSize);
|
614
|
-
}
|
615
|
-
.pf-v5-c-menu__item-action.pf-m-favorited {
|
594
|
+
.pf-v5-c-menu__item-toggle-icon.pf-m-favorited, .pf-v5-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v5-c-menu__item-toggle-icon.pf-m-favorited .pf-v5-c-button,
|
595
|
+
.pf-v5-c-menu__item-action.pf-m-favorited,
|
596
|
+
.pf-v5-c-menu__item-action.pf-m-favorited:hover,
|
597
|
+
.pf-v5-c-menu__item-action.pf-m-favorited .pf-v5-c-button {
|
598
|
+
--pf-v5-c-button--Color: var(--pf-v5-c-menu__item-action--m-favorited--Color);
|
616
599
|
--pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--m-favorited--Color);
|
617
|
-
--pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-c-menu__item-action--m-favorited--hover--Color);
|
618
|
-
}
|
619
|
-
.pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
|
620
|
-
--pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
|
621
|
-
}
|
622
|
-
.pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
|
623
|
-
--pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
|
624
|
-
}
|
625
|
-
|
626
|
-
.pf-v5-c-menu__item-action-icon {
|
627
|
-
display: flex;
|
628
|
-
align-items: center;
|
629
|
-
height: var(--pf-v5-c-menu__item-action-icon--Height);
|
630
600
|
}
|
631
601
|
|
632
|
-
.pf-v5-c-
|
633
|
-
|
634
|
-
padding-block-start: var(--pf-v5-c-
|
635
|
-
padding-block-end: var(--pf-v5-c-
|
636
|
-
padding-inline-start: var(--pf-v5-c-
|
637
|
-
padding-inline-end: var(--pf-v5-c-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
}
|
647
|
-
|
648
|
-
|
649
|
-
--pf-v5-c-menu--
|
650
|
-
|
651
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
602
|
+
.pf-v5-c-menu__breadcrumb {
|
603
|
+
--pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-c-menu__breadcrumb--FontSize);
|
604
|
+
padding-block-start: var(--pf-v5-c-menu__breadcrumb--PaddingBlockStart);
|
605
|
+
padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBlockEnd);
|
606
|
+
padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingInlineStart);
|
607
|
+
padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingInlineEnd);
|
608
|
+
}
|
609
|
+
.pf-v5-c-menu__breadcrumb .pf-v5-c-menu {
|
610
|
+
min-width: auto;
|
611
|
+
padding-block-start: var(--pf-v5-c-menu--PaddingBlockStart);
|
612
|
+
padding-block-end: var(--pf-v5-c-menu--PaddingBlockEnd);
|
613
|
+
}
|
614
|
+
.pf-v5-c-menu__breadcrumb .pf-v5-c-menu__content {
|
615
|
+
height: auto;
|
616
|
+
}
|
617
|
+
.pf-v5-c-menu__breadcrumb .pf-v5-c-menu-toggle {
|
618
|
+
--pf-v5-c-menu-toggle--BorderWidth: 0;
|
619
|
+
--pf-v5-c-menu-toggle--BorderColor: transparent;
|
620
|
+
outline-offset: var(--pf-v5-c-menu--OutlineOffset);
|
652
621
|
}
|