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