ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
6
// Reference URL:
8
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
9
// FIXME: doesn't work 1.5px
11
// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
12
$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
13
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
14
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
15
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
16
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
17
@keyframes ripple_effect {
19
from {
20
background-image: -gtk-gradient(radial,
21
center center, 0,
22
center center, 0.001,
23
to(gtkalpha(currentColor, $lower_opacity / 2)),
24
to(transparent)),
25
linear-gradient(to bottom, gtkalpha(currentColor, 0));
26
}
27
to {
28
background-image: -gtk-gradient(radial,
29
center center, 0,
30
center center, 0.4,
31
to(gtkalpha(currentColor, $lower_opacity / 2)),
32
to(transparent)),
33
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
34
}
35
}
36
@keyframes flat_ripple_effect {
38
from {
39
background-image: -gtk-gradient(radial,
40
center center, 0,
41
center center, 0.001,
42
to(gtkalpha(currentColor, $lower_opacity / 2)),
43
to(transparent)),
44
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
45
}
46
to {
47
background-image: -gtk-gradient(radial,
48
center center, 0,
49
center center, 0.4,
50
to(gtkalpha(currentColor, $lower_opacity / 2)),
51
to(transparent)),
52
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
53
}
54
}
55
@keyframes list_ripple_effect {
57
from {
58
background-image: -gtk-gradient(radial,
59
center center, 0,
60
center center, 0.001,
61
to(gtkalpha(currentColor, $lower_opacity / 2)),
62
to(transparent)),
63
linear-gradient(to bottom, gtkalpha(currentColor, 0));
64
}
65
to {
66
background-image: -gtk-gradient(radial,
67
center center, 0,
68
center center, 0.4,
69
to(gtkalpha(currentColor, $lower_opacity / 2)),
70
to(transparent)),
71
linear-gradient(to bottom, gtkalpha(currentColor, 0));
72
}
73
}
74
// entries
76
@mixin entry($t, $fc:$selected_bg_color) {
78
//
79
// Entries drawing function
80
//
81
// $t: entry type
82
// $fc: focus color
83
//
84
// possible $t values:
85
// normal, focus, insensitive, flat-normal, flat-focus, flat-insensitive;
86
//
87
@if $t==normal {
89
transition: $longer_transition, $shadow_transition;
90
box-shadow: $z-depth-1;
91
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
92
color: if($fc!=$selected_bg_color, $selected_fg_color, $fg_color);
93
}
94
@if $t==focus {
96
box-shadow: $z-depth-2;
97
}
98
@if $t==insensitive {
100
color: $insensitive_fg_color;
101
background-color: $secondary_base_color;
102
}
103
@if $t==flat-normal {
105
transition: $longer_transition;
106
border-image: -gtk-gradient(radial,
107
center bottom, 0,
108
center bottom, 0.001,
109
to($fc),
110
to(transparent))
111
0 0 0 / 0 0 0px;
112
border-radius: 0;
113
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
114
background-color: transparent;
115
color: $fg_color;
116
}
117
@if $t==flat-focus {
119
border-image: -gtk-gradient(radial,
120
center bottom, 0,
121
center bottom, 0.5,
122
to($fc),
123
to(transparent))
124
0 0 2 / 0 0 2px;
125
box-shadow: inset 0 -2px $fc;
126
transition: $longer_transition, box-shadow 0 $longer_duration;
127
}
128
@if $t==flat-insensitive {
130
box-shadow: inset 0 -1px $track_color;
131
background-color: transparent;
132
color: $insensitive_fg_color;
133
}
134
}
135
// buttons
137
@mixin button($t, $c:$light_color, $tc:$fg_color) {
139
//
140
// Button drawing function
141
//
142
// $t: button type,
143
// $c: base button color for colored* types
144
// $tc: optional text color for colored* types
145
//
146
// possible $t values:
147
// normal, hover, active, insensitive, checked, checked-insensitive,
148
// flat-normal, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive;
149
//
150
@if $t==normal {
152
transition: $longer_transition, $shadow_transition;
153
box-shadow: $z-depth-1;
154
background-color: $c;
155
background-image: -gtk-gradient(radial,
156
center center, 0,
157
center center, 0.5,
158
to(gtkalpha(currentColor, 0)),
159
to(transparent)),
160
linear-gradient(to bottom, gtkalpha(currentColor, 0));
161
color: $secondary_fg_color;
162
}
163
@else if $t==hover {
165
box-shadow: $z-depth-2;
166
background-image: -gtk-gradient(radial,
167
center center, 0,
168
center center, 0.5,
169
to(gtkalpha(currentColor, 0)),
170
to(transparent)),
171
linear-gradient(to bottom, gtkalpha(currentColor, 0));
172
color: $fg_color;
173
}
174
@else if $t==active {
176
transition: $longer_transition, $shadow_transition, background-image 0;
177
animation: ripple_effect $longer_duration $deceleration_curve forwards;
178
box-shadow: $z-depth-2;
179
color: $fg_color;
180
}
181
@else if $t==insensitive {
183
box-shadow: none;
184
background-color: $track_color;
185
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
186
> .label { color: inherit; }
188
}
189
@else if $t==checked {
191
background-color: $selected_bg_color;
192
color: $selected_fg_color;
193
}
194
@else if $t==checked-insensitive {
196
background-color: $track_color;
197
color: scale-alpha($selected_bg_color, $disabled_opacity);
198
> .label { color: inherit; }
199
}
200
@else if $t==flat-normal {
202
transition: $longer_transition;
203
box-shadow: none;
204
background-color: transparent;
205
background-image: -gtk-gradient(radial,
206
center center, 0,
207
center center, 0.5,
208
to(gtkalpha(currentColor, 0)),
209
to(transparent)),
210
linear-gradient(to bottom, gtkalpha(currentColor, 0));
211
color: gtkalpha(currentColor, $enabled_opacity);
212
}
213
@else if $t==flat-hover {
215
box-shadow: none;
216
background-image: -gtk-gradient(radial,
217
center center, 0,
218
center center, 0.5,
219
to(gtkalpha(currentColor, 0)),
220
to(transparent)),
221
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
222
color: currentColor;
223
}
224
@else if $t==flat-active {
226
transition: $longer_transition, background-image 0;
227
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
228
box-shadow: none;
229
color: currentColor;
230
}
231
@else if $t==flat-insensitive {
233
box-shadow: none;
234
background-color: transparent;
235
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
236
> .label { color: inherit; }
238
}
239
@else if $t==flat-checked {
241
background-color: $track_color;
242
color: currentColor;
243
}
244
@else if $t==flat-checked-insensitive {
246
background-color: $track_color;
247
color: gtkalpha(currentColor, $disabled_opacity);
248
> .label { color: inherit; }
250
}
251
}
252
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
254
//
255
// overshoot
256
//
257
// $p: position
258
// $t: type
259
// $c: base color
260
//
261
// possible $p values:
262
// top, bottom, right, left
263
//
264
// possible $t values:
265
// normal, backdrop
266
//
267
$_position: center $p;
269
@if ($p == left) or ($p == right) {
271
$_position: $p center;
272
}
273
background-image: -gtk-gradient(radial,
275
$_position, 0,
276
$_position, 0.75,
277
to(scale-alpha($c, $lower_opacity)),
278
to(transparent));
279
background-repeat: no-repeat;
281
background-position: $_position;
282
background-color: transparent; // reset some properties to be sure to not inherit them somehow
284
border: none; //
285
box-shadow: none; //
286
}
287
@mixin undershoot($p) {
289
//
290
// undershoot
291
//
292
// $p: position
293
//
294
// possible $p values:
295
// top, bottom, right, left
296
//
297
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
299
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
300
$_gradient_dir: left;
302
$_dash_bg_size: 12px 1px;
303
$_gradient_repeat: repeat-x;
304
$_bg_pos: left $p;
305
background-color: transparent; // shouldn't be needed, but better to be sure;
307
@if ($p == left) or ($p == right) {
309
$_gradient_dir: top;
310
$_dash_bg_size: 1px 12px;
311
$_gradient_repeat: repeat-y;
312
$_bg_pos: $p top;
313
}
314
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
316
$_undershoot_color_light 50%,
317
$_undershoot_color_dark 50%);
318
padding-#{$p}: 1px;
320
background-size: $_dash_bg_size;
321
background-repeat: $_gradient_repeat;
322
background-origin: content-box;
323
background-position: $_bg_pos;
324
}
325