@patternfly/patternfly 6.0.0-alpha.54 → 6.0.0-alpha.55

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.
Files changed (10) hide show
  1. package/components/Tile/tile.css +40 -81
  2. package/components/Tile/tile.scss +38 -84
  3. package/docs/components/Tile/examples/Tile.md +264 -144
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +41 -86
  6. package/patternfly-theme-dark-unversioned.css +41 -86
  7. package/patternfly.css +41 -86
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/Tile/themes/dark/tile.scss +0 -10
package/components/Tile/tile.css CHANGED
@@ -1,45 +1,35 @@
1
- .pf-v5-c-tile {
2
- --pf-v5-c-tile--PaddingTop: var(--pf-v5-global--spacer--lg);
3
- --pf-v5-c-tile--PaddingRight: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-tile--PaddingBottom: var(--pf-v5-global--spacer--lg);
5
- --pf-v5-c-tile--PaddingLeft: var(--pf-v5-global--spacer--lg);
6
- --pf-v5-c-tile--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
- --pf-v5-c-tile--Transition: none;
8
- --pf-v5-c-tile--TranslateY: 0;
9
- --pf-v5-c-tile--before--BorderColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-tile--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-tile--after--Height: var(--pf-v5-global--BorderWidth--lg);
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-tile--after--Transition: none;
14
- --pf-v5-c-tile--after--ScaleY: 1;
15
- --pf-v5-c-tile--after--TranslateY: 0;
16
- --pf-v5-c-tile__icon--MarginRight: var(--pf-v5-global--spacer--sm);
17
- --pf-v5-c-tile__icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
18
- --pf-v5-c-tile__icon--Color: var(--pf-v5-global--Color--100);
19
- --pf-v5-c-tile__title--Color: var(--pf-v5-global--Color--100);
20
- --pf-v5-c-tile__body--Color: var(--pf-v5-global--Color--100);
21
- --pf-v5-c-tile__body--FontSize: var(--pf-v5-global--FontSize--xs);
22
- --pf-v5-c-tile--hover--after--BackgroundColor: var(--pf-v5-global--active-color--400);
23
- --pf-v5-c-tile--hover__icon--Color: var(--pf-v5-global--primary-color--100);
24
- --pf-v5-c-tile--hover__title--Color: var(--pf-v5-global--primary-color--100);
25
- --pf-v5-c-tile--focus--after--BackgroundColor: var(--pf-v5-global--active-color--400);
26
- --pf-v5-c-tile--focus__icon--Color: var(--pf-v5-global--primary-color--100);
27
- --pf-v5-c-tile--focus__title--Color: var(--pf-v5-global--primary-color--100);
28
- --pf-v5-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-v5-c-tile--m-selected--after--ScaleY) * var(--pf-v5-c-tile--m-selected--after--Height));
29
- --pf-v5-c-tile--m-selected--Transition: var(--pf-v5-global--Transition);
30
- --pf-v5-c-tile--m-selected--after--Height: var(--pf-v5-global--BorderWidth--lg);
31
- --pf-v5-c-tile--m-selected--after--BackgroundColor: var(--pf-v5-global--active-color--100);
32
- --pf-v5-c-tile--m-selected--after--Transition: var(--pf-v5-global--Transition);
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
- transition: var(--pf-v5-c-tile--Transition);
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-tile__title--Color: var(--pf-v5-c-tile--hover__title--Color);
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:focus {
80
- --pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--focus__title--Color);
81
- --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--focus__icon--Color);
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
- justify-content: initial;
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
  }
package/components/Tile/tile.scss CHANGED
@@ -1,68 +1,55 @@
1
1
  // @debug $tile; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$tile} {
4
- --#{$tile}--PaddingTop: var(--#{$pf-global}--spacer--lg);
5
- --#{$tile}--PaddingRight: var(--#{$pf-global}--spacer--lg);
6
- --#{$tile}--PaddingBottom: var(--#{$pf-global}--spacer--lg);
7
- --#{$tile}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
8
- --#{$tile}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
- --#{$tile}--Transition: none;
10
- --#{$tile}--TranslateY: 0;
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(--#{$pf-global}--BorderColor--100);
14
- --#{$tile}--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
15
- --#{$tile}--after--Height: var(--#{$pf-global}--BorderWidth--lg);
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(--#{$pf-global}--spacer--sm);
23
- --#{$tile}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--md);
24
- --#{$tile}__icon--Color: var(--#{$pf-global}--Color--100);
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(--#{$pf-global}--Color--100);
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(--#{$pf-global}--Color--100);
31
- --#{$tile}__body--FontSize: var(--#{$pf-global}--FontSize--xs);
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--after--BackgroundColor: var(--#{$pf-global}--active-color--400);
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--TranslateY: calc(-1 * var(--#{$tile}--m-selected--after--ScaleY) * var(--#{$tile}--m-selected--after--Height));
45
- --#{$tile}--m-selected--Transition: var(--#{$pf-global}--Transition);
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(--#{$pf-global}--disabled-color--300);
55
- --#{$tile}--m-disabled__icon--Color: var(--#{$pf-global}--disabled-color--100);
56
- --#{$tile}--m-disabled__title--Color: var(--#{$pf-global}--disabled-color--100);
57
- --#{$tile}--m-disabled__body--Color: var(--#{$pf-global}--disabled-color--100);
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(--#{$pf-global}--spacer--xs);
61
- --#{$tile}__header--m-stacked__icon--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
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(--#{$pf-global}--icon--FontSize--xl);
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
- transition: var(--#{$tile}--Transition);
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}__title--Color: var(--#{$tile}--hover__title--Color);
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}__title--Color: var(--#{$tile}--m-selected__title--Color);
116
- --#{$tile}__icon--Color: var(--#{$tile}--m-selected__icon--Color);
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
- justify-content: initial;
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
- }