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