@patternfly/react-styles 6.0.0-alpha.14 → 6.0.0-alpha.16
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +36 -0
- package/css/components/ActionList/action-list.css +1 -0
- package/css/components/Card/card.css +1 -0
- package/css/components/Check/check.css +10 -3
- package/css/components/DescriptionList/description-list.css +6 -6
- package/css/components/DragDrop/drag-drop.css +1 -0
- package/css/components/Masthead/masthead.css +17 -9
- package/css/components/Masthead/masthead.d.ts +2 -0
- package/css/components/Masthead/masthead.js +2 -0
- package/css/components/Masthead/masthead.mjs +2 -0
- package/css/components/Menu/menu.css +31 -126
- package/css/components/Menu/menu.d.ts +1 -0
- package/css/components/Menu/menu.js +1 -0
- package/css/components/Menu/menu.mjs +1 -0
- package/css/components/MenuToggle/menu-toggle.css +20 -6
- package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
- package/css/components/MenuToggle/menu-toggle.js +1 -0
- package/css/components/MenuToggle/menu-toggle.mjs +1 -0
- package/css/components/ModalBox/modal-box.css +11 -7
- package/css/components/Nav/nav.css +64 -110
- package/css/components/Nav/nav.d.ts +3 -3
- package/css/components/Nav/nav.js +3 -3
- package/css/components/Nav/nav.mjs +3 -3
- package/css/components/Page/page.css +9 -17
- package/css/components/Radio/radio.css +12 -5
- package/css/components/Table/table-grid.css +30 -35
- package/css/components/Table/table-scrollable.css +14 -6
- package/css/components/Table/table-tree-view.css +5 -5
- package/css/components/Table/table.css +90 -254
- package/css/components/Table/table.d.ts +3 -4
- package/css/components/Table/table.js +3 -4
- package/css/components/Table/table.mjs +3 -4
- package/css/components/Toolbar/toolbar.css +66 -2
- package/css/components/Toolbar/toolbar.d.ts +1 -1
- package/css/components/Toolbar/toolbar.js +1 -1
- package/css/components/Toolbar/toolbar.mjs +1 -1
- package/css/docs/components/Brand/examples/Brand.css +3 -3
- package/css/docs/components/Brand/examples/Brand.d.ts +1 -1
- package/css/docs/components/Brand/examples/Brand.js +1 -1
- package/css/docs/components/Brand/examples/Brand.mjs +1 -1
- package/css/docs/components/Button/examples/Button.css +2 -2
- package/css/docs/components/Button/examples/Button.d.ts +1 -1
- package/css/docs/components/Button/examples/Button.js +1 -1
- package/css/docs/components/Button/examples/Button.mjs +1 -1
- package/css/docs/components/DragDrop/examples/DragDrop.css +3 -3
- package/css/docs/components/DragDrop/examples/DragDrop.d.ts +2 -2
- package/css/docs/components/DragDrop/examples/DragDrop.js +2 -2
- package/css/docs/components/DragDrop/examples/DragDrop.mjs +2 -2
- package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/css/docs/components/Dropdown/deprecated/Dropdown.d.ts +1 -1
- package/css/docs/components/Dropdown/deprecated/Dropdown.js +1 -1
- package/css/docs/components/Dropdown/deprecated/Dropdown.mjs +1 -1
- package/css/docs/components/Label/examples/Label.css +4 -4
- package/css/docs/components/Label/examples/Label.d.ts +1 -1
- package/css/docs/components/Label/examples/Label.js +1 -1
- package/css/docs/components/Label/examples/Label.mjs +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/css/docs/components/LogViewer/examples/LogViewer.d.ts +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.js +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.mjs +1 -1
- package/css/docs/components/Menu/examples/Menu.css +2 -2
- package/css/docs/components/Menu/examples/Menu.d.ts +3 -3
- package/css/docs/components/Menu/examples/Menu.js +3 -3
- package/css/docs/components/Menu/examples/Menu.mjs +3 -3
- package/css/docs/components/Nav/examples/Navigation.css +20 -3
- package/css/docs/components/Nav/examples/Navigation.d.ts +3 -2
- package/css/docs/components/Nav/examples/Navigation.js +3 -2
- package/css/docs/components/Nav/examples/Navigation.mjs +3 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
# 6.0.0-alpha.16 (2024-03-18)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
9
|
+
|
10
|
+
# 6.0.0-alpha.15 (2024-03-08)
|
11
|
+
|
12
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
13
|
+
|
6
14
|
# [6.0.0-alpha.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.13...@patternfly/react-styles@6.0.0-alpha.14) (2024-02-21)
|
7
15
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-styles
|
@@ -105,6 +113,34 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
105
113
|
|
106
114
|
**Note:** Version bump only for package @patternfly/react-styles
|
107
115
|
|
116
|
+
# 5.3.0-prerelease.1 (2024-02-28)
|
117
|
+
|
118
|
+
### Bug Fixes
|
119
|
+
|
120
|
+
- **deps:** bump to latest core ([#10116](https://github.com/patternfly/patternfly-react/issues/10116)) ([dc1aceb](https://github.com/patternfly/patternfly-react/commit/dc1aceb0ee880631320b85bfb068be13d7852a37))
|
121
|
+
|
122
|
+
# 5.3.0-prerelease.0 (2024-02-02)
|
123
|
+
|
124
|
+
# 5.2.0 (2024-02-02)
|
125
|
+
|
126
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
127
|
+
|
128
|
+
# 5.2.0 (2024-02-02)
|
129
|
+
|
130
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
131
|
+
|
132
|
+
# 5.2.0-prerelease.6 (2023-12-11)
|
133
|
+
|
134
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
135
|
+
|
136
|
+
# 5.2.0-prerelease.5 (2023-11-10)
|
137
|
+
|
138
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
139
|
+
|
140
|
+
# 5.2.0-prerelease.4 (2023-11-03)
|
141
|
+
|
142
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
143
|
+
|
108
144
|
# 5.2.0-prerelease.3 (2023-10-26)
|
109
145
|
|
110
146
|
**Note:** Version bump only for package @patternfly/react-styles
|
@@ -2,17 +2,18 @@
|
|
2
2
|
.pf-v6-c-check {
|
3
3
|
--pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
|
4
4
|
--pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
|
5
|
+
--pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
|
5
6
|
--pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
|
6
7
|
--pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
|
7
8
|
--pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
|
8
9
|
--pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
|
9
10
|
--pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
|
10
|
-
--pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
|
11
11
|
--pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
|
12
12
|
--pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
|
13
13
|
--pf-v6-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
|
14
14
|
--pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
|
15
15
|
--pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
|
16
|
+
--pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
|
16
17
|
}
|
17
18
|
|
18
19
|
.pf-v6-c-check {
|
@@ -22,13 +23,19 @@
|
|
22
23
|
accent-color: var(--pf-v6-c-check--AccentColor);
|
23
24
|
}
|
24
25
|
.pf-v6-c-check.pf-m-standalone {
|
25
|
-
--pf-v6-c-check--GridGap: 0;
|
26
|
-
--pf-v6-c-check__input--TranslateY: none;
|
27
26
|
display: inline-grid;
|
27
|
+
grid-template-columns: auto;
|
28
|
+
height: var(--pf-v6-c-check--Height);
|
29
|
+
}
|
30
|
+
.pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
|
31
|
+
align-self: center;
|
32
|
+
transform: none;
|
28
33
|
}
|
29
34
|
|
30
35
|
.pf-v6-c-check__input {
|
31
36
|
align-self: start;
|
37
|
+
font-size: var(--pf-v6-c-check__label--FontSize);
|
38
|
+
line-height: var(--pf-v6-c-check__label--LineHeight);
|
32
39
|
transform: translateY(var(--pf-v6-c-check__input--TranslateY));
|
33
40
|
}
|
34
41
|
|
@@ -42,7 +42,7 @@
|
|
42
42
|
--pf-v6-c-description-list--m-horizontal__term--width-on-lg: inherit;
|
43
43
|
--pf-v6-c-description-list--m-horizontal__term--width-on-xl: inherit;
|
44
44
|
--pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
|
45
|
-
--pf-
|
45
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
|
46
46
|
}
|
47
47
|
@media screen and (min-width: 576px) {
|
48
48
|
:where(:root), :where(.pf-v6-c-description-list) {
|
@@ -51,27 +51,27 @@
|
|
51
51
|
}
|
52
52
|
@media (min-width: 576px) {
|
53
53
|
:where(:root), :where(.pf-v6-c-description-list) {
|
54
|
-
--pf-
|
54
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
|
55
55
|
}
|
56
56
|
}
|
57
57
|
@media (min-width: 768px) {
|
58
58
|
:where(:root), :where(.pf-v6-c-description-list) {
|
59
|
-
--pf-
|
59
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)));
|
60
60
|
}
|
61
61
|
}
|
62
62
|
@media (min-width: 992px) {
|
63
63
|
:where(:root), :where(.pf-v6-c-description-list) {
|
64
|
-
--pf-
|
64
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))));
|
65
65
|
}
|
66
66
|
}
|
67
67
|
@media (min-width: 1200px) {
|
68
68
|
:where(:root), :where(.pf-v6-c-description-list) {
|
69
|
-
--pf-
|
69
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))));
|
70
70
|
}
|
71
71
|
}
|
72
72
|
@media (min-width: 1450px) {
|
73
73
|
:where(:root), :where(.pf-v6-c-description-list) {
|
74
|
-
--pf-
|
74
|
+
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))));
|
75
75
|
}
|
76
76
|
}
|
77
77
|
|
@@ -2,6 +2,7 @@
|
|
2
2
|
--pf-v6-c-draggable--Cursor: auto;
|
3
3
|
--pf-v6-c-draggable--m-dragging--Cursor: grabbing;
|
4
4
|
--pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
|
5
|
+
--pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
|
5
6
|
--pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
|
6
7
|
--pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
|
7
8
|
--pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
|
@@ -1,11 +1,12 @@
|
|
1
|
-
:root,
|
2
|
-
|
1
|
+
:where(:root),
|
2
|
+
:where(.pf-v6-c-masthead) {
|
3
3
|
--pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
|
4
4
|
--pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
|
5
5
|
--pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
|
6
6
|
--pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
|
7
7
|
--pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
|
8
8
|
--pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
|
9
|
+
--pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
9
10
|
--pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
10
11
|
--pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
|
11
12
|
--pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
|
@@ -25,15 +26,12 @@
|
|
25
26
|
--pf-v6-c-masthead--m-display-inline__content--Order: 0;
|
26
27
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
27
28
|
--pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
|
28
|
-
--pf-v6-c-masthead--
|
29
|
-
--pf-v6-c-masthead--
|
30
|
-
--pf-v6-c-masthead--
|
29
|
+
--pf-v6-c-masthead--c-toolbar--Width: 100%;
|
30
|
+
--pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
|
31
|
+
--pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
|
31
32
|
}
|
32
33
|
|
33
34
|
.pf-v6-c-masthead {
|
34
|
-
--pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--pf-v6-c-toolbar--Width);
|
35
|
-
--pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingBlock);
|
36
|
-
--pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingInline);
|
37
35
|
--pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
|
38
36
|
--pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
|
39
37
|
--pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
|
@@ -51,7 +49,13 @@
|
|
51
49
|
padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
|
52
50
|
padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
|
53
51
|
padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
|
54
|
-
background-color: var(--pf-v6-c-masthead--BackgroundColor
|
52
|
+
background-color: var(--pf-v6-c-masthead--BackgroundColor);
|
53
|
+
}
|
54
|
+
.pf-v6-c-masthead .pf-v6-c-toolbar {
|
55
|
+
--pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
|
56
|
+
--pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
|
57
|
+
--pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
|
58
|
+
--pf-v6-c-toolbar__content--MinWidth: 0;
|
55
59
|
}
|
56
60
|
@media screen and (min-width: 768px) {
|
57
61
|
:where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
|
@@ -64,6 +68,10 @@
|
|
64
68
|
--pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
|
65
69
|
}
|
66
70
|
}
|
71
|
+
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
|
72
|
+
flex-wrap: nowrap;
|
73
|
+
min-width: 0;
|
74
|
+
}
|
67
75
|
.pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content {
|
68
76
|
inset-block-start: 100%;
|
69
77
|
border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart);
|
@@ -28,6 +28,8 @@ declare const _default: {
|
|
28
28
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
29
29
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
30
30
|
},
|
31
|
+
"toolbar": "pf-v6-c-toolbar",
|
32
|
+
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
31
33
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|
32
34
|
};
|
33
35
|
export default _default;
|
@@ -30,5 +30,7 @@ exports.default = {
|
|
30
30
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
31
31
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
32
32
|
},
|
33
|
+
"toolbar": "pf-v6-c-toolbar",
|
34
|
+
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
33
35
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|
34
36
|
};
|
@@ -28,5 +28,7 @@ export default {
|
|
28
28
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
29
29
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
30
30
|
},
|
31
|
+
"toolbar": "pf-v6-c-toolbar",
|
32
|
+
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
31
33
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|
32
34
|
};
|
@@ -1,155 +1,59 @@
|
|
1
|
-
.pf-v6-c-
|
2
|
-
.pf-v6-c-menu__list-item,
|
3
|
-
.pf-v6-c-menu__item,
|
4
|
-
.pf-v6-c-menu__item-main,
|
5
|
-
.pf-v6-c-menu__breadcrumb,
|
6
|
-
.pf-v6-c-menu__item-check,
|
7
|
-
.pf-v6-c-menu__item-action,
|
8
|
-
.pf-v6-c-menu__item-action-icon, .pf-v6-c-menu,
|
9
|
-
.pf-v6-c-menu__list,
|
1
|
+
.pf-v6-c-menu__item, .pf-v6-c-menu__list,
|
10
2
|
.pf-v6-c-menu__group {
|
11
3
|
--pf-v5-hidden-visible--hidden--Display: none;
|
12
4
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
13
5
|
display: var(--pf-v5-hidden-visible--Display);
|
14
6
|
}
|
15
|
-
.pf-m-hidden.pf-v6-c-
|
16
|
-
.pf-m-hidden.pf-v6-c-menu__list-item,
|
17
|
-
.pf-m-hidden.pf-v6-c-menu__item,
|
18
|
-
.pf-m-hidden.pf-v6-c-menu__item-main,
|
19
|
-
.pf-m-hidden.pf-v6-c-menu__breadcrumb,
|
20
|
-
.pf-m-hidden.pf-v6-c-menu__item-check,
|
21
|
-
.pf-m-hidden.pf-v6-c-menu__item-action,
|
22
|
-
.pf-m-hidden.pf-v6-c-menu__item-action-icon, .pf-m-hidden.pf-v6-c-menu,
|
23
|
-
.pf-m-hidden.pf-v6-c-menu__list,
|
7
|
+
.pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
|
24
8
|
.pf-m-hidden.pf-v6-c-menu__group {
|
25
9
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
26
10
|
}
|
27
11
|
@media screen and (min-width: 576px) {
|
28
|
-
.pf-m-hidden-on-sm.pf-v6-c-
|
29
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__list-item,
|
30
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item,
|
31
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-main,
|
32
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__breadcrumb,
|
33
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-check,
|
34
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-action,
|
35
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-sm.pf-v6-c-menu,
|
36
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__list,
|
12
|
+
.pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
|
37
13
|
.pf-m-hidden-on-sm.pf-v6-c-menu__group {
|
38
14
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
39
15
|
}
|
40
|
-
.pf-m-visible-on-sm.pf-v6-c-
|
41
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__list-item,
|
42
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item,
|
43
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-main,
|
44
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__breadcrumb,
|
45
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-check,
|
46
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-action,
|
47
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-sm.pf-v6-c-menu,
|
48
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__list,
|
16
|
+
.pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
|
49
17
|
.pf-m-visible-on-sm.pf-v6-c-menu__group {
|
50
18
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
51
19
|
}
|
52
20
|
}
|
53
21
|
@media screen and (min-width: 768px) {
|
54
|
-
.pf-m-hidden-on-md.pf-v6-c-
|
55
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__list-item,
|
56
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item,
|
57
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-main,
|
58
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__breadcrumb,
|
59
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-check,
|
60
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-action,
|
61
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-md.pf-v6-c-menu,
|
62
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__list,
|
22
|
+
.pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
|
63
23
|
.pf-m-hidden-on-md.pf-v6-c-menu__group {
|
64
24
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
65
25
|
}
|
66
|
-
.pf-m-visible-on-md.pf-v6-c-
|
67
|
-
.pf-m-visible-on-md.pf-v6-c-menu__list-item,
|
68
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item,
|
69
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-main,
|
70
|
-
.pf-m-visible-on-md.pf-v6-c-menu__breadcrumb,
|
71
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-check,
|
72
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-action,
|
73
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-md.pf-v6-c-menu,
|
74
|
-
.pf-m-visible-on-md.pf-v6-c-menu__list,
|
26
|
+
.pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
|
75
27
|
.pf-m-visible-on-md.pf-v6-c-menu__group {
|
76
28
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
77
29
|
}
|
78
30
|
}
|
79
31
|
@media screen and (min-width: 992px) {
|
80
|
-
.pf-m-hidden-on-lg.pf-v6-c-
|
81
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__list-item,
|
82
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item,
|
83
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-main,
|
84
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__breadcrumb,
|
85
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-check,
|
86
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-action,
|
87
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-lg.pf-v6-c-menu,
|
88
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__list,
|
32
|
+
.pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
|
89
33
|
.pf-m-hidden-on-lg.pf-v6-c-menu__group {
|
90
34
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
91
35
|
}
|
92
|
-
.pf-m-visible-on-lg.pf-v6-c-
|
93
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__list-item,
|
94
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item,
|
95
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-main,
|
96
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__breadcrumb,
|
97
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-check,
|
98
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-action,
|
99
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-lg.pf-v6-c-menu,
|
100
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__list,
|
36
|
+
.pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
|
101
37
|
.pf-m-visible-on-lg.pf-v6-c-menu__group {
|
102
38
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
103
39
|
}
|
104
40
|
}
|
105
41
|
@media screen and (min-width: 1200px) {
|
106
|
-
.pf-m-hidden-on-xl.pf-v6-c-
|
107
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__list-item,
|
108
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item,
|
109
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-main,
|
110
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__breadcrumb,
|
111
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-check,
|
112
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-action,
|
113
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-xl.pf-v6-c-menu,
|
114
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__list,
|
42
|
+
.pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
|
115
43
|
.pf-m-hidden-on-xl.pf-v6-c-menu__group {
|
116
44
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
117
45
|
}
|
118
|
-
.pf-m-visible-on-xl.pf-v6-c-
|
119
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__list-item,
|
120
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item,
|
121
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-main,
|
122
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__breadcrumb,
|
123
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-check,
|
124
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-action,
|
125
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-xl.pf-v6-c-menu,
|
126
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__list,
|
46
|
+
.pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
|
127
47
|
.pf-m-visible-on-xl.pf-v6-c-menu__group {
|
128
48
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
129
49
|
}
|
130
50
|
}
|
131
51
|
@media screen and (min-width: 1450px) {
|
132
|
-
.pf-m-hidden-on-2xl.pf-v6-c-
|
133
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__list-item,
|
134
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item,
|
135
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-main,
|
136
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__breadcrumb,
|
137
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-check,
|
138
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-action,
|
139
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-2xl.pf-v6-c-menu,
|
140
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__list,
|
52
|
+
.pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
|
141
53
|
.pf-m-hidden-on-2xl.pf-v6-c-menu__group {
|
142
54
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
143
55
|
}
|
144
|
-
.pf-m-visible-on-2xl.pf-v6-c-
|
145
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__list-item,
|
146
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item,
|
147
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-main,
|
148
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__breadcrumb,
|
149
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-check,
|
150
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-action,
|
151
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-2xl.pf-v6-c-menu,
|
152
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__list,
|
56
|
+
.pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
|
153
57
|
.pf-m-visible-on-2xl.pf-v6-c-menu__group {
|
154
58
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
155
59
|
}
|
@@ -248,21 +152,19 @@
|
|
248
152
|
--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
|
249
153
|
}
|
250
154
|
|
251
|
-
.pf-v6-c-menu,
|
252
|
-
.pf-v6-c-menu__list,
|
253
|
-
.pf-v6-c-menu__group {
|
254
|
-
--pf-v5-hidden-visible--visible--Display: grid;
|
255
|
-
}
|
256
|
-
|
257
155
|
.pf-v6-c-menu__content,
|
258
156
|
.pf-v6-c-menu__list-item,
|
259
|
-
.pf-v6-c-menu__item,
|
260
157
|
.pf-v6-c-menu__item-main,
|
261
158
|
.pf-v6-c-menu__breadcrumb,
|
262
159
|
.pf-v6-c-menu__item-check,
|
263
160
|
.pf-v6-c-menu__item-action,
|
264
161
|
.pf-v6-c-menu__item-action-icon {
|
265
|
-
|
162
|
+
display: flex;
|
163
|
+
}
|
164
|
+
|
165
|
+
.pf-v6-c-menu__list,
|
166
|
+
.pf-v6-c-menu__group {
|
167
|
+
--pf-v5-hidden-visible--visible--Display: grid;
|
266
168
|
}
|
267
169
|
|
268
170
|
.pf-v6-c-menu__list,
|
@@ -287,6 +189,7 @@
|
|
287
189
|
}
|
288
190
|
|
289
191
|
.pf-v6-c-menu {
|
192
|
+
display: grid;
|
290
193
|
row-gap: var(--pf-v6-c-menu--RowGap);
|
291
194
|
width: var(--pf-v6-c-menu--Width);
|
292
195
|
min-width: var(--pf-v6-c-menu--MinWidth);
|
@@ -495,10 +398,12 @@
|
|
495
398
|
.pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
|
496
399
|
padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
|
497
400
|
}
|
498
|
-
.pf-v6-c-menu__list-item:has(> :hover) {
|
401
|
+
.pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
|
499
402
|
--pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
|
500
403
|
}
|
501
|
-
.pf-v6-c-menu__list-item
|
404
|
+
.pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
|
405
|
+
.pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
|
406
|
+
.pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
|
502
407
|
.pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
|
503
408
|
opacity: 1;
|
504
409
|
}
|
@@ -520,15 +425,20 @@
|
|
520
425
|
background-color: var(--pf-v6-c-menu__item--BackgroundColor);
|
521
426
|
border: 0;
|
522
427
|
outline-offset: var(--pf-v6-c-menu--OutlineOffset);
|
428
|
+
--pf-v5-hidden-visible--visible--Display: flex;
|
523
429
|
}
|
430
|
+
:where(label).pf-v6-c-menu__item {
|
431
|
+
cursor: pointer;
|
432
|
+
}
|
433
|
+
|
524
434
|
.pf-v6-c-menu__item.pf-m-selected {
|
525
435
|
--pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
|
526
436
|
}
|
527
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
528
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
437
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
|
438
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
|
529
439
|
opacity: 1;
|
530
440
|
}
|
531
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
441
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
|
532
442
|
color: var(--pf-v6-c-menu__item-external--Color);
|
533
443
|
}
|
534
444
|
|
@@ -568,11 +478,6 @@
|
|
568
478
|
.pf-v6-c-menu__item-check .pf-v6-c-check {
|
569
479
|
--pf-v5-c-check__input--TranslateY: none;
|
570
480
|
}
|
571
|
-
.pf-v6-c-menu__item-check .pf-v6-c-check input::before {
|
572
|
-
position: absolute;
|
573
|
-
inset: 0;
|
574
|
-
content: "";
|
575
|
-
}
|
576
481
|
|
577
482
|
.pf-v6-c-menu__item-toggle-icon {
|
578
483
|
color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
|
@@ -29,6 +29,8 @@
|
|
29
29
|
--pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
30
30
|
--pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
31
31
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
32
|
+
--pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
|
33
|
+
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
|
32
34
|
--pf-v6-c-menu-toggle--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
|
33
35
|
--pf-v6-c-menu-toggle--m-button--PaddingRight: var(--pf-t--global--spacer--md);
|
34
36
|
--pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
|
@@ -103,6 +105,8 @@
|
|
103
105
|
--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
|
104
106
|
--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
|
105
107
|
--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
|
108
|
+
--pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
|
109
|
+
--pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
|
106
110
|
}
|
107
111
|
|
108
112
|
.pf-v6-c-menu-toggle {
|
@@ -230,6 +234,10 @@
|
|
230
234
|
.pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
|
231
235
|
border: 0;
|
232
236
|
}
|
237
|
+
.pf-v6-c-menu-toggle.pf-m-small {
|
238
|
+
--pf-v6-c-menu-toggle--PaddingTop: var(--pf-v6-c-menu-toggle--m-small--PaddingTop);
|
239
|
+
--pf-v6-c-menu-toggle--PaddingBottom: var(--pf-v6-c-menu-toggle--m-small--PaddingBottom);
|
240
|
+
}
|
233
241
|
.pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
|
234
242
|
background-color: transparent;
|
235
243
|
}
|
@@ -340,11 +348,6 @@
|
|
340
348
|
padding-inline-start: 0;
|
341
349
|
}
|
342
350
|
|
343
|
-
.pf-v6-c-menu-toggle__icon {
|
344
|
-
flex-shrink: 0;
|
345
|
-
align-self: center;
|
346
|
-
}
|
347
|
-
|
348
351
|
.pf-v6-c-menu-toggle__text {
|
349
352
|
overflow: hidden;
|
350
353
|
text-overflow: ellipsis;
|
@@ -357,14 +360,25 @@
|
|
357
360
|
flex-wrap: nowrap;
|
358
361
|
}
|
359
362
|
|
360
|
-
.pf-v6-c-menu-
|
363
|
+
.pf-v6-c-menu-toggle__icon,
|
364
|
+
.pf-v6-c-menu-toggle__controls,
|
365
|
+
.pf-v6-c-menu-toggle__toggle-icon {
|
361
366
|
display: flex;
|
362
367
|
align-items: center;
|
363
368
|
justify-content: center;
|
369
|
+
}
|
370
|
+
|
371
|
+
.pf-v6-c-menu-toggle__icon {
|
372
|
+
flex-shrink: 0;
|
373
|
+
min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
|
374
|
+
}
|
375
|
+
|
376
|
+
.pf-v6-c-menu-toggle__controls {
|
364
377
|
min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
|
365
378
|
margin-inline-start: auto;
|
366
379
|
}
|
367
380
|
|
368
381
|
.pf-v6-c-menu-toggle__toggle-icon {
|
382
|
+
min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
|
369
383
|
color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
|
370
384
|
}
|