| 16825 |
efrain |
1 |
// Light theme variables
|
|
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
|
5 |
// Bootstrap base colors
|
|
|
6 |
$white: #fff !default;
|
|
|
7 |
$gray-100: #f8f9fa !default;
|
|
|
8 |
$gray-200: #e9ecef !default;
|
|
|
9 |
$gray-300: #dee2e6 !default;
|
|
|
10 |
$gray-400: #cbd1db !default;
|
|
|
11 |
$gray-500: #aeb7c5 !default;
|
|
|
12 |
$gray-600: #7987a1 !default;
|
|
|
13 |
$gray-700: #41516c !default;
|
|
|
14 |
$gray-800: #212a3a !default;
|
|
|
15 |
$gray-900: #060c17 !default;
|
|
|
16 |
$black: #000 !default;
|
|
|
17 |
$text-muted: $gray-600 !default;
|
|
|
18 |
|
|
|
19 |
|
|
|
20 |
// Bootstrap custom colors
|
|
|
21 |
$blue: #0d6efd !default;
|
|
|
22 |
$indigo: #6610f2 !default;
|
|
|
23 |
$purple: #6f42c1 !default;
|
|
|
24 |
$pink: #d63384 !default;
|
|
|
25 |
$red: #dc3545 !default;
|
|
|
26 |
$orange: #fd7e14 !default;
|
|
|
27 |
$yellow: #ffc107 !default;
|
|
|
28 |
$green: #198754 !default;
|
|
|
29 |
$teal: #20c997 !default;
|
|
|
30 |
$cyan: #0dcaf0 !default;
|
|
|
31 |
|
|
|
32 |
|
|
|
33 |
|
|
|
34 |
// --- Bootstrap Theme Colors --- //
|
|
|
35 |
//
|
|
|
36 |
$primary: #6571ff !default;
|
|
|
37 |
$secondary: $gray-600 !default;
|
|
|
38 |
$success: #05a34a !default;
|
|
|
39 |
$info: #66d1d1 !default;
|
|
|
40 |
$warning: #fbbc06 !default;
|
|
|
41 |
$danger: #ff3366 !default;
|
|
|
42 |
$light: $gray-200 !default;
|
|
|
43 |
$dark: $gray-900 !default;
|
|
|
44 |
//
|
|
|
45 |
// --- Bootstrap Theme Colors --- //
|
|
|
46 |
|
|
|
47 |
|
|
|
48 |
|
|
|
49 |
// Social colors
|
|
|
50 |
$social-colors: (
|
|
|
51 |
"facebook": #3b5998,
|
|
|
52 |
"twitter": #1da1f2,
|
|
|
53 |
"google": #dc4e41,
|
|
|
54 |
"youtube": #f00,
|
|
|
55 |
"vimeo": #1ab7ea,
|
|
|
56 |
"dribbble": #ea4c89,
|
|
|
57 |
"github": #181717,
|
|
|
58 |
"instagram": #e4405f,
|
|
|
59 |
"pinterest": #bd081c,
|
|
|
60 |
"flickr": #0063dc,
|
|
|
61 |
"bitbucket": #0052cc,
|
|
|
62 |
"linkedin": #0077b5
|
|
|
63 |
) !default;
|
|
|
64 |
|
|
|
65 |
|
|
|
66 |
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
|
67 |
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
|
68 |
$min-contrast-ratio: 3 !default;
|
|
|
69 |
|
|
|
70 |
|
|
|
71 |
// Options
|
|
|
72 |
//
|
|
|
73 |
// Quickly modify global styling by enabling or disabling optional features.
|
|
|
74 |
$enable-gradients: false !default;
|
|
|
75 |
$enable-negative-margins: true !default;
|
|
|
76 |
|
|
|
77 |
|
|
|
78 |
// Spacing
|
|
|
79 |
//
|
|
|
80 |
// Control the default styling of most Bootstrap elements by modifying these
|
|
|
81 |
// variables. Mostly focused on spacing.
|
|
|
82 |
// You can add more entries to the $spacers map, should you need more variation.
|
|
|
83 |
$spacer: 1rem !default;
|
|
|
84 |
$spacers: (
|
|
|
85 |
0: 0,
|
|
|
86 |
1: $spacer * .25,
|
|
|
87 |
2: $spacer * .5,
|
|
|
88 |
3: $spacer,
|
|
|
89 |
4: $spacer * 1.5,
|
|
|
90 |
5: $spacer * 3,
|
|
|
91 |
6: ($spacer * 4.5),
|
|
|
92 |
7: ($spacer * 6)
|
|
|
93 |
);
|
|
|
94 |
|
|
|
95 |
|
|
|
96 |
// Position
|
|
|
97 |
//
|
|
|
98 |
// Define the edge positioning anchors of the position utilities.
|
|
|
99 |
$position-values: (
|
|
|
100 |
0: 0,
|
|
|
101 |
10: 10%,
|
|
|
102 |
20: 20%,
|
|
|
103 |
25: 25%,
|
|
|
104 |
30: 30%,
|
|
|
105 |
40: 40%,
|
|
|
106 |
50: 50%,
|
|
|
107 |
60: 60%,
|
|
|
108 |
70: 70%,
|
|
|
109 |
75: 75%,
|
|
|
110 |
80: 80%,
|
|
|
111 |
90: 90%,
|
|
|
112 |
100: 100%
|
|
|
113 |
) !default;
|
|
|
114 |
|
|
|
115 |
|
|
|
116 |
// Body
|
|
|
117 |
//
|
|
|
118 |
// Settings for the `<body>` element.
|
|
|
119 |
$body-bg: #f9fafb !default;
|
|
|
120 |
$body-color: $black !default;
|
|
|
121 |
|
|
|
122 |
|
|
|
123 |
// Links
|
|
|
124 |
//
|
|
|
125 |
// Style anchor elements.
|
|
|
126 |
$link-decoration: none !default;
|
|
|
127 |
// $link-hover-decoration: underline !default;
|
|
|
128 |
|
|
|
129 |
|
|
|
130 |
// Paragraphs
|
|
|
131 |
//
|
|
|
132 |
// Style p element.
|
|
|
133 |
$paragraph-margin-bottom: 0 !default;
|
|
|
134 |
|
|
|
135 |
|
|
|
136 |
// Grid columns
|
|
|
137 |
$grid-gutter-width: 1.5rem !default;
|
|
|
138 |
|
|
|
139 |
|
|
|
140 |
// Components
|
|
|
141 |
//
|
|
|
142 |
// Define common padding and border radius sizes and more.
|
|
|
143 |
|
|
|
144 |
// Border
|
|
|
145 |
$border-color: $gray-200 !default;
|
|
|
146 |
|
|
|
147 |
// Border Radiues
|
|
|
148 |
$border-radius: .25rem !default;
|
|
|
149 |
|
|
|
150 |
|
|
|
151 |
$action-transition-duration: 0.2s;
|
|
|
152 |
$action-transition-timing-function: ease;
|
|
|
153 |
|
|
|
154 |
|
|
|
155 |
// Typography
|
|
|
156 |
//
|
|
|
157 |
// Font, line-height, and color for body text, headings, and more.
|
|
|
158 |
|
|
|
159 |
// Font family
|
|
|
160 |
$font-family-sans-serif: "Roboto", Helvetica, sans-serif !default;
|
|
|
161 |
|
|
|
162 |
$font-size-base: 0.875rem !default; // 14px
|
|
|
163 |
$font-size-lg: 1rem !default; // 16px
|
|
|
164 |
$font-size-sm: 0.812rem !default; // 13px
|
|
|
165 |
|
|
|
166 |
$font-weight-lighter: lighter !default;
|
|
|
167 |
$font-weight-light: 300 !default;
|
|
|
168 |
$font-weight-normal: 400 !default;
|
|
|
169 |
$font-weight-bold: 500 !default;
|
|
|
170 |
$font-weight-bolder: 700 !default;
|
|
|
171 |
$font-weight-boldest: 900 !default;
|
|
|
172 |
|
|
|
173 |
$font-weight-base: $font-weight-normal !default;
|
|
|
174 |
|
|
|
175 |
|
|
|
176 |
// Heading sizes
|
|
|
177 |
$h1-font-size: 2.5rem !default;
|
|
|
178 |
$h2-font-size: 2rem !default;
|
|
|
179 |
$h3-font-size: 1.5rem !default;
|
|
|
180 |
$h4-font-size: 1.25rem !default;
|
|
|
181 |
$h5-font-size: 1rem !default;
|
|
|
182 |
$h6-font-size: $font-size-base !default;
|
|
|
183 |
|
|
|
184 |
$headings-margin-bottom: 0 !default;
|
|
|
185 |
$headings-font-weight: 500 !default;
|
|
|
186 |
|
|
|
187 |
|
|
|
188 |
$hr-opacity: .1 !default;
|
|
|
189 |
|
|
|
190 |
|
|
|
191 |
// Tables
|
|
|
192 |
//
|
|
|
193 |
// Customizes the `.table` component with basic values, each used across all table variations.
|
|
|
194 |
|
|
|
195 |
$table-cell-padding-y: .85rem !default;
|
|
|
196 |
$table-cell-padding-x: .85rem !default;
|
|
|
197 |
$table-cell-padding-y-sm: .55rem !default;
|
|
|
198 |
$table-cell-padding-x-sm: .55rem !default;
|
|
|
199 |
|
|
|
200 |
$table-striped-bg: $gray-200 !default;
|
|
|
201 |
$table-active-bg: $gray-300 !default;
|
|
|
202 |
$table-hover-bg: $gray-200 !default;
|
|
|
203 |
|
|
|
204 |
$table-group-separator-color: $border-color;
|
|
|
205 |
|
|
|
206 |
|
|
|
207 |
// Buttons + Forms
|
|
|
208 |
//
|
|
|
209 |
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
|
|
210 |
|
|
|
211 |
$input-btn-padding-y: .469rem !default;
|
|
|
212 |
$input-btn-padding-x: .8rem !default;
|
|
|
213 |
|
|
|
214 |
$input-btn-focus-box-shadow: none !default;
|
|
|
215 |
$input-btn-focus-width: 0 !default;
|
|
|
216 |
|
|
|
217 |
$input-placeholder-color: $gray-500 !default;
|
|
|
218 |
|
|
|
219 |
$input-btn-padding-y-xs: .313rem !default;
|
|
|
220 |
$input-btn-padding-x-xs: .8rem !default;
|
|
|
221 |
$input-btn-font-size-xs: .75rem !default;
|
|
|
222 |
|
|
|
223 |
$input-btn-padding-y-sm: .391rem !default;
|
|
|
224 |
$input-btn-padding-x-sm: .8rem !default;
|
|
|
225 |
$input-btn-font-size-sm: $font-size-sm !default;
|
|
|
226 |
|
|
|
227 |
$input-btn-padding-y-lg: .5rem !default;
|
|
|
228 |
$input-btn-padding-x-lg: .8rem !default;
|
|
|
229 |
$input-btn-font-size-lg: $font-size-lg !default;
|
|
|
230 |
|
|
|
231 |
|
|
|
232 |
// Buttons
|
|
|
233 |
//
|
|
|
234 |
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
|
235 |
|
|
|
236 |
$btn-font-weight: $font-weight-normal !default;
|
|
|
237 |
|
|
|
238 |
$btn-padding-y-xs: $input-btn-padding-y-xs !default;
|
|
|
239 |
$btn-padding-x-xs: $input-btn-padding-x-xs !default;
|
|
|
240 |
$btn-font-size-xs: $input-btn-font-size-xs !default;
|
|
|
241 |
|
|
|
242 |
// Allows for customizing button radius independently from global border radius
|
|
|
243 |
$btn-border-radius: $border-radius !default;
|
|
|
244 |
$btn-border-radius-sm: $border-radius !default;
|
|
|
245 |
$btn-border-radius-lg: $border-radius !default;
|
|
|
246 |
|
|
|
247 |
|
|
|
248 |
// Forms
|
|
|
249 |
|
|
|
250 |
$input-padding-y-xs: $input-btn-padding-y-xs !default;
|
|
|
251 |
$input-padding-x-xs: $input-btn-padding-x-xs !default;
|
|
|
252 |
$input-font-size-xs: $input-btn-font-size-xs !default;
|
|
|
253 |
|
|
|
254 |
$input-bg: $white !default;
|
|
|
255 |
$input-border-color: $border-color !default;
|
|
|
256 |
$input-focus-border-color: $gray-400 !default;
|
|
|
257 |
|
|
|
258 |
$input-border-radius: $btn-border-radius !default;
|
|
|
259 |
$input-border-radius-sm: $btn-border-radius-sm !default;
|
|
|
260 |
$input-border-radius-lg: $btn-border-radius-lg !default;
|
|
|
261 |
|
|
|
262 |
// form-check
|
|
|
263 |
$form-check-input-width: 1.3em !default;
|
|
|
264 |
$form-check-input-border-radius: .15em !default;
|
|
|
265 |
|
|
|
266 |
// Input-group
|
|
|
267 |
$input-group-addon-padding-x: .563rem !default;
|
|
|
268 |
$input-group-addon-bg: $gray-100 !default;
|
|
|
269 |
|
|
|
270 |
|
|
|
271 |
|
|
|
272 |
// Navs
|
|
|
273 |
$nav-tabs-link-bg: $gray-100; // custom variable
|
|
|
274 |
$nav-tabs-link-border-color: $border-color $border-color $gray-300; // custom variable
|
|
|
275 |
$nav-tabs-link-active-bg: $white;
|
|
|
276 |
|
|
|
277 |
|
|
|
278 |
// Dropdowns
|
|
|
279 |
$dropdown-border-color: #f2f4f9;
|
|
|
280 |
$dropdown-box-shadow: 0 5px 10px 0 rgba(183,192,206,.2);
|
|
|
281 |
|
|
|
282 |
|
|
|
283 |
// Pagination
|
|
|
284 |
$pagination-padding-y: .469rem !default;
|
|
|
285 |
$pagination-padding-x: 1rem !default;
|
|
|
286 |
$pagination-padding-y-sm: .391rem !default;
|
|
|
287 |
$pagination-padding-x-sm: .75rem !default;
|
|
|
288 |
$pagination-padding-y-lg: .5rem !default;
|
|
|
289 |
$pagination-padding-x-lg: 1.1rem !default;
|
|
|
290 |
$pagination-color: $primary;
|
|
|
291 |
$pagination-active-bg: $primary;
|
|
|
292 |
$pagination-active-border-color: $primary;
|
|
|
293 |
|
|
|
294 |
|
|
|
295 |
// Cards
|
|
|
296 |
$card-box-shadow: 0 0 10px 0 rgba(183,192,206,.2); // custom variable
|
|
|
297 |
$card-spacer-y: 1.5rem !default;
|
|
|
298 |
$card-spacer-x: 1.5rem !default;
|
|
|
299 |
$card-title-spacer-y: .875rem !default;
|
|
|
300 |
$card-border-color: #f2f4f9 !default;
|
|
|
301 |
$card-cap-padding-y: .875rem !default;
|
|
|
302 |
$card-cap-padding-x: $card-spacer-x !default;
|
|
|
303 |
$card-cap-bg: rgba($black, .01) !default;
|
|
|
304 |
|
|
|
305 |
|
|
|
306 |
// Accordion
|
|
|
307 |
$accordion-bg: $white !default;
|
|
|
308 |
$accordion-border-color: $border-color !default;
|
|
|
309 |
$accordion-icon-width: .875rem !default;
|
|
|
310 |
|
|
|
311 |
|
|
|
312 |
// Popovers
|
|
|
313 |
$popover-border-color: $border-color !default;
|
|
|
314 |
$popover-header-bg: $gray-200 !default;
|
|
|
315 |
|
|
|
316 |
|
|
|
317 |
|
|
|
318 |
// Badges
|
|
|
319 |
$badge-font-size: .8em !default;
|
|
|
320 |
$badge-font-weight: $font-weight-bold !default;
|
|
|
321 |
|
|
|
322 |
|
|
|
323 |
// Modals
|
|
|
324 |
$modal-content-border-color: $border-color !default;
|
|
|
325 |
$modal-fade-transform: scale(.8) !default;
|
|
|
326 |
$modal-transition: transform .4s ease !default;
|
|
|
327 |
// Modals
|
|
|
328 |
|
|
|
329 |
|
|
|
330 |
// List group
|
|
|
331 |
$list-group-item-padding-y: .75rem !default;
|
|
|
332 |
$list-group-item-padding-x: 1.25rem !default;
|
|
|
333 |
|
|
|
334 |
|
|
|
335 |
// Close
|
|
|
336 |
$btn-close-width: .8em !default;
|
|
|
337 |
$btn-close-color: $black !default;
|