1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@use 'sass:map';
/// Global spacing value
$space-unit: 8px;
/// Bootstrap color system
/// * with added shades of gray (+)
$white: #FFFFFF;
$gray-50 : #FCFCFC; // (+)
$gray-100: #F8F9FA;
$gray-150: #FAFAFA; // (+)
$gray-175: #F0F0F0; // (+)
$gray-200: #E9ECEF;
$gray-300: #DEE2E6;
$gray-400: #CED4DA;
$gray-500: #ADB5BD;
$gray-600: #6C757D;
$gray-700: #495057;
$gray-800: #343A40;
$gray-900: #212529;
$black: #000000;
/// Pastel colours
$pastel-green : hsla(149, 46%, 41%, 1);
$pastel-blue : hsla(206, 28%, 55%, 1);
$pastel-yellow : hsla(60, 100%, 71%, 1);
$pastel-red : hsla(3, 60%, 59%, 1);
$pastel-orange : hsla(40, 89%, 75%, 1);
$pastel-purple : hsla(278, 19%, 74%, 1);
/// Breakpoints
/// (for media query: best sorted from highest to lowest)
$breakpoints: (
'screen' : 2000px,
'desktop' : 1200px,
'tablet' : 780px,
'mobile' : 540px,
); // (?) will also overrides "vendors/include-media" default
/// Z-Index Management
/// @link https://medium.com/alistapart/sassier-z-index-management-for-complex-layouts-4540717a9488
$z-indexes: (
main: (
"sidebar",
"topbar",
"handlebar",
"floaty",
),
phylo: (
"frame",
"spinner",
),
graph: (
"toolbar",
"frame",
),
tree: (
"content",
"badge",
),
tile: (
"bottom-teaser"
"navbar",
"top-teaser",
),
corpus-code: (
"content",
"toolbar",
),
);