@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +36 -0
- package/README.md +1 -1
- package/css/components/Alert/alert-group.css +20 -16
- package/css/components/Alert/alert.css +57 -84
- package/css/components/Alert/alert.d.ts +1 -2
- package/css/components/Alert/alert.js +1 -2
- package/css/components/Alert/alert.mjs +1 -2
- package/css/components/Button/button.css +142 -179
- package/css/components/Button/button.d.ts +1 -2
- package/css/components/Button/button.js +1 -2
- package/css/components/Button/button.mjs +1 -2
- package/css/components/Content/content.css +67 -67
- package/css/components/Drawer/drawer.css +0 -1
- package/css/components/Masthead/masthead.css +49 -103
- package/css/components/Masthead/masthead.d.ts +1 -6
- package/css/components/Masthead/masthead.js +1 -6
- package/css/components/Masthead/masthead.mjs +1 -6
- package/css/components/MenuToggle/menu-toggle.css +57 -79
- package/css/components/Nav/nav.css +42 -40
- package/css/components/NotificationBadge/notification-badge.css +56 -81
- package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
- package/css/components/NotificationBadge/notification-badge.js +1 -5
- package/css/components/NotificationBadge/notification-badge.mjs +1 -5
- package/css/components/Page/page.css +110 -209
- package/css/components/Page/page.d.ts +5 -12
- package/css/components/Page/page.js +5 -12
- package/css/components/Page/page.mjs +5 -12
- package/css/components/Table/table-grid.css +8 -8
- package/css/components/Table/table.css +79 -88
- package/css/components/Toolbar/toolbar.css +4 -2
- package/css/docs/components/Nav/examples/Navigation.css +2 -1
- package/css/docs/components/Page/examples/Page.css +0 -8
- package/css/docs/components/Page/examples/Page.d.ts +0 -7
- package/css/docs/components/Page/examples/Page.js +0 -7
- package/css/docs/components/Page/examples/Page.mjs +0 -7
- package/css/docs/demos/Toolbar/examples/Toolbar.css +5 -0
- package/package.json +3 -3
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
@@ -205,7 +205,6 @@
|
|
205
205
|
z-index: var(--pf-v5-c-drawer__content--ZIndex);
|
206
206
|
flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
|
207
207
|
order: 0;
|
208
|
-
background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
|
209
208
|
}
|
210
209
|
.pf-v5-c-drawer__content.pf-m-no-background {
|
211
210
|
--pf-v5-c-drawer__content--BackgroundColor: transparent;
|
@@ -1,51 +1,24 @@
|
|
1
|
-
|
2
|
-
--pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
|
3
|
-
--pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
|
4
|
-
--pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
|
5
|
-
--pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
|
6
|
-
--pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
|
7
|
-
--pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
|
8
|
-
--pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
|
9
|
-
--pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
|
10
|
-
--pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
|
11
|
-
}
|
12
|
-
|
13
|
-
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
|
14
|
-
--pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
|
15
|
-
--pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
|
16
|
-
--pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
|
17
|
-
--pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
|
18
|
-
--pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
|
19
|
-
--pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
|
20
|
-
--pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
|
21
|
-
--pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
|
22
|
-
--pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
|
23
|
-
}
|
24
|
-
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
|
25
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
|
26
|
-
}
|
27
|
-
|
28
|
-
.pf-v5-c-masthead {
|
1
|
+
:root {
|
29
2
|
--pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
|
30
3
|
--pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
|
31
|
-
--pf-v5-c-masthead--BackgroundColor: var(--pf-
|
32
|
-
--pf-v5-c-masthead--inset: var(--pf-
|
33
|
-
--pf-v5-c-masthead--xl--inset: var(--pf-
|
4
|
+
--pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
5
|
+
--pf-v5-c-masthead--inset: var(--pf-t--global--spacer--md);
|
6
|
+
--pf-v5-c-masthead--xl--inset: var(--pf-t--global--spacer--lg);
|
34
7
|
--pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
|
35
8
|
--pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
|
36
9
|
--pf-v5-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
|
37
10
|
--pf-v5-c-masthead--m-display-stack__main--Order: -1;
|
38
11
|
--pf-v5-c-masthead--m-display-stack__main--FlexBasis: 100%;
|
39
|
-
--pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-
|
40
|
-
--pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-
|
12
|
+
--pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
|
13
|
+
--pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
|
41
14
|
--pf-v5-c-masthead--m-display-stack__main--MarginRight: 0;
|
42
15
|
--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-v5-c-masthead__main--before--BorderBottomWidth) solid var(--pf-v5-c-masthead__main--before--BorderBottomColor);
|
43
16
|
--pf-v5-c-masthead--m-display-stack__toggle--GridColumn: 1;
|
44
17
|
--pf-v5-c-masthead--m-display-stack__content--GridColumn: 2;
|
45
18
|
--pf-v5-c-masthead--m-display-stack__content--MinHeight: auto;
|
46
19
|
--pf-v5-c-masthead--m-display-stack__content--Order: 1;
|
47
|
-
--pf-v5-c-masthead--m-display-stack__content--PaddingTop:
|
48
|
-
--pf-v5-c-masthead--m-display-stack__content--PaddingBottom:
|
20
|
+
--pf-v5-c-masthead--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
|
21
|
+
--pf-v5-c-masthead--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
|
49
22
|
--pf-v5-c-masthead--m-display-stack__content--MarginLeft: 0;
|
50
23
|
--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-v5-c-masthead--inset) * -1);
|
51
24
|
--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead--inset) * -1);
|
@@ -56,7 +29,7 @@
|
|
56
29
|
--pf-v5-c-masthead--m-display-inline__main--FlexBasis: auto;
|
57
30
|
--pf-v5-c-masthead--m-display-inline__main--PaddingTop: 0;
|
58
31
|
--pf-v5-c-masthead--m-display-inline__main--PaddingBottom: 0;
|
59
|
-
--pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-
|
32
|
+
--pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2);
|
60
33
|
--pf-v5-c-masthead--m-display-inline__main--BorderBottom: 0;
|
61
34
|
--pf-v5-c-masthead--m-display-inline__toggle--GridColumn: 1;
|
62
35
|
--pf-v5-c-masthead--m-display-inline__content--GridColumn: 3;
|
@@ -64,22 +37,19 @@
|
|
64
37
|
--pf-v5-c-masthead--m-display-inline__content--Order: 0;
|
65
38
|
--pf-v5-c-masthead--m-display-inline__content--PaddingTop: 0;
|
66
39
|
--pf-v5-c-masthead--m-display-inline__content--PaddingBottom: 0;
|
67
|
-
--pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-
|
40
|
+
--pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2);
|
68
41
|
--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
|
69
42
|
--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
|
70
43
|
--pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
|
71
44
|
--pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
|
72
|
-
--pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-
|
73
|
-
--pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-
|
74
|
-
--pf-v5-c-
|
75
|
-
--pf-v5-c-masthead__toggle--
|
76
|
-
--pf-v5-c-masthead__toggle--
|
77
|
-
--pf-v5-c-
|
78
|
-
--pf-v5-c-masthead--m-light__main--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
|
79
|
-
--pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
80
|
-
--pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
|
45
|
+
--pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
46
|
+
--pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
|
47
|
+
--pf-v5-c-masthead__content--Gap: var(--pf-t--global--spacer--sm);
|
48
|
+
--pf-v5-c-masthead__toggle--MarginRight: var(--pf-t--global--spacer--sm);
|
49
|
+
--pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
|
50
|
+
--pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
81
51
|
--pf-v5-c-masthead--c-toolbar__item--Display: flex;
|
82
|
-
--pf-v5-c-masthead--item-border-color--base: var(--pf-
|
52
|
+
--pf-v5-c-masthead--item-border-color--base: var(--pf-t--global--border--color--default);
|
83
53
|
--pf-v5-c-masthead--c-context-selector--Width: auto;
|
84
54
|
--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
|
85
55
|
--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
|
@@ -98,12 +68,34 @@
|
|
98
68
|
--pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
|
99
69
|
--pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
|
100
70
|
--pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
|
101
|
-
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-
|
71
|
+
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
|
102
72
|
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
|
103
|
-
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-
|
73
|
+
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
|
104
74
|
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
|
105
|
-
--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-
|
75
|
+
--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
|
106
76
|
--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
|
77
|
+
}
|
78
|
+
|
79
|
+
.pf-v5-c-masthead {
|
80
|
+
--pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
|
81
|
+
--pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
|
82
|
+
--pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
|
83
|
+
--pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
|
84
|
+
--pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
|
85
|
+
--pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
|
86
|
+
--pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
|
87
|
+
--pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
|
88
|
+
--pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
|
89
|
+
--pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
|
90
|
+
--pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
|
91
|
+
--pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
|
92
|
+
--pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
|
93
|
+
--pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
|
94
|
+
--pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
|
95
|
+
--pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
|
96
|
+
--pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
|
97
|
+
--pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
|
98
|
+
--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
|
107
99
|
--pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
|
108
100
|
--pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
|
109
101
|
--pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
|
@@ -121,7 +113,6 @@
|
|
121
113
|
--pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
|
122
114
|
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
|
123
115
|
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
|
124
|
-
color: var(--pf-v5-global--Color--100);
|
125
116
|
position: relative;
|
126
117
|
display: grid;
|
127
118
|
grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
|
@@ -132,7 +123,7 @@
|
|
132
123
|
background-color: var(--pf-v5-c-masthead--BackgroundColor);
|
133
124
|
}
|
134
125
|
@media screen and (min-width: 768px) {
|
135
|
-
|
126
|
+
:where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
|
136
127
|
--pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
|
137
128
|
--pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
|
138
129
|
--pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
|
@@ -157,25 +148,7 @@
|
|
157
148
|
--pf-v5-c-masthead--inset: var(--pf-v5-c-masthead--xl--inset);
|
158
149
|
}
|
159
150
|
}
|
160
|
-
.pf-v5-c-masthead.pf-m-light {
|
161
|
-
color: var(--pf-v5-global--Color--100);
|
162
|
-
--pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light--BackgroundColor);
|
163
|
-
--pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light__main--BorderBottomColor);
|
164
|
-
}
|
165
|
-
.pf-v5-c-masthead.pf-m-light-200 {
|
166
|
-
color: var(--pf-v5-global--Color--100);
|
167
|
-
--pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light-200--BackgroundColor);
|
168
|
-
--pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
|
169
|
-
}
|
170
151
|
.pf-v5-c-masthead .pf-v5-c-toolbar {
|
171
|
-
--pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
|
172
|
-
--pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
|
173
|
-
--pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
|
174
|
-
--pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
|
175
|
-
--pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
|
176
|
-
--pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
|
177
|
-
--pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
|
178
|
-
--pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
|
179
152
|
width: 100%;
|
180
153
|
}
|
181
154
|
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
|
@@ -191,27 +164,10 @@
|
|
191
164
|
border-block-start: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
|
192
165
|
box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
|
193
166
|
}
|
194
|
-
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
|
195
|
-
--pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
|
196
|
-
--pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
|
197
|
-
--pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
|
198
|
-
--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
|
199
|
-
}
|
200
|
-
.pf-v5-c-masthead .pf-v5-c-context-selector {
|
201
|
-
--pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
|
202
|
-
--pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
|
203
|
-
--pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
|
204
|
-
--pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
|
205
|
-
}
|
206
167
|
.pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height {
|
207
168
|
--pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
|
208
169
|
--pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
|
209
170
|
}
|
210
|
-
.pf-v5-c-masthead .pf-v5-c-dropdown {
|
211
|
-
--pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
|
212
|
-
--pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
|
213
|
-
--pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
|
214
|
-
}
|
215
171
|
.pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height {
|
216
172
|
--pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
|
217
173
|
--pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
|
@@ -219,9 +175,6 @@
|
|
219
175
|
.pf-v5-c-masthead .pf-v5-c-nav {
|
220
176
|
align-self: stretch;
|
221
177
|
}
|
222
|
-
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
|
223
|
-
color: var(--pf-v5-c-button--m-plain--Color);
|
224
|
-
}
|
225
178
|
|
226
179
|
.pf-v5-c-masthead__main {
|
227
180
|
position: relative;
|
@@ -248,12 +201,18 @@
|
|
248
201
|
--pf-v5-c-masthead__main--MarginRight: 0;
|
249
202
|
}
|
250
203
|
|
204
|
+
.pf-v5-c-masthead__logo {
|
205
|
+
display: flex;
|
206
|
+
gap: var(--pf-t--global--spacer--md);
|
207
|
+
}
|
208
|
+
|
251
209
|
.pf-v5-c-masthead__content {
|
252
210
|
display: flex;
|
253
211
|
flex-grow: 1;
|
254
212
|
flex-shrink: 1;
|
255
213
|
grid-column: var(--pf-v5-c-masthead__content--GridColumn);
|
256
214
|
grid-column-end: -1;
|
215
|
+
gap: var(--pf-v5-c-masthead__content--Gap);
|
257
216
|
align-items: center;
|
258
217
|
align-self: stretch;
|
259
218
|
order: var(--pf-v5-c-masthead__content--Order);
|
@@ -649,17 +608,4 @@
|
|
649
608
|
.pf-v5-c-masthead.pf-m-inset-2xl-on-2xl {
|
650
609
|
--pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
|
651
610
|
}
|
652
|
-
}
|
653
|
-
|
654
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
|
655
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
656
|
-
}
|
657
|
-
|
658
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
|
659
|
-
--pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
|
660
|
-
--pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
|
661
|
-
color: var(--pf-v5-global--Color--100);
|
662
|
-
}
|
663
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
|
664
|
-
--pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--palette--black-1000);
|
665
611
|
}
|
@@ -6,13 +6,10 @@ declare const _default: {
|
|
6
6
|
"masthead": "pf-v5-c-masthead",
|
7
7
|
"mastheadBrand": "pf-v5-c-masthead__brand",
|
8
8
|
"mastheadContent": "pf-v5-c-masthead__content",
|
9
|
+
"mastheadLogo": "pf-v5-c-masthead__logo",
|
9
10
|
"mastheadMain": "pf-v5-c-masthead__main",
|
10
11
|
"mastheadToggle": "pf-v5-c-masthead__toggle",
|
11
|
-
"menuToggle": "pf-v5-c-menu-toggle",
|
12
12
|
"modifiers": {
|
13
|
-
"light_200": "pf-m-light-200",
|
14
|
-
"light": "pf-m-light",
|
15
|
-
"plain": "pf-m-plain",
|
16
13
|
"resizeObserver": "pf-m-resize-observer",
|
17
14
|
"fullHeight": "pf-m-full-height",
|
18
15
|
"horizontal": "pf-m-horizontal",
|
@@ -66,8 +63,6 @@ declare const _default: {
|
|
66
63
|
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
67
64
|
},
|
68
65
|
"nav": "pf-v5-c-nav",
|
69
|
-
"page": "pf-v5-c-page",
|
70
|
-
"themeDark": "pf-v5-theme-dark",
|
71
66
|
"toolbar": "pf-v5-c-toolbar",
|
72
67
|
"toolbarContentSection": "pf-v5-c-toolbar__content-section",
|
73
68
|
"toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
|
@@ -8,13 +8,10 @@ exports.default = {
|
|
8
8
|
"masthead": "pf-v5-c-masthead",
|
9
9
|
"mastheadBrand": "pf-v5-c-masthead__brand",
|
10
10
|
"mastheadContent": "pf-v5-c-masthead__content",
|
11
|
+
"mastheadLogo": "pf-v5-c-masthead__logo",
|
11
12
|
"mastheadMain": "pf-v5-c-masthead__main",
|
12
13
|
"mastheadToggle": "pf-v5-c-masthead__toggle",
|
13
|
-
"menuToggle": "pf-v5-c-menu-toggle",
|
14
14
|
"modifiers": {
|
15
|
-
"light_200": "pf-m-light-200",
|
16
|
-
"light": "pf-m-light",
|
17
|
-
"plain": "pf-m-plain",
|
18
15
|
"resizeObserver": "pf-m-resize-observer",
|
19
16
|
"fullHeight": "pf-m-full-height",
|
20
17
|
"horizontal": "pf-m-horizontal",
|
@@ -68,8 +65,6 @@ exports.default = {
|
|
68
65
|
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
69
66
|
},
|
70
67
|
"nav": "pf-v5-c-nav",
|
71
|
-
"page": "pf-v5-c-page",
|
72
|
-
"themeDark": "pf-v5-theme-dark",
|
73
68
|
"toolbar": "pf-v5-c-toolbar",
|
74
69
|
"toolbarContentSection": "pf-v5-c-toolbar__content-section",
|
75
70
|
"toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
|
@@ -6,13 +6,10 @@ export default {
|
|
6
6
|
"masthead": "pf-v5-c-masthead",
|
7
7
|
"mastheadBrand": "pf-v5-c-masthead__brand",
|
8
8
|
"mastheadContent": "pf-v5-c-masthead__content",
|
9
|
+
"mastheadLogo": "pf-v5-c-masthead__logo",
|
9
10
|
"mastheadMain": "pf-v5-c-masthead__main",
|
10
11
|
"mastheadToggle": "pf-v5-c-masthead__toggle",
|
11
|
-
"menuToggle": "pf-v5-c-menu-toggle",
|
12
12
|
"modifiers": {
|
13
|
-
"light_200": "pf-m-light-200",
|
14
|
-
"light": "pf-m-light",
|
15
|
-
"plain": "pf-m-plain",
|
16
13
|
"resizeObserver": "pf-m-resize-observer",
|
17
14
|
"fullHeight": "pf-m-full-height",
|
18
15
|
"horizontal": "pf-m-horizontal",
|
@@ -66,8 +63,6 @@ export default {
|
|
66
63
|
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
67
64
|
},
|
68
65
|
"nav": "pf-v5-c-nav",
|
69
|
-
"page": "pf-v5-c-page",
|
70
|
-
"themeDark": "pf-v5-theme-dark",
|
71
66
|
"toolbar": "pf-v5-c-toolbar",
|
72
67
|
"toolbarContentSection": "pf-v5-c-toolbar__content-section",
|
73
68
|
"toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
|
@@ -1,36 +1,40 @@
|
|
1
1
|
.pf-v5-c-menu-toggle {
|
2
|
-
--pf-v5-c-menu-toggle--BorderRadius:
|
3
|
-
--pf-v5-c-menu-toggle--PaddingTop: var(--pf-
|
4
|
-
--pf-v5-c-menu-toggle--PaddingRight: var(--pf-
|
5
|
-
--pf-v5-c-menu-toggle--PaddingBottom: var(--pf-
|
6
|
-
--pf-v5-c-menu-toggle--PaddingLeft: var(--pf-
|
7
|
-
--pf-v5-c-menu-toggle--FontSize: var(--pf-
|
8
|
-
--pf-v5-c-menu-toggle--Color: var(--pf-
|
9
|
-
--pf-v5-c-menu-toggle--LineHeight: var(--pf-
|
10
|
-
--pf-v5-c-menu-toggle--BackgroundColor:
|
11
|
-
--pf-v5-c-menu-toggle--
|
12
|
-
--pf-v5-c-menu-toggle--
|
13
|
-
--pf-v5-c-menu-toggle--
|
14
|
-
--pf-v5-c-menu-toggle--
|
15
|
-
--pf-v5-c-menu-toggle--
|
16
|
-
--pf-v5-c-menu-toggle--
|
17
|
-
--pf-v5-c-menu-toggle--before--
|
18
|
-
--pf-v5-c-menu-toggle--before--
|
19
|
-
--pf-v5-c-menu-toggle--
|
20
|
-
--pf-v5-c-menu-toggle--
|
2
|
+
--pf-v5-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
|
3
|
+
--pf-v5-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
|
4
|
+
--pf-v5-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
|
5
|
+
--pf-v5-c-menu-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
|
6
|
+
--pf-v5-c-menu-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
|
7
|
+
--pf-v5-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--md);
|
8
|
+
--pf-v5-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
|
9
|
+
--pf-v5-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
|
10
|
+
--pf-v5-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
11
|
+
--pf-v5-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
|
12
|
+
--pf-v5-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
|
13
|
+
--pf-v5-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
|
14
|
+
--pf-v5-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
15
|
+
--pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--active);
|
16
|
+
--pf-v5-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--active);
|
17
|
+
--pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
|
18
|
+
--pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
|
19
|
+
--pf-v5-c-menu-toggle--before--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
|
20
|
+
--pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
|
21
|
+
--pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-t--global--border--color--default);
|
22
|
+
--pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-t--global--border--color--default);
|
23
|
+
--pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-t--global--border--color--default);
|
24
|
+
--pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-t--global--border--color--default);
|
21
25
|
--pf-v5-c-menu-toggle--hover--BackgroundColor: transparent;
|
22
|
-
--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-
|
23
|
-
--pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-
|
26
|
+
--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
|
27
|
+
--pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
|
24
28
|
--pf-v5-c-menu-toggle--focus--BackgroundColor: transparent;
|
25
|
-
--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-
|
26
|
-
--pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-
|
29
|
+
--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
|
30
|
+
--pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
|
27
31
|
--pf-v5-c-menu-toggle--active--BackgroundColor: transparent;
|
28
|
-
--pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-
|
29
|
-
--pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-
|
32
|
+
--pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
|
33
|
+
--pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
|
30
34
|
--pf-v5-c-menu-toggle--m-expanded--Color: var(--pf-v5-global--Color--100);
|
31
35
|
--pf-v5-c-menu-toggle--m-expanded--BackgroundColor: transparent;
|
32
|
-
--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-
|
33
|
-
--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-
|
36
|
+
--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
|
37
|
+
--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
|
34
38
|
--pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--100);
|
35
39
|
--pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
|
36
40
|
--pf-v5-c-menu-toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
|
@@ -63,20 +67,19 @@
|
|
63
67
|
--pf-v5-c-menu-toggle--m-plain--active--Color: var(--pf-v5-global--Color--100);
|
64
68
|
--pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
|
65
69
|
--pf-v5-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-v5-global--Color--100);
|
66
|
-
--pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-
|
67
|
-
--pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-
|
68
|
-
--pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-
|
70
|
+
--pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
|
71
|
+
--pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
|
72
|
+
--pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-t--global--spacer--sm);
|
69
73
|
--pf-v5-c-menu-toggle__controls--MarginLeft: auto;
|
70
74
|
--pf-v5-c-menu-toggle__controls--MarginRight: 0;
|
71
|
-
--pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-
|
72
|
-
--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-
|
75
|
+
--pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
76
|
+
--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
73
77
|
--pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
74
78
|
--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
75
79
|
--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
76
80
|
--pf-v5-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
77
81
|
--pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
|
78
82
|
--pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
79
|
-
--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
|
80
83
|
--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
|
81
84
|
--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
|
82
85
|
--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
|
@@ -86,7 +89,7 @@
|
|
86
89
|
--pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
87
90
|
--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
|
88
91
|
--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
|
89
|
-
--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-
|
92
|
+
--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-t--global--spacer--sm);
|
90
93
|
--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
|
91
94
|
--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
92
95
|
--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
|
@@ -109,13 +112,13 @@
|
|
109
112
|
--pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
|
110
113
|
--pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
|
111
114
|
--pf-v5-c-menu-toggle__button--AlignSelf: baseline;
|
112
|
-
--pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-
|
113
|
-
--pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-
|
114
|
-
--pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-
|
115
|
-
--pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-
|
116
|
-
--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-
|
117
|
-
--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-
|
118
|
-
--pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-
|
115
|
+
--pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-t--global--spacer--sm);
|
116
|
+
--pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-t--global--spacer--sm);
|
117
|
+
--pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-t--global--spacer--sm);
|
118
|
+
--pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-t--global--spacer--sm);
|
119
|
+
--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
|
120
|
+
--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
|
121
|
+
--pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
|
119
122
|
--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
|
120
123
|
position: relative;
|
121
124
|
display: inline-flex;
|
@@ -131,9 +134,11 @@
|
|
131
134
|
cursor: pointer;
|
132
135
|
background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
|
133
136
|
border: 0;
|
137
|
+
}
|
138
|
+
.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle::before {
|
134
139
|
border-radius: var(--pf-v5-c-menu-toggle--BorderRadius);
|
135
140
|
}
|
136
|
-
.pf-v5-c-menu-toggle::before
|
141
|
+
.pf-v5-c-menu-toggle::before {
|
137
142
|
position: absolute;
|
138
143
|
inset-block-start: 0;
|
139
144
|
inset-block-end: 0;
|
@@ -141,20 +146,10 @@
|
|
141
146
|
inset-inline-end: 0;
|
142
147
|
pointer-events: none;
|
143
148
|
content: "";
|
144
|
-
|
145
|
-
.pf-v5-c-menu-toggle::before {
|
146
|
-
border-style: solid;
|
147
|
-
border-block-start-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor);
|
148
|
-
border-block-start-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth);
|
149
|
-
border-block-end-color: var(--pf-v5-c-menu-toggle--before--BorderBottomColor);
|
150
|
-
border-block-end-width: var(--pf-v5-c-menu-toggle--before--BorderBottomWidth);
|
151
|
-
border-inline-start-color: var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
|
152
|
-
border-inline-start-width: var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
|
153
|
-
border-inline-end-color: var(--pf-v5-c-menu-toggle--before--BorderRightColor);
|
154
|
-
border-inline-end-width: var(--pf-v5-c-menu-toggle--before--BorderRightWidth);
|
149
|
+
border: var(--pf-v5-c-menu-toggle--BorderWidth) solid var(--pf-v5-c-menu-toggle--BorderColor);
|
155
150
|
}
|
156
151
|
.pf-v5-c-menu-toggle::after {
|
157
|
-
border-block-end: var(--pf-v5-c-menu-toggle--after--
|
152
|
+
border-block-end: var(--pf-v5-c-menu-toggle--after--BorderWidth) solid var(--pf-v5-c-menu-toggle--after--BorderColor);
|
158
153
|
}
|
159
154
|
.pf-v5-c-menu-toggle.pf-m-primary {
|
160
155
|
--pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
|
@@ -199,15 +194,11 @@
|
|
199
194
|
--pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
|
200
195
|
--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
|
201
196
|
}
|
202
|
-
.pf-v5-c-menu-toggle.pf-m-plain {
|
203
|
-
--pf-v5-c-menu-toggle__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color);
|
204
|
-
}
|
205
197
|
.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
|
206
198
|
--pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-plain--PaddingRight);
|
207
199
|
--pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-plain--PaddingLeft);
|
208
200
|
--pf-v5-c-menu-toggle--disabled--BackgroundColor: transparent;
|
209
201
|
display: inline-block;
|
210
|
-
color: var(--pf-v5-c-menu-toggle--m-plain--Color);
|
211
202
|
}
|
212
203
|
.pf-v5-c-menu-toggle.pf-m-full-height {
|
213
204
|
--pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
|
@@ -222,25 +213,12 @@
|
|
222
213
|
height: 100%;
|
223
214
|
}
|
224
215
|
.pf-v5-c-menu-toggle:hover {
|
225
|
-
--pf-v5-c-menu-toggle--
|
226
|
-
--pf-v5-c-menu-toggle--
|
227
|
-
|
228
|
-
|
229
|
-
--pf-v5-c-menu-toggle--
|
230
|
-
|
231
|
-
.pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:focus-within {
|
232
|
-
--pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--focus--BackgroundColor);
|
233
|
-
--pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth);
|
234
|
-
--pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomColor);
|
235
|
-
--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color);
|
236
|
-
--pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--focus--Color);
|
237
|
-
}
|
238
|
-
.pf-v5-c-menu-toggle:active {
|
239
|
-
--pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--active--BackgroundColor);
|
240
|
-
--pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--active--after--BorderBottomWidth);
|
241
|
-
--pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--active--after--BorderBottomColor);
|
242
|
-
--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color);
|
243
|
-
--pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--active--Color);
|
216
|
+
--pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--hover--BorderColor);
|
217
|
+
--pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--hover--BorderWidth);
|
218
|
+
}
|
219
|
+
.pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:active {
|
220
|
+
--pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--active--BorderColor);
|
221
|
+
--pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--active--BorderWidth);
|
244
222
|
}
|
245
223
|
.pf-v5-c-menu-toggle.pf-m-expanded {
|
246
224
|
--pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--m-expanded--Color);
|
@@ -256,7 +234,7 @@
|
|
256
234
|
--pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
|
257
235
|
pointer-events: none;
|
258
236
|
}
|
259
|
-
.pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle
|
237
|
+
.pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
|
260
238
|
border: 0;
|
261
239
|
}
|
262
240
|
.pf-v5-c-menu-toggle.pf-m-typeahead {
|
@@ -419,7 +397,7 @@
|
|
419
397
|
|
420
398
|
.pf-v5-c-menu-toggle__toggle-icon {
|
421
399
|
margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
|
422
|
-
color: var(--pf-v5-c-menu-toggle__toggle-icon--Color
|
400
|
+
color: var(--pf-v5-c-menu-toggle__toggle-icon--Color);
|
423
401
|
}
|
424
402
|
|
425
403
|
:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
|