@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +59 -1
- package/css/components/Accordion/accordion.css +2 -0
- package/css/components/AppLauncher/app-launcher.css +2 -0
- package/css/components/Breadcrumb/breadcrumb.css +2 -0
- package/css/components/CalendarMonth/calendar-month.css +1 -1
- package/css/components/Card/card.css +9 -12
- package/css/components/Card/card.d.ts +1 -0
- package/css/components/Card/card.js +1 -0
- package/css/components/Card/card.mjs +1 -0
- package/css/components/ChipGroup/chip-group.css +27 -17
- package/css/components/Content/content.css +6 -0
- package/css/components/Content/content.d.ts +2 -1
- package/css/components/Content/content.js +2 -1
- package/css/components/Content/content.mjs +2 -1
- package/css/components/ContextSelector/context-selector.css +5 -1
- package/css/components/DataList/data-list.css +2 -1
- package/css/components/Drawer/drawer.css +13 -14
- package/css/components/Dropdown/dropdown.css +12 -10
- package/css/components/EmptyState/empty-state.css +46 -52
- package/css/components/EmptyState/empty-state.d.ts +5 -7
- package/css/components/EmptyState/empty-state.js +5 -7
- package/css/components/EmptyState/empty-state.mjs +5 -7
- package/css/components/ExpandableSection/expandable-section.css +2 -0
- package/css/components/Label/label.css +2 -0
- package/css/components/LabelGroup/label-group.css +26 -22
- package/css/components/Login/login.css +1 -1
- package/css/components/Menu/menu.css +3 -0
- package/css/components/MenuToggle/menu-toggle.css +2 -0
- package/css/components/Page/page.css +60 -60
- package/css/components/Pagination/pagination.css +2 -2
- package/css/components/Popover/popover.css +2 -7
- package/css/components/SearchInput/search-input.css +2 -0
- package/css/components/Table/table-grid.css +28 -28
- package/css/components/Table/table-tree-view.css +4 -4
- package/css/components/Tabs/tabs.css +0 -4
- package/css/components/Tabs/tabs.d.ts +0 -1
- package/css/components/Tabs/tabs.js +0 -1
- package/css/components/Tabs/tabs.mjs +0 -1
- package/css/components/TextInputGroup/text-input-group.css +4 -2
- package/css/components/Toolbar/toolbar.css +65 -37
- package/css/components/Toolbar/toolbar.d.ts +4 -0
- package/css/components/Toolbar/toolbar.js +4 -0
- package/css/components/Toolbar/toolbar.mjs +4 -0
- package/css/components/Tooltip/tooltip.css +7 -12
- package/css/components/TreeView/tree-view.css +7 -15
- package/css/components/Wizard/wizard.css +2 -0
- package/css/docs/components/ContextSelector/examples/context-selector.css +5 -1
- package/css/docs/components/Dropdown/examples/Dropdown.css +5 -2
- package/css/layouts/Grid/grid.css +5 -5
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,7 +3,65 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
-
#
|
6
|
+
# 5.0.0-alpha.3 (2023-02-15)
|
7
|
+
|
8
|
+
### Bug Fixes
|
9
|
+
|
10
|
+
- **deps:** updated to the latest core alpha ([#8688](https://github.com/patternfly/patternfly-react/issues/8688)) ([5f81928](https://github.com/patternfly/patternfly-react/commit/5f819288d7baaa3806b23c0da8fb26dd4ec12d6b))
|
11
|
+
|
12
|
+
# 5.0.0-alpha.2 (2023-02-08)
|
13
|
+
|
14
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
15
|
+
|
16
|
+
## 4.92.6 (2023-01-23)
|
17
|
+
|
18
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
19
|
+
|
20
|
+
## 4.92.5 (2023-01-19)
|
21
|
+
|
22
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
23
|
+
|
24
|
+
## 4.92.4 (2023-01-18)
|
25
|
+
|
26
|
+
### Bug Fixes
|
27
|
+
|
28
|
+
- **Tabs:** Removed isHelpAction prop from TabsAction ([#8560](https://github.com/patternfly/patternfly-react/issues/8560)) ([05fa1b0](https://github.com/patternfly/patternfly-react/commit/05fa1b0acfe886f09c5bdf4ad9f8e27878ee817e))
|
29
|
+
|
30
|
+
## 4.92.3 (2022-12-08)
|
31
|
+
|
32
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
33
|
+
|
34
|
+
## 4.92.2 (2022-12-07)
|
35
|
+
|
36
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
37
|
+
|
38
|
+
## 4.92.1 (2022-12-01)
|
39
|
+
|
40
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
41
|
+
|
42
|
+
# 4.92.0 (2022-11-16)
|
43
|
+
|
44
|
+
### Features
|
45
|
+
|
46
|
+
- **Tabs:** add TabAction, update core ver ([#8348](https://github.com/patternfly/patternfly-react/issues/8348)) ([8c584b4](https://github.com/patternfly/patternfly-react/commit/8c584b48f8e545cf226f785b873ee11eda505724))
|
47
|
+
|
48
|
+
## 4.91.10 (2022-10-27)
|
49
|
+
|
50
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
51
|
+
|
52
|
+
## 4.91.9 (2022-10-26)
|
53
|
+
|
54
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
55
|
+
|
56
|
+
## [4.91.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.91.7...@patternfly/react-styles@4.91.8) (2022-10-17)
|
57
|
+
|
58
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
59
|
+
|
60
|
+
## 4.91.7 (2022-10-14)
|
61
|
+
|
62
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
63
|
+
|
64
|
+
## 4.91.6 (2022-10-05)
|
7
65
|
|
8
66
|
### Bug Fixes
|
9
67
|
|
@@ -23,6 +23,7 @@
|
|
23
23
|
--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
|
24
24
|
--pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
|
25
25
|
--pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
|
26
|
+
--pf-c-accordion__toggle--BackgroundColor: transparent;
|
26
27
|
--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
|
27
28
|
--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
|
28
29
|
--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
|
@@ -137,6 +138,7 @@
|
|
137
138
|
padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
|
138
139
|
font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
|
139
140
|
font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
|
141
|
+
background-color: var(--pf-c-accordion__toggle--BackgroundColor);
|
140
142
|
border: 0;
|
141
143
|
}
|
142
144
|
.pf-c-accordion__toggle::after {
|
@@ -17,6 +17,7 @@
|
|
17
17
|
--pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
|
18
18
|
--pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
|
19
19
|
--pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
|
20
|
+
--pf-c-app-launcher__toggle--BackgroundColor: transparent;
|
20
21
|
--pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
|
21
22
|
--pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
|
22
23
|
--pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
|
@@ -79,6 +80,7 @@
|
|
79
80
|
.pf-c-app-launcher__toggle {
|
80
81
|
padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
|
81
82
|
color: var(--pf-c-app-launcher__toggle--Color);
|
83
|
+
background-color: var(--pf-c-app-launcher__toggle--BackgroundColor);
|
82
84
|
border: none;
|
83
85
|
}
|
84
86
|
.pf-c-app-launcher__toggle:hover {
|
@@ -10,6 +10,7 @@
|
|
10
10
|
--pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
|
11
11
|
--pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
|
12
12
|
--pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
|
13
|
+
--pf-c-breadcrumb__link--BackgroundColor: transparent;
|
13
14
|
--pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
|
14
15
|
--pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
15
16
|
--pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
|
@@ -52,6 +53,7 @@
|
|
52
53
|
color: var(--pf-c-breadcrumb__link--Color);
|
53
54
|
text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
|
54
55
|
word-break: break-word;
|
56
|
+
background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
|
55
57
|
}
|
56
58
|
.pf-c-breadcrumb__link:hover {
|
57
59
|
--pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);
|
@@ -16,7 +16,7 @@
|
|
16
16
|
--pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
|
17
17
|
--pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
|
18
18
|
--pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
|
19
|
-
--pf-c-calendar-month__header-year--Width:
|
19
|
+
--pf-c-calendar-month__header-year--Width: 8.5ch;
|
20
20
|
--pf-c-calendar-month__header-nav-control--MarginRight: 0;
|
21
21
|
--pf-c-calendar-month__header-nav-control--MarginLeft: 0;
|
22
22
|
--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
|
@@ -13,7 +13,9 @@
|
|
13
13
|
--pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
|
14
14
|
--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
|
15
15
|
--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
|
16
|
-
--pf-c-card__actions--
|
16
|
+
--pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
|
17
|
+
--pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
18
|
+
--pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
17
19
|
--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
18
20
|
--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
|
19
21
|
--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
@@ -84,7 +86,6 @@
|
|
84
86
|
--pf-c-card--m-plain--BackgroundColor: transparent;
|
85
87
|
--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
|
86
88
|
--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
|
87
|
-
--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
|
88
89
|
--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
|
89
90
|
--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
|
90
91
|
display: flex;
|
@@ -230,13 +231,11 @@
|
|
230
231
|
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
|
231
232
|
--pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
|
232
233
|
}
|
233
|
-
.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
|
234
|
-
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
|
235
|
-
}
|
236
234
|
.pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
|
237
235
|
order: 2;
|
238
236
|
}
|
239
|
-
|
237
|
+
|
238
|
+
.pf-c-card__header-main {
|
240
239
|
flex: 1;
|
241
240
|
}
|
242
241
|
|
@@ -262,10 +261,8 @@
|
|
262
261
|
align-self: flex-start;
|
263
262
|
order: 1;
|
264
263
|
padding-left: var(--pf-c-card__actions--PaddingLeft);
|
265
|
-
margin: var(--pf-c-
|
266
|
-
|
267
|
-
.pf-c-card__actions > * + * {
|
268
|
-
margin-left: var(--pf-c-card__actions--child--MarginLeft);
|
264
|
+
margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
|
265
|
+
gap: var(--pf-c-card__actions--Gap);
|
269
266
|
}
|
270
267
|
.pf-c-card__actions + .pf-c-card__title,
|
271
268
|
.pf-c-card__actions + .pf-c-card__body,
|
@@ -273,8 +270,8 @@
|
|
273
270
|
padding: 0;
|
274
271
|
}
|
275
272
|
.pf-c-card__actions.pf-m-no-offset {
|
276
|
-
--pf-c-
|
277
|
-
--pf-c-
|
273
|
+
--pf-c-card__actions--MarginTop: 0;
|
274
|
+
--pf-c-card__actions--MarginBottom: 0;
|
278
275
|
}
|
279
276
|
|
280
277
|
.pf-c-card__header,
|
@@ -6,6 +6,7 @@ declare const _default: {
|
|
6
6
|
"cardExpandableContent": "pf-c-card__expandable-content",
|
7
7
|
"cardFooter": "pf-c-card__footer",
|
8
8
|
"cardHeader": "pf-c-card__header",
|
9
|
+
"cardHeaderMain": "pf-c-card__header-main",
|
9
10
|
"cardHeaderToggle": "pf-c-card__header-toggle",
|
10
11
|
"cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
|
11
12
|
"cardSrInput": "pf-c-card__sr-input",
|
@@ -8,6 +8,7 @@ exports.default = {
|
|
8
8
|
"cardExpandableContent": "pf-c-card__expandable-content",
|
9
9
|
"cardFooter": "pf-c-card__footer",
|
10
10
|
"cardHeader": "pf-c-card__header",
|
11
|
+
"cardHeaderMain": "pf-c-card__header-main",
|
11
12
|
"cardHeaderToggle": "pf-c-card__header-toggle",
|
12
13
|
"cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
|
13
14
|
"cardSrInput": "pf-c-card__sr-input",
|
@@ -6,6 +6,7 @@ export default {
|
|
6
6
|
"cardExpandableContent": "pf-c-card__expandable-content",
|
7
7
|
"cardFooter": "pf-c-card__footer",
|
8
8
|
"cardHeader": "pf-c-card__header",
|
9
|
+
"cardHeaderMain": "pf-c-card__header-main",
|
9
10
|
"cardHeaderToggle": "pf-c-card__header-toggle",
|
10
11
|
"cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
|
11
12
|
"cardSrInput": "pf-c-card__sr-input",
|
@@ -10,28 +10,39 @@
|
|
10
10
|
|
11
11
|
.pf-c-chip-group {
|
12
12
|
color: var(--pf-global--Color--100);
|
13
|
-
--pf-c-chip-
|
14
|
-
--pf-c-chip-
|
13
|
+
--pf-c-chip-group--PaddingTop: 0;
|
14
|
+
--pf-c-chip-group--PaddingRight: 0;
|
15
|
+
--pf-c-chip-group--PaddingBottom: 0;
|
16
|
+
--pf-c-chip-group--PaddingLeft: 0;
|
17
|
+
--pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
|
18
|
+
--pf-c-chip-group--ColumnGap: 0;
|
19
|
+
--pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
|
20
|
+
--pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
|
21
|
+
--pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
|
22
|
+
--pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
|
15
23
|
--pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
|
16
24
|
--pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
|
17
25
|
--pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
|
18
26
|
--pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
|
19
27
|
--pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
|
20
28
|
--pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
21
|
-
--pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
|
22
29
|
--pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
|
23
30
|
--pf-c-chip-group__label--MaxWidth: 18ch;
|
24
31
|
--pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
|
25
32
|
--pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
26
|
-
--pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
|
27
|
-
--pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
|
28
33
|
max-width: 100%;
|
34
|
+
padding-top: var(--pf-c-chip-group--PaddingTop);
|
35
|
+
padding-right: var(--pf-c-chip-group--PaddingRight);
|
36
|
+
padding-bottom: var(--pf-c-chip-group--PaddingBottom);
|
37
|
+
padding-left: var(--pf-c-chip-group--PaddingLeft);
|
38
|
+
row-gap: var(--pf-c-chip-group--RowGap);
|
39
|
+
column-gap: var(--pf-c-chip-group--ColumnGap);
|
29
40
|
}
|
30
41
|
.pf-c-chip-group.pf-m-category {
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
42
|
+
--pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
|
43
|
+
--pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
|
44
|
+
--pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
|
45
|
+
--pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
|
35
46
|
background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
|
36
47
|
border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
|
37
48
|
}
|
@@ -42,11 +53,8 @@
|
|
42
53
|
flex-wrap: wrap;
|
43
54
|
align-items: baseline;
|
44
55
|
min-width: 0;
|
45
|
-
|
46
|
-
|
47
|
-
.pf-c-chip-group__list {
|
48
|
-
margin-right: var(--pf-c-chip-group__list--MarginRight);
|
49
|
-
margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
|
56
|
+
row-gap: var(--pf-c-chip-group__main--RowGap);
|
57
|
+
column-gap: var(--pf-c-chip-group__main--ColumnGap);
|
50
58
|
}
|
51
59
|
|
52
60
|
.pf-c-chip-group,
|
@@ -57,11 +65,14 @@
|
|
57
65
|
min-width: 0;
|
58
66
|
}
|
59
67
|
|
68
|
+
.pf-c-chip-group__list {
|
69
|
+
row-gap: var(--pf-c-chip-group__list--RowGap);
|
70
|
+
column-gap: var(--pf-c-chip-group__list--ColumnGap);
|
71
|
+
}
|
72
|
+
|
60
73
|
.pf-c-chip-group__list-item {
|
61
74
|
display: inline-flex;
|
62
75
|
min-width: 0;
|
63
|
-
margin-right: var(--pf-c-chip-group__list-item--MarginRight);
|
64
|
-
margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
|
65
76
|
}
|
66
77
|
|
67
78
|
.pf-c-chip-group__label {
|
@@ -69,7 +80,6 @@
|
|
69
80
|
text-overflow: ellipsis;
|
70
81
|
white-space: nowrap;
|
71
82
|
max-width: var(--pf-c-chip-group__label--MaxWidth);
|
72
|
-
margin-right: var(--pf-c-chip-group__label--MarginRight);
|
73
83
|
font-size: var(--pf-c-chip-group__label--FontSize);
|
74
84
|
}
|
75
85
|
|
@@ -127,6 +127,12 @@
|
|
127
127
|
.pf-c-content ul {
|
128
128
|
margin: 0;
|
129
129
|
}
|
130
|
+
.pf-c-content ol.pf-m-plain,
|
131
|
+
.pf-c-content ul.pf-m-plain {
|
132
|
+
padding-left: 0;
|
133
|
+
margin-left: 0;
|
134
|
+
list-style: none;
|
135
|
+
}
|
130
136
|
.pf-c-content h1 {
|
131
137
|
margin-top: var(--pf-c-content--h1--MarginTop);
|
132
138
|
margin-bottom: var(--pf-c-content--h1--MarginBottom);
|
@@ -26,6 +26,7 @@
|
|
26
26
|
--pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
|
27
27
|
--pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
28
28
|
--pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
|
29
|
+
--pf-c-context-selector__toggle--BackgroundColor: transparent;
|
29
30
|
--pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
|
30
31
|
--pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
|
31
32
|
--pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
|
@@ -64,6 +65,7 @@
|
|
64
65
|
--pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
|
65
66
|
--pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
|
66
67
|
--pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
|
68
|
+
--pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
|
67
69
|
--pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
68
70
|
--pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
|
69
71
|
--pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
|
@@ -175,6 +177,7 @@
|
|
175
177
|
color: var(--pf-c-context-selector__toggle--Color);
|
176
178
|
white-space: nowrap;
|
177
179
|
cursor: pointer;
|
180
|
+
background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
|
178
181
|
border: none;
|
179
182
|
}
|
180
183
|
.pf-c-context-selector__toggle::before {
|
@@ -283,11 +286,12 @@
|
|
283
286
|
padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
|
284
287
|
color: var(--pf-c-context-selector__menu-list-item--Color);
|
285
288
|
white-space: nowrap;
|
289
|
+
background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
|
286
290
|
border: none;
|
287
291
|
}
|
288
292
|
.pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
|
293
|
+
--pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
|
289
294
|
text-decoration: none;
|
290
|
-
background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
|
291
295
|
}
|
292
296
|
.pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
|
293
297
|
--pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);
|
@@ -546,6 +546,7 @@
|
|
546
546
|
--pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
|
547
547
|
--pf-c-data-list__toggle-icon--Rotate: 0;
|
548
548
|
--pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
|
549
|
+
--pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
|
549
550
|
--pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
|
550
551
|
--pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
|
551
552
|
--pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
|
@@ -617,7 +618,6 @@
|
|
617
618
|
font-size: var(--pf-c-data-list--FontSize);
|
618
619
|
line-height: var(--pf-c-data-list--LineHeight);
|
619
620
|
overflow-wrap: break-word;
|
620
|
-
list-style-type: disc;
|
621
621
|
border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
|
622
622
|
}
|
623
623
|
@media screen and (min-width: 576px) {
|
@@ -790,6 +790,7 @@
|
|
790
790
|
flex-direction: column;
|
791
791
|
padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
|
792
792
|
margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
|
793
|
+
background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
|
793
794
|
border: 0;
|
794
795
|
}
|
795
796
|
.pf-c-data-list__item-draggable-button:hover {
|
@@ -281,7 +281,6 @@
|
|
281
281
|
}
|
282
282
|
|
283
283
|
.pf-c-drawer__body {
|
284
|
-
min-height: 0;
|
285
284
|
padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
|
286
285
|
}
|
287
286
|
.pf-c-drawer__body.pf-m-no-padding {
|
@@ -443,7 +442,7 @@
|
|
443
442
|
--pf-c-drawer__splitter--after--BorderLeftWidth: 0;
|
444
443
|
}
|
445
444
|
.pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
|
446
|
-
.pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
|
445
|
+
.pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
|
447
446
|
--pf-c-drawer--m-expanded__panel--BoxShadow: none;
|
448
447
|
}
|
449
448
|
.pf-c-drawer__splitter {
|
@@ -532,15 +531,15 @@
|
|
532
531
|
}
|
533
532
|
@media (min-width: 768px) {
|
534
533
|
.pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
|
535
|
-
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
|
534
|
+
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
|
536
535
|
flex-shrink: 1;
|
537
536
|
}
|
538
537
|
.pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
|
539
|
-
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
|
538
|
+
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
|
540
539
|
--pf-c-drawer--m-expanded__panel--BoxShadow: none;
|
541
540
|
}
|
542
541
|
.pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
|
543
|
-
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
542
|
+
.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
544
543
|
background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
|
545
544
|
}
|
546
545
|
.pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
|
@@ -593,15 +592,15 @@
|
|
593
592
|
}
|
594
593
|
@media (min-width: 992px) {
|
595
594
|
.pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
|
596
|
-
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
|
595
|
+
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
|
597
596
|
flex-shrink: 1;
|
598
597
|
}
|
599
598
|
.pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
|
600
|
-
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
|
599
|
+
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
|
601
600
|
--pf-c-drawer--m-expanded__panel--BoxShadow: none;
|
602
601
|
}
|
603
602
|
.pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
|
604
|
-
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
603
|
+
.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
605
604
|
background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
|
606
605
|
}
|
607
606
|
.pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
|
@@ -654,15 +653,15 @@
|
|
654
653
|
}
|
655
654
|
@media (min-width: 1200px) {
|
656
655
|
.pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
|
657
|
-
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
656
|
+
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
658
657
|
flex-shrink: 1;
|
659
658
|
}
|
660
659
|
.pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
|
661
|
-
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
|
660
|
+
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
|
662
661
|
--pf-c-drawer--m-expanded__panel--BoxShadow: none;
|
663
662
|
}
|
664
663
|
.pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
|
665
|
-
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
664
|
+
.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
666
665
|
background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
|
667
666
|
}
|
668
667
|
.pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
@@ -715,15 +714,15 @@
|
|
715
714
|
}
|
716
715
|
@media (min-width: 1450px) {
|
717
716
|
.pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
|
718
|
-
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
717
|
+
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
719
718
|
flex-shrink: 1;
|
720
719
|
}
|
721
720
|
.pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
|
722
|
-
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
|
721
|
+
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
|
723
722
|
--pf-c-drawer--m-expanded__panel--BoxShadow: none;
|
724
723
|
}
|
725
724
|
.pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
|
726
|
-
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
725
|
+
.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
|
727
726
|
background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
|
728
727
|
}
|
729
728
|
.pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
|
@@ -50,6 +50,7 @@
|
|
50
50
|
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
51
51
|
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
|
52
52
|
--pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
|
53
|
+
--pf-c-dropdown__toggle-button--BackgroundColor: transparent;
|
53
54
|
--pf-c-dropdown__toggle-progress--Visibility: hidden;
|
54
55
|
--pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
|
55
56
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
|
@@ -275,6 +276,7 @@
|
|
275
276
|
}
|
276
277
|
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
|
277
278
|
color: var(--pf-c-dropdown__toggle-button--Color);
|
279
|
+
background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
|
278
280
|
border: 0;
|
279
281
|
}
|
280
282
|
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
|
@@ -509,51 +511,51 @@
|
|
509
511
|
}
|
510
512
|
@media (min-width: 576px) {
|
511
513
|
.pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
|
512
|
-
.pf-c-dropdown__menu.pf-m-align-right-on-sm {
|
514
|
+
.pf-c-dropdown__menu.pf-m-align-right-on-sm {
|
513
515
|
right: 0;
|
514
516
|
}
|
515
517
|
.pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
|
516
|
-
.pf-c-dropdown__menu.pf-m-align-left-on-sm {
|
518
|
+
.pf-c-dropdown__menu.pf-m-align-left-on-sm {
|
517
519
|
right: auto;
|
518
520
|
}
|
519
521
|
}
|
520
522
|
@media (min-width: 768px) {
|
521
523
|
.pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
|
522
|
-
.pf-c-dropdown__menu.pf-m-align-right-on-md {
|
524
|
+
.pf-c-dropdown__menu.pf-m-align-right-on-md {
|
523
525
|
right: 0;
|
524
526
|
}
|
525
527
|
.pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
|
526
|
-
.pf-c-dropdown__menu.pf-m-align-left-on-md {
|
528
|
+
.pf-c-dropdown__menu.pf-m-align-left-on-md {
|
527
529
|
right: auto;
|
528
530
|
}
|
529
531
|
}
|
530
532
|
@media (min-width: 992px) {
|
531
533
|
.pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
|
532
|
-
.pf-c-dropdown__menu.pf-m-align-right-on-lg {
|
534
|
+
.pf-c-dropdown__menu.pf-m-align-right-on-lg {
|
533
535
|
right: 0;
|
534
536
|
}
|
535
537
|
.pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
|
536
|
-
.pf-c-dropdown__menu.pf-m-align-left-on-lg {
|
538
|
+
.pf-c-dropdown__menu.pf-m-align-left-on-lg {
|
537
539
|
right: auto;
|
538
540
|
}
|
539
541
|
}
|
540
542
|
@media (min-width: 1200px) {
|
541
543
|
.pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
|
542
|
-
.pf-c-dropdown__menu.pf-m-align-right-on-xl {
|
544
|
+
.pf-c-dropdown__menu.pf-m-align-right-on-xl {
|
543
545
|
right: 0;
|
544
546
|
}
|
545
547
|
.pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
|
546
|
-
.pf-c-dropdown__menu.pf-m-align-left-on-xl {
|
548
|
+
.pf-c-dropdown__menu.pf-m-align-left-on-xl {
|
547
549
|
right: auto;
|
548
550
|
}
|
549
551
|
}
|
550
552
|
@media (min-width: 1450px) {
|
551
553
|
.pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
|
552
|
-
.pf-c-dropdown__menu.pf-m-align-right-on-2xl {
|
554
|
+
.pf-c-dropdown__menu.pf-m-align-right-on-2xl {
|
553
555
|
right: 0;
|
554
556
|
}
|
555
557
|
.pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
|
556
|
-
.pf-c-dropdown__menu.pf-m-align-left-on-2xl {
|
558
|
+
.pf-c-dropdown__menu.pf-m-align-left-on-2xl {
|
557
559
|
right: auto;
|
558
560
|
}
|
559
561
|
}
|