@patternfly/react-styles 4.13.0 → 4.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/css/components/AppLauncher/app-launcher.css +5 -1
- package/css/components/Card/card.css +97 -18
- package/css/components/Card/card.d.ts +3 -0
- package/css/components/Card/card.js +3 -0
- package/css/components/Menu/menu.css +4 -2
- package/css/components/Select/select.css +21 -5
- package/css/components/Tile/tile.css +53 -29
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# 4.14.0 (2021-10-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **Progress:** allow node titles ([#6470](https://github.com/patternfly/patternfly-react/issues/6470)) ([46d5252](https://github.com/patternfly/patternfly-react/commit/46d52523ad5111bb11729c2750abe9aeb35d9326))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# 4.13.0 (2021-10-20)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -35,13 +35,15 @@
|
|
|
35
35
|
--pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
|
36
36
|
--pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
|
|
37
37
|
--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
|
|
38
|
-
--pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--
|
|
38
|
+
--pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
|
|
39
39
|
--pf-c-app-launcher__menu-item--m-action--Width: auto;
|
|
40
40
|
--pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
41
41
|
--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
|
|
42
42
|
--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
|
|
43
43
|
--pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
|
|
44
|
+
--pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
|
|
44
45
|
--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
|
|
46
|
+
--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
|
|
45
47
|
--pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
|
|
46
48
|
--pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
|
|
47
49
|
--pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
|
|
@@ -123,6 +125,7 @@
|
|
|
123
125
|
}
|
|
124
126
|
.pf-c-app-launcher__menu-wrapper.pf-m-favorite {
|
|
125
127
|
--pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
|
|
128
|
+
--pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
|
|
126
129
|
}
|
|
127
130
|
|
|
128
131
|
.pf-c-app-launcher__menu-item {
|
|
@@ -147,6 +150,7 @@
|
|
|
147
150
|
|
|
148
151
|
.pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
|
|
149
152
|
--pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
|
|
153
|
+
--pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
|
|
150
154
|
pointer-events: none;
|
|
151
155
|
}
|
|
152
156
|
.pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
|
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
.pf-c-card {
|
|
2
2
|
--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
3
3
|
--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
|
|
4
|
+
--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
|
|
5
|
+
--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
|
|
6
|
+
--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
|
|
7
|
+
--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
|
|
8
|
+
--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
|
|
9
|
+
--pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
|
|
10
|
+
--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
|
|
11
|
+
--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
|
|
12
|
+
--pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
|
|
13
|
+
--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
|
|
14
|
+
--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
|
|
15
|
+
--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
|
|
16
|
+
--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
17
|
+
--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
|
|
18
|
+
--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
|
19
|
+
--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
|
|
20
|
+
--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
|
|
21
|
+
--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
|
|
4
22
|
--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
5
23
|
--pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
6
24
|
--pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
@@ -8,6 +26,35 @@
|
|
|
8
26
|
--pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
9
27
|
--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
|
|
10
28
|
--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
|
|
29
|
+
--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
30
|
+
--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
|
|
31
|
+
--pf-c-card--m-selectable-raised--before--Right: 0;
|
|
32
|
+
--pf-c-card--m-selectable-raised--before--Bottom: 0;
|
|
33
|
+
--pf-c-card--m-selectable-raised--before--Left: 0;
|
|
34
|
+
--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
|
|
35
|
+
--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
|
|
36
|
+
--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
|
|
37
|
+
--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
|
|
38
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
|
|
39
|
+
--pf-c-card--m-selectable-raised--before--Transition: none;
|
|
40
|
+
--pf-c-card--m-selectable-raised--before--ScaleY: 1;
|
|
41
|
+
--pf-c-card--m-selectable-raised--before--TranslateY: 0;
|
|
42
|
+
--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
43
|
+
--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
|
|
44
|
+
--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
45
|
+
--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
|
|
46
|
+
--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
47
|
+
--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
|
|
48
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
|
|
49
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
50
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
|
|
51
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
|
|
52
|
+
--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
|
|
53
|
+
--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
|
|
54
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
|
|
55
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
|
|
56
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
|
|
57
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
|
|
11
58
|
--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
|
|
12
59
|
--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
|
|
13
60
|
--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
|
|
@@ -26,25 +73,7 @@
|
|
|
26
73
|
--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
27
74
|
--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
|
|
28
75
|
--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
|
|
29
|
-
--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
|
|
30
|
-
--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
|
|
31
|
-
--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
|
|
32
|
-
--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
|
|
33
|
-
--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
|
|
34
|
-
--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
35
|
-
--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
|
|
36
|
-
--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
|
37
|
-
--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
|
|
38
|
-
--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
|
|
39
|
-
--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
|
|
40
76
|
--pf-c-card--m-full-height--Height: 100%;
|
|
41
|
-
--pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
|
|
42
|
-
--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
|
|
43
|
-
--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
|
|
44
|
-
--pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
|
|
45
|
-
--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
|
|
46
|
-
--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
|
|
47
|
-
--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
|
|
48
77
|
--pf-c-card--m-plain--BoxShadow: none;
|
|
49
78
|
--pf-c-card--m-plain--BackgroundColor: transparent;
|
|
50
79
|
--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
|
|
@@ -83,6 +112,51 @@
|
|
|
83
112
|
content: "";
|
|
84
113
|
background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
|
|
85
114
|
}
|
|
115
|
+
.pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
|
|
116
|
+
position: relative;
|
|
117
|
+
}
|
|
118
|
+
.pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
|
|
119
|
+
position: absolute;
|
|
120
|
+
right: var(--pf-c-card--m-selectable-raised--before--Right);
|
|
121
|
+
bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
|
|
122
|
+
left: var(--pf-c-card--m-selectable-raised--before--Left);
|
|
123
|
+
height: var(--pf-c-card--m-selectable-raised--before--Height);
|
|
124
|
+
content: "";
|
|
125
|
+
background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
|
|
126
|
+
transition: var(--pf-c-card--m-selectable-raised--before--Transition);
|
|
127
|
+
transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
|
|
128
|
+
transform-origin: center bottom;
|
|
129
|
+
}
|
|
130
|
+
.pf-c-card.pf-m-hoverable-raised:hover {
|
|
131
|
+
--pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
|
|
132
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
|
|
133
|
+
}
|
|
134
|
+
.pf-c-card.pf-m-selectable-raised {
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
/*
|
|
137
|
+
&:active {
|
|
138
|
+
--pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
|
|
139
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
|
|
140
|
+
}
|
|
141
|
+
*/
|
|
142
|
+
}
|
|
143
|
+
.pf-c-card.pf-m-selectable-raised:hover {
|
|
144
|
+
--pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
|
|
145
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
|
|
146
|
+
}
|
|
147
|
+
.pf-c-card.pf-m-selectable-raised:focus {
|
|
148
|
+
--pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
|
|
149
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
|
|
150
|
+
}
|
|
151
|
+
.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
|
|
152
|
+
--pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
|
|
153
|
+
--pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
|
|
154
|
+
--pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
|
|
155
|
+
--pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
|
|
156
|
+
box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
|
|
157
|
+
transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
|
|
158
|
+
transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
|
|
159
|
+
}
|
|
86
160
|
.pf-c-card.pf-m-compact {
|
|
87
161
|
--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
|
|
88
162
|
--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
|
|
@@ -104,6 +178,10 @@
|
|
|
104
178
|
}
|
|
105
179
|
.pf-c-card.pf-m-flat {
|
|
106
180
|
--pf-c-card--BoxShadow: none;
|
|
181
|
+
--pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
|
|
182
|
+
--pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
|
|
183
|
+
--pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
|
|
184
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
|
|
107
185
|
border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
|
|
108
186
|
}
|
|
109
187
|
.pf-c-card.pf-m-plain {
|
|
@@ -111,6 +189,7 @@
|
|
|
111
189
|
--pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
|
|
112
190
|
}
|
|
113
191
|
.pf-c-card.pf-m-rounded {
|
|
192
|
+
--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
|
|
114
193
|
border-radius: var(--pf-c-card--m-rounded--BorderRadius);
|
|
115
194
|
}
|
|
116
195
|
.pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
|
|
@@ -14,6 +14,9 @@ declare const _default: {
|
|
|
14
14
|
"hoverable": "pf-m-hoverable",
|
|
15
15
|
"selectable": "pf-m-selectable",
|
|
16
16
|
"selected": "pf-m-selected",
|
|
17
|
+
"hoverableRaised": "pf-m-hoverable-raised",
|
|
18
|
+
"selectableRaised": "pf-m-selectable-raised",
|
|
19
|
+
"selectedRaised": "pf-m-selected-raised",
|
|
17
20
|
"compact": "pf-m-compact",
|
|
18
21
|
"displayLg": "pf-m-display-lg",
|
|
19
22
|
"flat": "pf-m-flat",
|
|
@@ -16,6 +16,9 @@ exports.default = {
|
|
|
16
16
|
"hoverable": "pf-m-hoverable",
|
|
17
17
|
"selectable": "pf-m-selectable",
|
|
18
18
|
"selected": "pf-m-selected",
|
|
19
|
+
"hoverableRaised": "pf-m-hoverable-raised",
|
|
20
|
+
"selectableRaised": "pf-m-selectable-raised",
|
|
21
|
+
"selectedRaised": "pf-m-selected-raised",
|
|
19
22
|
"compact": "pf-m-compact",
|
|
20
23
|
"displayLg": "pf-m-display-lg",
|
|
21
24
|
"flat": "pf-m-flat",
|
|
@@ -161,9 +161,9 @@
|
|
|
161
161
|
--pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
|
|
162
162
|
--pf-c-menu__item-action--Color: var(--pf-global--Color--200);
|
|
163
163
|
--pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
|
|
164
|
+
--pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
|
|
164
165
|
--pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
|
|
165
166
|
--pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
|
|
166
|
-
--pf-c-menu__list-item--m-disabled__item-action--Color: var(--pf-global--disabled-color--200);
|
|
167
167
|
--pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
|
|
168
168
|
--pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
169
169
|
--pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
|
|
@@ -379,7 +379,6 @@
|
|
|
379
379
|
--pf-c-menu__list-item--hover--BackgroundColor: transparent;
|
|
380
380
|
--pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
|
|
381
381
|
--pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
|
|
382
|
-
--pf-c-menu__item-action--Color: var(--pf-c-menu__list-item--m-disabled__item-action--Color);
|
|
383
382
|
--pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
|
|
384
383
|
pointer-events: none;
|
|
385
384
|
}
|
|
@@ -506,6 +505,9 @@
|
|
|
506
505
|
.pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
|
|
507
506
|
--pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
|
|
508
507
|
}
|
|
508
|
+
.pf-c-menu__item-action:disabled {
|
|
509
|
+
--pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
|
|
510
|
+
}
|
|
509
511
|
|
|
510
512
|
.pf-c-menu__item-action-icon {
|
|
511
513
|
display: flex;
|
|
@@ -103,23 +103,29 @@
|
|
|
103
103
|
--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
|
|
104
104
|
--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md);
|
|
105
105
|
--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100);
|
|
106
|
-
--pf-c-select__menu-item--Width: 100%;
|
|
107
106
|
--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
|
|
107
|
+
--pf-c-select__menu-item--Width: 100%;
|
|
108
108
|
--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
|
109
109
|
--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
|
110
110
|
--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
|
|
111
111
|
--pf-c-select__menu-item--m-link--Width: auto;
|
|
112
112
|
--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
|
|
113
113
|
--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
|
|
114
|
-
--pf-c-select__menu-item--m-action--Color: var(--pf-global--
|
|
114
|
+
--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200);
|
|
115
|
+
--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
|
|
116
|
+
--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100);
|
|
117
|
+
--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
|
|
115
118
|
--pf-c-select__menu-item--m-action--Width: auto;
|
|
116
119
|
--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
117
120
|
--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
|
|
118
121
|
--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
|
|
119
122
|
--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
|
|
120
|
-
--pf-c-select__menu-item--m-action--
|
|
121
|
-
--pf-c-select__menu-item--m-action--
|
|
123
|
+
--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200);
|
|
124
|
+
--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100);
|
|
125
|
+
--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100);
|
|
122
126
|
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400);
|
|
127
|
+
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500);
|
|
128
|
+
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500);
|
|
123
129
|
--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color);
|
|
124
130
|
--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100);
|
|
125
131
|
--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
@@ -380,7 +386,9 @@
|
|
|
380
386
|
display: flex;
|
|
381
387
|
}
|
|
382
388
|
.pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
|
|
383
|
-
--pf-c-select__menu-item--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
|
|
389
|
+
--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
|
|
390
|
+
--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
|
|
391
|
+
--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
|
|
384
392
|
}
|
|
385
393
|
|
|
386
394
|
.pf-c-select__menu-item {
|
|
@@ -434,6 +442,14 @@
|
|
|
434
442
|
.pf-c-select__menu-item.pf-m-action:focus {
|
|
435
443
|
--pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
|
|
436
444
|
}
|
|
445
|
+
.pf-c-select__menu-item.pf-m-action:disabled {
|
|
446
|
+
--pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
|
|
447
|
+
}
|
|
448
|
+
.pf-c-select__menu-item.pf-m-favorite-action {
|
|
449
|
+
--pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
|
|
450
|
+
--pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
|
|
451
|
+
--pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
|
|
452
|
+
}
|
|
437
453
|
.pf-c-select__menu-item.pf-m-selected {
|
|
438
454
|
--pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
|
|
439
455
|
--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
|
|
@@ -4,33 +4,42 @@
|
|
|
4
4
|
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
|
|
5
5
|
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
|
|
6
6
|
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
7
|
+
--pf-c-tile--Transition: none;
|
|
8
|
+
--pf-c-tile--TranslateY: 0;
|
|
7
9
|
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
8
10
|
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
9
|
-
--pf-c-tile--
|
|
10
|
-
--pf-c-tile--
|
|
11
|
-
--pf-c-tile--
|
|
12
|
-
--pf-c-tile--
|
|
13
|
-
--pf-c-tile--
|
|
14
|
-
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
|
|
15
|
-
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
16
|
-
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
17
|
-
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
18
|
-
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
19
|
-
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
20
|
-
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
11
|
+
--pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
|
|
12
|
+
--pf-c-tile--after--BackgroundColor: transparent;
|
|
13
|
+
--pf-c-tile--after--Transition: none;
|
|
14
|
+
--pf-c-tile--after--ScaleY: 1;
|
|
15
|
+
--pf-c-tile--after--TranslateY: 0;
|
|
21
16
|
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
|
|
22
17
|
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
|
|
23
18
|
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
|
|
19
|
+
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
20
|
+
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
21
|
+
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
22
|
+
--pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
24
23
|
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
|
|
24
|
+
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
25
|
+
--pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
26
|
+
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
|
|
27
|
+
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
28
|
+
--pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
|
|
29
|
+
--pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
|
|
30
|
+
--pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
|
|
31
|
+
--pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
|
|
32
|
+
--pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
|
|
33
|
+
--pf-c-tile--m-selected--after--ScaleY: 2;
|
|
25
34
|
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
|
|
35
|
+
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
36
|
+
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
26
37
|
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
|
|
27
|
-
--pf-c-tile--
|
|
38
|
+
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
39
|
+
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
28
40
|
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
|
|
29
41
|
--pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
|
|
30
42
|
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
|
31
|
-
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
32
|
-
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
33
|
-
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
34
43
|
position: relative;
|
|
35
44
|
display: inline-grid;
|
|
36
45
|
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
|
|
@@ -38,34 +47,49 @@
|
|
|
38
47
|
cursor: pointer;
|
|
39
48
|
background-color: var(--pf-c-tile--BackgroundColor);
|
|
40
49
|
grid-template-rows: min-content;
|
|
50
|
+
transition: var(--pf-c-tile--Transition);
|
|
51
|
+
transform: translateY(var(--pf-c-tile--TranslateY));
|
|
41
52
|
}
|
|
42
|
-
.pf-c-tile::before {
|
|
53
|
+
.pf-c-tile::before, .pf-c-tile::after {
|
|
43
54
|
position: absolute;
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
content: "";
|
|
57
|
+
}
|
|
58
|
+
.pf-c-tile::before {
|
|
44
59
|
top: 0;
|
|
45
60
|
right: 0;
|
|
46
61
|
bottom: 0;
|
|
47
62
|
left: 0;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
content: "";
|
|
50
63
|
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
|
|
51
|
-
|
|
64
|
+
}
|
|
65
|
+
.pf-c-tile::after {
|
|
66
|
+
right: 0;
|
|
67
|
+
bottom: 0;
|
|
68
|
+
left: 0;
|
|
69
|
+
height: var(--pf-c-tile--after--Height);
|
|
70
|
+
background-color: var(--pf-c-tile--after--BackgroundColor);
|
|
71
|
+
transition: var(--pf-c-tile--after--Transition);
|
|
72
|
+
transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
|
|
52
73
|
}
|
|
53
74
|
.pf-c-tile:hover {
|
|
54
75
|
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
|
|
55
76
|
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
|
|
56
|
-
--pf-c-tile--
|
|
57
|
-
}
|
|
58
|
-
.pf-c-tile.pf-m-selected {
|
|
59
|
-
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
60
|
-
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
61
|
-
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
|
|
62
|
-
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
|
|
77
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
|
|
63
78
|
}
|
|
64
79
|
.pf-c-tile:focus {
|
|
65
80
|
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
|
|
66
81
|
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
|
|
67
|
-
--pf-c-tile--
|
|
68
|
-
|
|
82
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
|
|
83
|
+
}
|
|
84
|
+
.pf-c-tile:active, .pf-c-tile.pf-m-selected {
|
|
85
|
+
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
86
|
+
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
87
|
+
--pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
|
|
88
|
+
--pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
|
|
89
|
+
--pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
|
|
90
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
|
|
91
|
+
--pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
|
|
92
|
+
--pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
|
|
69
93
|
}
|
|
70
94
|
.pf-c-tile.pf-m-disabled {
|
|
71
95
|
--pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-styles",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.14.0",
|
|
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": "4.
|
|
22
|
+
"@patternfly/patternfly": "4.147.1",
|
|
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.0.0"
|
|
30
30
|
},
|
|
31
31
|
"license": "MIT",
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "f0d2686d3b999cbcb1b1686048865160dd6736f9"
|
|
33
33
|
}
|