1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
@use "sass:color";
@use "scheme";
$scale: 0.068rem;
@function s($value: 1) {
@return $value * $scale;
}
@mixin rounded($all, $tl: $all, $tr: $all, $br: $all, $bl: $all) {
border-radius: s($tl) s($tr) s($br) s($bl);
-gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
}
@mixin border($colour, $alpha: 1, $width: 1, $style: solid) {
border: s($width) $style color.change($colour, $alpha: $alpha);
}
@mixin shadow($colour: scheme.$mantle, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
}
@mixin spacing($val: 5, $vertical: false) {
$dir: if($vertical, bottom, right);
& > * {
margin-#{$dir}: s($val);
&:last-child {
margin-#{$dir}: 0;
}
}
}
@mixin element-decel {
transition: 200ms cubic-bezier(0, 0.55, 0.45, 1);
}
|
