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
@mixin shadow($level) {
87
@if $level==1 {
88
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
89
}
90
@if $level==2 {
91
box-shadow: 0 3px 6px rgba(0,0,0,0.16*1.5), 0 3px 6px rgba(0,0,0,0.23*1.5);
92
}
93
@if $level==3 {
94
box-shadow: 0 10px 20px rgba(0,0,0,0.19*1.5), 0 6px 6px rgba(0,0,0,0.23*1.5);
95
}
96
@if $level==4 {
97
box-shadow: 0 14px 28px rgba(0,0,0,0.25*1.5), 0 10px 10px rgba(0,0,0,0.22*1.5);
98
}
99
@if $level==5 {
100
box-shadow: 0 19px 38px rgba(0,0,0,0.30*1.5), 0 15px 12px rgba(0,0,0,0.22*1.5);
101
}
102
}
103
// entries
105
@mixin entry($t, $fc:$selected_bg_color) {
107
//
108
// Entries drawing function
109
//
110
// $t: entry type
111
// $fc: focus color
112
//
113
// possible $t values:
114
// normal, focus, insensitive
115
//
116
@if $t==normal {
117
background-color: rgba(0, 0, 0, 0.01);
118
border-color: transparent;
119
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
120
}
122
@if $t==focus {
123
border-color: transparent;
124
box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color);
125
}
126
@if $t==hover { }
127
@if $t==insensitive {
128
color: $insensitive_fg_color;
129
border-color: transparent;
130
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_track_color);
131
}
132
}
133
// buttons
135
@mixin button($t, $c:$base_color, $tc:$fg_color) {
137
//
138
// Button drawing function
139
//
140
// $t: button type,
141
// $c: base button color for colored* types
142
// $tc: optional text color for colored* types
143
//
144
// possible $t values:
145
// normal, hover, active, insensitive, undecorated
146
//
147
@if $t==normal {
148
//
149
// normal button
150
//
151
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
152
background-color: $c;
153
border-color: transparent;
154
@include shadow(1);
155
text-shadow: none;
156
icon-shadow: none;
157
}
158
@if $t==focus {
159
//
160
// focused button
161
//
162
color: $tc;
163
text-shadow: none;
164
icon-shadow: none;
165
box-shadow: 0 0 transparent;
166
// box-shadow: inset 0px 0px 0px 2px $track_color;
167
}
168
@else if $t==hover {
170
//
171
// hovered button
172
//
173
color: if($tc!=$fg_color, $tc, $fg_color);
174
background-color: $c;
175
border-color: transparent;
176
@include shadow(2);
177
text-shadow: none;
178
icon-shadow: none;
179
}
181
@else if $t==active {
182
//
183
// pushed button
184
//
185
color: if($tc!=$fg_color, $tc, $fg_color);
186
background-color: mix($tc, $c, percentage($lower_opacity));
187
border-color: transparent;
188
@include shadow(2);
189
text-shadow: none;
190
icon-shadow: none;
191
}
192
@else if $t==insensitive {
193
//
194
// insensitive button
195
//
196
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
197
background-color: if($c!=$base_color, $c, $insensitive_track_color);
198
border-color: transparent;
199
box-shadow: 0 0 transparent;
200
text-shadow: none;
201
icon-shadow: none;
202
}
203
@if $t==flat-normal {
204
//
205
// normal flat button
206
//
207
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
208
background-color: transparent;
209
border-color: transparent;
210
box-shadow: 0 0 transparent;
211
text-shadow: none;
212
icon-shadow: none;
213
}
214
@if $t==flat-focus {
215
//
216
// focused flat button
217
//
218
color: $tc;
219
text-shadow: none;
220
icon-shadow: none;
221
box-shadow: 0 0 transparent;
222
// box-shadow: inset 0px 0px 0px 2px $track_color;
223
}
224
@else if $t==flat-hover {
226
//
227
// hovered flat button
228
//
229
color: if($tc!=$fg_color, $tc, $fg_color);
230
background-color: if($c!=$base_color, $c, $semi_track_color);
231
border-color: transparent;
232
box-shadow: 0 0 transparent;
233
text-shadow: none;
234
icon-shadow: none;
235
}
237
@else if $t==flat-active {
238
//
239
// pushed flat button
240
//
241
color: if($tc!=$fg_color, $tc, $fg_color);
242
background-color: if($c!=$base_color, $c, $track_color);
243
border-color: transparent;
244
box-shadow: 0 0 transparent;
245
text-shadow: none;
246
icon-shadow: none;
247
}
248
@else if $t==flat-insensitive {
249
//
250
// insensitive flat button
251
//
252
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
253
background-color: transparent;
254
border-color: transparent;
255
box-shadow: 0 0 transparent;
256
text-shadow: none;
257
icon-shadow: none;
258
}
259
@else if $t==undecorated {
260
//
261
// reset
262
//
263
color: inherit;
264
background-color: transparent;
265
border-color: transparent;
266
box-shadow: 0 0 transparent;
267
text-shadow: none;
268
icon-shadow: none;
269
}
270
}
271