ASCII text
1
$asset-suffix: if($variant == 'dark', '-dark', '');
2
$background-clip-extra: if($variant == 'light', padding-box, border-box);
3
// sizes
5
$small-size: if($compact == 'false', 24px, 24px);
6
$medium-size: if($compact == 'false', 36px, 32px);
7
$large-size: if($compact == 'false', 48px, 40px);
8
$container-padding: if($compact == 'false', 6px, 4px);
10
$bar-size: 4px;
12
$menuitem-size: 28px;
13
// radiuses
15
$corner-radius: 4px;
16
$circular-radius: 9999px;
17
// durations
19
$duration: 100ms;
20
$duration-ripple: 225ms;
21
$duration-ripple-aftermath: 300ms;
22
$duration-ripple-aftermath-opacity: 1200ms;
23
// timing functions
25
$ease: cubic-bezier(0.4, 0.0, 0.2, 1);
26
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
27
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);
28
$ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
29
// transition shorthands
31
$transition: all $duration $ease-out;
32
$transition-shadow: box-shadow $duration $ease-out;
33
// shadows
35
// based shadow values:
36
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
37
// box-shadow 1px blur doesn't draw correctly, see
39
// https://bugzilla.gnome.org/show_bug.cgi?id=738484
40
// $shadow-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
41
$shadow-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
42
$shadow-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
43
$shadow-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
44
$shadow-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
45
$shadow-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
46