ASCII text
1
// generic drawing of more complex things
2
// ripple effect animations
5
@keyframes ripple_effect {
7
from {
8
background-image: -gtk-gradient(radial,
9
center center, 0,
10
center center, 0.001,
11
to($active_bg_color),
12
to(transparent));
13
}
14
to {
15
background-image: -gtk-gradient(radial,
16
center center, 0,
17
center center, 0.4,
18
to($active_bg_color),
19
to(transparent));
20
}
21
}
22
@mixin entry($t, $fc: $primary_color) {
25
//
26
// entry
27
//
28
// $t: entry type
29
// $fc: focus color
30
//
31
@if $t == normal {
33
transition: $shorter_transition;
34
box-shadow: $shadow_1;
35
background-color: if($fc == $primary_color, $base_color, $fc);
36
color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
37
}
38
@if $t == focus {
40
box-shadow: $shadow_2;
41
}
42
@if $t == insensitive {
44
color: $disabled_fg_color;
45
background-color: $alt_base_color;
46
}
47
@if $t == flat-normal {
49
transition: $shorter_transition, border-image $longer_duration $deceleration_curve;
50
border-image: -gtk-gradient(radial,
51
center bottom, 0,
52
center bottom, 0.001,
53
to($fc),
54
to(transparent))
55
0 0 0 / 0 0 0px;
56
border-radius: 0;
57
box-shadow: inset 0 -1px if($fc == $primary_color, $checked_bg_color, $fc);
58
background-color: transparent;
59
color: $fg_color;
60
}
61
@if $t == flat-focus {
63
border-image: -gtk-gradient(radial,
64
center bottom, 0,
65
center bottom, 0.5,
66
to($fc),
67
to(transparent))
68
0 0 2 / 0 0 2px;
69
box-shadow: inset 0 -2px $fc;
70
transition: $shorter_transition, border-image $longer_duration $deceleration_curve, box-shadow 0 $longer_duration;
71
}
72
@if $t == flat-insensitive {
74
box-shadow: inset 0 -1px $checked_bg_color;
75
background-color: transparent;
76
color: $disabled_fg_color;
77
}
78
}
79
@mixin button($t, $c: $button_bg_color) {
82
//
83
// button
84
//
85
// $t: button type
86
// $c: base color
87
//
88
@if $t == normal {
90
transition: $shorter_transition, background-image $longer_duration * 4 $deceleration_curve;
91
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
92
background-color: $c;
93
background-image: -gtk-gradient(radial,
94
center center, 0,
95
center center, 0.5,
96
to(transparent),
97
to(transparent));
98
color: $button_fg_color;
99
}
100
@if $t == hover {
102
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
103
color: $fg_color;
104
}
105
@if $t == active {
107
transition: $shorter_transition, background-image 0;
108
animation: ripple_effect $longer_duration $deceleration_curve forwards;
109
box-shadow: $shadow_2, inset 0 0 0 9999px $hover_bg_color;
110
color: $fg_color;
111
}
112
@if $t == insensitive {
114
box-shadow: none;
115
background-color: $checked_bg_color;
116
color: if($c == $button_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
117
> .label { color: inherit; }
119
}
120
@if $t == checked {
122
background-color: $primary_color;
123
color: $inverse_fg_color;
124
}
125
@if $t == checked-insensitive {
127
background-color: rgba($primary_color, 0.3);
128
color: rgba($primary_color, 0.5);
129
> .label { color: inherit; }
130
}
131
@if $t == flat-normal {
133
transition: $shorter_transition, border-image $longer_duration $deceleration_curve, background-image $longer_duration * 4 $deceleration_curve;
134
box-shadow: inset 0 0 0 9999px transparent;
135
background-color: transparent;
136
background-image: -gtk-gradient(radial,
137
center center, 0,
138
center center, 0.5,
139
to(transparent),
140
to(transparent));
141
color: gtkalpha(currentColor, 0.7);
142
}
143
@if $t == flat-hover {
145
box-shadow: inset 0 0 0 9999px $hover_bg_color;
146
color: currentColor;
147
}
148
@if $t == flat-active {
150
transition: $shorter_transition, border-image $longer_duration $deceleration_curve, background-image 0;
151
animation: ripple_effect $longer_duration $deceleration_curve forwards;
152
box-shadow: inset 0 0 0 9999px $hover_bg_color;
153
color: currentColor;
154
}
155
@if $t == flat-insensitive {
157
box-shadow: none;
158
background-color: transparent;
159
color: if($c == $button_bg_color,
160
gtkalpha(currentColor, 0.3),
161
gtkalpha(currentColor, 0.5));
162
> .label { color: inherit; }
164
}
165
@if $t == flat-checked {
167
background-color: $checked_bg_color;
168
color: currentColor;
169
}
170
@if $t == flat-checked-insensitive {
172
background-color: $checked_bg_color;
173
color: gtkalpha(currentColor, 0.5);
174
> .label { color: inherit; }
176
}
177
}
178
@mixin overshoot($p) {
181
//
182
// overshoot
183
//
184
// $p: position
185
//
186
// possible $p values:
187
// top, bottom, right, left
188
//
189
$_position: center $p;
191
@if ($p == left) or ($p == right) {
193
$_position: $p center;
194
}
195
background-image: -gtk-gradient(radial,
197
$_position, 0,
198
$_position, 0.75,
199
to(rgba($alt_primary_color, 0.3)),
200
to(transparent));
201
background-repeat: no-repeat;
203
background-position: $_position;
204
background-color: transparent; // reset some properties to be sure to not inherit them somehow
206
border: none; //
207
box-shadow: none; //
208
}
209
@mixin undershoot($p) {
212
//
213
// undershoot
214
//
215
// $p: position
216
//
217
// possible $p values:
218
// top, bottom, right, left
219
//
220
$_undershoot_color_dark: $track_color;
222
$_undershoot_color_light: rgba($base_color, 0.3);
223
$_gradient_dir: left;
225
$_dash_bg_size: 12px 1px;
226
$_gradient_repeat: repeat-x;
227
$_bg_pos: left $p;
228
@if ($p == left) or ($p == right) {
230
$_gradient_dir: top;
231
$_dash_bg_size: 1px 12px;
232
$_gradient_repeat: repeat-y;
233
$_bg_pos: $p top;
234
}
235
background-color: transparent; // shouldn't be needed, but better to be sure
237
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
239
$_undershoot_color_light 50%,
240
$_undershoot_color_dark 50%);
241
padding-#{$p}: 1px;
243
background-size: $_dash_bg_size;
244
background-repeat: $_gradient_repeat;
245
background-origin: content-box;
246
background-position: $_bg_pos;
247
}
248