@patternfly/patternfly 6.0.0-alpha.54 → 6.0.0-alpha.56
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/components/JumpLinks/jump-links.css +34 -34
- package/components/JumpLinks/jump-links.scss +35 -36
- package/components/Tile/tile.css +40 -81
- package/components/Tile/tile.scss +38 -84
- package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
- package/docs/components/Tile/examples/Tile.md +264 -144
- package/docs/demos/Drawer/examples/Drawer.md +100 -80
- package/docs/demos/JumpLinks/examples/JumpLinks.md +275 -185
- package/package.json +1 -1
- package/patternfly-no-globals.css +75 -120
- package/patternfly-theme-dark-unversioned.css +75 -120
- package/patternfly.css +75 -120
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Tile/themes/dark/tile.scss +0 -10
|
@@ -1,60 +1,63 @@
|
|
|
1
|
-
|
|
1
|
+
:where(:root),
|
|
2
|
+
:where(.pf-v5-c-jump-links) {
|
|
2
3
|
--pf-v5-c-jump-links__list--Display: flex;
|
|
3
4
|
--pf-v5-c-jump-links__list--PaddingTop: 0;
|
|
4
|
-
--pf-v5-c-jump-links__list--PaddingRight: var(--pf-
|
|
5
|
+
--pf-v5-c-jump-links__list--PaddingRight: var(--pf-t--global--spacer--md);
|
|
5
6
|
--pf-v5-c-jump-links__list--PaddingBottom: 0;
|
|
6
|
-
--pf-v5-c-jump-links__list--PaddingLeft: var(--pf-
|
|
7
|
-
--pf-v5-c-jump-links--m-vertical__list--PaddingTop: var(--pf-
|
|
7
|
+
--pf-v5-c-jump-links__list--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
8
|
+
--pf-v5-c-jump-links--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
|
|
8
9
|
--pf-v5-c-jump-links--m-vertical__list--PaddingRight: 0;
|
|
9
|
-
--pf-v5-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-
|
|
10
|
+
--pf-v5-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
10
11
|
--pf-v5-c-jump-links--m-vertical__list--PaddingLeft: 0;
|
|
11
12
|
--pf-v5-c-jump-links__list--FlexDirection: row;
|
|
12
13
|
--pf-v5-c-jump-links--m-vertical__list--FlexDirection: column;
|
|
13
|
-
--pf-v5-c-jump-links__list--before--BorderColor: var(--pf-
|
|
14
|
-
--pf-v5-c-jump-links__list--before--BorderTopWidth: var(--pf-
|
|
14
|
+
--pf-v5-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
15
|
+
--pf-v5-c-jump-links__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
|
|
15
16
|
--pf-v5-c-jump-links__list--before--BorderRightWidth: 0;
|
|
16
17
|
--pf-v5-c-jump-links__list--before--BorderBottomWidth: 0;
|
|
17
18
|
--pf-v5-c-jump-links__list--before--BorderLeftWidth: 0;
|
|
18
|
-
--pf-v5-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-
|
|
19
|
+
--pf-v5-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
|
|
19
20
|
--pf-v5-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
|
|
20
|
-
--pf-v5-c-jump-links__list__list--MarginTop: calc(var(--pf-
|
|
21
|
-
--pf-v5-c-jump-links__link--PaddingTop: var(--pf-
|
|
22
|
-
--pf-v5-c-jump-links__link--PaddingRight: var(--pf-
|
|
23
|
-
--pf-v5-c-jump-links__link--PaddingBottom: var(--pf-
|
|
24
|
-
--pf-v5-c-jump-links__link--PaddingLeft: var(--pf-
|
|
25
|
-
--pf-v5-c-jump-links__list__list__link--PaddingTop: var(--pf-
|
|
26
|
-
--pf-v5-c-jump-links__list__list__link--PaddingLeft: var(--pf-
|
|
27
|
-
--pf-v5-c-jump-links__list__list__link--PaddingBottom: var(--pf-
|
|
28
|
-
--pf-v5-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-
|
|
21
|
+
--pf-v5-c-jump-links__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
22
|
+
--pf-v5-c-jump-links__link--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
23
|
+
--pf-v5-c-jump-links__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
24
|
+
--pf-v5-c-jump-links__link--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
25
|
+
--pf-v5-c-jump-links__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
26
|
+
--pf-v5-c-jump-links__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
27
|
+
--pf-v5-c-jump-links__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
28
|
+
--pf-v5-c-jump-links__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
29
|
+
--pf-v5-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
|
|
29
30
|
--pf-v5-c-jump-links__link--before--BorderTopWidth: 0;
|
|
30
31
|
--pf-v5-c-jump-links__link--before--BorderRightWidth: 0;
|
|
31
32
|
--pf-v5-c-jump-links__link--before--BorderBottomWidth: 0;
|
|
32
33
|
--pf-v5-c-jump-links__link--before--BorderLeftWidth: 0;
|
|
33
34
|
--pf-v5-c-jump-links__link--before--BorderColor: transparent;
|
|
34
|
-
--pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-
|
|
35
|
+
--pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
|
|
35
36
|
--pf-v5-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
|
|
36
|
-
--pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-
|
|
37
|
+
--pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
37
38
|
--pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
|
|
38
|
-
--pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-
|
|
39
|
-
--pf-v5-c-jump-links__link-text--Color: var(--pf-
|
|
40
|
-
--pf-v5-c-jump-links__link--hover__link-text--Color: var(--pf-
|
|
41
|
-
--pf-v5-c-jump-
|
|
42
|
-
--pf-v5-c-jump-
|
|
43
|
-
--pf-v5-c-jump-links__label--MarginBottom: var(--pf-v5-global--spacer--md);
|
|
39
|
+
--pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
|
|
40
|
+
--pf-v5-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
|
|
41
|
+
--pf-v5-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
|
|
42
|
+
--pf-v5-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
|
|
43
|
+
--pf-v5-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
|
|
44
44
|
--pf-v5-c-jump-links__label--Display: block;
|
|
45
45
|
--pf-v5-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
|
|
46
46
|
--pf-v5-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v5-global--spacer--form-element));
|
|
47
47
|
--pf-v5-c-jump-links__toggle--MarginBottom: var(--pf-v5-c-jump-links__toggle--MarginBottom--base);
|
|
48
|
-
--pf-v5-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base) + var(--pf-
|
|
49
|
-
--pf-v5-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-
|
|
48
|
+
--pf-v5-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
|
|
49
|
+
--pf-v5-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
|
|
50
50
|
--pf-v5-c-jump-links__toggle--Display: none;
|
|
51
51
|
--pf-v5-c-jump-links__toggle-icon--Color: currentcolor;
|
|
52
52
|
--pf-v5-c-jump-links__toggle-icon--Transition: var(--pf-v5-global--Transition);
|
|
53
53
|
--pf-v5-c-jump-links__toggle-icon--Rotate: 0;
|
|
54
|
-
--pf-v5-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-
|
|
54
|
+
--pf-v5-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
55
55
|
--pf-v5-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
|
|
56
|
-
--pf-v5-c-jump-links__toggle-text--MarginLeft: var(--pf-
|
|
57
|
-
--pf-v5-c-jump-links__toggle-text--Color: var(--pf-
|
|
56
|
+
--pf-v5-c-jump-links__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
|
|
57
|
+
--pf-v5-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pf-v5-c-jump-links {
|
|
58
61
|
display: flex;
|
|
59
62
|
}
|
|
60
63
|
.pf-v5-c-jump-links.pf-m-center {
|
|
@@ -192,12 +195,9 @@
|
|
|
192
195
|
text-decoration: none;
|
|
193
196
|
outline-offset: var(--pf-v5-c-jump-links__link--OutlineOffset);
|
|
194
197
|
}
|
|
195
|
-
.pf-v5-c-jump-links__link:hover {
|
|
198
|
+
.pf-v5-c-jump-links__link:hover, .pf-v5-c-jump-links__link:focus {
|
|
196
199
|
--pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--hover__link-text--Color);
|
|
197
200
|
}
|
|
198
|
-
.pf-v5-c-jump-links__link:focus {
|
|
199
|
-
--pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--focus__link-text--Color);
|
|
200
|
-
}
|
|
201
201
|
.pf-v5-c-jump-links__link::before {
|
|
202
202
|
position: absolute;
|
|
203
203
|
inset: 0;
|
|
@@ -1,37 +1,38 @@
|
|
|
1
1
|
// @debug $jump-links; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
$pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
:where(:root),
|
|
5
|
+
:where(.#{$jump-links}) {
|
|
5
6
|
// list
|
|
6
7
|
--#{$jump-links}__list--Display: flex;
|
|
7
8
|
--#{$jump-links}__list--PaddingTop: 0;
|
|
8
|
-
--#{$jump-links}__list--PaddingRight: var(
|
|
9
|
+
--#{$jump-links}__list--PaddingRight: var(--pf-t--global--spacer--md);
|
|
9
10
|
--#{$jump-links}__list--PaddingBottom: 0;
|
|
10
|
-
--#{$jump-links}__list--PaddingLeft: var(
|
|
11
|
-
--#{$jump-links}--m-vertical__list--PaddingTop: var(
|
|
11
|
+
--#{$jump-links}__list--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
12
|
+
--#{$jump-links}--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
|
|
12
13
|
--#{$jump-links}--m-vertical__list--PaddingRight: 0;
|
|
13
|
-
--#{$jump-links}--m-vertical__list--PaddingBottom: var(
|
|
14
|
+
--#{$jump-links}--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
14
15
|
--#{$jump-links}--m-vertical__list--PaddingLeft: 0;
|
|
15
16
|
--#{$jump-links}__list--FlexDirection: row;
|
|
16
17
|
--#{$jump-links}--m-vertical__list--FlexDirection: column;
|
|
17
|
-
--#{$jump-links}__list--before--BorderColor: var(
|
|
18
|
-
--#{$jump-links}__list--before--BorderTopWidth: var(
|
|
18
|
+
--#{$jump-links}__list--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
19
|
+
--#{$jump-links}__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
|
|
19
20
|
--#{$jump-links}__list--before--BorderRightWidth: 0;
|
|
20
21
|
--#{$jump-links}__list--before--BorderBottomWidth: 0;
|
|
21
22
|
--#{$jump-links}__list--before--BorderLeftWidth: 0;
|
|
22
|
-
--#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(
|
|
23
|
+
--#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
|
|
23
24
|
--#{$jump-links}--m-vertical__list--before--BorderTopWidth: 0;
|
|
24
|
-
--#{$jump-links}__list__list--MarginTop: calc(var(
|
|
25
|
+
--#{$jump-links}__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
25
26
|
|
|
26
27
|
// link
|
|
27
|
-
--#{$jump-links}__link--PaddingTop: var(
|
|
28
|
-
--#{$jump-links}__link--PaddingRight: var(
|
|
29
|
-
--#{$jump-links}__link--PaddingBottom: var(
|
|
30
|
-
--#{$jump-links}__link--PaddingLeft: var(
|
|
31
|
-
--#{$jump-links}__list__list__link--PaddingTop: var(
|
|
32
|
-
--#{$jump-links}__list__list__link--PaddingLeft: var(
|
|
33
|
-
--#{$jump-links}__list__list__link--PaddingBottom: var(
|
|
34
|
-
--#{$jump-links}__link--OutlineOffset: calc(-1 * var(
|
|
28
|
+
--#{$jump-links}__link--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
29
|
+
--#{$jump-links}__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
30
|
+
--#{$jump-links}__link--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
31
|
+
--#{$jump-links}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
32
|
+
--#{$jump-links}__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
33
|
+
--#{$jump-links}__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
34
|
+
--#{$jump-links}__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
35
|
+
--#{$jump-links}__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
|
|
35
36
|
|
|
36
37
|
// before
|
|
37
38
|
--#{$jump-links}__link--before--BorderTopWidth: 0;
|
|
@@ -39,41 +40,42 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
|
|
|
39
40
|
--#{$jump-links}__link--before--BorderBottomWidth: 0;
|
|
40
41
|
--#{$jump-links}__link--before--BorderLeftWidth: 0;
|
|
41
42
|
--#{$jump-links}__link--before--BorderColor: transparent;
|
|
42
|
-
--#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(
|
|
43
|
+
--#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
|
|
43
44
|
--#{$jump-links}__item--m-current__link--before--BorderLeftWidth: 0;
|
|
44
|
-
--#{$jump-links}__item--m-current__link--before--BorderColor: var(
|
|
45
|
+
--#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
45
46
|
--#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
|
|
46
|
-
--#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(
|
|
47
|
+
--#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
|
|
47
48
|
|
|
48
49
|
// text
|
|
49
|
-
--#{$jump-links}__link-text--Color: var(
|
|
50
|
-
--#{$jump-links}__link--hover__link-text--Color: var(
|
|
51
|
-
--#{$jump-links}
|
|
52
|
-
--#{$jump-links}__item--m-current__link-text--Color: var(--#{$pf-global}--Color--100);
|
|
50
|
+
--#{$jump-links}__link-text--Color: var(--pf-t--global--text--color--subtle);
|
|
51
|
+
--#{$jump-links}__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
|
|
52
|
+
--#{$jump-links}__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
|
|
53
53
|
|
|
54
54
|
// label
|
|
55
|
-
--#{$jump-links}__label--MarginBottom: var(
|
|
55
|
+
--#{$jump-links}__label--MarginBottom: var(--pf-t--global--spacer--md);
|
|
56
56
|
--#{$jump-links}__label--Display: block;
|
|
57
57
|
|
|
58
58
|
// toggle
|
|
59
59
|
--#{$jump-links}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
|
|
60
60
|
--#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--#{$pf-global}--spacer--form-element));
|
|
61
61
|
--#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
|
|
62
|
-
--#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(
|
|
63
|
-
--#{$jump-links}__toggle--MarginLeft: calc(-1 * var(
|
|
62
|
+
--#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
|
|
63
|
+
--#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
|
|
64
64
|
--#{$jump-links}__toggle--Display: none;
|
|
65
65
|
|
|
66
66
|
// toggle icon
|
|
67
67
|
--#{$jump-links}__toggle-icon--Color: currentcolor;
|
|
68
|
-
--#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
|
|
68
|
+
--#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition); // TODO
|
|
69
69
|
--#{$jump-links}__toggle-icon--Rotate: 0;
|
|
70
|
-
--#{$jump-links}--m-expanded__toggle-icon--Color: var(
|
|
70
|
+
--#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
71
71
|
--#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
|
|
72
72
|
|
|
73
73
|
// toggle text
|
|
74
|
-
--#{$jump-links}__toggle-text--MarginLeft: var(
|
|
75
|
-
--#{$jump-links}__toggle-text--Color: var(
|
|
74
|
+
--#{$jump-links}__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
|
|
75
|
+
--#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
76
|
+
}
|
|
76
77
|
|
|
78
|
+
.#{$jump-links} {
|
|
77
79
|
display: flex;
|
|
78
80
|
|
|
79
81
|
&.pf-m-center {
|
|
@@ -168,12 +170,9 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
|
|
|
168
170
|
text-decoration: none;
|
|
169
171
|
outline-offset: var(--#{$jump-links}__link--OutlineOffset);
|
|
170
172
|
|
|
171
|
-
&:hover
|
|
172
|
-
--#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
|
|
173
|
-
}
|
|
174
|
-
|
|
173
|
+
&:hover,
|
|
175
174
|
&:focus {
|
|
176
|
-
--#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--
|
|
175
|
+
--#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
|
|
177
176
|
}
|
|
178
177
|
|
|
179
178
|
&::before {
|
package/components/Tile/tile.css
CHANGED
|
@@ -1,45 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--pf-v5-c-tile--
|
|
4
|
-
--pf-v5-c-tile--
|
|
5
|
-
--pf-v5-c-tile--
|
|
6
|
-
--pf-v5-c-tile--
|
|
7
|
-
--pf-v5-c-tile--
|
|
8
|
-
--pf-v5-c-tile--
|
|
9
|
-
--pf-v5-c-tile--before--BorderColor: var(--pf-
|
|
10
|
-
--pf-v5-c-tile--before--BorderWidth: var(--pf-
|
|
11
|
-
--pf-v5-c-tile--
|
|
1
|
+
:where(:root),
|
|
2
|
+
:where(.pf-v5-c-tile) {
|
|
3
|
+
--pf-v5-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
4
|
+
--pf-v5-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
5
|
+
--pf-v5-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
6
|
+
--pf-v5-c-tile--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
7
|
+
--pf-v5-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
8
|
+
--pf-v5-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9
|
+
--pf-v5-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
10
|
+
--pf-v5-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
11
|
+
--pf-v5-c-tile--before--BorderRadius: var(--pf-v5-c-tile--BorderRadius);
|
|
12
12
|
--pf-v5-c-tile--after--BackgroundColor: transparent;
|
|
13
|
-
--pf-v5-c-
|
|
14
|
-
--pf-v5-c-
|
|
15
|
-
--pf-v5-c-
|
|
16
|
-
--pf-v5-c-
|
|
17
|
-
--pf-v5-c-
|
|
18
|
-
--pf-v5-c-
|
|
19
|
-
--pf-v5-c-
|
|
20
|
-
--pf-v5-c-
|
|
21
|
-
--pf-v5-c-
|
|
22
|
-
--pf-v5-c-tile--
|
|
23
|
-
--pf-v5-c-tile--
|
|
24
|
-
--pf-v5-c-tile--
|
|
25
|
-
--pf-v5-c-tile--
|
|
26
|
-
--pf-v5-c-tile--
|
|
27
|
-
--pf-v5-c-
|
|
28
|
-
--pf-v5-c-
|
|
29
|
-
--pf-v5-c-tile--m-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
--pf-v5-c-tile--m-selected--after--ScaleY: 2;
|
|
34
|
-
--pf-v5-c-tile--m-selected__icon--Color: var(--pf-v5-global--primary-color--100);
|
|
35
|
-
--pf-v5-c-tile--m-selected__title--Color: var(--pf-v5-global--primary-color--100);
|
|
36
|
-
--pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
|
|
37
|
-
--pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
38
|
-
--pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--100);
|
|
39
|
-
--pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--100);
|
|
40
|
-
--pf-v5-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-v5-global--spacer--xs);
|
|
41
|
-
--pf-v5-c-tile__header--m-stacked__icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
|
|
42
|
-
--pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
|
|
13
|
+
--pf-v5-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
14
|
+
--pf-v5-c-tile__icon--FontSize: var(--pf-t--global--icon--size--body--default);
|
|
15
|
+
--pf-v5-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
16
|
+
--pf-v5-c-tile__title--Color: var(--pf-t--global--text--color--regular);
|
|
17
|
+
--pf-v5-c-tile__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
18
|
+
--pf-v5-c-tile__body--Color: var(--pf-t--global--text--color--regular);
|
|
19
|
+
--pf-v5-c-tile__body--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
20
|
+
--pf-v5-c-tile--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
|
|
21
|
+
--pf-v5-c-tile--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
22
|
+
--pf-v5-c-tile--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
|
|
23
|
+
--pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
24
|
+
--pf-v5-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
|
|
25
|
+
--pf-v5-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
|
|
26
|
+
--pf-v5-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
|
|
27
|
+
--pf-v5-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
|
|
28
|
+
--pf-v5-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
|
|
29
|
+
--pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pf-v5-c-tile {
|
|
43
33
|
position: relative;
|
|
44
34
|
display: inline-grid;
|
|
45
35
|
grid-template-rows: min-content;
|
|
@@ -47,11 +37,9 @@
|
|
|
47
37
|
padding-block-end: var(--pf-v5-c-tile--PaddingBottom);
|
|
48
38
|
padding-inline-start: var(--pf-v5-c-tile--PaddingLeft);
|
|
49
39
|
padding-inline-end: var(--pf-v5-c-tile--PaddingRight);
|
|
50
|
-
text-align: center;
|
|
51
40
|
cursor: pointer;
|
|
52
41
|
background-color: var(--pf-v5-c-tile--BackgroundColor);
|
|
53
|
-
|
|
54
|
-
transform: translateY(var(--pf-v5-c-tile--TranslateY));
|
|
42
|
+
border-radius: var(--pf-v5-c-tile--BorderRadius);
|
|
55
43
|
}
|
|
56
44
|
.pf-v5-c-tile::before, .pf-v5-c-tile::after {
|
|
57
45
|
position: absolute;
|
|
@@ -61,42 +49,21 @@
|
|
|
61
49
|
.pf-v5-c-tile::before {
|
|
62
50
|
inset: 0;
|
|
63
51
|
border: var(--pf-v5-c-tile--before--BorderWidth) solid var(--pf-v5-c-tile--before--BorderColor);
|
|
64
|
-
|
|
65
|
-
.pf-v5-c-tile::after {
|
|
66
|
-
inset-block-end: 0;
|
|
67
|
-
inset-inline-start: 0;
|
|
68
|
-
inset-inline-end: 0;
|
|
69
|
-
height: var(--pf-v5-c-tile--after--Height);
|
|
70
|
-
background-color: var(--pf-v5-c-tile--after--BackgroundColor);
|
|
71
|
-
transition: var(--pf-v5-c-tile--after--Transition);
|
|
72
|
-
transform: scaleY(var(--pf-v5-c-tile--after--ScaleY)) translateY(var(--pf-v5-c-tile--after--TranslateY));
|
|
52
|
+
border-radius: var(--pf-v5-c-tile--before--BorderRadius);
|
|
73
53
|
}
|
|
74
54
|
.pf-v5-c-tile:hover {
|
|
75
|
-
--pf-v5-c-
|
|
76
|
-
--pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--hover__icon--Color);
|
|
77
|
-
--pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--hover--after--BackgroundColor);
|
|
55
|
+
--pf-v5-c-tile--before--BorderColor: var(--pf-v5-c-tile--hover--before--BorderColor);
|
|
78
56
|
}
|
|
79
|
-
.pf-v5-c-tile
|
|
80
|
-
--pf-v5-c-
|
|
81
|
-
--pf-v5-c-
|
|
82
|
-
--pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--focus--after--BackgroundColor);
|
|
83
|
-
}
|
|
84
|
-
.pf-v5-c-tile:active, .pf-v5-c-tile.pf-m-selected {
|
|
85
|
-
--pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--m-selected__title--Color);
|
|
86
|
-
--pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-selected__icon--Color);
|
|
87
|
-
--pf-v5-c-tile--TranslateY: var(--pf-v5-c-tile--m-selected--TranslateY);
|
|
88
|
-
--pf-v5-c-tile--Transition: var(--pf-v5-c-tile--m-selected--Transition);
|
|
89
|
-
--pf-v5-c-tile--after--Height: var(--pf-v5-c-tile--m-selected--after--Height);
|
|
90
|
-
--pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--m-selected--after--BackgroundColor);
|
|
91
|
-
--pf-v5-c-tile--after--Transition: var(--pf-v5-c-tile--m-selected--after--Transition);
|
|
92
|
-
--pf-v5-c-tile--after--ScaleY: var(--pf-v5-c-tile--m-selected--after--ScaleY);
|
|
57
|
+
.pf-v5-c-tile.pf-m-selected {
|
|
58
|
+
--pf-v5-c-tile--before--BorderColor: var(--pf-v5-c-tile--m-selected--before--BorderColor);
|
|
59
|
+
--pf-v5-c-tile--before--BorderWidth: var(--pf-v5-c-tile--m-selected--before--BorderWidth);
|
|
93
60
|
}
|
|
94
61
|
.pf-v5-c-tile.pf-m-disabled {
|
|
95
62
|
--pf-v5-c-tile--BackgroundColor: var(--pf-v5-c-tile--m-disabled--BackgroundColor);
|
|
96
63
|
--pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--m-disabled__title--Color);
|
|
64
|
+
--pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-disabled__icon--Color);
|
|
97
65
|
--pf-v5-c-tile__body--Color: var(--pf-v5-c-tile--m-disabled__body--Color);
|
|
98
66
|
--pf-v5-c-tile--before--BorderWidth: 0;
|
|
99
|
-
--pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-disabled__icon--Color);
|
|
100
67
|
pointer-events: none;
|
|
101
68
|
}
|
|
102
69
|
.pf-v5-c-tile.pf-m-display-lg .pf-v5-c-tile__header.pf-m-stacked {
|
|
@@ -106,22 +73,21 @@
|
|
|
106
73
|
.pf-v5-c-tile__header {
|
|
107
74
|
display: flex;
|
|
108
75
|
align-items: center;
|
|
109
|
-
justify-content: center;
|
|
110
76
|
}
|
|
111
77
|
.pf-v5-c-tile__header.pf-m-stacked {
|
|
112
78
|
--pf-v5-c-tile__icon--MarginRight: 0;
|
|
113
79
|
--pf-v5-c-tile__icon--FontSize: var(--pf-v5-c-tile__header--m-stacked__icon--FontSize);
|
|
114
80
|
flex-direction: column;
|
|
115
|
-
|
|
81
|
+
align-items: flex-start;
|
|
116
82
|
}
|
|
117
83
|
.pf-v5-c-tile__header.pf-m-stacked .pf-v5-c-tile__icon {
|
|
118
84
|
display: flex;
|
|
119
85
|
align-items: center;
|
|
120
|
-
justify-content: center;
|
|
121
86
|
margin-block-end: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
|
|
122
87
|
}
|
|
123
88
|
|
|
124
89
|
.pf-v5-c-tile__title {
|
|
90
|
+
font-weight: var(--pf-v5-c-tile__title--FontWeight);
|
|
125
91
|
color: var(--pf-v5-c-tile__title--Color);
|
|
126
92
|
}
|
|
127
93
|
|
|
@@ -134,11 +100,4 @@
|
|
|
134
100
|
margin-inline-end: var(--pf-v5-c-tile__icon--MarginRight);
|
|
135
101
|
font-size: var(--pf-v5-c-tile__icon--FontSize);
|
|
136
102
|
color: var(--pf-v5-c-tile__icon--Color);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-tile {
|
|
140
|
-
--pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
141
|
-
--pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--300);
|
|
142
|
-
--pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--300);
|
|
143
|
-
--pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--300);
|
|
144
103
|
}
|
|
@@ -1,68 +1,55 @@
|
|
|
1
1
|
// @debug $tile; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--#{$tile}--
|
|
6
|
-
--#{$tile}--
|
|
7
|
-
--#{$tile}--
|
|
8
|
-
--#{$tile}--
|
|
9
|
-
--#{$tile}--
|
|
10
|
-
--#{$tile}--
|
|
3
|
+
:where(:root),
|
|
4
|
+
:where(.#{$tile}) {
|
|
5
|
+
--#{$tile}--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
6
|
+
--#{$tile}--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
7
|
+
--#{$tile}--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
8
|
+
--#{$tile}--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
9
|
+
--#{$tile}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
10
|
+
--#{$tile}--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
11
11
|
|
|
12
12
|
// borders
|
|
13
|
-
--#{$tile}--before--BorderColor: var(
|
|
14
|
-
--#{$tile}--before--BorderWidth: var(
|
|
15
|
-
--#{$tile}--
|
|
13
|
+
--#{$tile}--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
14
|
+
--#{$tile}--before--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
15
|
+
--#{$tile}--before--BorderRadius: var(--#{$tile}--BorderRadius);
|
|
16
16
|
--#{$tile}--after--BackgroundColor: transparent;
|
|
17
|
-
--#{$tile}--after--Transition: none;
|
|
18
|
-
--#{$tile}--after--ScaleY: 1;
|
|
19
|
-
--#{$tile}--after--TranslateY: 0;
|
|
20
17
|
|
|
21
18
|
// icon
|
|
22
|
-
--#{$tile}__icon--MarginRight: var(
|
|
23
|
-
--#{$tile}__icon--FontSize: var(
|
|
24
|
-
--#{$tile}__icon--Color: var(
|
|
19
|
+
--#{$tile}__icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
20
|
+
--#{$tile}__icon--FontSize: var(--pf-t--global--icon--size--body--default);
|
|
21
|
+
--#{$tile}__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
25
22
|
|
|
26
23
|
// title
|
|
27
|
-
--#{$tile}__title--Color: var(
|
|
24
|
+
--#{$tile}__title--Color: var(--pf-t--global--text--color--regular);
|
|
25
|
+
--#{$tile}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
28
26
|
|
|
29
27
|
// body
|
|
30
|
-
--#{$tile}__body--Color: var(
|
|
31
|
-
--#{$tile}__body--FontSize: var(
|
|
28
|
+
--#{$tile}__body--Color: var(--pf-t--global--text--color--regular);
|
|
29
|
+
--#{$tile}__body--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
32
30
|
|
|
33
31
|
// hover
|
|
34
|
-
--#{$tile}--hover--
|
|
35
|
-
--#{$tile}--hover__icon--Color: var(--#{$pf-global}--primary-color--100);
|
|
36
|
-
--#{$tile}--hover__title--Color: var(--#{$pf-global}--primary-color--100);
|
|
37
|
-
|
|
38
|
-
// focus
|
|
39
|
-
--#{$tile}--focus--after--BackgroundColor: var(--#{$pf-global}--active-color--400);
|
|
40
|
-
--#{$tile}--focus__icon--Color: var(--#{$pf-global}--primary-color--100);
|
|
41
|
-
--#{$tile}--focus__title--Color: var(--#{$pf-global}--primary-color--100);
|
|
32
|
+
--#{$tile}--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
|
|
42
33
|
|
|
43
34
|
// selected
|
|
44
|
-
--#{$tile}--m-selected--
|
|
45
|
-
--#{$tile}--m-selected--
|
|
46
|
-
--#{$tile}--m-selected--after--Height: var(--#{$pf-global}--BorderWidth--lg);
|
|
47
|
-
--#{$tile}--m-selected--after--BackgroundColor: var(--#{$pf-global}--active-color--100);
|
|
48
|
-
--#{$tile}--m-selected--after--Transition: var(--#{$pf-global}--Transition);
|
|
49
|
-
--#{$tile}--m-selected--after--ScaleY: 2;
|
|
50
|
-
--#{$tile}--m-selected__icon--Color: var(--#{$pf-global}--primary-color--100);
|
|
51
|
-
--#{$tile}--m-selected__title--Color: var(--#{$pf-global}--primary-color--100);
|
|
35
|
+
--#{$tile}--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
36
|
+
--#{$tile}--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
|
|
52
37
|
|
|
53
38
|
// disabled
|
|
54
|
-
--#{$tile}--m-disabled--BackgroundColor: var(
|
|
55
|
-
--#{$tile}--m-
|
|
56
|
-
--#{$tile}--m-
|
|
57
|
-
--#{$tile}--m-disabled__body--Color: var(
|
|
39
|
+
--#{$tile}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
40
|
+
--#{$tile}--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
|
|
41
|
+
--#{$tile}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
|
|
42
|
+
--#{$tile}--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
|
|
58
43
|
|
|
59
44
|
// Stacked variatiion
|
|
60
|
-
--#{$tile}__header--m-stacked__icon--MarginBottom: var(
|
|
61
|
-
--#{$tile}__header--m-stacked__icon--FontSize: var(
|
|
45
|
+
--#{$tile}__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
|
|
46
|
+
--#{$tile}__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
|
|
62
47
|
|
|
63
48
|
// large variation
|
|
64
|
-
--#{$tile}--m-display-lg__header--m-stacked__icon--FontSize: var(
|
|
49
|
+
--#{$tile}--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
|
|
50
|
+
}
|
|
65
51
|
|
|
52
|
+
.#{$tile} {
|
|
66
53
|
position: relative;
|
|
67
54
|
display: inline-grid;
|
|
68
55
|
grid-template-rows: min-content;
|
|
@@ -70,11 +57,9 @@
|
|
|
70
57
|
padding-block-end: var(--#{$tile}--PaddingBottom);
|
|
71
58
|
padding-inline-start: var(--#{$tile}--PaddingLeft);
|
|
72
59
|
padding-inline-end: var(--#{$tile}--PaddingRight);
|
|
73
|
-
text-align: center;
|
|
74
60
|
cursor: pointer;
|
|
75
61
|
background-color: var(--#{$tile}--BackgroundColor);
|
|
76
|
-
|
|
77
|
-
transform: translateY(var(--#{$tile}--TranslateY));
|
|
62
|
+
border-radius: var(--#{$tile}--BorderRadius);
|
|
78
63
|
|
|
79
64
|
&::before,
|
|
80
65
|
&::after {
|
|
@@ -86,48 +71,24 @@
|
|
|
86
71
|
&::before {
|
|
87
72
|
inset: 0;
|
|
88
73
|
border: var(--#{$tile}--before--BorderWidth) solid var(--#{$tile}--before--BorderColor);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
&::after {
|
|
92
|
-
inset-block-end: 0;
|
|
93
|
-
inset-inline-start: 0;
|
|
94
|
-
inset-inline-end: 0;
|
|
95
|
-
height: var(--#{$tile}--after--Height);
|
|
96
|
-
background-color: var(--#{$tile}--after--BackgroundColor);
|
|
97
|
-
transition: var(--#{$tile}--after--Transition);
|
|
98
|
-
transform: scaleY(var(--#{$tile}--after--ScaleY)) translateY(var(--#{$tile}--after--TranslateY));
|
|
74
|
+
border-radius: var(--#{$tile}--before--BorderRadius);
|
|
99
75
|
}
|
|
100
76
|
|
|
101
77
|
&:hover {
|
|
102
|
-
--#{$tile}
|
|
103
|
-
--#{$tile}__icon--Color: var(--#{$tile}--hover__icon--Color);
|
|
104
|
-
--#{$tile}--after--BackgroundColor: var(--#{$tile}--hover--after--BackgroundColor);
|
|
78
|
+
--#{$tile}--before--BorderColor: var(--#{$tile}--hover--before--BorderColor);
|
|
105
79
|
}
|
|
106
80
|
|
|
107
|
-
&:focus {
|
|
108
|
-
--#{$tile}__title--Color: var(--#{$tile}--focus__title--Color);
|
|
109
|
-
--#{$tile}__icon--Color: var(--#{$tile}--focus__icon--Color);
|
|
110
|
-
--#{$tile}--after--BackgroundColor: var(--#{$tile}--focus--after--BackgroundColor);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
&:active, // for demo purposes - will remove
|
|
114
81
|
&.pf-m-selected {
|
|
115
|
-
--#{$tile}
|
|
116
|
-
--#{$tile}
|
|
117
|
-
--#{$tile}--TranslateY: var(--#{$tile}--m-selected--TranslateY);
|
|
118
|
-
--#{$tile}--Transition: var(--#{$tile}--m-selected--Transition);
|
|
119
|
-
--#{$tile}--after--Height: var(--#{$tile}--m-selected--after--Height);
|
|
120
|
-
--#{$tile}--after--BackgroundColor: var(--#{$tile}--m-selected--after--BackgroundColor);
|
|
121
|
-
--#{$tile}--after--Transition: var(--#{$tile}--m-selected--after--Transition);
|
|
122
|
-
--#{$tile}--after--ScaleY: var(--#{$tile}--m-selected--after--ScaleY);
|
|
82
|
+
--#{$tile}--before--BorderColor: var(--#{$tile}--m-selected--before--BorderColor);
|
|
83
|
+
--#{$tile}--before--BorderWidth: var(--#{$tile}--m-selected--before--BorderWidth);
|
|
123
84
|
}
|
|
124
85
|
|
|
125
86
|
&.pf-m-disabled {
|
|
126
87
|
--#{$tile}--BackgroundColor: var(--#{$tile}--m-disabled--BackgroundColor);
|
|
127
88
|
--#{$tile}__title--Color: var(--#{$tile}--m-disabled__title--Color);
|
|
89
|
+
--#{$tile}__icon--Color: var(--#{$tile}--m-disabled__icon--Color);
|
|
128
90
|
--#{$tile}__body--Color: var(--#{$tile}--m-disabled__body--Color);
|
|
129
91
|
--#{$tile}--before--BorderWidth: 0;
|
|
130
|
-
--#{$tile}__icon--Color: var(--#{$tile}--m-disabled__icon--Color);
|
|
131
92
|
|
|
132
93
|
pointer-events: none;
|
|
133
94
|
}
|
|
@@ -142,25 +103,24 @@
|
|
|
142
103
|
.#{$tile}__header {
|
|
143
104
|
display: flex;
|
|
144
105
|
align-items: center;
|
|
145
|
-
justify-content: center;
|
|
146
106
|
|
|
147
107
|
&.pf-m-stacked {
|
|
148
108
|
--#{$tile}__icon--MarginRight: 0;
|
|
149
109
|
--#{$tile}__icon--FontSize: var(--#{$tile}__header--m-stacked__icon--FontSize);
|
|
150
110
|
|
|
151
111
|
flex-direction: column;
|
|
152
|
-
|
|
112
|
+
align-items: flex-start;
|
|
153
113
|
|
|
154
114
|
.#{$tile}__icon {
|
|
155
115
|
display: flex;
|
|
156
116
|
align-items: center;
|
|
157
|
-
justify-content: center;
|
|
158
117
|
margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
|
|
159
118
|
}
|
|
160
119
|
}
|
|
161
120
|
}
|
|
162
121
|
|
|
163
122
|
.#{$tile}__title {
|
|
123
|
+
font-weight: var(--#{$tile}__title--FontWeight);
|
|
164
124
|
color: var(--#{$tile}__title--Color);
|
|
165
125
|
}
|
|
166
126
|
|
|
@@ -175,9 +135,3 @@
|
|
|
175
135
|
color: var(--#{$tile}__icon--Color);
|
|
176
136
|
}
|
|
177
137
|
|
|
178
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
179
|
-
@import "themes/dark/tile";
|
|
180
|
-
|
|
181
|
-
@include pf-v5-theme-dark {
|
|
182
|
-
@include pf-v5-theme-dark-tile;
|
|
183
|
-
}
|