_variable.scss
4.43 KB
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
// base
$base: 8px;
$css-path: ".";
// colour
// basic colour
$palette-blue: #2196f3;
$palette-blue-dark: #0d47a1;
$palette-blue-dark-m: #1976d2;
$palette-blue-light: #bbdefb;
$palette-blue-light-m: #64b5f6;
$palette-green: #8bc34a;
$palette-green-dark: #33691e;
$palette-green-dark-m: #689f38;
$palette-green-light: #dcedc8;
$palette-green-light-m: #aed581;
$palette-purple: #9c27b0;
$palette-purple-dark: #4a148c;
$palette-purple-dark-m: #7b1fa2;
$palette-purple-light: #e1bee7;
$palette-purple-light-m: #ba68c8;
$palette-red: #f44336;
$palette-red-dark: #b71c1c;
$palette-red-dark-m: #d32f2f;
$palette-red-light: #ffcdd2;
$palette-red-light-m: #e57373;
$palette-yellow: #ffc107;
$palette-yellow-dark: #ff6f00;
$palette-yellow-dark-m: #ffa000;
$palette-yellow-light: #ffecb3;
$palette-yellow-light-m: #ffd54f;
// black and white
$black: #000000;
$black-bg: #e0e0e0;
$black-hint: #9e9e9e;
$black-sec: #616161;
$black-text: #212121;
$white: #ffffff;
$white-bg: #f5f5f5;
$white-bg-dark: #eeeeee;
$white-bg-light: #fafafa;
// brand colour
$brand-color: #4caf50;
$brand-color-dark: #1b5e20;
$brand-color-dark-m: #388e3c;
$brand-color-light: #c8e6c9;
$brand-color-light-m: #81c784;
//bring the colors orange, lightgreen, indigo, teal and pink
@import "conferencia/_colors.scss";
// list
$palette-color: $brand-color, $palette-blue, $palette-green, $palette-purple, $palette-red, $palette-yellow, $palette-orange, $palette-lightgreen, $palette-indigo, $palette-teal, $palette-pink;
$palette-color-dark: $brand-color-dark, $palette-blue-dark, $palette-green-dark, $palette-purple-dark, $palette-red-dark, $palette-yellow-dark,$palette-orange-dark, $palette-lightgreen-dark, $palette-indigo-dark, $palette-teal-dark, $palette-pink-dark;
$palette-color-dark-m: $brand-color-dark-m, $palette-blue-dark-m, $palette-green-dark-m, $palette-purple-dark-m, $palette-red-dark-m, $palette-yellow-dark-m, $palette-orange-dark-m, $palette-lightgreen-dark-m, $palette-indigo-dark-m, $palette-teal-dark-m, $palette-pink-dark-m;
$palette-color-light: $brand-color-light, $palette-blue-light, $palette-green-light, $palette-purple-light, $palette-red-light, $palette-yellow-light, $palette-orange-light, $palette-lightgreen-light, $palette-indigo-light, $palette-teal-light, $palette-pink-light;
$palette-color-light-m: $brand-color-light-m, $palette-blue-light-m, $palette-green-light-m, $palette-purple-light-m, $palette-red-light-m, $palette-yellow-light-m, $palette-orange-light-m, $palette-lightgreen-light-m, $palette-indigo-light-m, $palette-teal-light-m, $palette-pink-light-m;
$palette-list: "alt", "blue", "green", "purple", "red", "yellow", "home", "search", "profile", "proposal", "pink";
// font
$font-fam: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-fam-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
$font-fam-serif: Georgia, serif;
// font size
$font-size: ($base * 2); // 16px
$font-size-h1: ($base * 5.5); // 44px
$font-size-h2: ($base * 4.5); // 36px
$font-size-h3: ($base * 3.5); // 28px
$font-size-h4: ($base * 2.5); // 20px
$font-size-h5: ($base * 2); // 16px
$font-size-h6: ($base * 1.5); // 12px
$font-size-lg: ($base * 7.5); // 60px
// line height
$line-height: ($base * 3); // 24px
$line-height-h1: ($base * 6); // 48px
$line-height-h2: ($base * 5); // 40px
$line-height-h3: ($base * 4); // 32px
$line-height-h4: ($base * 3.5); // 28px
$line-height-h5: ($base * 3); // 24px
$line-height-h6: ($base * 2.5); // 20px
$line-height-lg: ($base * 9); // 72px
// other
$btn-height: (($base * 3) * 1.5); // 36px
$cell-height: (($base * 3) * 2); // 48px
$input-height: (($base * 3) * 1.5); // 36px
// grid
$grid-cols: 12;
$grid-gutter: ($base * 2);
// link
$link-color: $palette-blue;
$link-color-hover: $palette-blue-dark;
// responsive
$screen-lg: 1440px;
$screen-md: 992px;
$screen-sm: 768px;
$screen-xs: 480px;
// timing
$timing: cubic-bezier(0.4, 0, 0.2, 1);
// z-index
$bottom-base: 10;
$content-base: 20;
$header-base: 30;
$top-base: 40;