@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +102 -0
- package/README.md +1 -1
- package/css/assets/images/PF-Backdrop.svg +1 -0
- package/css/assets/images/PF-HorizontalLogo-Color.svg +29 -0
- package/css/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
- package/css/assets/images/PF-IconLogo-Reverse.svg +14 -0
- package/css/assets/images/PF-IconLogo-color.svg +17 -0
- package/css/assets/images/PF-IconLogo.svg +17 -0
- package/css/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/css/assets/images/pf-background.svg +22 -0
- package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
- package/css/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
- package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
- package/css/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
- package/css/assets/images/pf_logo_white.hbs +35 -0
- package/css/assets/images/pf_logo_white.svg +38 -0
- package/css/components/AboutModalBox/about-modal-box.css +57 -94
- package/css/components/AboutModalBox/about-modal-box.d.ts +1 -2
- package/css/components/AboutModalBox/about-modal-box.js +1 -2
- package/css/components/AboutModalBox/about-modal-box.mjs +1 -2
- package/css/components/Accordion/accordion.css +85 -177
- package/css/components/Accordion/accordion.d.ts +3 -2
- package/css/components/Accordion/accordion.js +3 -2
- package/css/components/Accordion/accordion.mjs +3 -2
- package/css/components/ActionList/action-list.css +18 -17
- package/css/components/Alert/alert-group.css +20 -16
- package/css/components/Alert/alert.css +57 -84
- package/css/components/Alert/alert.d.ts +1 -2
- package/css/components/Alert/alert.js +1 -2
- package/css/components/Alert/alert.mjs +1 -2
- package/css/components/Avatar/avatar.css +10 -13
- package/css/components/Avatar/avatar.d.ts +1 -2
- package/css/components/Avatar/avatar.js +1 -2
- package/css/components/Avatar/avatar.mjs +1 -2
- package/css/components/BackToTop/back-to-top.css +17 -16
- package/css/components/Backdrop/backdrop.css +6 -2
- package/css/components/BackgroundImage/background-image.css +5 -1
- package/css/components/Badge/badge.css +23 -15
- package/css/components/Badge/badge.d.ts +2 -2
- package/css/components/Badge/badge.js +2 -2
- package/css/components/Badge/badge.mjs +2 -2
- package/css/components/Banner/banner.css +90 -64
- package/css/components/Banner/banner.d.ts +12 -4
- package/css/components/Banner/banner.js +12 -4
- package/css/components/Banner/banner.mjs +12 -4
- package/css/components/Breadcrumb/breadcrumb.css +19 -16
- package/css/components/Button/button.css +444 -435
- package/css/components/Button/button.d.ts +10 -9
- package/css/components/Button/button.js +10 -9
- package/css/components/Button/button.mjs +10 -9
- package/css/components/Card/card.css +100 -194
- package/css/components/Card/card.d.ts +5 -9
- package/css/components/Card/card.js +5 -9
- package/css/components/Card/card.mjs +5 -9
- package/css/components/Check/check.css +24 -21
- package/css/components/ClipboardCopy/clipboard-copy.css +30 -33
- package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -2
- package/css/components/ClipboardCopy/clipboard-copy.js +1 -2
- package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -2
- package/css/components/CodeBlock/code-block.css +18 -9
- package/css/components/Content/content.css +67 -67
- package/css/components/DataList/data-list.css +101 -158
- package/css/components/DataList/data-list.d.ts +1 -2
- package/css/components/DataList/data-list.js +1 -2
- package/css/components/DataList/data-list.mjs +1 -2
- package/css/components/DescriptionList/description-list.css +39 -34
- package/css/components/Divider/divider.css +97 -177
- package/css/components/Divider/divider.d.ts +1 -0
- package/css/components/Divider/divider.js +1 -0
- package/css/components/Divider/divider.mjs +1 -0
- package/css/components/DragDrop/drag-drop.css +18 -14
- package/css/components/DragDrop/drag-drop.d.ts +1 -2
- package/css/components/DragDrop/drag-drop.js +1 -2
- package/css/components/DragDrop/drag-drop.mjs +1 -2
- package/css/components/Drawer/drawer.css +112 -113
- package/css/components/Drawer/drawer.d.ts +3 -3
- package/css/components/Drawer/drawer.js +3 -3
- package/css/components/Drawer/drawer.mjs +3 -3
- package/css/components/Dropdown/dropdown.css +1 -3
- package/css/components/Dropdown/dropdown.d.ts +0 -1
- package/css/components/Dropdown/dropdown.js +0 -1
- package/css/components/Dropdown/dropdown.mjs +0 -1
- package/css/components/EmptyState/empty-state.css +57 -34
- package/css/components/EmptyState/empty-state.d.ts +6 -1
- package/css/components/EmptyState/empty-state.js +6 -1
- package/css/components/EmptyState/empty-state.mjs +6 -1
- package/css/components/ExpandableSection/expandable-section.css +64 -62
- package/css/components/ExpandableSection/expandable-section.d.ts +1 -3
- package/css/components/ExpandableSection/expandable-section.js +1 -3
- package/css/components/ExpandableSection/expandable-section.mjs +1 -3
- package/css/components/FileUpload/file-upload.css +28 -34
- package/css/components/Form/form.css +68 -114
- package/css/components/Form/form.d.ts +2 -6
- package/css/components/Form/form.js +2 -6
- package/css/components/Form/form.mjs +2 -6
- package/css/components/FormControl/form-control.css +86 -111
- package/css/components/FormControl/form-control.d.ts +1 -2
- package/css/components/FormControl/form-control.js +1 -2
- package/css/components/FormControl/form-control.mjs +1 -2
- package/css/components/HelperText/helper-text.css +28 -34
- package/css/components/HelperText/helper-text.d.ts +1 -2
- package/css/components/HelperText/helper-text.js +1 -2
- package/css/components/HelperText/helper-text.mjs +1 -2
- package/css/components/Hint/hint.css +28 -21
- 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 +154 -18
- package/css/components/Icon/icon.d.ts +11 -0
- package/css/components/Icon/icon.js +11 -0
- package/css/components/Icon/icon.mjs +11 -0
- package/css/components/InlineEdit/inline-edit.css +8 -7
- package/css/components/InputGroup/input-group.css +22 -38
- package/css/components/InputGroup/input-group.d.ts +1 -2
- package/css/components/InputGroup/input-group.js +1 -2
- package/css/components/InputGroup/input-group.mjs +1 -2
- package/css/components/JumpLinks/jump-links.css +34 -34
- package/css/components/Label/label-group.css +39 -44
- package/css/components/Label/label.css +258 -355
- package/css/components/Label/label.d.ts +11 -10
- package/css/components/Label/label.js +11 -10
- package/css/components/Label/label.mjs +11 -10
- package/css/components/List/list.css +16 -16
- package/css/components/Login/login.css +70 -97
- package/css/components/Login/login.d.ts +0 -2
- package/css/components/Login/login.js +0 -2
- package/css/components/Login/login.mjs +0 -2
- package/css/components/Masthead/masthead.css +262 -498
- package/css/components/Masthead/masthead.d.ts +3 -45
- package/css/components/Masthead/masthead.js +3 -45
- package/css/components/Masthead/masthead.mjs +3 -45
- package/css/components/Menu/menu.css +3 -0
- package/css/components/Menu/menu.d.ts +1 -0
- package/css/components/Menu/menu.js +1 -0
- package/css/components/Menu/menu.mjs +1 -0
- package/css/components/MenuToggle/menu-toggle.css +58 -80
- package/css/components/ModalBox/modal-box.css +59 -52
- package/css/components/ModalBox/modal-box.d.ts +1 -2
- package/css/components/ModalBox/modal-box.js +1 -2
- package/css/components/ModalBox/modal-box.mjs +1 -2
- package/css/components/MultipleFileUpload/multiple-file-upload.css +77 -50
- package/css/components/MultipleFileUpload/multiple-file-upload.d.ts +0 -1
- package/css/components/MultipleFileUpload/multiple-file-upload.js +0 -1
- package/css/components/MultipleFileUpload/multiple-file-upload.mjs +0 -1
- package/css/components/Nav/nav.css +241 -917
- package/css/components/Nav/nav.d.ts +9 -20
- package/css/components/Nav/nav.js +9 -20
- package/css/components/Nav/nav.mjs +9 -20
- package/css/components/NotificationBadge/notification-badge.css +56 -81
- package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
- package/css/components/NotificationBadge/notification-badge.js +1 -5
- package/css/components/NotificationBadge/notification-badge.mjs +1 -5
- package/css/components/NotificationDrawer/notification-drawer.css +104 -115
- package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -3
- package/css/components/NotificationDrawer/notification-drawer.js +3 -3
- package/css/components/NotificationDrawer/notification-drawer.mjs +3 -3
- package/css/components/NumberInput/number-input.css +8 -8
- package/css/components/NumberInput/number-input.d.ts +0 -3
- package/css/components/NumberInput/number-input.js +0 -3
- package/css/components/NumberInput/number-input.mjs +0 -3
- package/css/components/OverflowMenu/overflow-menu.css +17 -47
- package/css/components/OverflowMenu/overflow-menu.d.ts +1 -3
- package/css/components/OverflowMenu/overflow-menu.js +1 -3
- package/css/components/OverflowMenu/overflow-menu.mjs +1 -3
- package/css/components/Page/page.css +112 -209
- package/css/components/Page/page.d.ts +5 -12
- package/css/components/Page/page.js +5 -12
- package/css/components/Page/page.mjs +5 -12
- package/css/components/Pagination/pagination.css +64 -121
- package/css/components/Pagination/pagination.d.ts +2 -5
- package/css/components/Pagination/pagination.js +2 -5
- package/css/components/Pagination/pagination.mjs +2 -5
- package/css/components/Panel/panel.css +27 -23
- package/css/components/Panel/panel.d.ts +2 -2
- package/css/components/Panel/panel.js +2 -2
- package/css/components/Panel/panel.mjs +2 -2
- package/css/components/Popover/popover.css +42 -53
- package/css/components/Popover/popover.d.ts +1 -2
- package/css/components/Popover/popover.js +1 -2
- package/css/components/Popover/popover.mjs +1 -2
- package/css/components/Progress/progress.css +31 -45
- package/css/components/Progress/progress.d.ts +1 -2
- package/css/components/Progress/progress.js +1 -2
- package/css/components/Progress/progress.mjs +1 -2
- package/css/components/Radio/radio.css +27 -20
- package/css/components/Sidebar/sidebar.css +20 -9
- package/css/components/Sidebar/sidebar.d.ts +1 -0
- package/css/components/Sidebar/sidebar.js +1 -0
- package/css/components/Sidebar/sidebar.mjs +1 -0
- package/css/components/SimpleList/simple-list.css +35 -52
- package/css/components/SimpleList/simple-list.d.ts +2 -2
- package/css/components/SimpleList/simple-list.js +2 -2
- package/css/components/SimpleList/simple-list.mjs +2 -2
- package/css/components/Skeleton/skeleton.css +18 -20
- package/css/components/Skeleton/skeleton.d.ts +1 -2
- package/css/components/Skeleton/skeleton.js +1 -2
- package/css/components/Skeleton/skeleton.mjs +1 -2
- package/css/components/SkipToContent/skip-to-content.css +6 -3
- package/css/components/Slider/slider.css +34 -30
- package/css/components/Spinner/spinner.css +17 -34
- package/css/components/Switch/switch.css +42 -38
- package/css/components/Switch/switch.d.ts +1 -2
- package/css/components/Switch/switch.js +1 -2
- package/css/components/Switch/switch.mjs +1 -2
- package/css/components/TabContent/tab-content.css +17 -11
- package/css/components/TabContent/tab-content.d.ts +1 -1
- package/css/components/TabContent/tab-content.js +1 -1
- package/css/components/TabContent/tab-content.mjs +1 -1
- package/css/components/Table/table-grid.css +8 -8
- package/css/components/Table/table.css +85 -90
- package/css/components/Table/table.d.ts +2 -0
- package/css/components/Table/table.js +2 -0
- package/css/components/Table/table.mjs +2 -0
- package/css/components/Tile/tile.css +40 -81
- package/css/components/Tile/tile.d.ts +0 -1
- package/css/components/Tile/tile.js +0 -1
- package/css/components/Tile/tile.mjs +0 -1
- package/css/components/Timestamp/timestamp.css +12 -9
- package/css/components/Title/title.css +70 -19
- package/css/components/Title/title.d.ts +7 -1
- package/css/components/Title/title.js +7 -1
- package/css/components/Title/title.mjs +7 -1
- package/css/components/ToggleGroup/toggle-group.css +34 -47
- package/css/components/ToggleGroup/toggle-group.d.ts +0 -1
- package/css/components/ToggleGroup/toggle-group.js +0 -1
- package/css/components/ToggleGroup/toggle-group.mjs +0 -1
- package/css/components/Toolbar/toolbar.css +2527 -1032
- package/css/components/Toolbar/toolbar.d.ts +406 -102
- package/css/components/Toolbar/toolbar.js +406 -102
- package/css/components/Toolbar/toolbar.mjs +406 -102
- package/css/components/Tooltip/tooltip.css +16 -18
- package/css/components/Tooltip/tooltip.d.ts +0 -1
- package/css/components/Tooltip/tooltip.js +0 -1
- package/css/components/Tooltip/tooltip.mjs +0 -1
- package/css/components/Truncate/truncate.css +4 -0
- package/css/docs/components/Brand/examples/Brand.css +12 -0
- package/css/docs/components/Brand/examples/Brand.d.ts +10 -0
- package/css/docs/components/Brand/examples/Brand.js +11 -0
- package/css/docs/components/Brand/examples/Brand.mjs +9 -0
- package/css/docs/components/Button/examples/Button.css +4 -0
- package/css/docs/components/Divider/examples/Divider.css +3 -1
- package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/css/docs/components/Label/examples/Label.css +4 -0
- package/css/docs/components/Nav/examples/Navigation.css +1 -22
- package/css/docs/components/Nav/examples/Navigation.d.ts +0 -3
- package/css/docs/components/Nav/examples/Navigation.js +0 -3
- package/css/docs/components/Nav/examples/Navigation.mjs +0 -3
- package/css/docs/components/Page/examples/Page.css +0 -8
- package/css/docs/components/Page/examples/Page.d.ts +0 -7
- package/css/docs/components/Page/examples/Page.js +0 -7
- package/css/docs/components/Page/examples/Page.mjs +0 -7
- package/css/docs/components/Toolbar/examples/Toolbar.css +20 -15
- package/css/docs/components/Truncate/examples/Truncate.css +2 -2
- package/css/docs/demos/Toolbar/examples/Toolbar.css +15 -0
- package/css/docs/demos/Toolbar/examples/Toolbar.d.ts +6 -1
- package/css/docs/demos/Toolbar/examples/Toolbar.js +6 -1
- package/css/docs/demos/Toolbar/examples/Toolbar.mjs +6 -1
- package/package.json +3 -3
- package/css/docs/components/Avatar/examples/Avatar.css +0 -3
- package/css/docs/components/Avatar/examples/Avatar.d.ts +0 -3
- package/css/docs/components/Avatar/examples/Avatar.js +0 -4
- package/css/docs/components/Avatar/examples/Avatar.mjs +0 -2
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
@@ -1,27 +1,24 @@
|
|
1
1
|
.pf-v5-c-popover {
|
2
|
-
--pf-v5-c-popover--FontSize: var(--pf-
|
2
|
+
--pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
|
3
3
|
--pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
4
4
|
--pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
5
|
-
--pf-v5-c-popover--BoxShadow: var(--pf-
|
6
|
-
--pf-v5-c-popover--
|
7
|
-
--pf-v5-c-popover--m-
|
8
|
-
--pf-v5-c-popover--m-
|
9
|
-
--pf-v5-c-popover--m-
|
10
|
-
--pf-v5-c-popover--m-
|
11
|
-
--pf-v5-c-popover--m-
|
12
|
-
--pf-v5-c-
|
13
|
-
--pf-v5-c-
|
14
|
-
--pf-v5-c-
|
15
|
-
--pf-v5-c-
|
16
|
-
--pf-v5-c-popover__content--
|
17
|
-
--pf-v5-c-popover__content--
|
18
|
-
--pf-v5-c-
|
19
|
-
--pf-v5-c-
|
20
|
-
--pf-v5-c-
|
21
|
-
--pf-v5-c-popover__arrow--
|
22
|
-
--pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
|
23
|
-
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
|
24
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
5
|
+
--pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
|
6
|
+
--pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
|
7
|
+
--pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
8
|
+
--pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
9
|
+
--pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
10
|
+
--pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
11
|
+
--pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
12
|
+
--pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
13
|
+
--pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
|
14
|
+
--pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
|
15
|
+
--pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
|
16
|
+
--pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
|
17
|
+
--pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
|
18
|
+
--pf-v5-c-popover__arrow--Width: 0.9375rem;
|
19
|
+
--pf-v5-c-popover__arrow--Height: 0.9375rem;
|
20
|
+
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
|
21
|
+
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
25
22
|
--pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
|
26
23
|
--pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
|
27
24
|
--pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
|
@@ -34,21 +31,27 @@
|
|
34
31
|
--pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
|
35
32
|
--pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
|
36
33
|
--pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
|
37
|
-
--pf-v5-c-
|
38
|
-
--pf-v5-c-
|
39
|
-
--pf-v5-c-
|
40
|
-
--pf-v5-c-
|
41
|
-
--pf-v5-c-
|
42
|
-
--pf-v5-c-
|
43
|
-
--pf-v5-c-
|
44
|
-
--pf-v5-c-
|
45
|
-
--pf-v5-c-popover__title-
|
46
|
-
--pf-v5-c-popover__title-
|
47
|
-
--pf-v5-c-
|
34
|
+
--pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
|
35
|
+
--pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
|
36
|
+
--pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
|
37
|
+
--pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
|
38
|
+
--pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
|
39
|
+
--pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
|
40
|
+
--pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
|
41
|
+
--pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
42
|
+
--pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
|
43
|
+
--pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
|
44
|
+
--pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
45
|
+
--pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
46
|
+
--pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
47
|
+
--pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
48
|
+
--pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
|
49
|
+
--pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
|
48
50
|
position: relative;
|
49
51
|
min-width: var(--pf-v5-c-popover--MinWidth);
|
50
52
|
max-width: var(--pf-v5-c-popover--MaxWidth);
|
51
53
|
font-size: var(--pf-v5-c-popover--FontSize);
|
54
|
+
border-radius: var(--pf-v5-c-popover--BorderRadius);
|
52
55
|
box-shadow: var(--pf-v5-c-popover--BoxShadow);
|
53
56
|
}
|
54
57
|
.pf-v5-c-popover.pf-m-no-padding {
|
@@ -99,43 +102,38 @@
|
|
99
102
|
}
|
100
103
|
.pf-v5-c-popover:is(.pf-m-left-top,
|
101
104
|
.pf-m-right-top) {
|
102
|
-
--pf-v5-c-popover__arrow--Top:
|
105
|
+
--pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
|
103
106
|
--pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
|
104
107
|
}
|
105
108
|
.pf-v5-c-popover:is(.pf-m-left-bottom,
|
106
109
|
.pf-m-right-bottom) {
|
107
110
|
--pf-v5-c-popover__arrow--Top: auto;
|
108
|
-
--pf-v5-c-popover__arrow--Bottom:
|
111
|
+
--pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
|
109
112
|
}
|
110
113
|
.pf-v5-c-popover:is(.pf-m-top-left,
|
111
114
|
.pf-m-bottom-left) {
|
112
|
-
--pf-v5-c-popover__arrow--Left:
|
115
|
+
--pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
|
113
116
|
--pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
|
114
117
|
}
|
115
118
|
.pf-v5-c-popover:is(.pf-m-top-right,
|
116
119
|
.pf-m-bottom-right) {
|
117
|
-
--pf-v5-c-popover__arrow--Right:
|
120
|
+
--pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
|
118
121
|
--pf-v5-c-popover__arrow--Left: auto;
|
119
122
|
}
|
120
123
|
.pf-v5-c-popover.pf-m-danger {
|
121
124
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
|
122
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
|
123
125
|
}
|
124
126
|
.pf-v5-c-popover.pf-m-warning {
|
125
127
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
|
126
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
|
127
128
|
}
|
128
129
|
.pf-v5-c-popover.pf-m-success {
|
129
130
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
|
130
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
|
131
131
|
}
|
132
132
|
.pf-v5-c-popover.pf-m-custom {
|
133
133
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
|
134
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
|
135
134
|
}
|
136
135
|
.pf-v5-c-popover.pf-m-info {
|
137
136
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
|
138
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
|
139
137
|
}
|
140
138
|
|
141
139
|
.pf-v5-c-popover__content {
|
@@ -145,6 +143,7 @@
|
|
145
143
|
padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
|
146
144
|
padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
|
147
145
|
background-color: var(--pf-v5-c-popover__content--BackgroundColor);
|
146
|
+
border-radius: var(--pf-v5-c-popover__content--BorderRadius);
|
148
147
|
}
|
149
148
|
|
150
149
|
.pf-v5-c-popover__close {
|
@@ -158,12 +157,10 @@
|
|
158
157
|
|
159
158
|
.pf-v5-c-popover__arrow {
|
160
159
|
position: absolute;
|
161
|
-
/* stylelint-disable liberty/use-logical-spec */
|
162
160
|
top: var(--pf-v5-c-popover__arrow--Top, auto);
|
163
161
|
right: var(--pf-v5-c-popover__arrow--Right, auto);
|
164
162
|
bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
|
165
163
|
left: var(--pf-v5-c-popover__arrow--Left, auto);
|
166
|
-
/* stylelint-enable */
|
167
164
|
width: var(--pf-v5-c-popover__arrow--Width);
|
168
165
|
height: var(--pf-v5-c-popover__arrow--Height);
|
169
166
|
pointer-events: none;
|
@@ -190,8 +187,8 @@
|
|
190
187
|
.pf-v5-c-popover__title-text {
|
191
188
|
font-family: var(--pf-v5-c-popover__title-text--FontFamily);
|
192
189
|
font-size: var(--pf-v5-c-popover__title-text--FontSize);
|
193
|
-
|
194
|
-
color: var(--pf-v5-c-popover__title-text--Color
|
190
|
+
font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
|
191
|
+
color: var(--pf-v5-c-popover__title-text--Color);
|
195
192
|
}
|
196
193
|
|
197
194
|
.pf-v5-c-popover__body {
|
@@ -200,12 +197,4 @@
|
|
200
197
|
|
201
198
|
.pf-v5-c-popover__footer {
|
202
199
|
margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
|
203
|
-
}
|
204
|
-
|
205
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-popover {
|
206
|
-
--pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
207
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
208
|
-
--pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
|
209
|
-
--pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
|
210
|
-
--pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
|
211
200
|
}
|
@@ -30,7 +30,6 @@ declare const _default: {
|
|
30
30
|
"popoverHeader": "pf-v5-c-popover__header",
|
31
31
|
"popoverTitle": "pf-v5-c-popover__title",
|
32
32
|
"popoverTitleIcon": "pf-v5-c-popover__title-icon",
|
33
|
-
"popoverTitleText": "pf-v5-c-popover__title-text"
|
34
|
-
"themeDark": "pf-v5-theme-dark"
|
33
|
+
"popoverTitleText": "pf-v5-c-popover__title-text"
|
35
34
|
};
|
36
35
|
export default _default;
|
@@ -32,6 +32,5 @@ exports.default = {
|
|
32
32
|
"popoverHeader": "pf-v5-c-popover__header",
|
33
33
|
"popoverTitle": "pf-v5-c-popover__title",
|
34
34
|
"popoverTitleIcon": "pf-v5-c-popover__title-icon",
|
35
|
-
"popoverTitleText": "pf-v5-c-popover__title-text"
|
36
|
-
"themeDark": "pf-v5-theme-dark"
|
35
|
+
"popoverTitleText": "pf-v5-c-popover__title-text"
|
37
36
|
};
|
@@ -30,6 +30,5 @@ export default {
|
|
30
30
|
"popoverHeader": "pf-v5-c-popover__header",
|
31
31
|
"popoverTitle": "pf-v5-c-popover__title",
|
32
32
|
"popoverTitleIcon": "pf-v5-c-popover__title-icon",
|
33
|
-
"popoverTitleText": "pf-v5-c-popover__title-text"
|
34
|
-
"themeDark": "pf-v5-theme-dark"
|
33
|
+
"popoverTitleText": "pf-v5-c-popover__title-text"
|
35
34
|
};
|
@@ -1,31 +1,33 @@
|
|
1
|
+
:root,
|
1
2
|
.pf-v5-c-progress {
|
2
|
-
--pf-v5-c-progress--GridGap: var(--pf-
|
3
|
-
--pf-v5-c-progress__bar--
|
4
|
-
--pf-v5-c-progress__bar--
|
5
|
-
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
3
|
+
--pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
|
4
|
+
--pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
|
5
|
+
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
6
6
|
--pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
|
7
|
-
--pf-v5-c-progress__status--Gap: var(--pf-
|
8
|
-
--pf-v5-c-progress__status-icon--Color: var(--pf-
|
9
|
-
--pf-v5-c-progress__bar--before--Opacity: .2;
|
7
|
+
--pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
|
8
|
+
--pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
10
9
|
--pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
|
11
|
-
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-
|
12
|
-
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-
|
13
|
-
--pf-v5-c-progress--m-
|
14
|
-
--pf-v5-c-progress--m-
|
15
|
-
--pf-v5-c-progress--m-
|
16
|
-
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-
|
17
|
-
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-
|
18
|
-
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-
|
19
|
-
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-
|
20
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-
|
21
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-
|
22
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-
|
23
|
-
--pf-v5-c-progress--m-inside__measure--
|
24
|
-
--pf-v5-c-progress--m-
|
25
|
-
--pf-v5-c-progress--m-
|
26
|
-
--pf-v5-c-progress--m-
|
27
|
-
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-
|
28
|
-
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-
|
10
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
|
11
|
+
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
|
12
|
+
--pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
|
13
|
+
--pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
14
|
+
--pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
15
|
+
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
16
|
+
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
17
|
+
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
18
|
+
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
|
19
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
|
20
|
+
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
|
21
|
+
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
22
|
+
--pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
|
23
|
+
--pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
24
|
+
--pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
25
|
+
--pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
|
26
|
+
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
|
27
|
+
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
|
28
|
+
}
|
29
|
+
|
30
|
+
.pf-v5-c-progress {
|
29
31
|
display: grid;
|
30
32
|
grid-template-rows: 1fr auto;
|
31
33
|
grid-template-columns: auto auto;
|
@@ -35,9 +37,6 @@
|
|
35
37
|
.pf-v5-c-progress.pf-m-sm {
|
36
38
|
--pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
|
37
39
|
}
|
38
|
-
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
|
39
|
-
font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
|
40
|
-
}
|
41
40
|
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
|
42
41
|
font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
|
43
42
|
}
|
@@ -93,18 +92,19 @@
|
|
93
92
|
grid-template-columns: 1fr fit-content(50%);
|
94
93
|
}
|
95
94
|
.pf-v5-c-progress.pf-m-success {
|
96
|
-
--pf-v5-c-
|
95
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
|
97
96
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
|
98
97
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
|
99
98
|
}
|
100
99
|
.pf-v5-c-progress.pf-m-warning {
|
101
|
-
--pf-v5-c-
|
100
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
|
102
101
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
|
103
102
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
|
104
103
|
}
|
105
104
|
.pf-v5-c-progress.pf-m-danger {
|
106
|
-
--pf-v5-c-
|
105
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
|
107
106
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
|
107
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
|
108
108
|
}
|
109
109
|
|
110
110
|
.pf-v5-c-progress__description {
|
@@ -146,14 +146,6 @@
|
|
146
146
|
height: var(--pf-v5-c-progress__bar--Height);
|
147
147
|
background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
|
148
148
|
}
|
149
|
-
.pf-v5-c-progress__bar::before {
|
150
|
-
position: absolute;
|
151
|
-
width: 100%;
|
152
|
-
height: 100%;
|
153
|
-
content: "";
|
154
|
-
background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
|
155
|
-
opacity: var(--pf-v5-c-progress__bar--before--Opacity);
|
156
|
-
}
|
157
149
|
|
158
150
|
.pf-v5-c-progress__indicator {
|
159
151
|
position: absolute;
|
@@ -165,10 +157,4 @@
|
|
165
157
|
grid-row: 3/4;
|
166
158
|
grid-column: 1/3;
|
167
159
|
margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
|
168
|
-
}
|
169
|
-
|
170
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-progress {
|
171
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
172
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
173
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
174
160
|
}
|
@@ -19,7 +19,6 @@ declare const _default: {
|
|
19
19
|
"progressIndicator": "pf-v5-c-progress__indicator",
|
20
20
|
"progressMeasure": "pf-v5-c-progress__measure",
|
21
21
|
"progressStatus": "pf-v5-c-progress__status",
|
22
|
-
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
23
|
-
"themeDark": "pf-v5-theme-dark"
|
22
|
+
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
24
23
|
};
|
25
24
|
export default _default;
|
@@ -21,6 +21,5 @@ exports.default = {
|
|
21
21
|
"progressIndicator": "pf-v5-c-progress__indicator",
|
22
22
|
"progressMeasure": "pf-v5-c-progress__measure",
|
23
23
|
"progressStatus": "pf-v5-c-progress__status",
|
24
|
-
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
25
|
-
"themeDark": "pf-v5-theme-dark"
|
24
|
+
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
26
25
|
};
|
@@ -19,6 +19,5 @@ export default {
|
|
19
19
|
"progressIndicator": "pf-v5-c-progress__indicator",
|
20
20
|
"progressMeasure": "pf-v5-c-progress__measure",
|
21
21
|
"progressStatus": "pf-v5-c-progress__status",
|
22
|
-
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
23
|
-
"themeDark": "pf-v5-theme-dark"
|
22
|
+
"progressStatusIcon": "pf-v5-c-progress__status-icon"
|
24
23
|
};
|
@@ -1,36 +1,36 @@
|
|
1
|
+
:root,
|
1
2
|
.pf-v5-c-radio {
|
2
|
-
--pf-v5-c-radio--GridGap: var(--pf-
|
3
|
-
--pf-v5-c-
|
4
|
-
--pf-v5-c-radio__label--Color: var(--pf-
|
5
|
-
--pf-v5-c-radio__label--
|
6
|
-
--pf-v5-c-radio__label--
|
7
|
-
--pf-v5-c-radio__label--
|
8
|
-
--pf-v5-c-
|
3
|
+
--pf-v5-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
|
4
|
+
--pf-v5-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
|
5
|
+
--pf-v5-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
|
6
|
+
--pf-v5-c-radio__label--Color: var(--pf-t--global--text--color--regular);
|
7
|
+
--pf-v5-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
|
8
|
+
--pf-v5-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
|
9
|
+
--pf-v5-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
|
10
|
+
--pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
|
9
11
|
--pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
|
10
12
|
--pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
|
11
|
-
--pf-v5-c-radio__description--FontSize: var(--pf-
|
12
|
-
--pf-v5-c-radio__description--Color: var(--pf-
|
13
|
-
--pf-v5-c-radio__body--MarginTop: var(--pf-
|
13
|
+
--pf-v5-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
|
14
|
+
--pf-v5-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
|
15
|
+
--pf-v5-c-radio__body--MarginTop: var(--pf-t--global--spacer--sm);
|
16
|
+
}
|
17
|
+
|
18
|
+
.pf-v5-c-radio {
|
14
19
|
display: grid;
|
15
20
|
grid-template-columns: auto 1fr;
|
16
21
|
grid-gap: var(--pf-v5-c-radio--GridGap);
|
17
22
|
align-items: baseline;
|
23
|
+
accent-color: var(--pf-v5-c-radio--AccentColor);
|
18
24
|
}
|
19
25
|
.pf-v5-c-radio.pf-m-standalone {
|
20
26
|
--pf-v5-c-radio--GridGap: 0;
|
21
|
-
--pf-v5-c-radio__input--TranslateY
|
22
|
-
|
23
|
-
}
|
24
|
-
|
25
|
-
.pf-v5-c-radio__label {
|
26
|
-
font-size: var(--pf-v5-c-radio__label--FontSize);
|
27
|
-
font-weight: var(--pf-v5-c-radio__label--FontWeight);
|
28
|
-
line-height: var(--pf-v5-c-radio__label--LineHeight);
|
29
|
-
color: var(--pf-v5-c-radio__label--Color);
|
27
|
+
--pf-v5-c-radio__input--TranslateY: none;
|
28
|
+
display: inline-grid;
|
30
29
|
}
|
31
30
|
|
32
31
|
.pf-v5-c-radio__input {
|
33
|
-
-
|
32
|
+
align-self: start;
|
33
|
+
transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
|
34
34
|
}
|
35
35
|
.pf-v5-c-radio__input:first-child {
|
36
36
|
margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
|
@@ -39,6 +39,13 @@
|
|
39
39
|
margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
|
40
40
|
}
|
41
41
|
|
42
|
+
.pf-v5-c-radio__label {
|
43
|
+
font-size: var(--pf-v5-c-radio__label--FontSize);
|
44
|
+
font-weight: var(--pf-v5-c-radio__label--FontWeight);
|
45
|
+
line-height: var(--pf-v5-c-radio__label--LineHeight);
|
46
|
+
color: var(--pf-v5-c-radio__label--Color);
|
47
|
+
}
|
48
|
+
|
42
49
|
.pf-v5-c-radio__description {
|
43
50
|
grid-column: 2;
|
44
51
|
font-size: var(--pf-v5-c-radio__description--FontSize);
|
@@ -1,9 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
--pf-v5-c-sidebar--
|
4
|
-
--pf-v5-c-sidebar--
|
5
|
-
--pf-v5-c-sidebar--BorderWidth--base: var(--pf-
|
6
|
-
--pf-v5-c-sidebar--BorderColor--base: var(--pf-
|
1
|
+
:root,
|
2
|
+
:where(.pf-v5-c-sidebar) {
|
3
|
+
--pf-v5-c-sidebar--inset: var(--pf-t--global--spacer--md);
|
4
|
+
--pf-v5-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
|
5
|
+
--pf-v5-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
|
6
|
+
--pf-v5-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
|
7
7
|
--pf-v5-c-sidebar__panel--PaddingTop: 0;
|
8
8
|
--pf-v5-c-sidebar__panel--PaddingRight: 0;
|
9
9
|
--pf-v5-c-sidebar__panel--PaddingBottom: 0;
|
@@ -59,11 +59,16 @@
|
|
59
59
|
--pf-v5-c-sidebar__panel--md--FlexBasis: 15.625rem;
|
60
60
|
--pf-v5-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
|
61
61
|
--pf-v5-c-sidebar__panel--m-stack--FlexBasis: auto;
|
62
|
-
--pf-v5-c-sidebar__panel--ZIndex: var(--pf-
|
63
|
-
--pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-
|
64
|
-
--pf-v5-c-
|
62
|
+
--pf-v5-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
|
63
|
+
--pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
64
|
+
--pf-v5-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
65
|
+
--pf-v5-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
66
|
+
--pf-v5-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
65
67
|
--pf-v5-c-sidebar__panel--m-sticky--Top: 0;
|
66
68
|
--pf-v5-c-sidebar__panel--m-sticky--Position: sticky;
|
69
|
+
}
|
70
|
+
|
71
|
+
.pf-v5-c-sidebar {
|
67
72
|
height: 100%;
|
68
73
|
}
|
69
74
|
@media (min-width: 768px) {
|
@@ -157,6 +162,9 @@
|
|
157
162
|
--pf-v5-c-sidebar__panel--Position: static;
|
158
163
|
--pf-v5-c-sidebar__panel--Top: auto;
|
159
164
|
}
|
165
|
+
.pf-v5-c-sidebar__panel.pf-m-secondary {
|
166
|
+
--pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-c-sidebar__panel--m-secondary--BackgroundColor);
|
167
|
+
}
|
160
168
|
|
161
169
|
.pf-v5-c-sidebar__content {
|
162
170
|
flex-grow: 1;
|
@@ -176,6 +184,9 @@
|
|
176
184
|
.pf-v5-c-sidebar__content.pf-m-no-background {
|
177
185
|
--pf-v5-c-sidebar__content--BackgroundColor: transparent;
|
178
186
|
}
|
187
|
+
.pf-v5-c-sidebar__content.pf-m-secondary {
|
188
|
+
--pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-c-sidebar__content--m-secondary--BackgroundColor);
|
189
|
+
}
|
179
190
|
.pf-v5-c-sidebar__content + .pf-v5-c-sidebar__panel {
|
180
191
|
--pf-v5-c-sidebar__panel--Order: 1;
|
181
192
|
}
|
@@ -1,31 +1,28 @@
|
|
1
|
-
.pf-v5-c-simple-list {
|
2
|
-
--pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-
|
3
|
-
--pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-
|
4
|
-
--pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-
|
5
|
-
--pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-
|
6
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-
|
7
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-
|
8
|
-
--pf-v5-c-simple-list__item-link--FontSize: var(--pf-
|
9
|
-
--pf-v5-c-simple-list__item-link--
|
10
|
-
--pf-v5-c-simple-list__item-link--m-current--
|
11
|
-
--pf-v5-c-simple-list__item-link--
|
12
|
-
--pf-v5-c-simple-list__item-link--
|
13
|
-
--pf-v5-c-simple-list__item-link--
|
14
|
-
--pf-v5-c-simple-list__item-link--
|
15
|
-
--pf-v5-c-simple-list__item-link--
|
16
|
-
--pf-v5-c-simple-list__item-link--
|
17
|
-
--pf-v5-c-simple-list__item-link--
|
18
|
-
--pf-v5-c-simple-
|
19
|
-
--pf-v5-c-simple-
|
20
|
-
--pf-v5-c-simple-
|
21
|
-
--pf-v5-c-simple-list__title--
|
22
|
-
--pf-v5-c-simple-list__title--
|
23
|
-
--pf-v5-c-simple-list__title--
|
24
|
-
--pf-v5-c-simple-list__title--
|
25
|
-
--pf-v5-c-simple-
|
26
|
-
--pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
|
27
|
-
--pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
|
28
|
-
--pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
|
1
|
+
:root, .pf-v5-c-simple-list {
|
2
|
+
--pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
|
3
|
+
--pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
|
4
|
+
--pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
|
5
|
+
--pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
|
6
|
+
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
7
|
+
--pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
|
8
|
+
--pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
|
9
|
+
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
|
10
|
+
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
11
|
+
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
|
12
|
+
--pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
13
|
+
--pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
14
|
+
--pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
|
15
|
+
--pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
|
16
|
+
--pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
|
17
|
+
--pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
18
|
+
--pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
|
19
|
+
--pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
|
20
|
+
--pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
|
21
|
+
--pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
|
22
|
+
--pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
|
23
|
+
--pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
|
24
|
+
--pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
25
|
+
--pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
|
29
26
|
}
|
30
27
|
|
31
28
|
.pf-v5-c-simple-list__item-link {
|
@@ -36,31 +33,28 @@
|
|
36
33
|
padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
|
37
34
|
padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
|
38
35
|
font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
|
39
|
-
font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
|
40
36
|
color: var(--pf-v5-c-simple-list__item-link--Color);
|
41
37
|
text-align: start;
|
38
|
+
text-decoration: none;
|
42
39
|
background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
|
43
40
|
border: none;
|
41
|
+
border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
|
42
|
+
}
|
43
|
+
.pf-v5-c-simple-list__item-link.pf-m-link {
|
44
|
+
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
|
45
|
+
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
|
46
|
+
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
|
44
47
|
}
|
45
|
-
.pf-v5-c-simple-list__item-link:hover {
|
48
|
+
.pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
|
46
49
|
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
|
47
50
|
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
|
48
51
|
text-decoration: none;
|
49
|
-
|
50
|
-
.pf-v5-c-simple-list__item-link:focus {
|
51
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
|
52
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
|
53
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
|
54
|
-
}
|
55
|
-
.pf-v5-c-simple-list__item-link:active {
|
56
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
|
57
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
|
58
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
|
52
|
+
mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
|
59
53
|
}
|
60
54
|
.pf-v5-c-simple-list__item-link.pf-m-current {
|
61
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
|
62
55
|
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
|
63
56
|
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
|
57
|
+
mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
|
64
58
|
}
|
65
59
|
|
66
60
|
.pf-v5-c-simple-list__title {
|
@@ -75,15 +69,4 @@
|
|
75
69
|
|
76
70
|
.pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
|
77
71
|
margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
|
78
|
-
}
|
79
|
-
|
80
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
|
81
|
-
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
|
82
|
-
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
83
|
-
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
|
84
|
-
--pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
85
|
-
--pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
|
86
|
-
--pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
87
|
-
--pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
|
88
|
-
--pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
89
72
|
}
|