ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
7
// based shadow values:
9
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
10
// 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
// ripple effect animations
22
@keyframes ripple_effect {
24
to { background-size: 1000% 1000%; }
25
}
26
@keyframes header_ripple_effect {
28
from {
29
background-image: radial-gradient(circle farthest-corner at center,
30
$primary_color 0%,
31
transparent 0%);
32
}
33
to {
35
background-image: radial-gradient(circle farthest-corner at center,
36
$primary_color 100%,
37
transparent 0%);
38
}
39
}
40
@mixin entry($t, $fc:$primary_color) {
43
//
44
// Entries drawing function
45
//
46
// $t: entry type
47
// $fc: focus color
48
//
49
// possible $t values:
50
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
51
//
52
@if $t == normal {
54
transition: $longer_transition, $shadow_transition;
55
border-image: none;
56
box-shadow: $z-depth-1;
57
background-color: if($fc != $primary_color, $fc, $base_color);
58
color: if($fc != $primary_color, $inversed_fg_color, $fg_color);
59
}
60
@if $t == focus {
62
border-image: none;
63
box-shadow: $z-depth-2;
64
}
65
@if $t == disabled {
67
box-shadow: $z-depth-1;
68
background-color: $alt_base_color;
69
color: $disabled_fg_color;
70
}
71
@if $t == flat-normal {
73
transition: $longer_transition;
74
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
75
$fc 0%,
76
transparent 0%)
77
0 0 0 / 0 0 0px;
78
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
79
background-color: transparent;
80
color: $fg_color;
81
}
82
@if $t == flat-focus {
84
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
85
$fc 100%,
86
transparent 0%)
87
0 0 2 / 0 0 2px;
88
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
89
}
90
@if $t == flat-disabled {
92
box-shadow: inset 0 -1px $track_color;
93
background-color: transparent;
94
color: $disabled_fg_color;
95
}
96
}
97
@mixin button($t, $c:$lighter_bg_color, $tc:$fg_color) {
100
//
101
// Button drawing function
102
//
103
// $t: button type,
104
// $c: base button color for colored* types
105
// $tc: optional text color for colored* types
106
//
107
// possible $t values:
108
// normal, hover, active, disabled, checked, checked-disabled,
109
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
110
//
111
@if $t == normal {
113
transition: $longer_transition,
114
$shadow_transition,
115
background-size $ripple_duration $deceleration_curve,
116
background-image $ripple_duration * 2 $deceleration_curve;
117
box-shadow: $z-depth-1, inset 0 0 0 9999px transparent;
118
background-color: $c;
119
background-image: radial-gradient(circle farthest-corner at center,
120
transparent 10%,
121
transparent 0%);
122
background-repeat: no-repeat;
123
background-position: center;
124
background-size: 1000% 1000%;
125
color: $secondary_fg_color;
126
}
127
@if $t == hover {
129
box-shadow: $z-depth-2, inset 0 0 0 9999px transparent;
130
color: $fg_color;
131
}
132
@if $t == active {
134
transition: $longer_transition,
135
background-size 0,
136
background-image 0;
137
animation: ripple_effect $longer_duration $deceleration_curve forwards;
138
box-shadow: $z-depth-2, inset 0 0 0 9999px $semi_track_color;
139
background-image: radial-gradient(circle farthest-corner at center,
140
$semi_track_color 10%,
141
transparent 0%);
142
background-size: 0% 0%;
143
color: $fg_color;
144
}
145
@if $t == disabled {
147
box-shadow: none;
148
background-color: $track_color;
149
color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
150
}
151
@if $t == checked {
153
background-color: $primary_color;
154
color: $inversed_fg_color;
155
}
156
@if $t == checked-disabled {
158
background-color: $track_color;
159
color: scale-alpha($primary_color, $disabled_opacity);
160
}
161
@if $t == flat-normal {
163
transition: $longer_transition,
164
background-size $ripple_duration $deceleration_curve,
165
background-image $ripple_duration * 2 $deceleration_curve;
166
box-shadow: inset 0 0 0 9999px transparent;
167
background-color: transparent;
168
background-image: radial-gradient(circle farthest-corner at center,
169
transparent 10%,
170
transparent 0%);
171
background-repeat: no-repeat;
172
background-position: center;
173
background-size: 1000% 1000%;
174
color: gtkalpha(currentColor, $enabled_opacity);
175
}
176
@if $t == flat-hover {
178
box-shadow: inset 0 0 0 9999px $semi_track_color;
179
color: currentColor;
180
}
181
@if $t == flat-active {
183
transition: $longer_transition,
184
background-size 0,
185
background-image 0;
186
animation: ripple_effect $longer_duration $deceleration_curve forwards;
187
box-shadow: inset 0 0 0 9999px $semi_track_color;
188
background-image: radial-gradient(circle farthest-corner at center,
189
$semi_track_color 10%,
190
transparent 0%);
191
background-size: 0% 0%;
192
color: currentColor;
193
}
194
@if $t == flat-disabled {
196
box-shadow: none;
197
background-color: transparent;
198
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
199
}
200
@if $t == flat-checked {
202
background-color: $track_color;
203
color: currentColor;
204
}
205
@if $t == flat-checked-disabled {
207
background-color: $track_color;
208
color: gtkalpha(currentColor, $disabled_opacity);
209
}
210
}
211
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
214
//
215
// overshoot
216
//
217
// $p: position
218
// $t: type
219
// $c: base color
220
//
221
// possible $p values:
222
// top, bottom, right, left
223
//
224
// possible $t values:
225
// normal, backdrop
226
//
227
$_position: center $p;
229
@if ($p == left) or ($p == right) {
231
$_position: $p center;
232
}
233
background-image: -gtk-gradient(radial,
235
$_position, 0,
236
$_position, 0.75,
237
to(scale-alpha($c, $lower_opacity)),
238
to(transparent));
239
background-repeat: no-repeat;
241
background-position: $_position;
242
background-color: transparent; // reset some properties to be sure to not inherit them somehow
244
border: none; //
245
box-shadow: none; //
246
}
247
@mixin undershoot($p) {
250
//
251
// undershoot
252
//
253
// $p: position
254
//
255
// possible $p values:
256
// top, bottom, right, left
257
//
258
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
260
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
261
$_gradient_dir: left;
263
$_dash_bg_size: 12px 1px;
264
$_gradient_repeat: repeat-x;
265
$_bg_pos: left $p;
266
background-color: transparent; // shouldn't be needed, but better to be sure;
268
@if ($p == left) or ($p == right) {
270
$_gradient_dir: top;
271
$_dash_bg_size: 1px 12px;
272
$_gradient_repeat: repeat-y;
273
$_bg_pos: $p top;
274
}
275
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
277
$_undershoot_color_light 50%,
278
$_undershoot_color_dark 50%);
279
padding-#{$p}: 1px;
281
background-size: $_dash_bg_size;
282
background-repeat: $_gradient_repeat;
283
background-origin: content-box;
284
background-position: $_bg_pos;
285
}
286