ASCII text
1
// generic drawing of more complex things
2
// ripple effect animations
5
@keyframes ripple_effect {
7
to { background-size: 1000% 1000%; }
8
}
9
@keyframes header_ripple_effect {
11
from {
12
background-image: radial-gradient(circle farthest-corner at center,
13
$primary_color 0%,
14
transparent 0%);
15
}
16
to {
18
background-image: radial-gradient(circle farthest-corner at center,
19
$primary_color 100%,
20
transparent 0%);
21
}
22
}
23
@mixin entry($t, $fc: $primary_color) {
26
//
27
// entry
28
//
29
// $t: entry type
30
// $fc: focus color
31
//
32
@if $t == normal {
34
transition: $longer_transition, $shadow_transition;
35
border-image: none;
36
box-shadow: $shadow_1;
37
background-color: if($fc == $primary_color, $base_color, $fc);
38
color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
39
}
40
@if $t == focus {
42
border-image: none;
43
box-shadow: $shadow_2;
44
}
45
@if $t == disabled {
47
box-shadow: $shadow_1;
48
background-color: $alt_base_color;
49
color: $disabled_fg_color;
50
}
51
@if $t == flat-normal {
53
transition: $longer_transition;
54
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
55
$fc 0%,
56
transparent 0%)
57
0 0 0 / 0 0 0px;
58
box-shadow: inset 0 -1px if($fc == $primary_color, $fill_color, $fc);
59
background-color: transparent;
60
color: $fg_color;
61
}
62
@if $t == flat-focus {
64
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
65
$fc 100%,
66
transparent 0%)
67
0 0 2 / 0 0 2px;
68
box-shadow: inset 0 -1px if($fc == $primary_color, $fill_color, $fc);
69
}
70
@if $t == flat-disabled {
72
box-shadow: inset 0 -1px $fill_color;
73
background-color: transparent;
74
color: $disabled_fg_color;
75
}
76
}
77
@mixin button($t, $c: $lighter_bg_color) {
80
//
81
// button
82
//
83
// $t: button type
84
// $c: base color
85
//
86
@if $t == normal {
88
transition: $longer_transition,
89
$shadow_transition,
90
background-size $ripple_duration $deceleration_curve,
91
background-image $ripple_duration * 2 $deceleration_curve;
92
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
93
background-color: $c;
94
background-image: radial-gradient(circle farthest-corner at center,
95
transparent 10%,
96
transparent 0%);
97
background-repeat: no-repeat;
98
background-position: center;
99
background-size: 1000% 1000%;
100
color: $secondary_fg_color;
101
}
102
@if $t == hover {
104
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
105
color: $fg_color;
106
}
107
@if $t == active {
109
transition: $longer_transition,
110
background-size 0,
111
background-image 0;
112
animation: ripple_effect $longer_duration $deceleration_curve forwards;
113
box-shadow: $shadow_2, inset 0 0 0 9999px $semi_fill_color;
114
background-image: radial-gradient(circle farthest-corner at center,
115
$semi_fill_color 10%,
116
transparent 0%);
117
background-size: 0% 0%;
118
color: $fg_color;
119
}
120
@if $t == disabled {
122
box-shadow: none;
123
background-color: $fill_color;
124
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
125
}
126
@if $t == checked {
128
background-color: $primary_color;
129
color: $inverse_fg_color;
130
}
131
@if $t == checked-disabled {
133
background-color: $fill_color;
134
color: scale-alpha($primary_color, $disabled_opacity);
135
}
136
@if $t == flat-normal {
138
transition: $longer_transition,
139
background-size $ripple_duration $deceleration_curve,
140
background-image $ripple_duration * 2 $deceleration_curve;
141
box-shadow: inset 0 0 0 9999px transparent;
142
background-color: transparent;
143
background-image: radial-gradient(circle farthest-corner at center,
144
transparent 10%,
145
transparent 0%);
146
background-repeat: no-repeat;
147
background-position: center;
148
background-size: 1000% 1000%;
149
color: gtkalpha(currentColor, $secondary_opacity);
150
}
151
@if $t == flat-hover {
153
box-shadow: inset 0 0 0 9999px $semi_fill_color;
154
color: currentColor;
155
}
156
@if $t == flat-active {
158
transition: $longer_transition,
159
background-size 0,
160
background-image 0;
161
animation: ripple_effect $longer_duration $deceleration_curve forwards;
162
box-shadow: inset 0 0 0 9999px $semi_fill_color;
163
background-image: radial-gradient(circle farthest-corner at center,
164
$semi_fill_color 10%,
165
transparent 0%);
166
background-size: 0% 0%;
167
color: currentColor;
168
}
169
@if $t == flat-disabled {
171
box-shadow: none;
172
background-color: transparent;
173
color: if($c == $lighter_bg_color,
174
gtkalpha(currentColor, $secondary_opacity * $disabled_opacity),
175
gtkalpha(currentColor, $disabled_opacity));
176
}
177
@if $t == flat-checked {
179
background-color: $fill_color;
180
color: currentColor;
181
}
182
@if $t == flat-checked-disabled {
184
background-color: $fill_color;
185
color: gtkalpha(currentColor, $disabled_opacity);
186
}
187
}
188
@mixin overshoot($p) {
191
//
192
// overshoot
193
//
194
// $p: position
195
//
196
// possible $p values:
197
// top, bottom, right, left
198
//
199
$_position: center $p;
201
@if ($p == left) or ($p == right) {
203
$_position: $p center;
204
}
205
background-image: -gtk-gradient(radial,
207
$_position, 0,
208
$_position, 0.75,
209
to(scale-alpha($alt_primary_color, $lower_opacity)),
210
to(transparent));
211
background-repeat: no-repeat;
213
background-position: $_position;
214
background-color: transparent; // reset some properties to be sure to not inherit them somehow
216
border: none; //
217
box-shadow: none; //
218
}
219
@mixin undershoot($p) {
222
//
223
// undershoot
224
//
225
// $p: position
226
//
227
// possible $p values:
228
// top, bottom, right, left
229
//
230
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
232
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
233
$_gradient_dir: left;
235
$_dash_bg_size: 12px 1px;
236
$_gradient_repeat: repeat-x;
237
$_bg_pos: left $p;
238
@if ($p == left) or ($p == right) {
240
$_gradient_dir: top;
241
$_dash_bg_size: 1px 12px;
242
$_gradient_repeat: repeat-y;
243
$_bg_pos: $p top;
244
}
245
background-color: transparent; // shouldn't be needed, but better to be sure
247
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
249
$_undershoot_color_light 50%,
250
$_undershoot_color_dark 50%);
251
padding-#{$p}: 1px;
253
background-size: $_dash_bg_size;
254
background-repeat: $_gradient_repeat;
255
background-origin: content-box;
256
background-position: $_bg_pos;
257
}
258