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