ASCII text
1
$compact: false !default;
2
$asset-suffix: if($dark-theme, "-dark", "");
4
//
6
// Sizes
7
//
8
$container-padding: 6px;
10
$small-size: 24px;
11
$medium-size: 36px;
12
$large-size: 48px;
13
@if $compact {
15
$container-padding: 4px;
16
$small-size: 24px;
17
$medium-size: 32px;
18
$large-size: 40px;
19
}
20
$bar-size: 4px;
22
$menuitem-size: 28px;
23
//
25
// Radii
26
//
27
$corner-radius: 4px;
29
$circular-radius: 9999px;
30
//
32
// Durations
33
//
34
$duration: 75ms;
36
$ripple-fade-in-duration: 225ms;
37
$ripple-fade-out-duration: 300ms;
38
$ripple-fade-out-opacity-duration: 1200ms;
39
//
41
// Timing functions
42
//
43
$ease: cubic-bezier(.4, 0, .2, 1);
45
$ease-out: cubic-bezier(0, 0, .2, 1);
46
$ease-in: cubic-bezier(.4, 0, 1, 1);
47
$ease-in-out: cubic-bezier(.4, 0, .6, 1);
48
//
50
// Transition shorthands
51
//
52
$transition: all $duration $ease-out;
54
$transition-shadow: box-shadow $duration $ease-out;
55
//
57
// Shadows
58
//
59
// Values are based on:
61
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_variables.scss
62
// NOTE: GTK 3 shadow blur less than 2px doesn't work properly, see
64
// https://gitlab.gnome.org/GNOME/gtk/issues/511
65
// NOTE 2: Compared to the Web rendering, GTK seems to have a bigger blur.
67
$shadow-z1:
69
// 0 2px (1px * .6) -1px rgba(black, .2),
70
0 2px 2px -2px rgba(black, .3),
71
// 0 1px (1px * .6) 0 rgba(black, .14),
72
0 1px 2px -1px rgba(black, .24),
73
// 0 1px (3px * .6) 0 rgba(black, .12);
74
0 1px 2px -.6px rgba(black, .17);
75
$shadow-z2:
76
// 0 3px (1px * .6) -2px rgba(black, .2),
77
0 3px 2px -3px rgba(black, .3),
78
// 0 2px (2px * .6) 0 rgba(black, .14),
79
0 2px 2px -1px rgba(black, .24),
80
0 1px (5px * .6) 0 rgba(black, .12);
81
$shadow-z3:
82
// 0 3px (3px * .6) -2px rgba(black, .2),
83
0 3px 2px -2px rgba(black, .2),
84
0 3px (4px * .6) 0 rgba(black, .14),
85
0 1px (8px * .6) 0 rgba(black, .12);
86
$shadow-z4:
87
0 2px (4px * .6) -1px rgba(black, .2),
88
0 4px (5px * .6) 0 rgba(black, .14),
89
0 1px (10px * .6) 0 rgba(black, .12);
90
$shadow-z6:
91
0 3px (5px * .6) -1px rgba(black, .2),
92
0 6px (10px * .6) 0 rgba(black, .14),
93
0 1px (18px * .6) 0 rgba(black, .12);
94
$shadow-z8:
95
0 5px (5px * .6) -3px rgba(black, .2),
96
0 8px (10px * .6) 1px rgba(black, .14),
97
0 3px (14px * .6) 2px rgba(black, .12);
98
$shadow-z12:
99
0 7px (8px * .6) -4px rgba(black, .2),
100
0 12px (17px * .6) 2px rgba(black, .14),
101
0 5px (22px * .6) 4px rgba(black, .12);
102
$shadow-z16:
103
0 8px (10px * .6) -5px rgba(black, .2),
104
0 16px (24px * .6) 2px rgba(black, .14),
105
0 6px (30px * .6) 5px rgba(black, .12);
106
$shadow-z24:
107
0 11px (15px * .6) -7px rgba(black, .2),
108
0 24px (38px * .6) 3px rgba(black, .14),
109
0 9px (46px * .6) 8px rgba(black, .12);
110
$text-shadow:
112
0 1px 1px rgba(black, .2),
113
0 1px 2px rgba(black, .14),
114
0 1px 3px rgba(black, .12);
115
// workaround for selection-mode checkboxes
117
$icon-shadow-z2:
118
0 1px 1px rgba(black, .2),
119
0 2px 2px rgba(black, .14),
120
0 1px (5px * .6) rgba(black, .12);
121
$icon-shadow-z4:
122
0 2px 2px rgba(black, .2),
123
0 4px (5px * .6) rgba(black, .14),
124
0 1px (10px * .6) rgba(black, .12);
125