@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +53 -1
- 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/Drawer/drawer.css +0 -1
- 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/LabelGroup/label-group.css +26 -22
- package/css/components/Popover/popover.css +2 -7
- 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/Toolbar/toolbar.css +30 -2
- 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/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,7 +3,59 @@
|
|
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.2 (2023-02-08)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
9
|
+
|
10
|
+
## 4.92.6 (2023-01-23)
|
11
|
+
|
12
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
13
|
+
|
14
|
+
## 4.92.5 (2023-01-19)
|
15
|
+
|
16
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
17
|
+
|
18
|
+
## 4.92.4 (2023-01-18)
|
19
|
+
|
20
|
+
### Bug Fixes
|
21
|
+
|
22
|
+
- **Tabs:** Removed isHelpAction prop from TabsAction ([#8560](https://github.com/patternfly/patternfly-react/issues/8560)) ([05fa1b0](https://github.com/patternfly/patternfly-react/commit/05fa1b0acfe886f09c5bdf4ad9f8e27878ee817e))
|
23
|
+
|
24
|
+
## 4.92.3 (2022-12-08)
|
25
|
+
|
26
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
27
|
+
|
28
|
+
## 4.92.2 (2022-12-07)
|
29
|
+
|
30
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
31
|
+
|
32
|
+
## 4.92.1 (2022-12-01)
|
33
|
+
|
34
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
35
|
+
|
36
|
+
# 4.92.0 (2022-11-16)
|
37
|
+
|
38
|
+
### Features
|
39
|
+
|
40
|
+
- **Tabs:** add TabAction, update core ver ([#8348](https://github.com/patternfly/patternfly-react/issues/8348)) ([8c584b4](https://github.com/patternfly/patternfly-react/commit/8c584b48f8e545cf226f785b873ee11eda505724))
|
41
|
+
|
42
|
+
## 4.91.10 (2022-10-27)
|
43
|
+
|
44
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
45
|
+
|
46
|
+
## 4.91.9 (2022-10-26)
|
47
|
+
|
48
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
49
|
+
|
50
|
+
## [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)
|
51
|
+
|
52
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
53
|
+
|
54
|
+
## 4.91.7 (2022-10-14)
|
55
|
+
|
56
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
57
|
+
|
58
|
+
## 4.91.6 (2022-10-05)
|
7
59
|
|
8
60
|
### Bug Fixes
|
9
61
|
|
@@ -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);
|
@@ -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 {
|
@@ -3,38 +3,39 @@
|
|
3
3
|
--pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
|
4
4
|
--pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
|
5
5
|
--pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
|
6
|
+
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
7
|
+
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
8
|
+
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
9
|
+
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
6
10
|
--pf-c-empty-state__content--MaxWidth: none;
|
11
|
+
--pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
|
12
|
+
--pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
|
13
|
+
--pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
|
7
14
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
|
8
15
|
--pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
9
16
|
--pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
|
10
|
-
--pf-c-empty-
|
17
|
+
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
18
|
+
--pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
|
19
|
+
--pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
|
20
|
+
--pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
|
21
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
|
22
|
+
--pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
|
23
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
|
24
|
+
--pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
|
25
|
+
--pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
|
26
|
+
--pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
|
11
27
|
--pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
|
12
28
|
--pf-c-empty-state__body--Color: var(--pf-global--Color--200);
|
13
|
-
--pf-c-empty-
|
14
|
-
--pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
|
15
|
-
--pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
|
16
|
-
--pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
17
|
-
--pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
|
18
|
-
--pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
|
19
|
-
--pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
|
20
|
-
--pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
|
29
|
+
--pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
|
21
30
|
--pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
|
22
|
-
--pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
|
23
|
-
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
24
|
-
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
25
|
-
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
26
|
-
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
27
|
-
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
28
31
|
--pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
|
29
|
-
--pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
|
30
|
-
--pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
|
31
|
-
--pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
|
32
|
-
--pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
|
33
32
|
--pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
|
34
33
|
--pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
|
35
|
-
--pf-c-empty-
|
36
|
-
--pf-c-empty-
|
37
|
-
--pf-c-empty-state--m-
|
34
|
+
--pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
|
35
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
|
36
|
+
--pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
|
37
|
+
--pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
|
38
|
+
--pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
|
38
39
|
display: flex;
|
39
40
|
align-items: center;
|
40
41
|
justify-content: center;
|
@@ -46,17 +47,12 @@
|
|
46
47
|
--pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
|
47
48
|
--pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
|
48
49
|
--pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
|
50
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
|
49
51
|
--pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
|
50
52
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
|
51
53
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
|
52
|
-
--pf-c-empty-
|
53
|
-
--pf-c-empty-
|
54
|
-
}
|
55
|
-
.pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
|
56
|
-
font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
|
57
|
-
}
|
58
|
-
.pf-c-empty-state.pf-m-xs .pf-c-button {
|
59
|
-
--pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
|
54
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
|
55
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
|
60
56
|
}
|
61
57
|
.pf-c-empty-state.pf-m-sm {
|
62
58
|
--pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
|
@@ -66,12 +62,11 @@
|
|
66
62
|
}
|
67
63
|
.pf-c-empty-state.pf-m-xl {
|
68
64
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
|
65
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
|
69
66
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
|
70
67
|
--pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
|
71
|
-
--pf-c-empty-
|
72
|
-
|
73
|
-
.pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
|
74
|
-
font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
|
68
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
|
69
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
|
75
70
|
}
|
76
71
|
.pf-c-empty-state.pf-m-full-height {
|
77
72
|
height: 100%;
|
@@ -80,39 +75,38 @@
|
|
80
75
|
.pf-c-empty-state__content {
|
81
76
|
max-width: var(--pf-c-empty-state__content--MaxWidth);
|
82
77
|
}
|
83
|
-
.pf-c-empty-state__content > .pf-c-title.pf-m-lg {
|
84
|
-
font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
|
85
|
-
}
|
86
78
|
|
87
79
|
.pf-c-empty-state__icon {
|
88
80
|
margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
|
89
81
|
font-size: var(--pf-c-empty-state__icon--FontSize);
|
82
|
+
line-height: 1;
|
90
83
|
color: var(--pf-c-empty-state__icon--Color);
|
91
84
|
}
|
92
85
|
|
86
|
+
.pf-c-empty-state__title-text {
|
87
|
+
font-family: var(--pf-c-empty-state__title-text--FontFamily);
|
88
|
+
font-size: var(--pf-c-empty-state__title-text--FontSize);
|
89
|
+
font-weight: var(--pf-c-empty-state__title-text--FontWeight);
|
90
|
+
line-height: var(--pf-c-empty-state__title-text--LineHeight);
|
91
|
+
}
|
92
|
+
|
93
93
|
.pf-c-empty-state__body {
|
94
94
|
margin-top: var(--pf-c-empty-state__body--MarginTop);
|
95
|
+
font-size: var(--pf-c-empty-state--body--FontSize);
|
95
96
|
color: var(--pf-c-empty-state__body--Color);
|
96
97
|
}
|
97
98
|
|
98
|
-
.pf-c-empty-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
|
99
|
+
.pf-c-empty-state__footer {
|
100
|
+
display: flex;
|
101
|
+
flex-direction: column;
|
102
|
+
align-items: center;
|
103
|
+
row-gap: var(--pf-c-empty-state__footer--RowGap);
|
104
|
+
margin-top: var(--pf-c-empty-state__footer--MarginTop);
|
105
105
|
}
|
106
106
|
|
107
|
-
.pf-c-empty-
|
107
|
+
.pf-c-empty-state__actions {
|
108
108
|
display: flex;
|
109
109
|
flex-wrap: wrap;
|
110
110
|
justify-content: center;
|
111
|
-
|
112
|
-
margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
|
113
|
-
}
|
114
|
-
.pf-c-empty-state__secondary > * {
|
115
|
-
margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
|
116
|
-
margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
|
117
|
-
margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
|
111
|
+
gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
|
118
112
|
}
|
@@ -1,20 +1,18 @@
|
|
1
1
|
import './empty-state.css';
|
2
2
|
declare const _default: {
|
3
|
-
"button": "pf-c-button",
|
4
3
|
"emptyState": "pf-c-empty-state",
|
4
|
+
"emptyStateActions": "pf-c-empty-state__actions",
|
5
5
|
"emptyStateBody": "pf-c-empty-state__body",
|
6
6
|
"emptyStateContent": "pf-c-empty-state__content",
|
7
|
+
"emptyStateFooter": "pf-c-empty-state__footer",
|
7
8
|
"emptyStateIcon": "pf-c-empty-state__icon",
|
8
|
-
"
|
9
|
-
"emptyStateSecondary": "pf-c-empty-state__secondary",
|
9
|
+
"emptyStateTitleText": "pf-c-empty-state__title-text",
|
10
10
|
"modifiers": {
|
11
11
|
"xs": "pf-m-xs",
|
12
12
|
"sm": "pf-m-sm",
|
13
13
|
"lg": "pf-m-lg",
|
14
14
|
"xl": "pf-m-xl",
|
15
|
-
"fullHeight": "pf-m-full-height"
|
16
|
-
|
17
|
-
},
|
18
|
-
"title": "pf-c-title"
|
15
|
+
"fullHeight": "pf-m-full-height"
|
16
|
+
}
|
19
17
|
};
|
20
18
|
export default _default;
|
@@ -2,20 +2,18 @@
|
|
2
2
|
exports.__esModule = true;
|
3
3
|
require('./empty-state.css');
|
4
4
|
exports.default = {
|
5
|
-
"button": "pf-c-button",
|
6
5
|
"emptyState": "pf-c-empty-state",
|
6
|
+
"emptyStateActions": "pf-c-empty-state__actions",
|
7
7
|
"emptyStateBody": "pf-c-empty-state__body",
|
8
8
|
"emptyStateContent": "pf-c-empty-state__content",
|
9
|
+
"emptyStateFooter": "pf-c-empty-state__footer",
|
9
10
|
"emptyStateIcon": "pf-c-empty-state__icon",
|
10
|
-
"
|
11
|
-
"emptyStateSecondary": "pf-c-empty-state__secondary",
|
11
|
+
"emptyStateTitleText": "pf-c-empty-state__title-text",
|
12
12
|
"modifiers": {
|
13
13
|
"xs": "pf-m-xs",
|
14
14
|
"sm": "pf-m-sm",
|
15
15
|
"lg": "pf-m-lg",
|
16
16
|
"xl": "pf-m-xl",
|
17
|
-
"fullHeight": "pf-m-full-height"
|
18
|
-
|
19
|
-
},
|
20
|
-
"title": "pf-c-title"
|
17
|
+
"fullHeight": "pf-m-full-height"
|
18
|
+
}
|
21
19
|
};
|
@@ -1,19 +1,17 @@
|
|
1
1
|
import './empty-state.css';
|
2
2
|
export default {
|
3
|
-
"button": "pf-c-button",
|
4
3
|
"emptyState": "pf-c-empty-state",
|
4
|
+
"emptyStateActions": "pf-c-empty-state__actions",
|
5
5
|
"emptyStateBody": "pf-c-empty-state__body",
|
6
6
|
"emptyStateContent": "pf-c-empty-state__content",
|
7
|
+
"emptyStateFooter": "pf-c-empty-state__footer",
|
7
8
|
"emptyStateIcon": "pf-c-empty-state__icon",
|
8
|
-
"
|
9
|
-
"emptyStateSecondary": "pf-c-empty-state__secondary",
|
9
|
+
"emptyStateTitleText": "pf-c-empty-state__title-text",
|
10
10
|
"modifiers": {
|
11
11
|
"xs": "pf-m-xs",
|
12
12
|
"sm": "pf-m-sm",
|
13
13
|
"lg": "pf-m-lg",
|
14
14
|
"xl": "pf-m-xl",
|
15
|
-
"fullHeight": "pf-m-full-height"
|
16
|
-
|
17
|
-
},
|
18
|
-
"title": "pf-c-title"
|
15
|
+
"fullHeight": "pf-m-full-height"
|
16
|
+
}
|
19
17
|
};
|
@@ -1,6 +1,16 @@
|
|
1
1
|
.pf-c-label-group {
|
2
|
-
--pf-c-label-
|
3
|
-
--pf-c-label-
|
2
|
+
--pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
|
3
|
+
--pf-c-label-group--ColumnGap: 0;
|
4
|
+
--pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
|
5
|
+
--pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
|
6
|
+
--pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
|
7
|
+
--pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
|
8
|
+
--pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
|
9
|
+
--pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
|
10
|
+
--pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
|
11
|
+
--pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
|
12
|
+
--pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
|
13
|
+
--pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
|
4
14
|
--pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
|
5
15
|
--pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
|
6
16
|
--pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
|
@@ -10,20 +20,14 @@
|
|
10
20
|
--pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
|
11
21
|
--pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
|
12
22
|
--pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
13
|
-
--pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
|
14
|
-
--pf-c-label-group__label--MarginBottom: 0;
|
15
|
-
--pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
|
16
23
|
--pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
|
17
24
|
--pf-c-label-group__label--MaxWidth: 18ch;
|
18
25
|
--pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
|
19
26
|
--pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
20
27
|
--pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
21
28
|
--pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
|
22
|
-
--pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
|
23
29
|
--pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
24
30
|
--pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
25
|
-
--pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
|
26
|
-
--pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
|
27
31
|
--pf-c-label-group__textarea--MinWidth: 12.5rem;
|
28
32
|
--pf-c-label-group__textarea--PaddingTop: 0.125rem;
|
29
33
|
--pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
|
@@ -31,6 +35,8 @@
|
|
31
35
|
--pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
|
32
36
|
display: inline-flex;
|
33
37
|
align-items: center;
|
38
|
+
row-gap: var(--pf-c-label-group--RowGap);
|
39
|
+
column-gap: var(--pf-c-label-group--ColumnGap);
|
34
40
|
}
|
35
41
|
.pf-c-label-group.pf-m-category {
|
36
42
|
padding-top: var(--pf-c-label-group--m-category--PaddingTop);
|
@@ -42,11 +48,12 @@
|
|
42
48
|
border-radius: var(--pf-c-label-group--m-category--BorderRadius);
|
43
49
|
}
|
44
50
|
.pf-c-label-group.pf-m-vertical {
|
45
|
-
--pf-c-label-
|
46
|
-
--pf-c-label-
|
47
|
-
--pf-c-label-
|
48
|
-
--pf-c-label-
|
49
|
-
--pf-c-label-
|
51
|
+
--pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
|
52
|
+
--pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
|
53
|
+
--pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
|
54
|
+
--pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
|
55
|
+
--pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
|
56
|
+
--pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
|
50
57
|
--pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
|
51
58
|
--pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
|
52
59
|
--pf-c-label-group__close--MarginBottom: 0;
|
@@ -63,9 +70,6 @@
|
|
63
70
|
.pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
|
64
71
|
flex-direction: column;
|
65
72
|
}
|
66
|
-
.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
|
67
|
-
--pf-c-label-group__list-item--MarginBottom: 0;
|
68
|
-
}
|
69
73
|
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
|
70
74
|
--pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
|
71
75
|
--pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
|
@@ -87,19 +91,19 @@
|
|
87
91
|
flex: 1;
|
88
92
|
flex-wrap: wrap;
|
89
93
|
align-items: baseline;
|
94
|
+
row-gap: var(--pf-c-label-group__main--RowGap);
|
95
|
+
column-gap: var(--pf-c-label-group__main--ColumnGap);
|
90
96
|
}
|
91
97
|
|
92
98
|
.pf-c-label-group__list {
|
93
99
|
display: inline-flex;
|
94
100
|
flex-wrap: wrap;
|
95
|
-
|
96
|
-
|
101
|
+
row-gap: var(--pf-c-label-group__list--RowGap);
|
102
|
+
column-gap: var(--pf-c-label-group__list--ColumnGap);
|
97
103
|
}
|
98
104
|
|
99
105
|
.pf-c-label-group__list-item {
|
100
106
|
display: inline-flex;
|
101
|
-
margin-right: var(--pf-c-label-group__list-item--MarginRight);
|
102
|
-
margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
|
103
107
|
}
|
104
108
|
|
105
109
|
.pf-c-label-group__label {
|
@@ -107,12 +111,12 @@
|
|
107
111
|
text-overflow: ellipsis;
|
108
112
|
white-space: nowrap;
|
109
113
|
max-width: var(--pf-c-label-group__label--MaxWidth);
|
110
|
-
margin-right: var(--pf-c-label-group__label--MarginRight);
|
111
|
-
margin-bottom: var(--pf-c-label-group__label--MarginBottom);
|
112
114
|
font-size: var(--pf-c-label-group__label--FontSize);
|
113
115
|
}
|
114
116
|
|
115
117
|
.pf-c-label-group__close {
|
118
|
+
display: flex;
|
119
|
+
align-self: start;
|
116
120
|
margin-top: var(--pf-c-label-group__close--MarginTop);
|
117
121
|
margin-right: var(--pf-c-label-group__close--MarginRight);
|
118
122
|
margin-bottom: var(--pf-c-label-group__close--MarginBottom);
|
@@ -172,14 +172,9 @@
|
|
172
172
|
}
|
173
173
|
|
174
174
|
:where(.pf-theme-dark) .pf-c-popover {
|
175
|
-
--pf-c-
|
176
|
-
--pf-c-popover__arrow--
|
177
|
-
--pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
|
175
|
+
--pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
176
|
+
--pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
178
177
|
--pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
|
179
178
|
--pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
|
180
179
|
--pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
|
181
|
-
}
|
182
|
-
:where(.pf-theme-dark) .pf-c-popover,
|
183
|
-
:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
|
184
|
-
border: 4px solid var(--pf-global--BorderColor--400);
|
185
180
|
}
|
@@ -115,7 +115,6 @@
|
|
115
115
|
--pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
|
116
116
|
--pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
|
117
117
|
--pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
|
118
|
-
--pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
119
118
|
--pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
|
120
119
|
--pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
|
121
120
|
--pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
|
@@ -589,9 +588,6 @@
|
|
589
588
|
--pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
|
590
589
|
outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
|
591
590
|
}
|
592
|
-
.pf-c-tabs__item-action.pf-m-help {
|
593
|
-
--pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
|
594
|
-
}
|
595
591
|
.pf-c-tabs__item-action:last-child {
|
596
592
|
--pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
|
597
593
|
}
|
@@ -54,13 +54,17 @@
|
|
54
54
|
--pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
|
55
55
|
--pf-c-toolbar__item--Display: block;
|
56
56
|
--pf-c-toolbar__item--MinWidth--base: auto;
|
57
|
+
--pf-c-toolbar__item--AlignSelf: auto;
|
57
58
|
--pf-c-toolbar__group--Display: flex;
|
59
|
+
--pf-c-toolbar__group--AlignItems: baseline;
|
60
|
+
--pf-c-toolbar__group--AlignSelf: auto;
|
58
61
|
--pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
|
59
62
|
--pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
|
60
63
|
--pf-c-toolbar__content--Display: flex;
|
61
64
|
--pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
|
62
65
|
--pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
|
63
66
|
--pf-c-toolbar__content-section--Display: flex;
|
67
|
+
--pf-c-toolbar__content-section--AlignItems: baseline;
|
64
68
|
--pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
|
65
69
|
--pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
|
66
70
|
--pf-c-toolbar__expandable-content--Display: grid;
|
@@ -182,9 +186,22 @@
|
|
182
186
|
.pf-c-toolbar__group {
|
183
187
|
--pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
|
184
188
|
--pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
|
185
|
-
align-items:
|
189
|
+
align-items: var(--pf-c-toolbar__group--AlignItems);
|
190
|
+
align-self: var(--pf-c-toolbar__group--AlignSelf);
|
186
191
|
margin-right: var(--pf-c-toolbar--spacer);
|
187
192
|
}
|
193
|
+
.pf-c-toolbar__group.pf-m-align-items-center {
|
194
|
+
align-items: center;
|
195
|
+
}
|
196
|
+
.pf-c-toolbar__group.pf-m-align-items-baseline {
|
197
|
+
align-items: baseline;
|
198
|
+
}
|
199
|
+
.pf-c-toolbar__group.pf-m-align-self-center {
|
200
|
+
align-self: center;
|
201
|
+
}
|
202
|
+
.pf-c-toolbar__group.pf-m-align-self-baseline {
|
203
|
+
align-self: baseline;
|
204
|
+
}
|
188
205
|
.pf-c-toolbar__group.pf-m-button-group {
|
189
206
|
--pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
|
190
207
|
}
|
@@ -225,6 +242,7 @@
|
|
225
242
|
--pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
|
226
243
|
--pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
|
227
244
|
--pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
|
245
|
+
align-self: var(--pf-c-toolbar__item--AlignSelf);
|
228
246
|
width: var(--pf-c-toolbar__item--Width--base);
|
229
247
|
min-width: var(--pf-c-toolbar__item--MinWidth--base);
|
230
248
|
margin-right: var(--pf-c-toolbar--spacer);
|
@@ -279,6 +297,12 @@
|
|
279
297
|
--pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
|
280
298
|
}
|
281
299
|
}
|
300
|
+
.pf-c-toolbar__item.pf-m-align-self-center {
|
301
|
+
align-self: center;
|
302
|
+
}
|
303
|
+
.pf-c-toolbar__item.pf-m-align-self-baseline {
|
304
|
+
align-self: baseline;
|
305
|
+
}
|
282
306
|
.pf-c-toolbar__item.pf-m-overflow-menu {
|
283
307
|
--pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
|
284
308
|
}
|
@@ -323,20 +347,24 @@
|
|
323
347
|
.pf-c-toolbar__content,
|
324
348
|
.pf-c-toolbar__content-section {
|
325
349
|
flex-wrap: wrap;
|
326
|
-
align-items: center;
|
327
350
|
}
|
328
351
|
|
329
352
|
.pf-c-toolbar__content {
|
330
353
|
--pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
|
331
354
|
position: relative;
|
355
|
+
align-items: center;
|
332
356
|
padding-right: var(--pf-c-toolbar__content--PaddingRight);
|
333
357
|
padding-left: var(--pf-c-toolbar__content--PaddingLeft);
|
334
358
|
}
|
335
359
|
|
336
360
|
.pf-c-toolbar__content-section {
|
337
361
|
--pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
|
362
|
+
align-items: var(--pf-c-toolbar__content-section--AlignItems);
|
338
363
|
width: 100%;
|
339
364
|
}
|
365
|
+
.pf-c-toolbar__content-section.pf-m-align-items-center {
|
366
|
+
align-items: center;
|
367
|
+
}
|
340
368
|
|
341
369
|
.pf-c-toolbar__expandable-content {
|
342
370
|
position: absolute;
|
@@ -20,6 +20,10 @@ declare const _default: {
|
|
20
20
|
"fullHeight": "pf-m-full-height",
|
21
21
|
"static": "pf-m-static",
|
22
22
|
"vertical": "pf-m-vertical",
|
23
|
+
"alignItemsCenter": "pf-m-align-items-center",
|
24
|
+
"alignItemsBaseline": "pf-m-align-items-baseline",
|
25
|
+
"alignSelfCenter": "pf-m-align-self-center",
|
26
|
+
"alignSelfBaseline": "pf-m-align-self-baseline",
|
23
27
|
"buttonGroup": "pf-m-button-group",
|
24
28
|
"iconButtonGroup": "pf-m-icon-button-group",
|
25
29
|
"filterGroup": "pf-m-filter-group",
|
@@ -22,6 +22,10 @@ exports.default = {
|
|
22
22
|
"fullHeight": "pf-m-full-height",
|
23
23
|
"static": "pf-m-static",
|
24
24
|
"vertical": "pf-m-vertical",
|
25
|
+
"alignItemsCenter": "pf-m-align-items-center",
|
26
|
+
"alignItemsBaseline": "pf-m-align-items-baseline",
|
27
|
+
"alignSelfCenter": "pf-m-align-self-center",
|
28
|
+
"alignSelfBaseline": "pf-m-align-self-baseline",
|
25
29
|
"buttonGroup": "pf-m-button-group",
|
26
30
|
"iconButtonGroup": "pf-m-icon-button-group",
|
27
31
|
"filterGroup": "pf-m-filter-group",
|
@@ -20,6 +20,10 @@ export default {
|
|
20
20
|
"fullHeight": "pf-m-full-height",
|
21
21
|
"static": "pf-m-static",
|
22
22
|
"vertical": "pf-m-vertical",
|
23
|
+
"alignItemsCenter": "pf-m-align-items-center",
|
24
|
+
"alignItemsBaseline": "pf-m-align-items-baseline",
|
25
|
+
"alignSelfCenter": "pf-m-align-self-center",
|
26
|
+
"alignSelfBaseline": "pf-m-align-self-baseline",
|
23
27
|
"buttonGroup": "pf-m-button-group",
|
24
28
|
"iconButtonGroup": "pf-m-icon-button-group",
|
25
29
|
"filterGroup": "pf-m-filter-group",
|
@@ -8,8 +8,10 @@
|
|
8
8
|
--pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
|
9
9
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
10
10
|
--pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
|
11
|
-
--pf-c-tooltip__arrow--Width: 0.
|
12
|
-
--pf-c-tooltip__arrow--Height: 0.
|
11
|
+
--pf-c-tooltip__arrow--Width: 0.9375rem;
|
12
|
+
--pf-c-tooltip__arrow--Height: 0.9375rem;
|
13
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
14
|
+
--pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
|
13
15
|
--pf-c-tooltip__arrow--m-top--TranslateX: -50%;
|
14
16
|
--pf-c-tooltip__arrow--m-top--TranslateY: 50%;
|
15
17
|
--pf-c-tooltip__arrow--m-top--Rotate: 45deg;
|
@@ -79,18 +81,11 @@
|
|
79
81
|
width: var(--pf-c-tooltip__arrow--Width);
|
80
82
|
height: var(--pf-c-tooltip__arrow--Height);
|
81
83
|
pointer-events: none;
|
82
|
-
background-color: var(--pf-c-
|
84
|
+
background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
|
85
|
+
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
83
86
|
}
|
84
87
|
|
85
88
|
:where(.pf-theme-dark) .pf-c-tooltip {
|
86
|
-
--pf-c-tooltip--BoxShadow: none;
|
87
89
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
88
|
-
|
89
|
-
:where(.pf-theme-dark) .pf-c-tooltip,
|
90
|
-
:where(.pf-theme-dark) .pf-c-tooltip__arrow {
|
91
|
-
border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
|
92
|
-
}
|
93
|
-
:where(.pf-theme-dark) .pf-c-tooltip__arrow {
|
94
|
-
--pf-c-tooltip__arrow--Width: 0.9375rem;
|
95
|
-
--pf-c-tooltip__arrow--Height: 0.9375rem;
|
90
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
96
91
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/react-styles",
|
3
|
-
"version": "5.0.0-alpha.
|
3
|
+
"version": "5.0.0-alpha.2",
|
4
4
|
"main": "dist/js/index.js",
|
5
5
|
"module": "dist/esm/index.js",
|
6
6
|
"types": "dist/esm/index.d.ts",
|
@@ -19,7 +19,7 @@
|
|
19
19
|
"clean": "rimraf dist css"
|
20
20
|
},
|
21
21
|
"devDependencies": {
|
22
|
-
"@patternfly/patternfly": "5.0.0-alpha.
|
22
|
+
"@patternfly/patternfly": "5.0.0-alpha.12",
|
23
23
|
"camel-case": "^3.0.0",
|
24
24
|
"css": "^2.2.3",
|
25
25
|
"fs-extra": "^6.0.1",
|
@@ -29,5 +29,5 @@
|
|
29
29
|
"typescript": "^4.7.4"
|
30
30
|
},
|
31
31
|
"license": "MIT",
|
32
|
-
"gitHead": "
|
32
|
+
"gitHead": "dd91c73c726d471205cc7ce2cf463fa8c1a6e593"
|
33
33
|
}
|