_theme.scss
ASCII text
1
$dark-theme: false !default;
2
$light-topbar: false !default;
3
$compact: false !default;
4
$toolkit: "none" !default;
5
6
$asset-suffix: if($dark-theme, "-dark", "");
7
8
//
9
// Sizes
10
//
11
12
$container-padding: 6px;
13
$small-size: 24px;
14
$medium-size: 36px;
15
$large-size: 48px;
16
17
@if $compact {
18
$container-padding: 4px;
19
$small-size: 24px;
20
$medium-size: 32px;
21
$large-size: 40px;
22
}
23
24
$menu-item-height: 32px;
25
$menu-item-dense-height: 28px;
26
27
@if $compact {
28
$menu-item-height: 28px;
29
}
30
31
//
32
// Radii
33
//
34
35
$corner-radius: 4px;
36
$circular-radius: 9999px;
37
38
//
39
// Durations
40
//
41
42
$state-duration: 75ms;
43
$ripple-duration: 225ms;
44
$ripple-fade-out-duration: 300ms;
45
$ripple-opacity-fade-out-duration: 1200ms;
46
47
@if $toolkit == "st" {
48
// Tweak transition durations since St does not support transition-timing-function
49
$state-duration: 100ms;
50
$ripple-duration: 200ms;
51
}
52
53
//
54
// Timing functions
55
//
56
57
$ease: cubic-bezier(.4, 0, .2, 1);
58
$ease-out: cubic-bezier(0, 0, .2, 1);
59
$ease-in: cubic-bezier(.4, 0, 1, 1);
60
$ease-in-out: cubic-bezier(.4, 0, .6, 1);
61
62
//
63
// Transition shorthands
64
//
65
66
$transition: all $state-duration $ease-out;
67
$transition-shadow: box-shadow $state-duration $ease-out;
68