1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
@use '../../sass-utilities' as *;
@include pf-root($tile) {
--#{$tile}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
--#{$tile}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$tile}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
--#{$tile}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
--#{$tile}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
--#{$tile}--BorderRadius: var(--pf-t--global--border--radius--medium);
// borders
--#{$tile}--before--BorderColor: var(--pf-t--global--border--color--default);
--#{$tile}--before--BorderWidth: var(--pf-t--global--border--width--box--default);
--#{$tile}--before--BorderRadius: var(--#{$tile}--BorderRadius);
--#{$tile}--after--BackgroundColor: transparent;
// icon
--#{$tile}__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
--#{$tile}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
--#{$tile}__icon--Color: var(--pf-t--global--icon--color--regular);
// title
--#{$tile}__title--Color: var(--pf-t--global--text--color--regular);
--#{$tile}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
// body
--#{$tile}__body--Color: var(--pf-t--global--text--color--regular);
--#{$tile}__body--FontSize: var(--pf-t--global--font--size--body--sm);
// hover
--#{$tile}--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
// selected
--#{$tile}--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
--#{$tile}--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
// disabled
--#{$tile}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--#{$tile}--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
--#{$tile}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
--#{$tile}--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
// Stacked variatiion
--#{$tile}__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
--#{$tile}__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
// large variation
--#{$tile}--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
}
.#{$tile} {
position: relative;
display: inline-grid;
grid-template-rows: min-content;
padding-block-start: var(--#{$tile}--PaddingBlockStart);
padding-block-end: var(--#{$tile}--PaddingBlockEnd);
padding-inline-start: var(--#{$tile}--PaddingInlineStart);
padding-inline-end: var(--#{$tile}--PaddingInlineEnd);
cursor: pointer;
background-color: var(--#{$tile}--BackgroundColor);
border-radius: var(--#{$tile}--BorderRadius);
&::before,
&::after {
position: absolute;
pointer-events: none;
content: "";
}
&::before {
inset: 0;
border: var(--#{$tile}--before--BorderWidth) solid var(--#{$tile}--before--BorderColor);
border-radius: var(--#{$tile}--before--BorderRadius);
}
&:hover {
--#{$tile}--before--BorderColor: var(--#{$tile}--hover--before--BorderColor);
}
&.pf-m-selected {
--#{$tile}--before--BorderColor: var(--#{$tile}--m-selected--before--BorderColor);
--#{$tile}--before--BorderWidth: var(--#{$tile}--m-selected--before--BorderWidth);
}
&.pf-m-disabled {
--#{$tile}--BackgroundColor: var(--#{$tile}--m-disabled--BackgroundColor);
--#{$tile}__title--Color: var(--#{$tile}--m-disabled__title--Color);
--#{$tile}__icon--Color: var(--#{$tile}--m-disabled__icon--Color);
--#{$tile}__body--Color: var(--#{$tile}--m-disabled__body--Color);
--#{$tile}--before--BorderWidth: 0;
pointer-events: none;
}
&.pf-m-display-lg {
.#{$tile}__header.pf-m-stacked {
--#{$tile}__icon--FontSize: var(--#{$tile}--m-display-lg__header--m-stacked__icon--FontSize);
}
}
}
.#{$tile}__header {
display: flex;
align-items: center;
&.pf-m-stacked {
--#{$tile}__icon--MarginInlineEnd: 0;
--#{$tile}__icon--FontSize: var(--#{$tile}__header--m-stacked__icon--FontSize);
flex-direction: column;
align-items: flex-start;
.#{$tile}__icon {
display: flex;
align-items: center;
margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBlockEnd);
}
}
}
.#{$tile}__title {
font-weight: var(--#{$tile}__title--FontWeight);
color: var(--#{$tile}__title--Color);
}
.#{$tile}__body {
font-size: var(--#{$tile}__body--FontSize);
color: var(--#{$tile}__body--Color);
}
.#{$tile}__icon {
margin-inline-end: var(--#{$tile}__icon--MarginInlineEnd);
font-size: var(--#{$tile}__icon--FontSize);
color: var(--#{$tile}__icon--Color);
}
|
