@patternfly/react-styles 6.5.0-prerelease.9 → 6.5.1-prerelease.0
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/CHANGELOG.md +124 -0
- package/README.md +1 -1
- package/css/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
- package/css/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
- package/css/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
- package/css/assets/images/PF-Bkg-Generic-Light.svg +74 -0
- package/css/assets/images/compass--hero-bg.png +0 -0
- package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/css/assets/images/compass--wallpaper-light.jpg +0 -0
- package/css/assets/images/glass-brand-dark.jpg +0 -0
- package/css/assets/images/glass-brand-dark.png +0 -0
- package/css/assets/images/glass-brand-light.jpg +0 -0
- package/css/assets/images/glass-brand-light.png +0 -0
- package/css/components/AboutModalBox/about-modal-box.css +36 -26
- package/css/components/Accordion/accordion.css +26 -14
- package/css/components/Accordion/accordion.d.ts +4 -1
- package/css/components/Accordion/accordion.js +4 -1
- package/css/components/Accordion/accordion.mjs +4 -1
- package/css/components/Alert/alert.css +7 -5
- package/css/components/Avatar/avatar.css +12 -4
- package/css/components/BackgroundImage/background-image.css +6 -3
- package/css/components/Banner/banner.css +12 -6
- package/css/components/Banner/banner.d.ts +1 -0
- package/css/components/Banner/banner.js +1 -0
- package/css/components/Banner/banner.mjs +1 -0
- package/css/components/Brand/brand.css +3 -1
- package/css/components/Breadcrumb/breadcrumb.css +10 -5
- package/css/components/Button/button.css +158 -68
- package/css/components/Button/button.d.ts +7 -2
- package/css/components/Button/button.js +7 -2
- package/css/components/Button/button.mjs +7 -2
- package/css/components/CalendarMonth/calendar-month.css +4 -3
- package/css/components/Card/card.css +45 -15
- package/css/components/Card/card.d.ts +3 -1
- package/css/components/Card/card.js +3 -1
- package/css/components/Card/card.mjs +3 -1
- package/css/components/ClipboardCopy/clipboard-copy.css +14 -7
- package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
- package/css/components/CodeEditor/code-editor.css +2 -2
- package/css/components/Compass/compass.css +211 -100
- package/css/components/Compass/compass.d.ts +17 -10
- package/css/components/Compass/compass.js +17 -10
- package/css/components/Compass/compass.mjs +17 -10
- package/css/components/DataList/data-list.css +30 -23
- package/css/components/DataList/data-list.d.ts +3 -1
- package/css/components/DataList/data-list.js +3 -1
- package/css/components/DataList/data-list.mjs +3 -1
- package/css/components/DescriptionList/description-list.css +7 -5
- package/css/components/Divider/divider.css +7 -5
- package/css/components/Drawer/drawer.css +167 -57
- package/css/components/Drawer/drawer.d.ts +5 -2
- package/css/components/Drawer/drawer.js +5 -2
- package/css/components/Drawer/drawer.mjs +5 -2
- package/css/components/DualListSelector/dual-list-selector.css +18 -12
- package/css/components/ExpandableSection/expandable-section.css +18 -16
- package/css/components/Form/form.css +2 -2
- package/css/components/FormControl/form-control.css +3 -3
- package/css/components/Hero/hero.css +19 -19
- package/css/components/Hero/hero.d.ts +1 -1
- package/css/components/Hero/hero.js +1 -1
- package/css/components/Hero/hero.mjs +1 -1
- package/css/components/JumpLinks/jump-links.css +16 -5
- package/css/components/Label/label-group.css +2 -2
- package/css/components/Label/label.css +4 -3
- package/css/components/Login/login.css +58 -40
- package/css/components/Masthead/masthead.css +69 -26
- package/css/components/Masthead/masthead.d.ts +5 -0
- package/css/components/Masthead/masthead.js +5 -0
- package/css/components/Masthead/masthead.mjs +5 -0
- package/css/components/Menu/menu.css +49 -33
- package/css/components/MenuToggle/menu-toggle.css +35 -8
- package/css/components/MenuToggle/menu-toggle.d.ts +5 -0
- package/css/components/MenuToggle/menu-toggle.js +5 -0
- package/css/components/MenuToggle/menu-toggle.mjs +5 -0
- package/css/components/ModalBox/modal-box.css +9 -7
- package/css/components/Nav/nav.css +32 -20
- package/css/components/Nav/nav.d.ts +4 -1
- package/css/components/Nav/nav.js +4 -1
- package/css/components/Nav/nav.mjs +4 -1
- package/css/components/NotificationDrawer/notification-drawer.css +19 -9
- package/css/components/OverflowMenu/overflow-menu.css +16 -0
- package/css/components/OverflowMenu/overflow-menu.d.ts +1 -0
- package/css/components/OverflowMenu/overflow-menu.js +1 -0
- package/css/components/OverflowMenu/overflow-menu.mjs +1 -0
- package/css/components/Page/page.css +409 -38
- package/css/components/Page/page.d.ts +17 -2
- package/css/components/Page/page.js +17 -2
- package/css/components/Page/page.mjs +17 -2
- package/css/components/Pagination/pagination.css +58 -4
- package/css/components/Pagination/pagination.d.ts +6 -1
- package/css/components/Pagination/pagination.js +6 -1
- package/css/components/Pagination/pagination.mjs +6 -1
- package/css/components/Panel/panel.css +41 -3
- package/css/components/Panel/panel.d.ts +8 -2
- package/css/components/Panel/panel.js +8 -2
- package/css/components/Panel/panel.mjs +8 -2
- package/css/components/Progress/progress.css +3 -1
- package/css/components/Sidebar/sidebar.css +1 -1
- package/css/components/Skeleton/skeleton.css +16 -15
- package/css/components/Slider/slider.css +32 -18
- package/css/components/Switch/switch.css +4 -2
- package/css/components/Table/table-grid.css +28 -36
- package/css/components/Table/table-scrollable.css +1 -1
- package/css/components/Table/table-tree-view.css +4 -2
- package/css/components/Table/table.css +104 -57
- package/css/components/Table/table.d.ts +6 -2
- package/css/components/Table/table.js +6 -2
- package/css/components/Table/table.mjs +6 -2
- package/css/components/Tabs/tabs.css +35 -32
- package/css/components/Tabs/tabs.d.ts +0 -1
- package/css/components/Tabs/tabs.js +0 -1
- package/css/components/Tabs/tabs.mjs +0 -1
- package/css/components/TextInputGroup/text-input-group.css +2 -2
- package/css/components/ToggleGroup/toggle-group.css +44 -19
- package/css/components/ToggleGroup/toggle-group.d.ts +1 -0
- package/css/components/ToggleGroup/toggle-group.js +1 -0
- package/css/components/ToggleGroup/toggle-group.mjs +1 -0
- package/css/components/Toolbar/toolbar.css +167 -11
- package/css/components/Toolbar/toolbar.d.ts +13 -0
- package/css/components/Toolbar/toolbar.js +13 -0
- package/css/components/Toolbar/toolbar.mjs +13 -0
- package/css/components/TreeView/tree-view.css +45 -14
- package/css/components/TreeView/tree-view.d.ts +1 -0
- package/css/components/TreeView/tree-view.js +1 -0
- package/css/components/TreeView/tree-view.mjs +1 -0
- package/css/components/Wizard/wizard.css +41 -19
- package/css/components/Wizard/wizard.d.ts +3 -0
- package/css/components/Wizard/wizard.js +3 -0
- package/css/components/Wizard/wizard.mjs +3 -0
- package/css/components/_index.css +2191 -858
- package/css/components/_index.d.ts +34 -10
- package/css/components/_index.js +34 -10
- package/css/components/_index.mjs +34 -10
- package/css/docs/components/Compass/examples/Compass.css +4 -13
- package/css/docs/components/Compass/examples/Compass.d.ts +1 -1
- package/css/docs/components/Compass/examples/Compass.js +1 -1
- package/css/docs/components/Compass/examples/Compass.mjs +1 -1
- package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/css/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
- package/css/docs/components/Panel/examples/Panel.css +3 -0
- package/css/docs/components/Panel/examples/Panel.d.ts +5 -0
- package/css/docs/components/Panel/examples/Panel.js +6 -0
- package/css/docs/components/Panel/examples/Panel.mjs +4 -0
- package/css/docs/components/Table/examples/Table.css +2 -1
- package/css/docs/components/Toolbar/examples/Toolbar.css +1 -1
- package/css/layouts/Gallery/gallery.css +6 -2
- package/css/layouts/_index.css +6 -2
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.pf-v6-c-drawer {
|
|
2
|
-
--pf-v6-c-drawer--m-pill--m-inline__main--Gap:
|
|
2
|
+
--pf-v6-c-drawer--m-pill--m-inline__main--Gap: 0;
|
|
3
3
|
--pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
4
4
|
--pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
5
5
|
--pf-v6-c-drawer__content--FlexBasis: 100%;
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
--pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
|
|
17
17
|
--pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
|
|
18
18
|
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
19
|
-
--pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--
|
|
20
|
-
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
19
|
+
--pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
20
|
+
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
|
|
21
21
|
--pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
22
22
|
--pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
23
23
|
--pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
|
|
36
36
|
--pf-v6-c-drawer__panel--md--FlexBasis: 50%;
|
|
37
37
|
--pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
|
|
38
|
+
--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
38
39
|
--pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
|
|
39
40
|
--pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
|
|
40
41
|
--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
|
|
@@ -50,12 +51,26 @@
|
|
|
50
51
|
--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
51
52
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
52
53
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
53
|
-
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--
|
|
54
|
+
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
|
|
54
55
|
--pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
55
56
|
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
56
|
-
--pf-v6-c-
|
|
57
|
-
--pf-v6-c-drawer__panel--m-glass--
|
|
58
|
-
--pf-v6-c-drawer__panel--m-glass--
|
|
57
|
+
--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
58
|
+
--pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
59
|
+
--pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
60
|
+
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
61
|
+
}
|
|
62
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
63
|
+
.pf-v6-c-drawer {
|
|
64
|
+
--pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
|
|
65
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
|
|
66
|
+
--pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
67
|
+
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
68
|
+
--pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
|
|
69
|
+
--pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
|
|
70
|
+
--pf-v6-c-drawer__panel--Opacity: 1;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.pf-v6-c-drawer {
|
|
59
74
|
--pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
60
75
|
--pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
61
76
|
--pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -79,45 +94,96 @@
|
|
|
79
94
|
--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
80
95
|
--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
81
96
|
--pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
82
|
-
--pf-v6-c-drawer__splitter--Height: 0.
|
|
97
|
+
--pf-v6-c-drawer__splitter--Height: 0.75rem;
|
|
83
98
|
--pf-v6-c-drawer__splitter--Width: 100%;
|
|
84
|
-
--pf-v6-c-drawer__splitter--BackgroundColor:
|
|
99
|
+
--pf-v6-c-drawer__splitter--BackgroundColor: transparent;
|
|
85
100
|
--pf-v6-c-drawer__splitter--Cursor: row-resize;
|
|
86
101
|
--pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
|
|
87
|
-
--pf-v6-c-drawer__splitter--m-vertical--Width: 0.
|
|
102
|
+
--pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
|
|
88
103
|
--pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
|
|
104
|
+
--pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
|
|
89
105
|
--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
|
|
90
106
|
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
107
|
+
--pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
108
|
+
--pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
109
|
+
--pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
91
110
|
--pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
92
111
|
--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
|
|
93
112
|
--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
94
113
|
--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
|
|
95
114
|
--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
115
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
|
|
116
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
|
|
117
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
|
|
118
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
|
|
119
|
+
--pf-v6-c-drawer__splitter--after--Width: auto;
|
|
120
|
+
--pf-v6-c-drawer__splitter--after--Height: auto;
|
|
96
121
|
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
97
122
|
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
98
|
-
--pf-v6-c-drawer--m-
|
|
123
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
|
|
124
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
|
|
125
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
126
|
+
--pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
|
|
127
|
+
--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
|
|
128
|
+
--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
129
|
+
--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
130
|
+
--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
131
|
+
--pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
|
|
132
|
+
--pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
|
|
133
|
+
--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
|
|
134
|
+
--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
|
|
135
|
+
--pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
|
|
136
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
|
|
137
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
|
|
138
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
139
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
|
|
140
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
|
|
141
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
142
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
|
|
143
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
|
|
144
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
|
|
145
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
|
|
146
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
|
|
147
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
|
|
148
|
+
--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
|
|
99
149
|
--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
|
|
100
|
-
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.
|
|
150
|
+
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
|
|
101
151
|
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
102
152
|
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
103
153
|
--pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
|
|
104
|
-
--pf-v6-c-drawer__splitter-handle--InsetInlineStart:
|
|
154
|
+
--pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
|
|
105
155
|
--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
|
|
106
|
-
--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart:
|
|
107
|
-
--pf-v6-c-drawer__splitter-handle--after--
|
|
156
|
+
--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
157
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
|
|
158
|
+
--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
|
|
159
|
+
--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
160
|
+
--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
161
|
+
--pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
108
162
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
109
163
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
|
|
110
164
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
111
165
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
|
|
112
|
-
--pf-v6-c-drawer__splitter
|
|
166
|
+
--pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
167
|
+
--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
|
|
113
168
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
|
|
114
169
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
115
170
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
|
|
116
171
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
117
|
-
--pf-v6-c-drawer__splitter-handle--after--Width:
|
|
172
|
+
--pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
|
|
118
173
|
--pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
|
|
119
174
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
|
|
120
|
-
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height:
|
|
175
|
+
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
|
|
176
|
+
}
|
|
177
|
+
@media screen and (min-width: 75rem) {
|
|
178
|
+
.pf-v6-c-drawer {
|
|
179
|
+
--pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
|
|
180
|
+
}
|
|
181
|
+
.pf-v6-c-drawer.pf-m-panel-bottom {
|
|
182
|
+
--pf-v6-c-drawer__panel--MinWidth: auto;
|
|
183
|
+
--pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
.pf-v6-c-drawer {
|
|
121
187
|
--pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
|
|
122
188
|
--pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
|
|
123
189
|
--pf-v6-c-drawer__panel--BoxShadow: none;
|
|
@@ -132,43 +198,27 @@
|
|
|
132
198
|
--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
|
|
133
199
|
--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
|
|
134
200
|
}
|
|
135
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
136
|
-
.pf-v6-c-drawer {
|
|
137
|
-
--pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
|
|
138
|
-
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
|
|
139
|
-
--pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
140
|
-
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
141
|
-
--pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
|
|
142
|
-
--pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
|
|
143
|
-
--pf-v6-c-drawer__panel--Opacity: 1;
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
@media screen and (min-width: 75rem) {
|
|
147
|
-
.pf-v6-c-drawer {
|
|
148
|
-
--pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
|
|
149
|
-
}
|
|
150
|
-
.pf-v6-c-drawer.pf-m-panel-bottom {
|
|
151
|
-
--pf-v6-c-drawer__panel--MinWidth: auto;
|
|
152
|
-
--pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
201
|
|
|
156
202
|
.pf-v6-c-drawer {
|
|
157
203
|
--pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
|
|
158
|
-
--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
|
|
159
|
-
display: flex;
|
|
160
|
-
flex-direction: column;
|
|
161
|
-
height: 100%;
|
|
162
|
-
overflow-x: hidden;
|
|
163
204
|
}
|
|
164
205
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
|
|
165
206
|
--pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
|
|
166
207
|
}
|
|
167
208
|
|
|
209
|
+
.pf-v6-c-drawer {
|
|
210
|
+
--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
|
|
211
|
+
}
|
|
168
212
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
|
|
169
213
|
--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
|
|
170
214
|
}
|
|
171
215
|
|
|
216
|
+
.pf-v6-c-drawer {
|
|
217
|
+
display: flex;
|
|
218
|
+
flex-direction: column;
|
|
219
|
+
height: 100%;
|
|
220
|
+
overflow-x: hidden;
|
|
221
|
+
}
|
|
172
222
|
.pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
|
|
173
223
|
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
|
|
174
224
|
--pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
|
|
@@ -194,17 +244,20 @@
|
|
|
194
244
|
flex-direction: column;
|
|
195
245
|
}
|
|
196
246
|
.pf-v6-c-drawer.pf-m-expanded {
|
|
247
|
+
--pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
197
248
|
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
|
|
198
249
|
}
|
|
199
250
|
.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
200
251
|
transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
201
|
-
--pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
|
|
202
|
-
visibility: visible;
|
|
203
252
|
}
|
|
204
253
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
205
254
|
transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
|
|
206
255
|
}
|
|
207
256
|
|
|
257
|
+
.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
258
|
+
--pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
|
|
259
|
+
visibility: visible;
|
|
260
|
+
}
|
|
208
261
|
.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
209
262
|
transform: translateX(0);
|
|
210
263
|
}
|
|
@@ -225,17 +278,45 @@
|
|
|
225
278
|
--pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
226
279
|
--pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
|
|
227
280
|
--pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
|
|
281
|
+
--pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
|
|
282
|
+
--pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
|
|
283
|
+
--pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
|
|
284
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
|
|
285
|
+
--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
|
|
286
|
+
--pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
|
|
287
|
+
--pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
|
|
288
|
+
--pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
|
|
289
|
+
--pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
|
|
290
|
+
--pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
|
|
291
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
|
|
292
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
|
|
293
|
+
--pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
|
|
228
294
|
}
|
|
229
295
|
.pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
230
296
|
border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
|
|
231
297
|
border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
|
|
232
298
|
border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
|
|
233
299
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
300
|
+
box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
|
|
234
301
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
302
|
+
}
|
|
303
|
+
@media screen and (min-width: 48rem) {
|
|
304
|
+
.pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
|
|
305
|
+
--pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
|
|
306
|
+
--pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
|
|
307
|
+
--pf-v6-c-drawer__splitter--MarginBlockStart: 0;
|
|
308
|
+
--pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
|
|
309
|
+
--pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
|
|
310
|
+
--pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
|
|
311
|
+
--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
|
|
312
|
+
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
313
|
+
--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
314
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
|
|
315
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
|
|
316
|
+
--pf-v6-c-drawer__splitter--after--TranslateX: initial;
|
|
317
|
+
--pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
|
|
318
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
|
|
319
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
|
|
239
320
|
}
|
|
240
321
|
}
|
|
241
322
|
|
|
@@ -246,7 +327,7 @@
|
|
|
246
327
|
.pf-v6-c-drawer__section.pf-m-secondary {
|
|
247
328
|
--pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
|
|
248
329
|
}
|
|
249
|
-
.pf-v6-c-drawer__section.pf-m-no-background {
|
|
330
|
+
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer__section.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer__section:not(.pf-m-no-plain-on-glass), .pf-v6-c-drawer__section.pf-m-no-background {
|
|
250
331
|
--pf-v6-c-drawer__section--BackgroundColor: transparent;
|
|
251
332
|
}
|
|
252
333
|
|
|
@@ -261,8 +342,8 @@
|
|
|
261
342
|
.pf-v6-c-drawer__panel,
|
|
262
343
|
.pf-v6-c-drawer__panel-main {
|
|
263
344
|
display: flex;
|
|
264
|
-
flex-direction: column;
|
|
265
345
|
flex-shrink: 0;
|
|
346
|
+
flex-direction: column;
|
|
266
347
|
overflow: auto;
|
|
267
348
|
}
|
|
268
349
|
|
|
@@ -402,8 +483,11 @@
|
|
|
402
483
|
display: none;
|
|
403
484
|
width: var(--pf-v6-c-drawer__splitter--Width);
|
|
404
485
|
height: var(--pf-v6-c-drawer__splitter--Height);
|
|
486
|
+
margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
|
|
487
|
+
margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
|
|
405
488
|
cursor: var(--pf-v6-c-drawer__splitter--Cursor);
|
|
406
489
|
background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
|
|
490
|
+
outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
|
|
407
491
|
}
|
|
408
492
|
.pf-v6-c-drawer__splitter.pf-m-vertical {
|
|
409
493
|
--pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
|
|
@@ -416,21 +500,34 @@
|
|
|
416
500
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
|
|
417
501
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
|
|
418
502
|
}
|
|
419
|
-
.pf-v6-c-drawer__splitter:hover
|
|
420
|
-
--pf-v6-c-drawer__splitter-handle--after--
|
|
503
|
+
.pf-v6-c-drawer__splitter:hover {
|
|
504
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
|
|
505
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
|
|
506
|
+
}
|
|
507
|
+
.pf-v6-c-drawer__splitter:focus {
|
|
508
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
|
|
509
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
|
|
510
|
+
}
|
|
511
|
+
.pf-v6-c-drawer__splitter:active {
|
|
512
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
|
|
513
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
|
|
421
514
|
}
|
|
422
515
|
.pf-v6-c-drawer__splitter::after {
|
|
423
516
|
position: absolute;
|
|
424
|
-
inset-block-start:
|
|
425
|
-
inset-block-end:
|
|
426
|
-
inset-inline-start:
|
|
427
|
-
inset-inline-end:
|
|
517
|
+
inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
|
|
518
|
+
inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
|
|
519
|
+
inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
|
|
520
|
+
inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
|
|
521
|
+
z-index: -1;
|
|
522
|
+
width: var(--pf-v6-c-drawer__splitter--after--Width);
|
|
523
|
+
height: var(--pf-v6-c-drawer__splitter--after--Height);
|
|
428
524
|
content: "";
|
|
429
525
|
border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
|
|
430
526
|
border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
|
|
431
527
|
border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
|
|
432
528
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
|
|
433
529
|
border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
|
|
530
|
+
translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
|
|
434
531
|
}
|
|
435
532
|
|
|
436
533
|
.pf-v6-c-drawer__splitter-handle {
|
|
@@ -448,12 +545,14 @@
|
|
|
448
545
|
width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
|
|
449
546
|
height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
|
|
450
547
|
content: "";
|
|
548
|
+
background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
|
|
451
549
|
border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
|
|
452
550
|
border-style: solid;
|
|
453
551
|
border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
|
|
454
552
|
border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
|
|
455
553
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
|
|
456
554
|
border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
|
|
555
|
+
border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
|
|
457
556
|
}
|
|
458
557
|
|
|
459
558
|
@media screen and (min-width: 48rem) {
|
|
@@ -461,6 +560,17 @@
|
|
|
461
560
|
--pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
|
|
462
561
|
min-width: var(--pf-v6-c-drawer__panel--MinWidth);
|
|
463
562
|
}
|
|
563
|
+
.pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
|
|
564
|
+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
|
|
565
|
+
}
|
|
566
|
+
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
|
|
567
|
+
--pf-v6-c-drawer__panel--BackgroundColor: transparent;
|
|
568
|
+
}
|
|
569
|
+
:where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
|
|
570
|
+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
|
|
571
|
+
--pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
|
|
572
|
+
backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
|
|
573
|
+
}
|
|
464
574
|
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
465
575
|
box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
|
|
466
576
|
}
|
|
@@ -24,13 +24,15 @@ declare const _default: {
|
|
|
24
24
|
"expanded": "pf-m-expanded",
|
|
25
25
|
"resizing": "pf-m-resizing",
|
|
26
26
|
"pill": "pf-m-pill",
|
|
27
|
-
"noGlass": "pf-m-no-glass",
|
|
28
27
|
"secondary": "pf-m-secondary",
|
|
28
|
+
"plain": "pf-m-plain",
|
|
29
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
29
30
|
"noBackground": "pf-m-no-background",
|
|
30
31
|
"primary": "pf-m-primary",
|
|
31
32
|
"noPadding": "pf-m-no-padding",
|
|
32
33
|
"padding": "pf-m-padding",
|
|
33
34
|
"vertical": "pf-m-vertical",
|
|
35
|
+
"glass": "pf-m-glass",
|
|
34
36
|
"width_25": "pf-m-width-25",
|
|
35
37
|
"width_33": "pf-m-width-33",
|
|
36
38
|
"width_50": "pf-m-width-50",
|
|
@@ -61,6 +63,7 @@ declare const _default: {
|
|
|
61
63
|
"staticOnXl": "pf-m-static-on-xl",
|
|
62
64
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
63
65
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
64
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
65
68
|
};
|
|
66
69
|
export default _default;
|
|
@@ -26,13 +26,15 @@ exports.default = {
|
|
|
26
26
|
"expanded": "pf-m-expanded",
|
|
27
27
|
"resizing": "pf-m-resizing",
|
|
28
28
|
"pill": "pf-m-pill",
|
|
29
|
-
"noGlass": "pf-m-no-glass",
|
|
30
29
|
"secondary": "pf-m-secondary",
|
|
30
|
+
"plain": "pf-m-plain",
|
|
31
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
31
32
|
"noBackground": "pf-m-no-background",
|
|
32
33
|
"primary": "pf-m-primary",
|
|
33
34
|
"noPadding": "pf-m-no-padding",
|
|
34
35
|
"padding": "pf-m-padding",
|
|
35
36
|
"vertical": "pf-m-vertical",
|
|
37
|
+
"glass": "pf-m-glass",
|
|
36
38
|
"width_25": "pf-m-width-25",
|
|
37
39
|
"width_33": "pf-m-width-33",
|
|
38
40
|
"width_50": "pf-m-width-50",
|
|
@@ -63,5 +65,6 @@ exports.default = {
|
|
|
63
65
|
"staticOnXl": "pf-m-static-on-xl",
|
|
64
66
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
65
67
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
66
|
-
}
|
|
68
|
+
},
|
|
69
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
67
70
|
};
|
|
@@ -24,13 +24,15 @@ export default {
|
|
|
24
24
|
"expanded": "pf-m-expanded",
|
|
25
25
|
"resizing": "pf-m-resizing",
|
|
26
26
|
"pill": "pf-m-pill",
|
|
27
|
-
"noGlass": "pf-m-no-glass",
|
|
28
27
|
"secondary": "pf-m-secondary",
|
|
28
|
+
"plain": "pf-m-plain",
|
|
29
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
29
30
|
"noBackground": "pf-m-no-background",
|
|
30
31
|
"primary": "pf-m-primary",
|
|
31
32
|
"noPadding": "pf-m-no-padding",
|
|
32
33
|
"padding": "pf-m-padding",
|
|
33
34
|
"vertical": "pf-m-vertical",
|
|
35
|
+
"glass": "pf-m-glass",
|
|
34
36
|
"width_25": "pf-m-width-25",
|
|
35
37
|
"width_33": "pf-m-width-33",
|
|
36
38
|
"width_50": "pf-m-width-50",
|
|
@@ -61,5 +63,6 @@ export default {
|
|
|
61
63
|
"staticOnXl": "pf-m-static-on-xl",
|
|
62
64
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
63
65
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
64
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
65
68
|
};
|
|
@@ -32,6 +32,15 @@
|
|
|
32
32
|
--pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
|
|
33
33
|
--pf-v6-c-dual-list-selector__list--TranslateY: 0;
|
|
34
34
|
--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
|
|
35
|
+
}
|
|
36
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
37
|
+
.pf-v6-c-dual-list-selector {
|
|
38
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
39
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
40
|
+
--pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.pf-v6-c-dual-list-selector {
|
|
35
44
|
--pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
36
45
|
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
37
46
|
--pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
@@ -67,19 +76,12 @@
|
|
|
67
76
|
--pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
68
77
|
--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
69
78
|
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
|
|
70
|
-
--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate:
|
|
79
|
+
--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
|
|
71
80
|
--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
72
81
|
--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
73
82
|
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
|
|
74
83
|
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
75
84
|
}
|
|
76
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
77
|
-
.pf-v6-c-dual-list-selector {
|
|
78
|
-
--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
79
|
-
--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
80
|
-
--pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
85
|
|
|
84
86
|
.pf-v6-c-dual-list-selector {
|
|
85
87
|
display: grid;
|
|
@@ -150,8 +152,6 @@
|
|
|
150
152
|
|
|
151
153
|
.pf-v6-c-dual-list-selector__list {
|
|
152
154
|
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
|
|
153
|
-
display: flex;
|
|
154
|
-
flex-direction: column;
|
|
155
155
|
}
|
|
156
156
|
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
|
|
157
157
|
--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
|
|
@@ -159,16 +159,22 @@
|
|
|
159
159
|
}
|
|
160
160
|
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
|
|
161
161
|
transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
|
|
162
|
-
position: absolute;
|
|
163
|
-
inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
|
|
164
162
|
}
|
|
165
163
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
|
|
166
164
|
transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
|
|
167
165
|
}
|
|
168
166
|
|
|
167
|
+
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
|
|
168
|
+
position: absolute;
|
|
169
|
+
inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
|
|
170
|
+
}
|
|
169
171
|
.pf-v6-c-dual-list-selector__list.pf-m-drag-over {
|
|
170
172
|
overflow-anchor: none;
|
|
171
173
|
}
|
|
174
|
+
.pf-v6-c-dual-list-selector__list {
|
|
175
|
+
display: flex;
|
|
176
|
+
flex-direction: column;
|
|
177
|
+
}
|
|
172
178
|
|
|
173
179
|
.pf-v6-c-dual-list-selector__list-item:focus-visible {
|
|
174
180
|
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
--pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
|
|
8
8
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
|
|
9
9
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
|
|
10
|
-
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate:
|
|
11
|
-
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate:
|
|
10
|
+
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
|
|
11
|
+
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
|
|
12
12
|
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
|
|
13
13
|
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
14
14
|
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
|
|
@@ -27,6 +27,17 @@
|
|
|
27
27
|
--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
|
|
28
28
|
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
29
29
|
--pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
|
|
30
|
+
}
|
|
31
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
32
|
+
.pf-v6-c-expandable-section {
|
|
33
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
34
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
35
|
+
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
36
|
+
--pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
|
|
37
|
+
--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
.pf-v6-c-expandable-section {
|
|
30
41
|
--pf-v6-c-expandable-section__content--MaxWidth: auto;
|
|
31
42
|
--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
|
|
32
43
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -43,15 +54,6 @@
|
|
|
43
54
|
--pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
|
|
44
55
|
--pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
|
|
45
56
|
}
|
|
46
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
47
|
-
.pf-v6-c-expandable-section {
|
|
48
|
-
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
49
|
-
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
50
|
-
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
51
|
-
--pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
|
|
52
|
-
--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
57
|
|
|
56
58
|
.pf-v6-c-expandable-section {
|
|
57
59
|
display: flex;
|
|
@@ -110,9 +112,13 @@
|
|
|
110
112
|
}
|
|
111
113
|
.pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
|
|
112
114
|
display: -webkit-box;
|
|
115
|
+
overflow: hidden;
|
|
113
116
|
-webkit-box-orient: vertical;
|
|
114
117
|
-webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
|
|
115
|
-
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
|
|
121
|
+
scale: -1 1;
|
|
116
122
|
}
|
|
117
123
|
|
|
118
124
|
.pf-v6-c-expandable-section__toggle-icon {
|
|
@@ -122,10 +128,6 @@
|
|
|
122
128
|
transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
|
|
123
129
|
transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
|
|
124
130
|
}
|
|
125
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
|
|
126
|
-
scale: -1 1;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
131
|
.pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
|
|
130
132
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
|
|
131
133
|
}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
61
61
|
--pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
|
|
62
62
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
|
|
63
|
-
--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate:
|
|
63
|
+
--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
|
|
64
64
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
65
65
|
--pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
66
66
|
--pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
|
|
@@ -499,8 +499,8 @@
|
|
|
499
499
|
|
|
500
500
|
.pf-v6-c-form__field-group-header-main {
|
|
501
501
|
display: flex;
|
|
502
|
-
flex-direction: column;
|
|
503
502
|
flex-grow: 1;
|
|
503
|
+
flex-direction: column;
|
|
504
504
|
}
|
|
505
505
|
|
|
506
506
|
.pf-v6-c-form__field-group-header-title {
|