ASCII text
1
// generic drawing of more complex things
2
// provide font size in pt, with px fallback
4
@function pt($size: $font-size) {
5
@return ($size * 0.75 / 1px) * 1pt;
6
}
7
// provide icon size in em, with px fallback
9
@function em($size: 16px) {
10
@return ($size / $font-size) * 1em;
11
}
12
// Typography
14
// based on:
15
// https://material.io/design/typography/the-type-system.html
16
@mixin type($style) {
18
@if $style == headline1 {
19
// font-family: $font-family-large;
20
font-size: 96px;
21
font-weight: 300;
22
// line-height: 1;
23
}
24
@if $style == headline2 {
26
// font-family: $font-family-large;
27
font-size: 60px;
28
font-weight: 300;
29
// line-height: 1;
30
}
31
@if $style == headline3 {
33
// font-family: $font-family-large;
34
font-size: 48px;
35
font-weight: 400;
36
// line-height: 50px;
37
}
38
@if $style == headline4 {
40
// font-family: $font-family-large;
41
font-size: 34px;
42
font-weight: 400;
43
// line-height: 40px;
44
}
45
@if $style == headline5 {
47
font-size: pt(24px);
48
font-weight: 400;
49
// line-height: 32px;
50
}
51
@if $style == headline6 {
53
font-size: pt(20px);
54
font-weight: 500;
55
// line-height: 32px;
56
}
57
@if $style == subtitle1 {
59
font-size: pt($font-size-subheading);
60
font-weight: 400;
61
// line-height: 28px;
62
}
63
@if $style == subtitle2 {
65
font-size: pt($font-size);
66
font-weight: 500;
67
// line-height: 22px;
68
}
69
@if $style == body1 {
71
font-size: pt($font-size-subheading);
72
font-weight: 400;
73
// line-height: 24px;
74
}
75
@if $style == body2 {
77
font-size: pt($font-size);
78
font-weight: 400;
79
// line-height: 20px;
80
}
81
@if $style == caption {
83
font-size: pt(12px);
84
font-weight: 400;
85
// line-height: 20px;
86
}
87
@if $style == button {
89
font-size: pt($font-size);
90
font-weight: 500;
91
// line-height: 36px;
92
}
93
@if $style == overline {
95
font-size: pt(12px);
96
font-weight: 400;
97
// line-height: 32px;
98
}
99
}
100
@mixin entry($t, $fc: $primary) {
103
//
104
// entry
105
//
106
// $t: entry type
107
// $fc: focus color
108
//
109
@if $t == normal {
111
transition-duration: $duration;
112
background-color: if($fc == $primary, entry-fill($on-surface), entry-fill($on-dark));
113
border-color: transparent;
114
box-shadow: inset 0 -1px if($fc == $primary, stroke($on-surface), $fc);
115
}
116
@if $t == focus {
118
border-color: transparent;
119
box-shadow: inset 0 -2px $fc;
120
}
121
@if $t == hover {
123
box-shadow: inset 0 -1px if($fc == $primary, $on-surface, $fc);
124
}
125
@if $t == insensitive {
127
color: disabled($on-surface);
128
border-color: transparent;
129
box-shadow: inset 0 -1px if($fc == $primary, disabled-stroke($on-surface), $fc);
130
}
131
}
132
@mixin button($t, $c: $surface-z8, $tc: $on-surface) {
135
//
136
// button
137
//
138
// $t: button type
139
// $c: base color
140
// $tc: text color
141
//
142
@if $t == normal {
144
color: $tc;
145
background-color: $c;
146
border-color: transparent;
147
box-shadow: $shadow-z2;
148
text-shadow: none;
149
icon-shadow: none;
150
transition-duration: $duration;
151
}
152
@if $t == focus {
154
color: $tc;
155
text-shadow: none;
156
icon-shadow: none;
157
box-shadow: $shadow-z4;
158
}
159
@if $t == hover {
161
color: $tc;
162
background-color: $c;
163
border-color: transparent;
164
box-shadow: $shadow-z4;
165
text-shadow: none;
166
icon-shadow: none;
167
}
168
@if $t == active {
170
color: $tc;
171
background-color: mix($tc, $c, percentage(0.24));
172
border-color: transparent;
173
box-shadow: $shadow-z8;
174
text-shadow: none;
175
icon-shadow: none;
176
transition-duration: $duration-ripple;
177
}
178
@if $t == insensitive {
180
color: if($tc == $on-surface, disabled($on-surface), $tc);
181
background-color: if($c == $surface-z8, fill($on-surface), $c);
182
border-color: transparent;
183
box-shadow: $shadow-z0;
184
text-shadow: none;
185
icon-shadow: none;
186
}
187
@if $t == flat-normal {
189
color: if($tc != $on-dark, $primary, hint($on-dark));
190
background-color: transparent;
191
border-color: transparent;
192
box-shadow: $shadow-z0;
193
text-shadow: none;
194
icon-shadow: none;
195
transition-duration: $duration;
196
}
197
@if $t == flat-focus {
199
color: if($tc != $on-dark, $primary, hint($on-dark));
200
background-color: overlay("focus", if($tc != $on-dark, $primary, $on-dark));
201
text-shadow: none;
202
icon-shadow: none;
203
box-shadow: $shadow-z0;
204
}
205
@if $t == flat-hover {
207
color: if($tc != $on-dark, $primary, hint($on-dark));
208
background-color: overlay("hover", if($tc != $on-dark, $primary, $on-dark));
209
border-color: transparent;
210
box-shadow: $shadow-z0;
211
text-shadow: none;
212
icon-shadow: none;
213
}
214
@if $t == flat-active {
216
color: if($tc != $on-dark, $primary, hint($on-dark));
217
background-color: overlay("pressed", if($tc != $on-dark, $primary, $on-dark));
218
border-color: transparent;
219
box-shadow: $shadow-z0;
220
text-shadow: none;
221
icon-shadow: none;
222
transition-duration: $duration-ripple;
223
}
224
@if $t == flat-insensitive {
226
color: if($tc != $on-dark, disabled-hint($on-surface), disabled-hint($on-dark));
227
background-color: transparent;
228
border-color: transparent;
229
box-shadow: $shadow-z0;
230
text-shadow: none;
231
icon-shadow: none;
232
}
233
}
234