A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _drawing.scss

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