-
Notifications
You must be signed in to change notification settings - Fork 0
/
variables.scss
119 lines (103 loc) · 2.78 KB
/
variables.scss
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// Base Offset
$base-offset: 8px;
// Brakepoints:
$screen-xs: 480px; // Extra small screen / phone
$screen-sm: 768px; // Small screen / tablet
$screen-md: 992px; // Medium screen / desktop
$screen-lg: 1200px; // Large screen / wide desktop
$screen-xl: 1400px; // Large screen / wide desktop
$resolutions: "xs", "xsm", "sm", "md", "lg", "xl", "mxl";
// Colors
// // Default Colors Palette
$primary: #2dc08d;
$secondary: #8c7cdb;
$accent: #e3e9f5;
$info: #3f9cdc;
$warning: #feb251;
$danger: #ff576f;
$white: #ffffff;
// // Hover elements
$primary-hover: #57cda4;
$secondary-hover: #a396e2;
$danger-hover: #ff687d;
$info-hover: #52a6df;
$warning-hover: #feba62;
// // Active elements
$primary-active: #249a71;
$secondary-active: #5f4dc7;
$info-active: #3685bb;
$warning-active: #d89745;
$danger-active: #d94a5e;
// // Transparent elements
// // // opacity: 10%;
$primary-10: rgba($primary, 0.1);
$secondary-10: rgba($secondary, 0.1);
$accent-10: rgba($accent, 0.1);
$info-10: rgba($info, 0.1);
$warning-10: rgba($warning, 0.1);
$danger-10: rgba($danger, 0.1);
// // // opacity 20%
$primary-20: rgba($primary, 0.2);
$secondary-20: rgba($secondary, 0.2);
$accent-20: rgba($accent, 0.2);
$info-20: rgba($info, 0.2);
$warning-20: rgba($warning, 0.2);
$danger-20: rgba($danger, 0.2);
// // // opacity 30%
$primary-30: rgba($primary, 0.3);
$secondary-30: rgba($secondary, 0.3);
$accent-30: rgba($accent, 0.3);
$info-30: rgba($info, 0.3);
$warning-30: rgba($warning, 0.3);
$danger-30: rgba($danger, 0.3);
// // Backgrounds
$surface: $white;
$surface-accent: #9cb2dc;
$page: #f5f7fc;
$page-alt: #fafbfd;
// // Typography Colors
$heading: #2d3639;
$paragraph: #384347;
$label: #60696c;
$caption: #afb4b5;
$subtext: #d8d9db;
// // Supportive colors
$modal: #47445a;
$graphic-1: #f0f0f0;
$graphic-2: #e4e4e4;
$graphic-3: #f2f2f2;
$border-color: #e0e0e0;
// // CC colors
$primary-cc: #eaf9f4;
$secondary-cc: #f3f2fb;
$danger-cc: #ffeef1;
$info-cc: #ecf5fc;
// // Visual elements Colors
$visual-violet-1: #d1cbf1;
$visual-violet-2: #e3e0f6;
$visual-green-1: #abe6d1;
$visual-green-2: #cdf0e4;
$visual-blue: #b2d7f1;
$visual-orange: #ffe0b9;
$visual-pink: #ffcdd4;
// // Shadows
$shadow-default: 0px 4px 8px rgba(0, 0, 0, 0.1);
$shadow-hover: 0px 2px 20px rgba(0, 0, 0, 0.1);
$shadow-flat: 1px 1px 1px rgba(231, 228, 228, 0.5);
$shadow-main-navigation: 0px 1px 3px rgba(0, 0, 0, 0.1);
// Font-sizes
$font-size-lg: 20px;
$font-size-md: 18px;
$font-size-rg: 16px;
$font-size-sm: 14px;
$font-size-xs: 12px;
$font-size-xs-min: 10px;
// Container - (with padding-inline:16px included)
$container-xs: 100%;
$container-sm: 736px; // 12columns x 64px
$container-md: 956px; // 12columns x 84px
$container-lg: 1184px; // 12columns x 96px
$container-xl: 1328px; // 12columns x 108px
// Z-index modal
$zindex-modal-background: 1002;
$zindex-modal-content: 1003;