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) + pt;
6
}
7
// provide icon size in em, with px fallback
9
@function em($size: 16px) {
10
@return ($size / $font-size) + em;
11
}
12
// Typography
14
// based on:
15
// https://material.io/guidelines/style/typography.html#typography-styles
16
@mixin font($size) {
18
@if $size == display-4 {
19
// font-family: $font-family-large;
20
font-size: 112px;
21
font-weight: 300;
22
// line-height: 1;
23
}
24
@if $size == display-3 {
26
// font-family: $font-family-large;
27
font-size: 56px;
28
font-weight: 400;
29
// line-height: 1;
30
}
31
@if $size == display-2 {
33
// font-family: $font-family-large;
34
font-size: 45px;
35
font-weight: 400;
36
// line-height: 48px;
37
}
38
@if $size == display-1 {
40
// font-family: $font-family-large;
41
font-size: 34px;
42
font-weight: 400;
43
// line-height: 40px;
44
}
45
@if $size == headline {
47
font-size: pt(24px);
48
font-weight: 400;
49
// line-height: 32px;
50
}
51
@if $size == title {
53
font-size: pt(20px);
54
font-weight: 500;
55
// line-height: 1;
56
}
57
@if $size == subheading {
59
font-size: pt($font-size-subheading);
60
font-weight: 400;
61
// line-height: 24px;
62
}
63
@if $size == body-2 {
65
font-size: pt($font-size);
66
font-weight: 500;
67
// line-height: 24px;
68
}
69
@if $size == body-1 {
71
font-size: pt($font-size);
72
font-weight: 400;
73
// line-height: 20px;
74
}
75
@if $size == caption {
77
font-size: pt(12px);
78
font-weight: 400;
79
// line-height: 1;
80
}
81
@if $size == button {
83
font-size: pt($font-size);
84
font-weight: 500;
85
// line-height: 20px;
86
}
87
}
88
@mixin entry($t, $fc: $primary) {
91
//
92
// entry
93
//
94
// $t: entry type
95
// $fc: focus color
96
//
97
@if $t == normal {
99
transition-duration: $duration;
100
background-color: if($fc == $primary, $fill, on(black, fill));
101
border-color: transparent;
102
box-shadow: inset 0 -1px if($fc == $primary, $track, $fc);
103
}
104
@if $t == focus {
106
border-color: transparent;
107
box-shadow: inset 0 -2px $fc;
108
}
109
@if $t == hover {
111
box-shadow: inset 0 -1px if($fc == $primary, $text, $fc);
112
}
113
@if $t == insensitive {
115
color: $text-disabled;
116
border-color: transparent;
117
box-shadow: inset 0 -1px if($fc == $primary, $divider, $fc);
118
}
119
}
120
@mixin button($t, $c: $surface, $tc: $text) {
123
//
124
// button
125
//
126
// $t: button type
127
// $c: base color
128
// $tc: text color
129
//
130
@if $t == normal {
132
color: $tc;
133
background-color: $c;
134
border-color: transparent;
135
box-shadow: $shadow-1;
136
text-shadow: none;
137
icon-shadow: none;
138
transition-duration: $duration;
139
}
140
@if $t == focus {
142
color: $tc;
143
text-shadow: none;
144
icon-shadow: none;
145
box-shadow: $shadow-2;
146
}
147
@if $t == hover {
149
color: $tc;
150
background-color: $c;
151
border-color: transparent;
152
box-shadow: $shadow-2;
153
text-shadow: none;
154
icon-shadow: none;
155
}
156
@if $t == active {
158
color: $tc;
159
background-color: mix($tc, $c, percentage(0.24));
160
border-color: transparent;
161
box-shadow: $shadow-2;
162
text-shadow: none;
163
icon-shadow: none;
164
transition-duration: $duration-ripple;
165
}
166
@if $t == insensitive {
168
color: if($tc == $text, $text-disabled, $tc);
169
background-color: if($c == $surface, $fill, $c);
170
border-color: transparent;
171
box-shadow: $shadow-0;
172
text-shadow: none;
173
icon-shadow: none;
174
}
175
@if $t == flat-normal {
177
color: if($tc != on(black), $text-secondary, on(black, secondary));
178
background-color: transparent;
179
border-color: transparent;
180
box-shadow: $shadow-0;
181
text-shadow: none;
182
icon-shadow: none;
183
transition-duration: $duration;
184
}
185
@if $t == flat-focus {
187
color: if($tc != on(black), $text, on(black));
188
text-shadow: none;
189
icon-shadow: none;
190
box-shadow: $shadow-0;
191
}
192
@if $t == flat-hover {
194
color: if($tc != on(black), $text, on(black));
195
background-color: if($tc != on(black), $overlay-hover, $inverse-overlay-hover);
196
border-color: transparent;
197
box-shadow: $shadow-0;
198
text-shadow: none;
199
icon-shadow: none;
200
}
201
@if $t == flat-active {
203
color: if($tc != on(black), $text, on(black));
204
background-color: if($tc != on(black), $overlay-active, $inverse-overlay-active);
205
border-color: transparent;
206
box-shadow: $shadow-0;
207
text-shadow: none;
208
icon-shadow: none;
209
transition-duration: $duration-ripple;
210
}
211
@if $t == flat-insensitive {
213
color: if($tc != on(black), $text-secondary-disabled, on(black, secondary-disabled));
214
background-color: transparent;
215
border-color: transparent;
216
box-shadow: $shadow-0;
217
text-shadow: none;
218
icon-shadow: none;
219
}
220
}
221