-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
_variables.scss
206 lines (180 loc) 路 10.9 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
// -------------------------------------------------------------
// Variables used in all other files
//--------------------------------------------------------------
// Fonts
//--------------------------------------------------------------
$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
// Colors
//--------------------------------------------------------------
// Basic color palette for admin
$apple: hsl(105, 48, 37) !default;
$old-brick: hsl(5, 67, 36) !default;
$pirate-gold: hsl(45, 100, 37) !default;
$color-1: #FFFFFF !default; // White
$color-2: #9FC820 !default; // Green
$color-3: #5498DA !default; // Light Blue
$color-4: #6788A2 !default; // Dark Blue
$color-5: #C60F13 !default; // Red
$color-6: #FF9300 !default; // Yellow
$color-7: #F4F4F4 !default; // Light Gray
// Basic accents for admin
$box-shadow: 0px 3px 3px -2px hsla(0, 0%, 0%, 0.2);
// Body base colors
$color-body-bg: $color-1 !default;
$color-body-text: $color-4 !default;
$color-headers: $color-4 !default;
$color-link: $color-3 !default;
$color-link-hover: $color-2 !default;
$color-link-active: $color-2 !default;
$color-link-focus: $color-2 !default;
$color-link-visited: $color-3 !default;
$color-border: very-light($color-3, 12) !default;
// Basic navigation colors
$color-sidebar-bg: $color-body-bg !default;
$color-sidebar-border: $color-border !default;
$color-navbar-bg: $color-3 !default;
$color-navbar-active-bg: $color-2 !default;
$color-navbar-submenu-bg: very-light($color-navbar-bg, 4) !default;
$color-navbar-text: $color-1 !default;
// Basic flash colors
$color-success: $apple !default;
$color-notice: $pirate-gold !default;
$color-error: $old-brick !default;
// Color for spinner
$color-spinner: #fff;
// Table colors
$color-tbl-odd: $color-1 !default;
$color-tbl-even: very-light($color-3, 4) !default;
$color-tbl-thead: very-light($color-3, 4) !default;
// Button colors
$color-btn-bg: $color-3 !default;
$color-btn-text: $color-1 !default;
$color-btn-hover-bg: $color-2 !default;
$color-btn-hover-text: $color-1 !default;
// Actions colors
$color-action-edit-bg: very-light($color-success, 5 ) !default;
$color-action-edit-brd: very-light($color-success, 20 ) !default;
$color-action-clone-bg: very-light($color-notice, 5 ) !default;
$color-action-clone-brd: very-light($color-notice, 15 ) !default;
$color-action-remove-bg: very-light($color-error, 5 ) !default;
$color-action-remove-brd: very-light($color-error, 10 ) !default;
$color-action-void-bg: very-light($color-error, 10 ) !default;
$color-action-void-brd: very-light($color-error, 20 ) !default;
$color-action-cancel-bg: very-light($color-notice, 10 ) !default;
$color-action-cancel-brd: very-light($color-notice, 20 ) !default;
$color-action-capture-bg: very-light($color-success, 5 ) !default;
$color-action-capture-brd: very-light($color-success, 20 ) !default;
$color-action-save-bg: very-light($color-success, 5 ) !default;
$color-action-save-brd: very-light($color-success, 20 ) !default;
$color-action-mail-bg: very-light($color-success, 5 ) !default;
$color-action-mail-brd: very-light($color-success, 20 ) !default;
$color-action-failure-bg: very-light($color-error, 10 ) !default;
$color-action-failure-brd: very-light($color-error, 20 ) !default;
// Select2 select field colors
$color-sel-bg: $color-3 !default;
$color-sel-text: $color-1 !default;
$color-sel-hover-bg: $color-2 !default;
$color-sel-hover-text: $color-1 !default;
$color-sel-disabled-bg: $color-7 !default;
$color-sel-disabled-text: $color-4 !default;
// Text inputs colors
$color-txt-brd: $color-border !default;
$color-txt-text: $color-3 !default;
$color-txt-hover-brd: $color-2 !default;
// States label colors
$color-ste-complete-bg: $color-success !default;
$color-ste-complete-text: $color-1 !default;
$color-ste-completed-bg: $color-success !default;
$color-ste-completed-text: $color-1 !default;
$color-ste-sold-bg: $color-success !default;
$color-ste-sold-text: $color-1 !default;
$color-ste-pending-bg: $color-notice !default;
$color-ste-pending-text: $color-1 !default;
$color-ste-awaiting_return-bg: $color-notice !default;
$color-ste-awaiting_return-text: $color-1 !default;
$color-ste-returned-bg: $color-notice !default;
$color-ste-returned-text: $color-1 !default;
$color-ste-credit_owed-bg: $color-notice !default;
$color-ste-credit_owed-text: $color-1 !default;
$color-ste-paid-bg: $color-success !default;
$color-ste-paid-text: $color-1 !default;
$color-ste-shipped-bg: $color-success !default;
$color-ste-shipped-text: $color-1 !default;
$color-ste-balance_due-bg: $color-notice !default;
$color-ste-balance_due-text: $color-1 !default;
$color-ste-backorder-bg: $color-notice !default;
$color-ste-backorder-text: $color-1 !default;
$color-ste-none-bg: $color-error !default;
$color-ste-none-text: $color-1 !default;
$color-ste-ready-bg: $color-success !default;
$color-ste-ready-text: $color-1 !default;
$color-ste-void-bg: $color-error !default;
$color-ste-void-text: $color-1 !default;
$color-ste-canceled-bg: $color-error !default;
$color-ste-canceled-text: $color-1 !default;
$color-ste-failed-bg: $color-error !default;
$color-ste-failed-text: $color-1 !default;
$color-ste-address-bg: $color-error !default;
$color-ste-address-text: $color-1 !default;
$color-ste-checkout-bg: $color-notice !default;
$color-ste-checkout-text: $color-1 !default;
$color-ste-cart-bg: $color-notice !default;
$color-ste-cart-text: $color-1 !default;
$color-ste-payment-bg: $color-error !default;
$color-ste-payment-text: $color-1 !default;
$color-ste-delivery-bg: $color-success !default;
$color-ste-delivery-text: $color-1 !default;
$color-ste-confirm-bg: $color-error !default;
$color-ste-confirm-text: $color-1 !default;
$color-ste-active-bg: $color-success !default;
$color-ste-active-text: $color-1 !default;
$color-ste-inactive-bg: $color-notice !default;
$color-ste-inactive-text: $color-1 !default;
$color-ste-considered_risky-bg: $color-error !default;
$color-ste-considered_risky-text:$color-1 !default;
$color-ste-considered_safe-bg: $color-success !default;
$color-ste-considered_safe-text: $color-1 !default;
$color-ste-success-bg: $color-success !default;
$color-ste-success-text: $color-1 !default;
$color-ste-notice-bg: $color-notice !default;
$color-ste-notice-text: $color-1 !default;
$color-ste-error-bg: $color-error !default;
$color-ste-error-text: $color-1 !default;
// Available states
$states: completed, complete, sold, pending, awaiting_return, returned, credit_owed, paid, shipped, balance_due, backorder, checkout, cart, address,
delivery, payment, confirm, canceled, failed, ready, void, active, inactive, considered_risky, considered_safe, success, notice, error !default;
$states-bg-colors: $color-ste-completed-bg, $color-ste-complete-bg, $color-ste-sold-bg, $color-ste-pending-bg, $color-ste-awaiting_return-bg,
$color-ste-returned-bg, $color-ste-credit_owed-bg, $color-ste-paid-bg, $color-ste-shipped-bg, $color-ste-balance_due-bg, $color-ste-backorder-bg,
$color-ste-checkout-bg, $color-ste-cart-bg, $color-ste-address-bg, $color-ste-delivery-bg, $color-ste-payment-bg, $color-ste-confirm-bg,
$color-ste-canceled-bg, $color-ste-failed-bg, $color-ste-ready-bg, $color-ste-void-bg, $color-ste-active-bg, $color-ste-inactive-bg, $color-ste-considered_risky-bg,
$color-ste-considered_safe-bg, $color-ste-success-bg, $color-ste-notice-bg, $color-ste-error-bg !default;
$states-text-colors: $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-awaiting_return-text,
$color-ste-returned-text, $color-ste-credit_owed-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text,
$color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirm-text,
$color-ste-canceled-text, $color-ste-failed-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-active-text, $color-ste-inactive-text, $color-ste-considered_risky-text,
$color-ste-considered_safe-text, $color-ste-success-text, $color-ste-notice-text, $color-ste-error-text !default;
// Available actions
$actions: edit, clone, remove, void, capture, save, cancel, mail, failure !default;
$actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg, $color-action-failure-bg !default;
$actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd, $color-action-failure-brd !default;
// Sizes
//--------------------------------------------------------------
$body-font-size: 13px !default;
$h6-size: $body-font-size + 2 !default;
$h5-size: $h6-size + 2 !default;
$h4-size: $h5-size + 2 !default;
$h3-size: $h4-size + 2 !default;
$h2-size: $h3-size + 2 !default;
$h1-size: $h2-size + 2 !default;
$border-radius: 3px !default;
$font-weight-bold: 600 !default;
$font-weight-normal: 400 !default;
$width-sidebar: 200px !default;
$width-sidebar-flyout: 225px !default;
// Stacking
//--------------------------------------------------------------
$z-index-navbar-flyout: 1000;
// Characters
//--------------------------------------------------------------
$character-check: "\f00c";
$character-exclamation: "\f12a";