@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CODE_OF_CONDUCT.md +2 -1
- package/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/base/_globals.scss +13 -13
- package/base/_variables.scss +5 -0
- package/base/patternfly-globals.css +12 -13
- package/base/patternfly-variables.css +860 -0
- package/base/tokens/_tokens-dark.scss +331 -0
- package/base/tokens/_tokens-default.scss +379 -0
- package/base/tokens/_tokens-font.scss +96 -0
- package/base/tokens/_tokens-palette.scss +75 -0
- package/components/Alert/alert-group.css +20 -16
- package/components/Alert/alert-group.scss +20 -16
- package/components/Alert/alert.css +57 -84
- package/components/Alert/alert.scss +60 -78
- package/components/Button/button.css +142 -179
- package/components/Button/button.scss +161 -141
- package/components/Check/check.css +8 -10
- package/components/Check/check.scss +10 -15
- package/components/Content/content.css +67 -67
- package/components/Content/content.scss +68 -68
- package/components/Dropdown/dropdown.css +3 -1
- package/components/Dropdown/dropdown.scss +6 -2
- package/components/Masthead/masthead.css +49 -103
- package/components/Masthead/masthead.scss +105 -132
- package/components/Menu/menu.css +0 -3
- package/components/Menu/menu.scss +3 -7
- package/components/MenuToggle/menu-toggle.css +59 -80
- package/components/MenuToggle/menu-toggle.scss +65 -89
- package/components/Nav/nav.css +42 -40
- package/components/Nav/nav.scss +42 -42
- package/components/NotificationBadge/notification-badge.css +56 -81
- package/components/NotificationBadge/notification-badge.scss +60 -97
- package/components/Page/page.css +80 -70
- package/components/Page/page.scss +80 -68
- package/components/Radio/radio.css +10 -13
- package/components/Radio/radio.scss +11 -17
- package/components/Switch/switch.css +1 -1
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table-grid.css +8 -8
- package/components/Table/table-grid.scss +8 -8
- package/components/Table/table.css +92 -95
- package/components/Table/table.scss +94 -103
- package/components/Toolbar/toolbar.css +5 -11
- package/components/Toolbar/toolbar.scss +7 -19
- package/docs/components/Alert/examples/Alert.md +1 -1
- package/docs/components/Brand/examples/Brand.md +32 -75
- package/docs/components/Card/examples/Card.md +2 -110
- package/docs/components/Masthead/examples/masthead.md +7 -54
- package/docs/components/MenuToggle/examples/MenuToggle.md +42 -42
- package/docs/components/Nav/examples/Navigation.css +2 -1
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
- package/docs/components/Toolbar/examples/Toolbar.md +9 -11
- package/docs/demos/AboutModal/examples/AboutModal.md +83 -8
- package/docs/demos/Alert/examples/Alert.md +249 -24
- package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
- package/docs/demos/Banner/examples/Banner.md +168 -16
- package/docs/demos/CardView/examples/CardView.md +83 -8
- package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
- package/docs/demos/Dashboard/examples/Dashboard.md +83 -8
- package/docs/demos/DataList/examples/DataList.md +332 -32
- package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
- package/docs/demos/Drawer/examples/Drawer.md +415 -40
- package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
- package/docs/demos/Masthead/examples/Masthead.md +742 -67
- package/docs/demos/Modal/examples/Modal.md +498 -48
- package/docs/demos/Nav/examples/Nav.md +664 -64
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +415 -40
- package/docs/demos/Page/examples/Page.md +747 -72
- package/docs/demos/Page/examples/Penta.md +746 -0
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +581 -56
- package/docs/demos/Skeleton/examples/Skeleton.md +83 -8
- package/docs/demos/Table/examples/Table.md +1245 -120
- package/docs/demos/Tabs/examples/Tabs.md +498 -48
- package/docs/demos/Toolbar/examples/Toolbar.md +166 -16
- package/docs/demos/Wizard/examples/Wizard.md +747 -72
- package/package.json +4 -3
- package/patternfly-base-no-globals-theme-dark-unversioned.css +860 -0
- package/patternfly-base-no-globals.css +860 -0
- package/patternfly-base-theme-dark-unversioned.css +872 -13
- package/patternfly-base.css +872 -13
- package/patternfly-no-globals.css +1609 -897
- package/patternfly-theme-dark-unversioned.css +1621 -910
- package/patternfly.css +1621 -910
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
- package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
- package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
- package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
- package/assets/images/pf_logo_white.hbs +0 -35
- package/assets/images/pf_logo_white.svg +0 -38
- package/components/Alert/themes/dark/alert.scss +0 -17
- package/components/Masthead/themes/dark/masthead.scss +0 -14
- package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
- package/docs/components/Brand/examples/Brand.css +0 -12
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
|
@@ -2,54 +2,14 @@
|
|
|
2
2
|
$pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
|
|
3
3
|
$pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
--#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
|
|
7
|
-
--#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
|
|
8
|
-
--#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-stack__main--MinHeight);
|
|
9
|
-
--#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
|
|
10
|
-
--#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-stack__main--FlexBasis);
|
|
11
|
-
--#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-stack__main--PaddingTop);
|
|
12
|
-
--#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-stack__main--PaddingBottom);
|
|
13
|
-
--#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-stack__main--MarginRight);
|
|
14
|
-
--#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-stack__main--before--BorderBottom);
|
|
15
|
-
--#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
|
|
16
|
-
--#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-stack__content--MinHeight);
|
|
17
|
-
--#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
|
|
18
|
-
--#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-stack__content--PaddingTop);
|
|
19
|
-
--#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-stack__content--PaddingBottom);
|
|
20
|
-
--#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-stack__content--MarginLeft);
|
|
21
|
-
--#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight);
|
|
22
|
-
--#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@mixin pf-v5-c-masthead--m-display-inline {
|
|
26
|
-
--#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
|
|
27
|
-
--#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
|
|
28
|
-
--#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-inline__main--MinHeight);
|
|
29
|
-
--#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
|
|
30
|
-
--#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-inline__main--FlexBasis);
|
|
31
|
-
--#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-inline__main--PaddingTop);
|
|
32
|
-
--#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-inline__main--PaddingBottom);
|
|
33
|
-
--#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-inline__main--MarginRight);
|
|
34
|
-
--#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-inline__main--BorderBottom);
|
|
35
|
-
--#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
|
|
36
|
-
--#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-inline__content--MinHeight);
|
|
37
|
-
--#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
|
|
38
|
-
--#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-inline__content--PaddingTop);
|
|
39
|
-
--#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-inline__content--PaddingBottom);
|
|
40
|
-
--#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-inline__content--MarginLeft);
|
|
41
|
-
--#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight);
|
|
42
|
-
--#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.#{$masthead} {
|
|
5
|
+
:root {
|
|
46
6
|
--#{$masthead}--PaddingLeft: var(--#{$masthead}--inset);
|
|
47
7
|
--#{$masthead}--PaddingRight: var(--#{$masthead}--inset);
|
|
48
|
-
--#{$masthead}--BackgroundColor: var(
|
|
8
|
+
--#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
49
9
|
|
|
50
10
|
// Insets
|
|
51
|
-
--#{$masthead}--inset: var(
|
|
52
|
-
--#{$masthead}--xl--inset: var(
|
|
11
|
+
--#{$masthead}--inset: var(--pf-t--global--spacer--md); // match page insets
|
|
12
|
+
--#{$masthead}--xl--inset: var(--pf-t--global--spacer--lg); // match page insets
|
|
53
13
|
|
|
54
14
|
// Stack
|
|
55
15
|
--#{$masthead}--m-display-stack--GridTemplateColumns: max-content 1fr;
|
|
@@ -57,16 +17,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
57
17
|
--#{$masthead}--m-display-stack__main--MinHeight: #{pf-size-prem(70px)};
|
|
58
18
|
--#{$masthead}--m-display-stack__main--Order: -1;
|
|
59
19
|
--#{$masthead}--m-display-stack__main--FlexBasis: 100%;
|
|
60
|
-
--#{$masthead}--m-display-stack__main--PaddingTop: var(
|
|
61
|
-
--#{$masthead}--m-display-stack__main--PaddingBottom: var(
|
|
20
|
+
--#{$masthead}--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
21
|
+
--#{$masthead}--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
62
22
|
--#{$masthead}--m-display-stack__main--MarginRight: 0;
|
|
63
23
|
--#{$masthead}--m-display-stack__main--before--BorderBottom: var(--#{$masthead}__main--before--BorderBottomWidth) solid var(--#{$masthead}__main--before--BorderBottomColor);
|
|
64
24
|
--#{$masthead}--m-display-stack__toggle--GridColumn: 1;
|
|
65
25
|
--#{$masthead}--m-display-stack__content--GridColumn: 2;
|
|
66
26
|
--#{$masthead}--m-display-stack__content--MinHeight: auto;
|
|
67
27
|
--#{$masthead}--m-display-stack__content--Order: 1;
|
|
68
|
-
--#{$masthead}--m-display-stack__content--PaddingTop:
|
|
69
|
-
--#{$masthead}--m-display-stack__content--PaddingBottom:
|
|
28
|
+
--#{$masthead}--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
29
|
+
--#{$masthead}--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
70
30
|
--#{$masthead}--m-display-stack__content--MarginLeft: 0;
|
|
71
31
|
--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--#{$masthead}--inset) * -1);
|
|
72
32
|
--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--#{$masthead}--inset) * -1);
|
|
@@ -79,7 +39,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
79
39
|
--#{$masthead}--m-display-inline__main--FlexBasis: auto;
|
|
80
40
|
--#{$masthead}--m-display-inline__main--PaddingTop: 0;
|
|
81
41
|
--#{$masthead}--m-display-inline__main--PaddingBottom: 0;
|
|
82
|
-
--#{$masthead}--m-display-inline__main--MarginRight: calc(var(
|
|
42
|
+
--#{$masthead}--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2); // split gutter
|
|
83
43
|
--#{$masthead}--m-display-inline__main--BorderBottom: 0;
|
|
84
44
|
--#{$masthead}--m-display-inline__toggle--GridColumn: 1;
|
|
85
45
|
--#{$masthead}--m-display-inline__content--GridColumn: 3;
|
|
@@ -87,34 +47,29 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
87
47
|
--#{$masthead}--m-display-inline__content--Order: 0;
|
|
88
48
|
--#{$masthead}--m-display-inline__content--PaddingTop: 0;
|
|
89
49
|
--#{$masthead}--m-display-inline__content--PaddingBottom: 0;
|
|
90
|
-
--#{$masthead}--m-display-inline__content--MarginLeft: calc(var(
|
|
50
|
+
--#{$masthead}--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2); // split gutter
|
|
91
51
|
--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
|
|
92
52
|
--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
|
|
93
53
|
|
|
94
54
|
// Main border
|
|
95
55
|
--#{$masthead}__main--before--Right: calc(var(--#{$masthead}--inset) * -1);
|
|
96
56
|
--#{$masthead}__main--before--Left: calc(var(--#{$masthead}--inset) * -1);
|
|
97
|
-
--#{$masthead}__main--before--BorderBottomWidth: var(
|
|
98
|
-
--#{$masthead}__main--before--BorderBottomColor: var(
|
|
57
|
+
--#{$masthead}__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
58
|
+
--#{$masthead}__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
99
59
|
|
|
100
|
-
//
|
|
101
|
-
--#{$masthead}
|
|
102
|
-
--#{$masthead}__toggle--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1); // offset by button padding
|
|
103
|
-
--#{$masthead}__toggle--c-button--FontSize: var(--#{$pf-global}--FontSize--2xl);
|
|
104
|
-
|
|
105
|
-
// Light 100
|
|
106
|
-
--#{$masthead}--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
|
|
107
|
-
--#{$masthead}--m-light__main--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
|
|
60
|
+
// Content
|
|
61
|
+
--#{$masthead}__content--Gap: var(--pf-t--global--spacer--sm);
|
|
108
62
|
|
|
109
|
-
//
|
|
110
|
-
--#{$masthead}--
|
|
111
|
-
--#{$masthead}--
|
|
63
|
+
// Toggle
|
|
64
|
+
--#{$masthead}__toggle--MarginRight: var(--pf-t--global--spacer--sm);
|
|
65
|
+
--#{$masthead}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset by button padding
|
|
66
|
+
--#{$masthead}__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
|
112
67
|
|
|
113
68
|
// Toolbar item
|
|
114
69
|
--#{$masthead}--c-toolbar__item--Display: flex;
|
|
115
70
|
|
|
116
71
|
// Borders
|
|
117
|
-
--#{$masthead}--item-border-color--base: var(
|
|
72
|
+
--#{$masthead}--item-border-color--base: var(--pf-t--global--border--color--default);
|
|
118
73
|
|
|
119
74
|
// Context selector
|
|
120
75
|
--#{$masthead}--c-context-selector--Width: auto;
|
|
@@ -141,18 +96,87 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
141
96
|
--#{$masthead}--c-toolbar--AlignItems--base: center;
|
|
142
97
|
--#{$masthead}--c-toolbar__content--PaddingRight: 0;
|
|
143
98
|
--#{$masthead}--c-toolbar__content--PaddingLeft: 0;
|
|
144
|
-
--#{$masthead}--c-toolbar__expandable-content--PaddingTop: var(
|
|
99
|
+
--#{$masthead}--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
145
100
|
--#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
|
|
146
|
-
--#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(
|
|
101
|
+
--#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
147
102
|
--#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
|
|
148
|
-
--#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(
|
|
103
|
+
--#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
|
|
149
104
|
--#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@mixin pf-v5-c-masthead--m-display-stack {
|
|
108
|
+
--#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
|
|
109
|
+
--#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
|
|
110
|
+
--#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-stack__main--MinHeight);
|
|
111
|
+
--#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
|
|
112
|
+
--#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-stack__main--FlexBasis);
|
|
113
|
+
--#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-stack__main--PaddingTop);
|
|
114
|
+
--#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-stack__main--PaddingBottom);
|
|
115
|
+
--#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-stack__main--MarginRight);
|
|
116
|
+
--#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-stack__main--before--BorderBottom);
|
|
117
|
+
--#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
|
|
118
|
+
--#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-stack__content--MinHeight);
|
|
119
|
+
--#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
|
|
120
|
+
--#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-stack__content--PaddingTop);
|
|
121
|
+
--#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-stack__content--PaddingBottom);
|
|
122
|
+
--#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-stack__content--MarginLeft);
|
|
123
|
+
--#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight);
|
|
124
|
+
--#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@mixin pf-v5-c-masthead--m-display-inline {
|
|
128
|
+
--#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
|
|
129
|
+
--#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
|
|
130
|
+
--#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-inline__main--MinHeight);
|
|
131
|
+
--#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
|
|
132
|
+
--#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-inline__main--FlexBasis);
|
|
133
|
+
--#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-inline__main--PaddingTop);
|
|
134
|
+
--#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-inline__main--PaddingBottom);
|
|
135
|
+
--#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-inline__main--MarginRight);
|
|
136
|
+
--#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-inline__main--BorderBottom);
|
|
137
|
+
--#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
|
|
138
|
+
--#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-inline__content--MinHeight);
|
|
139
|
+
--#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
|
|
140
|
+
--#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-inline__content--PaddingTop);
|
|
141
|
+
--#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-inline__content--PaddingBottom);
|
|
142
|
+
--#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-inline__content--MarginLeft);
|
|
143
|
+
--#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight);
|
|
144
|
+
--#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.#{$masthead} {
|
|
148
|
+
// Toolbar
|
|
149
|
+
--#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
|
|
150
|
+
--#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
|
|
151
|
+
--#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
|
|
152
|
+
--#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
|
|
153
|
+
--#{$toolbar}__expandable-content--PaddingTop: var(--#{$masthead}--c-toolbar__expandable-content--PaddingTop);
|
|
154
|
+
--#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--c-toolbar__expandable-content--PaddingRight);
|
|
155
|
+
--#{$toolbar}__expandable-content--PaddingBottom: var(--#{$masthead}--c-toolbar__expandable-content--PaddingBottom);
|
|
156
|
+
--#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--c-toolbar__expandable-content--PaddingLeft);
|
|
157
|
+
|
|
158
|
+
// Context selector
|
|
159
|
+
--#{$context-selector}--Width: var(--#{$masthead}--c-context-selector--Width);
|
|
160
|
+
--#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector__toggle--BorderTopColor);
|
|
161
|
+
--#{$context-selector}__toggle--BorderRightColor: var(--#{$masthead}--c-context-selector__toggle--BorderRightColor);
|
|
162
|
+
--#{$context-selector}__toggle--BorderLeftColor: var(--#{$masthead}--c-context-selector__toggle--BorderLeftColor);
|
|
163
|
+
|
|
164
|
+
// Dropdown
|
|
165
|
+
--#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderTopColor);
|
|
166
|
+
--#{$dropdown}__toggle--before--BorderRightColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderRightColor);
|
|
167
|
+
--#{$dropdown}__toggle--before--BorderLeftColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderLeftColor);
|
|
168
|
+
|
|
169
|
+
// Menu toggle
|
|
170
|
+
--#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--before--BorderTopColor);
|
|
171
|
+
--#{$menu-toggle}--before--BorderRightColor: var(--#{$masthead}--c-menu-toggle--before--BorderRightColor);
|
|
172
|
+
--#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
|
|
173
|
+
--#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
|
|
150
174
|
|
|
151
175
|
// Set layout to stack by default
|
|
152
176
|
@include pf-v5-c-masthead--m-display-stack;
|
|
153
177
|
|
|
154
178
|
// Set layout to inline at medium breakpoint
|
|
155
|
-
|
|
179
|
+
:where(:not(.pf-m-resize-observer)) & {
|
|
156
180
|
@media screen and (min-width: $pf-v5-global--breakpoint--md) {
|
|
157
181
|
@include pf-v5-c-masthead--m-display-inline;
|
|
158
182
|
}
|
|
@@ -162,8 +186,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
162
186
|
--#{$masthead}--inset: var(--#{$masthead}--xl--inset);
|
|
163
187
|
}
|
|
164
188
|
|
|
165
|
-
@include pf-v5-t-dark; // force the container to follow the dark theme
|
|
166
|
-
|
|
167
189
|
position: relative;
|
|
168
190
|
display: grid;
|
|
169
191
|
grid-template-columns: var(--#{$masthead}--GridTemplateColumns);
|
|
@@ -173,30 +195,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
173
195
|
padding-inline-end: var(--#{$masthead}--PaddingRight);
|
|
174
196
|
background-color: var(--#{$masthead}--BackgroundColor);
|
|
175
197
|
|
|
176
|
-
&.pf-m-light {
|
|
177
|
-
@include pf-v5-t-light;
|
|
178
|
-
|
|
179
|
-
--#{$masthead}--BackgroundColor: var(--#{$masthead}--m-light--BackgroundColor);
|
|
180
|
-
--#{$masthead}__main--BorderBottomColor: var(--#{$masthead}--m-light__main--BorderBottomColor);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&.pf-m-light-200 {
|
|
184
|
-
@include pf-v5-t-light;
|
|
185
|
-
|
|
186
|
-
--#{$masthead}--BackgroundColor: var(--#{$masthead}--m-light-200--BackgroundColor);
|
|
187
|
-
--#{$masthead}__main--BorderBottomColor: var(--#{$masthead}--m-light-200__main--BorderBottomColor);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
198
|
.#{$toolbar} {
|
|
191
|
-
--#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
|
|
192
|
-
--#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
|
|
193
|
-
--#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
|
|
194
|
-
--#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
|
|
195
|
-
--#{$toolbar}__expandable-content--PaddingTop: var(--#{$masthead}--c-toolbar__expandable-content--PaddingTop);
|
|
196
|
-
--#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--c-toolbar__expandable-content--PaddingRight);
|
|
197
|
-
--#{$toolbar}__expandable-content--PaddingBottom: var(--#{$masthead}--c-toolbar__expandable-content--PaddingBottom);
|
|
198
|
-
--#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--c-toolbar__expandable-content--PaddingLeft);
|
|
199
|
-
|
|
200
199
|
width: 100%;
|
|
201
200
|
}
|
|
202
201
|
|
|
@@ -205,7 +204,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
205
204
|
}
|
|
206
205
|
|
|
207
206
|
.#{$toolbar}__expandable-content {
|
|
208
|
-
|
|
207
|
+
inset-block-start: 100%;
|
|
209
208
|
|
|
210
209
|
&::before {
|
|
211
210
|
position: absolute;
|
|
@@ -216,43 +215,19 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
216
215
|
}
|
|
217
216
|
}
|
|
218
217
|
|
|
219
|
-
.#{$
|
|
220
|
-
--#{$
|
|
221
|
-
--#{$
|
|
222
|
-
--#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
|
|
223
|
-
--#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
|
|
218
|
+
.#{$context-selector}.pf-m-full-height {
|
|
219
|
+
--#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderTopColor);
|
|
220
|
+
--#{$context-selector}__toggle--BorderBottomColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderBottomColor);
|
|
224
221
|
}
|
|
225
222
|
|
|
226
|
-
.#{$
|
|
227
|
-
--#{$
|
|
228
|
-
--#{$
|
|
229
|
-
--#{$context-selector}__toggle--BorderRightColor: var(--#{$masthead}--c-context-selector__toggle--BorderRightColor);
|
|
230
|
-
--#{$context-selector}__toggle--BorderLeftColor: var(--#{$masthead}--c-context-selector__toggle--BorderLeftColor);
|
|
231
|
-
|
|
232
|
-
&.pf-m-full-height {
|
|
233
|
-
--#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderTopColor);
|
|
234
|
-
--#{$context-selector}__toggle--BorderBottomColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderBottomColor);
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.#{$dropdown} {
|
|
239
|
-
--#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderTopColor);
|
|
240
|
-
--#{$dropdown}__toggle--before--BorderRightColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderRightColor);
|
|
241
|
-
--#{$dropdown}__toggle--before--BorderLeftColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderLeftColor);
|
|
242
|
-
|
|
243
|
-
&.pf-m-full-height {
|
|
244
|
-
--#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderTopColor);
|
|
245
|
-
--#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
|
|
246
|
-
}
|
|
223
|
+
.#{$dropdown}.pf-m-full-height {
|
|
224
|
+
--#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderTopColor);
|
|
225
|
+
--#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
|
|
247
226
|
}
|
|
248
227
|
|
|
249
228
|
.#{$nav} {
|
|
250
229
|
align-self: stretch;
|
|
251
230
|
}
|
|
252
|
-
|
|
253
|
-
.#{$button}.pf-m-plain {
|
|
254
|
-
@include pf-v5-t-dark(--#{$button}--m-plain--Color); // for all plain buttons, especially inside other components (.pf-v5-c-input-group), for dark mode
|
|
255
|
-
}
|
|
256
231
|
}
|
|
257
232
|
|
|
258
233
|
// Main
|
|
@@ -283,6 +258,11 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
283
258
|
}
|
|
284
259
|
}
|
|
285
260
|
|
|
261
|
+
.#{$masthead}__logo {
|
|
262
|
+
display: flex;
|
|
263
|
+
gap: var(--pf-t--global--spacer--md);
|
|
264
|
+
}
|
|
265
|
+
|
|
286
266
|
// Content
|
|
287
267
|
.#{$masthead}__content {
|
|
288
268
|
display: flex;
|
|
@@ -290,6 +270,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
290
270
|
flex-shrink: 1;
|
|
291
271
|
grid-column: var(--#{$masthead}__content--GridColumn);
|
|
292
272
|
grid-column-end: -1; // force content to right edge or full available width
|
|
273
|
+
gap: var(--#{$masthead}__content--Gap);
|
|
293
274
|
align-items: center;
|
|
294
275
|
align-self: stretch;
|
|
295
276
|
order: var(--#{$masthead}__content--Order);
|
|
@@ -360,11 +341,3 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
360
341
|
}
|
|
361
342
|
}
|
|
362
343
|
}
|
|
363
|
-
// stylelint-enable
|
|
364
|
-
|
|
365
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
366
|
-
@import "themes/dark/masthead";
|
|
367
|
-
|
|
368
|
-
@include pf-v5-theme-dark {
|
|
369
|
-
@include pf-v5-theme-dark-masthead;
|
|
370
|
-
}
|
package/components/Menu/menu.css
CHANGED
|
@@ -571,9 +571,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
571
571
|
align-items: center;
|
|
572
572
|
margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
|
|
573
573
|
}
|
|
574
|
-
.pf-v5-c-menu__item-check .pf-v5-c-check {
|
|
575
|
-
--pf-v5-c-check__input--TranslateY: none;
|
|
576
|
-
}
|
|
577
574
|
|
|
578
575
|
.pf-v5-c-menu__item-toggle-icon {
|
|
579
576
|
padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
$prop: transform,
|
|
287
287
|
$ltr-val: translateX(-100%),
|
|
288
288
|
$rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
|
|
289
|
-
);
|
|
289
|
+
);
|
|
290
290
|
}
|
|
291
291
|
// stylelint-enable
|
|
292
292
|
}
|
|
@@ -569,7 +569,7 @@
|
|
|
569
569
|
--#{$menu}__item--Color: var(--#{$menu}__list-item--m-disabled__item--Color);
|
|
570
570
|
--#{$menu}__item-toggle-icon: var(--#{$menu}__list-item--m-disabled__item-toggle-icon--Color);
|
|
571
571
|
}
|
|
572
|
-
|
|
572
|
+
|
|
573
573
|
&.pf-m-disabled {
|
|
574
574
|
--#{$menu}__list-item--focus-within--BackgroundColor: transparent;
|
|
575
575
|
|
|
@@ -690,16 +690,12 @@
|
|
|
690
690
|
display: flex;
|
|
691
691
|
align-items: center;
|
|
692
692
|
margin-inline-end: var(--#{$menu}__item-check--MarginRight);
|
|
693
|
-
|
|
694
|
-
.#{$check} {
|
|
695
|
-
--pf-v5-c-check__input--TranslateY: none;
|
|
696
|
-
}
|
|
697
693
|
}
|
|
698
694
|
|
|
699
695
|
// Toggle icon
|
|
700
696
|
.#{$menu}__item-toggle-icon {
|
|
701
697
|
@include pf-v5-mirror-inline-on-rtl;
|
|
702
|
-
|
|
698
|
+
|
|
703
699
|
padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
|
|
704
700
|
padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
|
|
705
701
|
color: var(--#{$menu}__item-toggle-icon, inherit);
|
|
@@ -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 {
|
|
@@ -295,7 +273,8 @@
|
|
|
295
273
|
align-self: stretch;
|
|
296
274
|
}
|
|
297
275
|
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
|
|
298
|
-
align-self:
|
|
276
|
+
align-self: revert;
|
|
277
|
+
-moz-transform: none;
|
|
299
278
|
}
|
|
300
279
|
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
|
|
301
280
|
position: absolute;
|
|
@@ -418,7 +397,7 @@
|
|
|
418
397
|
|
|
419
398
|
.pf-v5-c-menu-toggle__toggle-icon {
|
|
420
399
|
margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
|
|
421
|
-
color: var(--pf-v5-c-menu-toggle__toggle-icon--Color
|
|
400
|
+
color: var(--pf-v5-c-menu-toggle__toggle-icon--Color);
|
|
422
401
|
}
|
|
423
402
|
|
|
424
403
|
:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
|