ASCII text
1
$compact: false !default;
2
$toolkit: "none" !default;
3
$asset-suffix: if($dark-theme, "-dark", "");
5
//
7
// Sizes
8
//
9
$container-padding: 6px;
11
$small-size: 24px;
12
$medium-size: 36px;
13
$large-size: 48px;
14
@if $compact {
16
$container-padding: 4px;
17
$small-size: 24px;
18
$medium-size: 32px;
19
$large-size: 40px;
20
}
21
$bar-size: 4px;
23
$menuitem-size: 28px;
24
//
26
// Radii
27
//
28
$corner-radius: 4px;
30
$circular-radius: 9999px;
31
//
33
// Durations
34
//
35
$duration: 75ms;
37
$ripple-fade-in-duration: 225ms;
38
$ripple-fade-out-duration: 300ms;
39
$ripple-fade-out-opacity-duration: 1200ms;
40
//
42
// Timing functions
43
//
44
$ease: cubic-bezier(.4, 0, .2, 1);
46
$ease-out: cubic-bezier(0, 0, .2, 1);
47
$ease-in: cubic-bezier(.4, 0, 1, 1);
48
$ease-in-out: cubic-bezier(.4, 0, .6, 1);
49
//
51
// Transition shorthands
52
//
53
$transition: all $duration $ease-out;
55
$transition-shadow: box-shadow $duration $ease-out;
56
//
58
// Shadows
59
//
60
// Values are based on:
62
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss
63
$shadow-z1:
65
0 2px 1px -1px rgba(black, .2),
66
0 1px 1px 0 rgba(black, .14),
67
0 1px 3px 0 rgba(black, .12);
68
$shadow-z2:
69
0 3px 1px -2px rgba(black, .2),
70
0 2px 2px 0 rgba(black, .14),
71
0 1px 5px 0 rgba(black, .12);
72
$shadow-z3:
73
0 3px 3px -2px rgba(black, .2),
74
0 3px 4px 0 rgba(black, .14),
75
0 1px 8px 0 rgba(black, .12);
76
$shadow-z4:
77
0 2px 4px -1px rgba(black, .2),
78
0 4px 5px 0 rgba(black, .14),
79
0 1px 10px 0 rgba(black, .12);
80
$shadow-z6:
81
0 3px 5px -1px rgba(black, .2),
82
0 6px 10px 0 rgba(black, .14),
83
0 1px 18px 0 rgba(black, .12);
84
$shadow-z8:
85
0 5px 5px -3px rgba(black, .2),
86
0 8px 10px 1px rgba(black, .14),
87
0 3px 14px 2px rgba(black, .12);
88
$shadow-z12:
89
0 7px 8px -4px rgba(black, .2),
90
0 12px 17px 2px rgba(black, .14),
91
0 5px 22px 4px rgba(black, .12);
92
$shadow-z16:
93
0 8px 10px -5px rgba(black, .2),
94
0 16px 24px 2px rgba(black, .14),
95
0 6px 30px 5px rgba(black, .12);
96
$shadow-z24:
97
0 11px 15px -7px rgba(black, .2),
98
0 24px 38px 3px rgba(black, .14),
99
0 9px 46px 8px rgba(black, .12);
100
$text-shadow:
102
0 1px 1px rgba(black, .2),
103
0 1px 2px rgba(black, .14),
104
0 1px 3px rgba(black, .12);
105
// workaround for selection-mode checkboxes
107
$icon-shadow-z2:
108
0 1px 1px rgba(black, .2),
109
0 2px 2px rgba(black, .14),
110
0 1px 5px rgba(black, .12);
111
$icon-shadow-z4:
112
0 2px 3px rgba(black, .2),
113
0 4px 5px rgba(black, .14),
114
0 1px 10px rgba(black, .12);
115
// Note that GTK 3 does not support blur below 2px,
117
// and its blur is huge compared to web rendering.
118
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
119
@if $toolkit == "gtk3" {
120
$shadow-z1:
121
0 2px 2px -2px rgba(black, .3),
122
0 1px 2px -1px rgba(black, .24),
123
0 1px 2px -.6px rgba(black, .17);
124
$shadow-z2:
125
0 3px 2px -3px rgba(black, .3),
126
0 2px 2px -1px rgba(black, .24),
127
0 1px (5px * .6) 0 rgba(black, .12);
128
$shadow-z3:
129
0 3px 2px -2px rgba(black, .2),
130
0 3px (4px * .6) 0 rgba(black, .14),
131
0 1px (8px * .6) 0 rgba(black, .12);
132
$shadow-z4:
133
0 2px (4px * .6) -1px rgba(black, .2),
134
0 4px (5px * .6) 0 rgba(black, .14),
135
0 1px (10px * .6) 0 rgba(black, .12);
136
$shadow-z6:
137
0 3px (5px * .6) -1px rgba(black, .2),
138
0 6px (10px * .6) 0 rgba(black, .14),
139
0 1px (18px * .6) 0 rgba(black, .12);
140
$shadow-z8:
141
0 5px (5px * .6) -3px rgba(black, .2),
142
0 8px (10px * .6) 1px rgba(black, .14),
143
0 3px (14px * .6) 2px rgba(black, .12);
144
$shadow-z12:
145
0 7px (8px * .6) -4px rgba(black, .2),
146
0 12px (17px * .6) 2px rgba(black, .14),
147
0 5px (22px * .6) 4px rgba(black, .12);
148
$shadow-z16:
149
0 8px (10px * .6) -5px rgba(black, .2),
150
0 16px (24px * .6) 2px rgba(black, .14),
151
0 6px (30px * .6) 5px rgba(black, .12);
152
$shadow-z24:
153
0 11px (15px * .6) -7px rgba(black, .2),
154
0 24px (38px * .6) 3px rgba(black, .14),
155
0 9px (46px * .6) 8px rgba(black, .12);
156
$text-shadow:
158
0 1px 1px rgba(black, .2),
159
0 1px 2px rgba(black, .14),
160
0 1px 3px rgba(black, .12);
161
$icon-shadow-z2:
163
0 1px 1px rgba(black, .2),
164
0 2px 2px rgba(black, .14),
165
0 1px (5px * .6) rgba(black, .12);
166
$icon-shadow-z4:
167
0 2px 2px rgba(black, .2),
168
0 4px (5px * .6) rgba(black, .14),
169
0 1px (10px * .6) rgba(black, .12);
170
}
171
@if $toolkit == "st" {
173
$shadow-z1: 0 1px 1px rgba(black, .36);
174
$shadow-z2: 0 1px 2px rgba(black, .4);
175
$shadow-z4: 0 2px 8px rgba(black, .44);
176
$shadow-z8: 0 5px 16px rgba(black, .5);
177
$shadow-z16: 0 8px 24px rgba(black, .68); // TODO
178
}
179