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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
@use "sass:color";
@use "scheme";
@use "font";
$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: black, $alpha: 0.64, $x: 0, $y: 0, $blur: 3, $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);
& > *:not(:last-child) {
margin-#{$dir}: s($val);
}
}
@mixin element-decel($duration: 200ms) {
transition: $duration cubic-bezier(0, 0.55, 0.45, 1);
}
@mixin fluent-decel($duration: 200ms) {
transition: $duration cubic-bezier(0.1, 1, 0, 1);
}
@mixin overshot {
transition-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.1);
}
@mixin ease-in-out {
transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}
@mixin popdown-window($colour) {
@include rounded(8);
@include border($colour, 0.4, 2);
@include shadow;
@include font.mono;
background-color: scheme.$mantle;
color: $colour;
padding: s(10) s(12);
font-size: s(14);
.header {
@include spacing(8);
padding: 0 s(5);
margin-bottom: s(8);
font-size: s(15);
button {
@include rounded(5);
@include element-decel;
padding: s(3) s(8);
&:hover,
&:focus {
background-color: scheme.$surface0;
}
&:active {
background-color: scheme.$surface1;
}
&.enabled {
background-color: $colour;
color: scheme.$base;
&:hover,
&:focus {
background-color: color.mix($colour, scheme.$base, 80%);
}
&:active {
background-color: color.mix($colour, scheme.$base, 70%);
}
}
}
}
.icon {
font-size: s(32);
}
}
|
