@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.21
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/css/components/AboutModalBox/about-modal-box.css +64 -64
- package/css/components/Accordion/accordion.css +40 -40
- package/css/components/ActionList/action-list.css +1 -1
- package/css/components/Alert/alert-group.css +15 -15
- package/css/components/Alert/alert.css +47 -47
- package/css/components/Avatar/avatar.css +1 -1
- package/css/components/BackToTop/back-to-top.css +16 -16
- package/css/components/Backdrop/backdrop.css +1 -2
- package/css/components/BackgroundImage/background-image.css +1 -2
- package/css/components/Badge/badge.css +7 -7
- package/css/components/Banner/banner.css +14 -14
- package/css/components/Breadcrumb/breadcrumb.css +16 -17
- package/css/components/Breadcrumb/breadcrumb.d.ts +1 -1
- package/css/components/Breadcrumb/breadcrumb.js +1 -1
- package/css/components/Breadcrumb/breadcrumb.mjs +1 -1
- package/css/components/Button/button.css +94 -95
- package/css/components/CalendarMonth/calendar-month.css +43 -44
- package/css/components/Card/card.css +60 -61
- package/css/components/Check/check.css +3 -4
- package/css/components/ClipboardCopy/clipboard-copy.css +37 -38
- package/css/components/CodeBlock/code-block.css +20 -20
- package/css/components/CodeEditor/code-editor.css +34 -34
- package/css/components/Content/content.css +155 -130
- package/css/components/Content/content.d.ts +19 -0
- package/css/components/Content/content.js +19 -0
- package/css/components/Content/content.mjs +19 -0
- package/css/components/DataList/data-list-grid.css +98 -98
- package/css/components/DataList/data-list.css +282 -285
- package/css/components/DataList/data-list.d.ts +11 -11
- package/css/components/DataList/data-list.js +11 -11
- package/css/components/DataList/data-list.mjs +11 -11
- package/css/components/DatePicker/date-picker.css +15 -16
- package/css/components/DescriptionList/description-list.css +13 -13
- package/css/components/Divider/divider.css +27 -31
- package/css/components/DragDrop/drag-drop.css +2 -2
- package/css/components/Drawer/drawer.css +87 -90
- package/css/components/DualListSelector/dual-list-selector.css +60 -59
- package/css/components/EmptyState/empty-state.css +33 -33
- package/css/components/ExpandableSection/expandable-section.css +49 -49
- package/css/components/FileUpload/file-upload.css +1 -2
- package/css/components/Form/form.css +107 -108
- package/css/components/FormControl/form-control.css +45 -46
- package/css/components/HelperText/helper-text.css +3 -3
- package/css/components/Hint/hint.css +19 -18
- package/css/components/Hint/hint.d.ts +1 -2
- package/css/components/Hint/hint.js +1 -2
- package/css/components/Hint/hint.mjs +1 -2
- package/css/components/Icon/icon.css +1 -2
- package/css/components/InlineEdit/inline-edit.css +11 -12
- package/css/components/InputGroup/input-group.css +17 -18
- package/css/components/JumpLinks/jump-links.css +76 -77
- package/css/components/Label/label-group.css +27 -28
- package/css/components/Label/label.css +31 -32
- package/css/components/List/list.css +27 -27
- package/css/components/LogViewer/log-viewer.css +53 -77
- package/css/components/LogViewer/log-viewer.d.ts +0 -2
- package/css/components/LogViewer/log-viewer.js +0 -2
- package/css/components/LogViewer/log-viewer.mjs +0 -2
- package/css/components/Login/login.css +99 -104
- package/css/components/Login/login.d.ts +1 -1
- package/css/components/Login/login.js +1 -1
- package/css/components/Login/login.mjs +1 -1
- package/css/components/Masthead/masthead.css +1 -2
- package/css/components/Menu/menu.css +128 -84
- package/css/components/MenuToggle/menu-toggle.css +59 -60
- package/css/components/ModalBox/modal-box.css +41 -41
- package/css/components/MultipleFileUpload/multiple-file-upload.css +33 -34
- package/css/components/Nav/nav.css +1 -2
- package/css/components/NotificationBadge/notification-badge.css +17 -17
- package/css/components/NotificationDrawer/notification-drawer.css +42 -43
- package/css/components/NumberInput/number-input.css +8 -12
- package/css/components/OverflowMenu/overflow-menu.css +1 -1
- package/css/components/Page/page.css +146 -365
- package/css/components/Page/page.d.ts +0 -25
- package/css/components/Page/page.js +0 -25
- package/css/components/Page/page.mjs +0 -25
- package/css/components/Pagination/pagination.css +35 -38
- package/css/components/Panel/panel.css +25 -26
- package/css/components/Popover/popover.css +48 -48
- package/css/components/Progress/progress.css +5 -6
- package/css/components/ProgressStepper/progress-stepper.css +227 -229
- package/css/components/Radio/radio.css +7 -8
- package/css/components/Sidebar/sidebar.css +45 -46
- package/css/components/SimpleList/simple-list.css +19 -19
- package/css/components/Skeleton/skeleton.css +5 -6
- package/css/components/SkipToContent/skip-to-content.css +5 -5
- package/css/components/Slider/slider.css +26 -27
- package/css/components/Spinner/spinner.css +1 -2
- package/css/components/Switch/switch.css +5 -6
- package/css/components/TabContent/tab-content.css +25 -26
- package/css/components/Table/table-grid.css +404 -404
- package/css/components/Table/table-scrollable.css +17 -18
- package/css/components/Table/table-tree-view.css +257 -258
- package/css/components/Table/table-tree-view.d.ts +1 -1
- package/css/components/Table/table-tree-view.js +1 -1
- package/css/components/Table/table-tree-view.mjs +1 -1
- package/css/components/Table/table.css +169 -173
- package/css/components/Table/table.d.ts +7 -7
- package/css/components/Table/table.js +7 -7
- package/css/components/Table/table.mjs +7 -7
- package/css/components/Tabs/tabs.css +119 -120
- package/css/components/TextInputGroup/text-input-group.css +28 -29
- package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
- package/css/components/TextInputGroup/text-input-group.js +1 -1
- package/css/components/TextInputGroup/text-input-group.mjs +1 -1
- package/css/components/Tile/tile.css +14 -15
- package/css/components/Timestamp/timestamp.css +1 -1
- package/css/components/Title/title.css +1 -1
- package/css/components/ToggleGroup/toggle-group.css +29 -30
- package/css/components/Toolbar/toolbar.css +94 -80
- package/css/components/Toolbar/toolbar.d.ts +2 -2
- package/css/components/Toolbar/toolbar.js +2 -2
- package/css/components/Toolbar/toolbar.mjs +2 -2
- package/css/components/Tooltip/tooltip.css +27 -27
- package/css/components/TreeView/tree-view.css +182 -183
- package/css/components/Truncate/truncate.css +1 -2
- package/css/components/Wizard/wizard.css +158 -140
- package/css/components/Wizard/wizard.d.ts +5 -2
- package/css/components/Wizard/wizard.js +5 -2
- package/css/components/Wizard/wizard.mjs +5 -2
- package/css/components/_index.css +23396 -0
- package/css/components/_index.d.ts +1497 -0
- package/css/components/_index.js +1498 -0
- package/css/components/_index.mjs +1496 -0
- package/css/docs/components/LogViewer/examples/LogViewer.css +9 -2
- package/css/docs/components/LogViewer/examples/LogViewer.d.ts +2 -0
- package/css/docs/components/LogViewer/examples/LogViewer.js +2 -0
- package/css/docs/components/LogViewer/examples/LogViewer.mjs +2 -0
- package/css/docs/components/Nav/examples/Navigation.css +0 -5
- package/css/docs/components/Nav/examples/Navigation.d.ts +0 -1
- package/css/docs/components/Nav/examples/Navigation.js +0 -1
- package/css/docs/components/Nav/examples/Navigation.mjs +0 -1
- package/css/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
- package/css/docs/components/Table/examples/Table.css +7 -0
- package/css/docs/components/Table/examples/Table.d.ts +2 -0
- package/css/docs/components/Table/examples/Table.js +2 -0
- package/css/docs/components/Table/examples/Table.mjs +2 -0
- package/css/docs/demos/Card/examples/Card.css +2 -2
- package/css/docs/demos/Toolbar/examples/Toolbar.css +1 -17
- package/css/docs/utilities/Alignment/examples/Alignment.css +2 -2
- package/css/docs/utilities/Display/examples/Display.css +3 -10
- package/css/docs/utilities/Display/examples/Display.d.ts +0 -8
- package/css/docs/utilities/Display/examples/Display.js +0 -8
- package/css/docs/utilities/Display/examples/Display.mjs +0 -8
- package/css/docs/utilities/Flex/examples/Flex.css +2 -2
- package/css/docs/utilities/Float/examples/Float.css +3 -3
- package/css/docs/utilities/Sizing/examples/Sizing.css +2 -2
- package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/css/layouts/Bullseye/bullseye.css +1 -2
- package/css/layouts/Flex/flex.css +1 -2
- package/css/layouts/Gallery/gallery.css +1 -2
- package/css/layouts/Grid/grid.css +1 -2
- package/css/layouts/Level/level.css +1 -2
- package/css/layouts/Split/split.css +1 -2
- package/css/layouts/Stack/stack.css +1 -2
- package/css/layouts/_index.css +3454 -0
- package/css/layouts/_index.d.ts +846 -0
- package/css/layouts/_index.js +847 -0
- package/css/layouts/_index.mjs +845 -0
- package/css/utilities/BackgroundColor/{BackgroundColor.d.ts → background-color.d.ts} +1 -1
- package/css/utilities/BackgroundColor/{BackgroundColor.js → background-color.js} +1 -1
- package/css/utilities/BackgroundColor/{BackgroundColor.mjs → background-color.mjs} +1 -1
- package/css/utilities/Display/display.css +38 -0
- package/css/utilities/Display/display.d.ts +12 -0
- package/css/utilities/Display/display.js +12 -0
- package/css/utilities/Display/display.mjs +12 -0
- package/css/utilities/_index.css +7815 -0
- package/css/utilities/_index.d.ts +1671 -0
- package/css/utilities/_index.js +1672 -0
- package/css/utilities/_index.mjs +1670 -0
- package/package.json +3 -3
- package/css/components/AppLauncher/app-launcher.css +0 -244
- package/css/components/AppLauncher/app-launcher.d.ts +0 -29
- package/css/components/AppLauncher/app-launcher.js +0 -30
- package/css/components/AppLauncher/app-launcher.mjs +0 -28
- package/css/components/Chip/chip-group.css +0 -93
- package/css/components/Chip/chip-group.d.ts +0 -13
- package/css/components/Chip/chip-group.js +0 -14
- package/css/components/Chip/chip-group.mjs +0 -12
- package/css/components/Chip/chip.css +0 -122
- package/css/components/Chip/chip.d.ts +0 -16
- package/css/components/Chip/chip.js +0 -17
- package/css/components/Chip/chip.mjs +0 -15
- package/css/components/ContextSelector/context-selector.css +0 -336
- package/css/components/ContextSelector/context-selector.d.ts +0 -25
- package/css/components/ContextSelector/context-selector.js +0 -26
- package/css/components/ContextSelector/context-selector.mjs +0 -24
- package/css/components/Dropdown/dropdown.css +0 -686
- package/css/components/Dropdown/dropdown.d.ts +0 -55
- package/css/components/Dropdown/dropdown.js +0 -56
- package/css/components/Dropdown/dropdown.mjs +0 -54
- package/css/components/OptionsMenu/options-menu.css +0 -279
- package/css/components/OptionsMenu/options-menu.d.ts +0 -27
- package/css/components/OptionsMenu/options-menu.js +0 -28
- package/css/components/OptionsMenu/options-menu.mjs +0 -26
- package/css/components/Select/select.css +0 -599
- package/css/components/Select/select.d.ts +0 -61
- package/css/components/Select/select.js +0 -62
- package/css/components/Select/select.mjs +0 -60
- package/css/docs/components/Page/deprecated/PageHeader.css +0 -17
- package/css/docs/components/Page/deprecated/PageHeader.d.ts +0 -12
- package/css/docs/components/Page/deprecated/PageHeader.js +0 -13
- package/css/docs/components/Page/deprecated/PageHeader.mjs +0 -11
- /package/css/utilities/BackgroundColor/{BackgroundColor.css → background-color.css} +0 -0
@@ -1,4 +1,4 @@
|
|
1
|
-
:root {
|
1
|
+
:where(:root, .pf-v6-c-modal-box) {
|
2
2
|
--pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
3
3
|
--pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
|
4
4
|
--pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
@@ -11,7 +11,7 @@
|
|
11
11
|
--pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
|
12
12
|
--pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
|
13
13
|
--pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
|
14
|
-
--pf-v6-c-modal-box--m-align-top--
|
14
|
+
--pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer);
|
15
15
|
--pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer));
|
16
16
|
--pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
|
17
17
|
--pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
@@ -19,36 +19,36 @@
|
|
19
19
|
--pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
20
20
|
--pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
21
21
|
--pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
22
|
-
--pf-v6-c-modal-box__header--
|
23
|
-
--pf-v6-c-modal-box__header--
|
24
|
-
--pf-v6-c-modal-box__header--
|
22
|
+
--pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
23
|
+
--pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
24
|
+
--pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
25
25
|
--pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
|
26
26
|
--pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
|
27
27
|
--pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
28
28
|
--pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
|
29
29
|
--pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
|
30
|
-
--pf-v6-c-modal-box__title-icon--
|
30
|
+
--pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
31
31
|
--pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
32
32
|
--pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
|
33
33
|
--pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
|
34
34
|
--pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
|
35
|
-
--pf-v6-c-modal-box__body--
|
36
|
-
--pf-v6-c-modal-box__body--
|
37
|
-
--pf-v6-c-modal-box__body--
|
38
|
-
--pf-v6-c-modal-box__body--last-child--
|
39
|
-
--pf-v6-c-modal-box__header--body--
|
40
|
-
--pf-v6-c-modal-box__close--
|
41
|
-
--pf-v6-c-modal-box__close--
|
42
|
-
--pf-v6-c-modal-box__close--sibling--
|
43
|
-
--pf-v6-c-modal-box__footer--
|
44
|
-
--pf-v6-c-modal-box__footer--
|
45
|
-
--pf-v6-c-modal-box__footer--
|
46
|
-
--pf-v6-c-modal-box__footer--
|
47
|
-
--pf-v6-c-modal-box__footer--c-button--
|
48
|
-
--pf-v6-c-modal-box__footer--c-button--sm--
|
35
|
+
--pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
36
|
+
--pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
37
|
+
--pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
38
|
+
--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
39
|
+
--pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
40
|
+
--pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
|
41
|
+
--pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
|
42
|
+
--pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
|
43
|
+
--pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
44
|
+
--pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
45
|
+
--pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
46
|
+
--pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
47
|
+
--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
48
|
+
--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
|
49
49
|
}
|
50
50
|
@media (min-width: 1200px) {
|
51
|
-
:root {
|
51
|
+
:where(:root, .pf-v6-c-modal-box) {
|
52
52
|
--pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
|
53
53
|
}
|
54
54
|
}
|
@@ -76,7 +76,7 @@
|
|
76
76
|
--pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth);
|
77
77
|
}
|
78
78
|
.pf-v6-c-modal-box.pf-m-align-top {
|
79
|
-
inset-block-start: var(--pf-v6-c-modal-box--m-align-top--
|
79
|
+
inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart);
|
80
80
|
align-self: flex-start;
|
81
81
|
max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
|
82
82
|
max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
|
@@ -103,11 +103,11 @@
|
|
103
103
|
|
104
104
|
.pf-v6-c-modal-box__close {
|
105
105
|
position: absolute;
|
106
|
-
inset-block-start: var(--pf-v6-c-modal-box__close--
|
107
|
-
inset-inline-end: var(--pf-v6-c-modal-box__close--
|
106
|
+
inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart);
|
107
|
+
inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd);
|
108
108
|
}
|
109
109
|
.pf-v6-c-modal-box__close + * {
|
110
|
-
margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--
|
110
|
+
margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd);
|
111
111
|
}
|
112
112
|
|
113
113
|
.pf-v6-c-modal-box__header {
|
@@ -115,16 +115,16 @@
|
|
115
115
|
flex-direction: column;
|
116
116
|
flex-shrink: 0;
|
117
117
|
gap: var(--pf-v6-c-modal-box__header--Gap);
|
118
|
-
padding-block-start: var(--pf-v6-c-modal-box__header--
|
119
|
-
padding-inline-start: var(--pf-v6-c-modal-box__header--
|
120
|
-
padding-inline-end: var(--pf-v6-c-modal-box__header--
|
118
|
+
padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
|
119
|
+
padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
|
120
|
+
padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
|
121
121
|
}
|
122
122
|
.pf-v6-c-modal-box__header.pf-m-help {
|
123
123
|
display: flex;
|
124
124
|
flex-direction: row;
|
125
125
|
}
|
126
126
|
.pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body {
|
127
|
-
--pf-v6-c-modal-box__body--
|
127
|
+
--pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart);
|
128
128
|
}
|
129
129
|
|
130
130
|
.pf-v6-c-modal-box__header-main {
|
@@ -153,12 +153,12 @@
|
|
153
153
|
}
|
154
154
|
|
155
155
|
.pf-v6-c-modal-box__title-icon {
|
156
|
-
margin-inline-end: var(--pf-v6-c-modal-box__title-icon--
|
156
|
+
margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd);
|
157
157
|
color: var(--pf-v6-c-modal-box__title-icon--Color);
|
158
158
|
}
|
159
159
|
|
160
160
|
.pf-v6-c-modal-box__description {
|
161
|
-
padding-block-start: var(--pf-v6-c-modal-box__description--
|
161
|
+
padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart);
|
162
162
|
font-size: var(--pf-v6-c-modal-box__description--FontSize);
|
163
163
|
color: var(--pf-v6-c-modal-box__description--Color);
|
164
164
|
}
|
@@ -166,9 +166,9 @@
|
|
166
166
|
.pf-v6-c-modal-box__body {
|
167
167
|
flex: 1 1 auto;
|
168
168
|
min-height: var(--pf-v6-c-modal-box__body--MinHeight);
|
169
|
-
padding-block-start: var(--pf-v6-c-modal-box__body--
|
170
|
-
padding-inline-start: var(--pf-v6-c-modal-box__body--
|
171
|
-
padding-inline-end: var(--pf-v6-c-modal-box__body--
|
169
|
+
padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart);
|
170
|
+
padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart);
|
171
|
+
padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd);
|
172
172
|
overflow-x: hidden;
|
173
173
|
overflow-y: auto;
|
174
174
|
overscroll-behavior: contain;
|
@@ -176,23 +176,23 @@
|
|
176
176
|
-webkit-overflow-scrolling: touch;
|
177
177
|
}
|
178
178
|
.pf-v6-c-modal-box__body:last-child {
|
179
|
-
padding-block-end: var(--pf-v6-c-modal-box__body--last-child--
|
179
|
+
padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
|
180
180
|
}
|
181
181
|
|
182
182
|
.pf-v6-c-modal-box__footer {
|
183
183
|
display: flex;
|
184
184
|
flex: 0 0 auto;
|
185
185
|
align-items: center;
|
186
|
-
padding-block-start: var(--pf-v6-c-modal-box__footer--
|
187
|
-
padding-block-end: var(--pf-v6-c-modal-box__footer--
|
188
|
-
padding-inline-start: var(--pf-v6-c-modal-box__footer--
|
189
|
-
padding-inline-end: var(--pf-v6-c-modal-box__footer--
|
186
|
+
padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
|
187
|
+
padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
|
188
|
+
padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
|
189
|
+
padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
|
190
190
|
}
|
191
191
|
.pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
|
192
|
-
margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--
|
192
|
+
margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
|
193
193
|
}
|
194
194
|
@media screen and (min-width: 576px) {
|
195
195
|
.pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
|
196
|
-
--pf-v6-c-modal-box__footer--c-button--
|
196
|
+
--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
|
197
197
|
}
|
198
198
|
}
|
@@ -1,5 +1,4 @@
|
|
1
|
-
:root,
|
2
|
-
:where(.pf-v6-c-multiple-file-upload) {
|
1
|
+
:where(:root, .pf-v6-c-multiple-file-upload) {
|
3
2
|
--pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
|
4
3
|
--pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
|
5
4
|
--pf-v6-c-multiple-file-upload__main--TextAlign: center;
|
@@ -9,10 +8,10 @@
|
|
9
8
|
"title"
|
10
9
|
"upload"
|
11
10
|
"info";
|
12
|
-
--pf-v6-c-multiple-file-upload__main--
|
13
|
-
--pf-v6-c-multiple-file-upload__main--
|
14
|
-
--pf-v6-c-multiple-file-upload__main--
|
15
|
-
--pf-v6-c-multiple-file-upload__main--
|
11
|
+
--pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
12
|
+
--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
13
|
+
--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
14
|
+
--pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
|
16
15
|
--pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
|
17
16
|
--pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
|
18
17
|
--pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
|
@@ -27,15 +26,15 @@
|
|
27
26
|
--pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
28
27
|
--pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
|
29
28
|
--pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
|
30
|
-
--pf-v6-c-multiple-file-upload__title-text-separator--
|
31
|
-
--pf-v6-c-multiple-file-upload__title-text-separator--
|
29
|
+
--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
|
30
|
+
--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
|
32
31
|
--pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
|
33
32
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
|
34
33
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
|
35
34
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
|
36
35
|
--pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
|
37
36
|
--pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
|
38
|
-
--pf-v6-c-multiple-file-upload__info--
|
37
|
+
--pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
39
38
|
--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
|
40
39
|
--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
|
41
40
|
--pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
|
@@ -45,26 +44,26 @@
|
|
45
44
|
"title upload"
|
46
45
|
"info upload";
|
47
46
|
--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
|
48
|
-
--pf-v6-c-multiple-file-upload--m-horizontal__main--
|
47
|
+
--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
49
48
|
--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
|
50
49
|
--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
|
51
50
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
|
52
51
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
|
53
52
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
|
54
|
-
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--
|
53
|
+
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
|
55
54
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
|
56
55
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
|
57
56
|
--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
|
58
|
-
--pf-v6-c-multiple-file-upload--m-horizontal__info--
|
59
|
-
--pf-v6-c-multiple-file-upload__status--
|
60
|
-
--pf-v6-c-multiple-file-upload__status--
|
61
|
-
--pf-v6-c-multiple-file-upload__status--
|
62
|
-
--pf-v6-c-multiple-file-upload__status--
|
57
|
+
--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
|
58
|
+
--pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
59
|
+
--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
60
|
+
--pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
61
|
+
--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
63
62
|
--pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
|
64
63
|
--pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
|
65
64
|
--pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
|
66
|
-
--pf-v6-c-multiple-file-upload__status-item--
|
67
|
-
--pf-v6-c-multiple-file-upload__status-item--
|
65
|
+
--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
66
|
+
--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
68
67
|
--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
|
69
68
|
--pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
|
70
69
|
--pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
|
@@ -87,17 +86,17 @@
|
|
87
86
|
--pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
|
88
87
|
--pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
|
89
88
|
--pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
|
90
|
-
--pf-v6-c-multiple-file-upload__main--
|
89
|
+
--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
|
91
90
|
--pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
|
92
91
|
--pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
|
93
92
|
--pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
|
94
93
|
--pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
|
95
94
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
|
96
95
|
--pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
|
97
|
-
--pf-v6-c-multiple-file-upload__title-text-separator--
|
96
|
+
--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
|
98
97
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
|
99
98
|
--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
|
100
|
-
--pf-v6-c-multiple-file-upload__info--
|
99
|
+
--pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
|
101
100
|
}
|
102
101
|
.pf-v6-c-multiple-file-upload.pf-m-drag-over {
|
103
102
|
--pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
|
@@ -111,10 +110,10 @@
|
|
111
110
|
grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
|
112
111
|
gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
|
113
112
|
align-items: center;
|
114
|
-
padding-block-start: var(--pf-v6-c-multiple-file-upload__main--
|
115
|
-
padding-block-end: var(--pf-v6-c-multiple-file-upload__main--
|
116
|
-
padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--
|
117
|
-
padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--
|
113
|
+
padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
|
114
|
+
padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
|
115
|
+
padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
|
116
|
+
padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
|
118
117
|
text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
|
119
118
|
border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
|
120
119
|
border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
|
@@ -141,8 +140,8 @@
|
|
141
140
|
|
142
141
|
.pf-v6-c-multiple-file-upload__title-text-separator {
|
143
142
|
display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
|
144
|
-
margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--
|
145
|
-
margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--
|
143
|
+
margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
|
144
|
+
margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
|
146
145
|
font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
|
147
146
|
font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
|
148
147
|
font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
|
@@ -155,16 +154,16 @@
|
|
155
154
|
|
156
155
|
.pf-v6-c-multiple-file-upload__info {
|
157
156
|
grid-area: info;
|
158
|
-
margin-block-start: var(--pf-v6-c-multiple-file-upload__info--
|
157
|
+
margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
|
159
158
|
font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
|
160
159
|
color: var(--pf-v6-c-multiple-file-upload__info--Color);
|
161
160
|
}
|
162
161
|
|
163
162
|
.pf-v6-c-multiple-file-upload__status {
|
164
|
-
padding-block-start: var(--pf-v6-c-multiple-file-upload__status--
|
165
|
-
padding-block-end: var(--pf-v6-c-multiple-file-upload__status--
|
166
|
-
padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--
|
167
|
-
padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--
|
163
|
+
padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
|
164
|
+
padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
|
165
|
+
padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
|
166
|
+
padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
|
168
167
|
}
|
169
168
|
|
170
169
|
.pf-v6-c-multiple-file-upload__status,
|
@@ -186,8 +185,8 @@
|
|
186
185
|
display: grid;
|
187
186
|
grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
|
188
187
|
gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
|
189
|
-
padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--
|
190
|
-
padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--
|
188
|
+
padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
|
189
|
+
padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
|
191
190
|
border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
|
192
191
|
}
|
193
192
|
|
@@ -1,5 +1,4 @@
|
|
1
|
-
:where(:root)
|
2
|
-
:where(.pf-v6-c-nav) {
|
1
|
+
:where(:root, .pf-v6-c-nav) {
|
3
2
|
--pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
4
3
|
--pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
5
4
|
--pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
@@ -1,15 +1,15 @@
|
|
1
|
-
:root {
|
1
|
+
:where(:root, .pf-v6-c-notification-badge) {
|
2
2
|
--pf-v6-c-notification-badge--BackgroundColor: transparent;
|
3
3
|
--pf-v6-c-notification-badge--MinWidth: 40px;
|
4
4
|
--pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
|
5
|
-
--pf-v6-c-notification-badge--
|
6
|
-
--pf-v6-c-notification-badge--
|
7
|
-
--pf-v6-c-notification-badge--
|
8
|
-
--pf-v6-c-notification-badge--
|
9
|
-
--pf-v6-c-notification-badge--
|
10
|
-
--pf-v6-c-notification-badge--
|
11
|
-
--pf-v6-c-notification-badge--
|
12
|
-
--pf-v6-c-notification-badge--
|
5
|
+
--pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
6
|
+
--pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
7
|
+
--pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
8
|
+
--pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
9
|
+
--pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
|
10
|
+
--pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
|
11
|
+
--pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
|
12
|
+
--pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
|
13
13
|
--pf-v6-c-notification-badge--before--BorderColor: transparent;
|
14
14
|
--pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
|
15
15
|
--pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
|
@@ -35,14 +35,14 @@
|
|
35
35
|
gap: var(--pf-v6-c-notification-badge--Gap);
|
36
36
|
align-items: center;
|
37
37
|
justify-content: center;
|
38
|
-
padding-block-start: var(--pf-v6-c-notification-badge--
|
39
|
-
padding-block-end: var(--pf-v6-c-notification-badge--
|
40
|
-
padding-inline-start: var(--pf-v6-c-notification-badge--
|
41
|
-
padding-inline-end: var(--pf-v6-c-notification-badge--
|
42
|
-
margin-block-start: var(--pf-v6-c-notification-badge--
|
43
|
-
margin-block-end: var(--pf-v6-c-notification-badge--
|
44
|
-
margin-inline-start: var(--pf-v6-c-notification-badge--
|
45
|
-
margin-inline-end: var(--pf-v6-c-notification-badge--
|
38
|
+
padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
|
39
|
+
padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
|
40
|
+
padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
|
41
|
+
padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
|
42
|
+
margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
|
43
|
+
margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
|
44
|
+
margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
|
45
|
+
margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
|
46
46
|
background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
|
47
47
|
border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
|
48
48
|
}
|
@@ -1,17 +1,16 @@
|
|
1
|
-
:root,
|
2
|
-
.pf-v6-c-notification-drawer {
|
1
|
+
:where(:root, .pf-v6-c-notification-drawer) {
|
3
2
|
--pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
4
|
-
--pf-v6-c-notification-drawer__header--
|
5
|
-
--pf-v6-c-notification-drawer__header--
|
6
|
-
--pf-v6-c-notification-drawer__header--
|
7
|
-
--pf-v6-c-notification-drawer__header--
|
3
|
+
--pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
4
|
+
--pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
5
|
+
--pf-v6-c-notification-drawer__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
6
|
+
--pf-v6-c-notification-drawer__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
8
7
|
--pf-v6-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
9
8
|
--pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--z-index--sm);
|
10
9
|
--pf-v6-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
|
11
10
|
--pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
|
12
11
|
--pf-v6-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
13
12
|
--pf-v6-c-notification-drawer__header-title--FontFamily: var(--pf-t--global--font--family--heading);
|
14
|
-
--pf-v6-c-notification-drawer__header-status--
|
13
|
+
--pf-v6-c-notification-drawer__header-status--MarginInlineStart: var(--pf-t--global--spacer--md);
|
15
14
|
--pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
16
15
|
--pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
|
17
16
|
--pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
|
@@ -21,10 +20,10 @@
|
|
21
20
|
--pf-v6-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);
|
22
21
|
--pf-v6-c-notification-drawer__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
23
22
|
--pf-v6-c-notification-drawer__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
24
|
-
--pf-v6-c-notification-drawer__list-item--
|
25
|
-
--pf-v6-c-notification-drawer__list-item--
|
26
|
-
--pf-v6-c-notification-drawer__list-item--
|
27
|
-
--pf-v6-c-notification-drawer__list-item--
|
23
|
+
--pf-v6-c-notification-drawer__list-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
24
|
+
--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
25
|
+
--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
26
|
+
--pf-v6-c-notification-drawer__list-item--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
28
27
|
--pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
29
28
|
--pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
|
30
29
|
--pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
|
@@ -42,32 +41,32 @@
|
|
42
41
|
--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
|
43
42
|
--pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
|
44
43
|
--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
45
|
-
--pf-v6-c-notification-drawer__list-item-header--
|
44
|
+
--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
|
46
45
|
--pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
|
47
|
-
--pf-v6-c-notification-drawer__list-item-header-icon--
|
46
|
+
--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
48
47
|
--pf-v6-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
|
49
48
|
--pf-v6-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
|
50
49
|
--pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
|
51
50
|
--pf-v6-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
52
51
|
--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
|
53
|
-
--pf-v6-c-notification-drawer__list-item-description--
|
52
|
+
--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
|
54
53
|
--pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
|
55
54
|
--pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
|
56
|
-
--pf-v6-c-notification-drawer__group--
|
57
|
-
--pf-v6-c-notification-drawer__group--m-expanded--group--
|
55
|
+
--pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
56
|
+
--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
58
57
|
--pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
|
59
58
|
--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
60
|
-
--pf-v6-c-notification-drawer__group-toggle--
|
61
|
-
--pf-v6-c-notification-drawer__group-toggle--
|
62
|
-
--pf-v6-c-notification-drawer__group-toggle--
|
63
|
-
--pf-v6-c-notification-drawer__group-toggle--
|
59
|
+
--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
60
|
+
--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
61
|
+
--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
62
|
+
--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
64
63
|
--pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
65
64
|
--pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
|
66
|
-
--pf-v6-c-notification-drawer__group-toggle-title--
|
65
|
+
--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
67
66
|
--pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
|
68
67
|
--pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
|
69
|
-
--pf-v6-c-notification-drawer__group-toggle-count--
|
70
|
-
--pf-v6-c-notification-drawer__group-toggle-icon--
|
68
|
+
--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
69
|
+
--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
71
70
|
--pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
72
71
|
--pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
|
73
72
|
--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
|
@@ -86,10 +85,10 @@
|
|
86
85
|
display: flex;
|
87
86
|
flex-shrink: 0;
|
88
87
|
align-items: baseline;
|
89
|
-
padding-block-start: var(--pf-v6-c-notification-drawer__header--
|
90
|
-
padding-block-end: var(--pf-v6-c-notification-drawer__header--
|
91
|
-
padding-inline-start: var(--pf-v6-c-notification-drawer__header--
|
92
|
-
padding-inline-end: var(--pf-v6-c-notification-drawer__header--
|
88
|
+
padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
|
89
|
+
padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
|
90
|
+
padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
|
91
|
+
padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
|
93
92
|
background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
|
94
93
|
}
|
95
94
|
|
@@ -101,7 +100,7 @@
|
|
101
100
|
}
|
102
101
|
|
103
102
|
.pf-v6-c-notification-drawer__header-status {
|
104
|
-
margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--
|
103
|
+
margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
|
105
104
|
font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
|
106
105
|
font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
|
107
106
|
color: var(--pf-v6-c-notification-drawer__header-status--Color);
|
@@ -132,10 +131,10 @@
|
|
132
131
|
position: relative;
|
133
132
|
display: grid;
|
134
133
|
grid-template-columns: 1fr auto;
|
135
|
-
padding-block-start: var(--pf-v6-c-notification-drawer__list-item--
|
136
|
-
padding-block-end: var(--pf-v6-c-notification-drawer__list-item--
|
137
|
-
padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--
|
138
|
-
padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--
|
134
|
+
padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
|
135
|
+
padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
|
136
|
+
padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
|
137
|
+
padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
|
139
138
|
background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
|
140
139
|
border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
|
141
140
|
border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
|
@@ -178,11 +177,11 @@
|
|
178
177
|
grid-row: 1/2;
|
179
178
|
grid-column: 1/2;
|
180
179
|
align-items: baseline;
|
181
|
-
margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--
|
180
|
+
margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
|
182
181
|
}
|
183
182
|
|
184
183
|
.pf-v6-c-notification-drawer__list-item-header-icon {
|
185
|
-
margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--
|
184
|
+
margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
|
186
185
|
color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
|
187
186
|
}
|
188
187
|
|
@@ -208,7 +207,7 @@
|
|
208
207
|
.pf-v6-c-notification-drawer__list-item-description {
|
209
208
|
grid-row: 2/3;
|
210
209
|
grid-column: 1/2;
|
211
|
-
margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--
|
210
|
+
margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
|
212
211
|
word-break: break-word;
|
213
212
|
}
|
214
213
|
|
@@ -225,7 +224,7 @@
|
|
225
224
|
}
|
226
225
|
|
227
226
|
.pf-v6-c-notification-drawer__group {
|
228
|
-
border-block-end: var(--pf-v6-c-notification-drawer__group--
|
227
|
+
border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
|
229
228
|
}
|
230
229
|
.pf-v6-c-notification-drawer__group.pf-m-expanded {
|
231
230
|
min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
|
@@ -236,10 +235,10 @@
|
|
236
235
|
display: flex;
|
237
236
|
align-items: baseline;
|
238
237
|
width: 100%;
|
239
|
-
padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--
|
240
|
-
padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--
|
241
|
-
padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--
|
242
|
-
padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--
|
238
|
+
padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
|
239
|
+
padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
|
240
|
+
padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
|
241
|
+
padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
|
243
242
|
background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
|
244
243
|
border: none;
|
245
244
|
outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
|
@@ -251,7 +250,7 @@
|
|
251
250
|
-webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
|
252
251
|
overflow: hidden;
|
253
252
|
flex: 1;
|
254
|
-
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--
|
253
|
+
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
|
255
254
|
font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
|
256
255
|
text-align: start;
|
257
256
|
word-break: break-word;
|
@@ -259,11 +258,11 @@
|
|
259
258
|
|
260
259
|
.pf-v6-c-notification-drawer__group-toggle-count {
|
261
260
|
margin-inline-start: auto;
|
262
|
-
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--
|
261
|
+
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
|
263
262
|
}
|
264
263
|
|
265
264
|
.pf-v6-c-notification-drawer__group-toggle-icon {
|
266
|
-
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--
|
265
|
+
margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
|
267
266
|
color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
|
268
267
|
transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
|
269
268
|
}
|
@@ -1,14 +1,5 @@
|
|
1
|
-
.pf-v6-c-number-input
|
2
|
-
|
3
|
-
}
|
4
|
-
.pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
|
5
|
-
margin: 0;
|
6
|
-
appearance: none;
|
7
|
-
}
|
8
|
-
|
9
|
-
:root,
|
10
|
-
.pf-v6-c-number-input {
|
11
|
-
--pf-v6-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
|
1
|
+
:where(:root, .pf-v6-c-number-input) {
|
2
|
+
--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
12
3
|
--pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
|
13
4
|
--pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
|
14
5
|
--pf-v6-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
|
@@ -30,11 +21,16 @@
|
|
30
21
|
}
|
31
22
|
.pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
|
32
23
|
text-align: end;
|
24
|
+
appearance: textfield;
|
25
|
+
}
|
26
|
+
.pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
|
27
|
+
margin: 0;
|
28
|
+
appearance: none;
|
33
29
|
}
|
34
30
|
|
35
31
|
.pf-v6-c-input-group + .pf-v6-c-number-input__unit,
|
36
32
|
.pf-v6-c-number-input__unit + .pf-v6-c-input-group {
|
37
|
-
margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--
|
33
|
+
margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart);
|
38
34
|
}
|
39
35
|
|
40
36
|
.pf-v6-c-number-input__icon {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
:root {
|
1
|
+
:where(:root, .pf-v6-c-overflow-menu) {
|
2
2
|
--pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
|
3
3
|
--pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
|
4
4
|
--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
|