ASCII text
1
$asset_suffix: if($variant == 'dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$panel-corner-radius: 0;
5
// font families
7
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
8
$large-font-family: Roboto, "M+ 1c", Cantarell, Sans-Serif;
9
// font sizes
11
$root-font-size: if($compact == 'false', 14px, 13px);
12
$subheading-size: if($compact == 'false', 16px, 15px);
13
// opacities
15
$higher_opacity: 0.9;
16
$middle_opacity: 0.6;
17
$lower_opacity: 0.3;
18
$secondary_opacity: 0.75;
20
$tertiary_opacity: 0.6;
21
$disabled_opacity: 0.4;
22
// sizes
24
$small_size: if($compact == 'false', 24px, 20px);
25
$medium_size: if($compact == 'false', 36px, 32px);
26
$large_size: if($compact == 'false', 48px, 44px);
27
$container_padding: 6px;
29
$bar_size: 4px;
31
$menuitem_size: if($compact == 'false', 32px, 28px);
32
// radiuses
34
$material_radius: 2px;
35
$circular_radius: 9999px;
36
// durations
38
$shorter_duration: 0.2s;
39
$longer_duration: 0.3s;
40
$ripple_duration: 0.5s;
41
// timing functions
43
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
44
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
45
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
46
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
47
// transition shorthands
49
$shorter_transition: all $shorter_duration $deceleration_curve;
50
$longer_transition: all $longer_duration $deceleration_curve;
51
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
52
// shadows
54
// based shadow values:
55
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
56
$shadow_0: 0 0 transparent;
58
$shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
59
$shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16 * 1.5), 0 3px 3px rgba(0, 0, 0, 0.23 * 1.5);
60
$shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19 * 1.5), 0 6px 3px rgba(0, 0, 0, 0.23 * 1.5);
61
$shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25 * 2), 0 10px 5px rgba(0, 0, 0, 0.22 * 2);
62
$shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30 * 2), 0 15px 6px rgba(0, 0, 0, 0.22 * 2);
63