ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
$root-font-size: if($laptop == 'true', 13px, 14px);
6
$subheading-size: if($laptop == 'true', 15px, 16px);
7
// provide font size in pt, with px fallback
9
@mixin pt($size: $root-font-size) {
10
font-size: ($size * 0.75 / 1px) * 1pt;
11
}
12
// provide icon size in em, with px fallback
14
@mixin em($size: 16px) {
15
icon-size: ($size / $root-font-size) * 1em;
16
}
17
// Typography
19
// Reference URL:
21
// https://material.google.com/style/typography.html#typography-styles
22
@mixin font($size) {
24
@if $size==display-4 {
25
// font-family: $large-font-family;
26
font-size: 112px;
27
font-weight: 300;
28
// line-height: 1;
29
}
30
@if $size==display-3 {
31
// font-family: $large-font-family;
32
font-size: 56px;
33
font-weight: 400;
34
// line-height: 1;
35
}
36
@if $size==display-2 {
37
// font-family: $large-font-family;
38
font-size: 45px;
39
font-weight: 400;
40
// line-height: 48px;
41
}
42
@if $size==display-1 {
43
// font-family: $large-font-family;
44
font-size: 34px;
45
font-weight: 400;
46
// line-height: 40px;
47
}
48
@if $size==headline {
49
@include pt(24px);
50
font-weight: 400;
51
// line-height: 32px;
52
}
53
@if $size==title {
54
@include pt(20px);
55
font-weight: 500;
56
// line-height: 1;
57
}
58
@if $size==subheading {
59
@include pt($subheading-size);
60
font-weight: 400;
61
// line-height: 24px;
62
}
63
@if $size==body-2 {
64
@include pt($root-font-size);
65
font-weight: 500;
66
// line-height: 24px;
67
}
68
@if $size==body-1 {
69
@include pt($root-font-size);
70
font-weight: 400;
71
// line-height: 20px;
72
}
73
@if $size==caption {
74
@include pt(12px);
75
font-weight: 400;
76
// line-height: 1;
77
}
78
@if $size==button {
79
@include pt($root-font-size);
80
font-weight: 500;
81
// line-height: 20px;
82
}
83
}
84
// shadows
86
// Reference URL:
88
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
89
$z-depth-0: 0 0 transparent;
91
$z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
92
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16 * 1.5), 0 3px 3px rgba(0, 0, 0, 0.23 * 1.5);
93
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19 * 1.5), 0 6px 3px rgba(0, 0, 0, 0.23 * 1.5);
94
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25 * 2), 0 10px 5px rgba(0, 0, 0, 0.22 * 2);
95
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30 * 2), 0 15px 6px rgba(0, 0, 0, 0.22 * 2);
96
// entries
98
@mixin entry($t, $fc:$selected_bg_color) {
100
//
101
// Entries drawing function
102
//
103
// $t: entry type
104
// $fc: focus color
105
//
106
// possible $t values:
107
// normal, focus, insensitive
108
//
109
@if $t==normal {
110
background-color: if($fc!=$selected_bg_color, rgba($bg_color, 0.01), rgba($base_color, 0.01));
111
border-color: transparent;
112
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
113
}
115
@if $t==focus {
116
border-color: transparent;
117
box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color);
118
}
119
@if $t==hover { }
120
@if $t==insensitive {
121
color: $insensitive_fg_color;
122
border-color: transparent;
123
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_track_color);
124
}
125
}
126
// buttons
128
@mixin button($t, $c:$base_color, $tc:$fg_color) {
130
//
131
// Button drawing function
132
//
133
// $t: button type,
134
// $c: base button color for colored* types
135
// $tc: optional text color for colored* types
136
//
137
// possible $t values:
138
// normal, focus, hover, active, insensitive,
139
// flat-normal, flat-focus, flat-hover, flat-active, flat-insensitive
140
//
141
@if $t==normal {
142
//
143
// normal button
144
//
145
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
146
background-color: $c;
147
border-color: transparent;
148
box-shadow: $z-depth-1;
149
text-shadow: none;
150
icon-shadow: none;
151
}
152
@if $t==focus {
153
//
154
// focused button
155
//
156
color: $tc;
157
text-shadow: none;
158
icon-shadow: none;
159
box-shadow: 0 0 transparent;
160
// box-shadow: inset 0px 0px 0px 2px $track_color;
161
}
162
@else if $t==hover {
164
//
165
// hovered button
166
//
167
color: if($tc!=$fg_color, $tc, $fg_color);
168
background-color: $c;
169
border-color: transparent;
170
box-shadow: $z-depth-2;
171
text-shadow: none;
172
icon-shadow: none;
173
}
175
@else if $t==active {
176
//
177
// pushed button
178
//
179
color: if($tc!=$fg_color, $tc, $fg_color);
180
background-color: mix($tc, $c, percentage($lower_opacity));
181
border-color: transparent;
182
box-shadow: $z-depth-2;
183
text-shadow: none;
184
icon-shadow: none;
185
}
186
@else if $t==insensitive {
187
//
188
// insensitive button
189
//
190
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
191
background-color: if($c!=$base_color, $c, $insensitive_track_color);
192
border-color: transparent;
193
box-shadow: 0 0 transparent;
194
text-shadow: none;
195
icon-shadow: none;
196
}
197
@if $t==flat-normal {
198
//
199
// normal flat button
200
//
201
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
202
background-color: transparent;
203
border-color: transparent;
204
box-shadow: 0 0 transparent;
205
text-shadow: none;
206
icon-shadow: none;
207
}
208
@if $t==flat-focus {
209
//
210
// focused flat button
211
//
212
color: $tc;
213
text-shadow: none;
214
icon-shadow: none;
215
box-shadow: 0 0 transparent;
216
// box-shadow: inset 0px 0px 0px 2px $track_color;
217
}
218
@else if $t==flat-hover {
220
//
221
// hovered flat button
222
//
223
color: if($tc!=$fg_color, $tc, $fg_color);
224
background-color: if($c!=$base_color, $c, $semi_track_color);
225
border-color: transparent;
226
box-shadow: 0 0 transparent;
227
text-shadow: none;
228
icon-shadow: none;
229
}
231
@else if $t==flat-active {
232
//
233
// pushed flat button
234
//
235
color: if($tc!=$fg_color, $tc, $fg_color);
236
background-color: if($c!=$base_color, $c, $track_color);
237
border-color: transparent;
238
box-shadow: 0 0 transparent;
239
text-shadow: none;
240
icon-shadow: none;
241
}
242
@else if $t==flat-insensitive {
243
//
244
// insensitive flat button
245
//
246
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
247
background-color: transparent;
248
border-color: transparent;
249
box-shadow: 0 0 transparent;
250
text-shadow: none;
251
icon-shadow: none;
252
}
253
}
254