-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_variables.scss
143 lines (112 loc) · 2.75 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// ==================================================
// TABLE OF CONTENTS
// --------------------------------------------------
// * Breakpoints
// * Colors
// - Grayscale
// - General
// * Styles
// - Typography
// - Headings
// - Base
// * Lists
// - Buttons
// - Inputs
// ==================================================
// Breakpoints
// **************************************************
$screen-xsmall: 420px;
$screen-small: 576px;
$screen-medium: 768px;
$screen-large: 992px;
$screen-xlarge: 1200px;
$screen-xxlarge: 1440px;
$breakpoints: (
xxsmall: 0,
xsmall: $screen-xsmall,
small: $screen-small,
medium: $screen-medium,
large: $screen-large,
xlarge: $screen-xlarge,
xxlarge: $screen-xxlarge
);
// Colors
// **************************************************
// Grayscale
$black: #000;
$gray-darker: #333;
$gray: #666;
$gray-lighter: #999;
$white: #fff;
// General
$red: #ff4136;
$green: #2ecc40;
$blue: #0074d9;
$yellow: #ffdc00;
$orange: #ff851b;
$pink: #f012be;
$purple: #b10dc9;
$navy: #001f3f;
$aqua: #7fdbff;
$olive: #3d9970;
$lime: #01ff70;
$maroon: #85144b;
// Styles
// **************************************************
$font-weight-thin: 100;
$font-weight-extralight: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 800;
$font-weight-black: 900;
// Typography
$font-family-base: 'Open Sans', sans-serif;
$font-size-base: 16px;
$line-height-base: 1.5;
// Headings
$headings-font-family: inherit;
$headings-color: inherit;
$h1-font-size: em($font-size-base * 2.875);
$h2-font-size: em($font-size-base * 2.25);
$h3-font-size: em($font-size-base * 1.75);
$h4-font-size: em($font-size-base * 1.375);
$h5-font-size: em($font-size-base * 1.125);
$h6-font-size: em($font-size-base);
// Base
$body-background: mui-color(grey, 100);
$body-color: mui-color(grey, 800);
$spacer: rem($font-size-base * $line-height-base);
$border-radius: 0.25em;
$link-color: mui-color(red, 700);
$link-hover-color: shade($link-color, 15);
// Lists
// **************************************************
// Buttons
$button-list: (
'button',
'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]'
);
// Inputs
$input-list: (
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'input:not([type])',
'textarea'
);