Mercurial > nebulaweb3
comparison default/assets/scss/vendors/bootstrap/_variables.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:1d038bc9b3d2 |
---|---|
1 // Variables | |
2 // | |
3 // Copy settings from this file into the provided `_custom.scss` to override | |
4 // the Bootstrap defaults without modifying key, versioned files. | |
5 // | |
6 // Variables should follow the `$component-state-property-size` formula for | |
7 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. | |
8 | |
9 // Table of Contents | |
10 // | |
11 // Color system | |
12 // Options | |
13 // Spacing | |
14 // Body | |
15 // Links | |
16 // Grid breakpoints | |
17 // Grid containers | |
18 // Grid columns | |
19 // Fonts | |
20 // Components | |
21 // Tables | |
22 // Buttons | |
23 // Forms | |
24 // Dropdowns | |
25 // Z-index master list | |
26 // Navs | |
27 // Navbar | |
28 // Pagination | |
29 // Jumbotron | |
30 // Form states and alerts | |
31 // Cards | |
32 // Tooltips | |
33 // Popovers | |
34 // Badges | |
35 // Modals | |
36 // Alerts | |
37 // Progress bars | |
38 // List group | |
39 // Image thumbnails | |
40 // Figures | |
41 // Breadcrumbs | |
42 // Carousel | |
43 // Close | |
44 // Code | |
45 | |
46 | |
47 // | |
48 // Color system | |
49 // | |
50 | |
51 $white: #fff !default; | |
52 $gray-100: #f8f9fa !default; | |
53 $gray-200: #e9ecef !default; | |
54 $gray-300: #dee2e6 !default; | |
55 $gray-400: #ced4da !default; | |
56 $gray-500: #adb5bd !default; | |
57 $gray-600: #868e96 !default; | |
58 $gray-700: #495057 !default; | |
59 $gray-800: #343a40 !default; | |
60 $gray-900: #212529 !default; | |
61 $black: #000 !default; | |
62 | |
63 $grays: ( | |
64 100: $gray-100, | |
65 200: $gray-200, | |
66 300: $gray-300, | |
67 400: $gray-400, | |
68 500: $gray-500, | |
69 600: $gray-600, | |
70 700: $gray-700, | |
71 800: $gray-800, | |
72 900: $gray-900 | |
73 ) !default; | |
74 | |
75 $blue: #007bff !default; | |
76 $indigo: #6610f2 !default; | |
77 $purple: #6f42c1 !default; | |
78 $pink: #e83e8c !default; | |
79 $red: #dc3545 !default; | |
80 $orange: #fd7e14 !default; | |
81 $yellow: #ffc107 !default; | |
82 $green: #28a745 !default; | |
83 $teal: #20c997 !default; | |
84 $cyan: #17a2b8 !default; | |
85 | |
86 $colors: ( | |
87 blue: $blue, | |
88 indigo: $indigo, | |
89 purple: $purple, | |
90 pink: $pink, | |
91 red: $red, | |
92 orange: $orange, | |
93 yellow: $yellow, | |
94 green: $green, | |
95 teal: $teal, | |
96 cyan: $cyan, | |
97 white: $white, | |
98 gray: $gray-600, | |
99 gray-dark: $gray-800 | |
100 ) !default; | |
101 | |
102 $theme-colors: ( | |
103 primary: $blue, | |
104 secondary: $gray-600, | |
105 success: $green, | |
106 info: $cyan, | |
107 warning: $yellow, | |
108 danger: $red, | |
109 light: $gray-100, | |
110 dark: $gray-800 | |
111 ) !default; | |
112 | |
113 // Set a specific jump point for requesting color jumps | |
114 $theme-color-interval: 8% !default; | |
115 | |
116 | |
117 // Options | |
118 // | |
119 // Quickly modify global styling by enabling or disabling optional features. | |
120 | |
121 $enable-rounded: true !default; | |
122 $enable-shadows: false !default; | |
123 $enable-gradients: false !default; | |
124 $enable-transitions: true !default; | |
125 $enable-hover-media-query: false !default; | |
126 $enable-grid-classes: true !default; | |
127 $enable-print-styles: true !default; | |
128 | |
129 | |
130 // Spacing | |
131 // | |
132 // Control the default styling of most Bootstrap elements by modifying these | |
133 // variables. Mostly focused on spacing. | |
134 // You can add more entries to the $spacers map, should you need more variation. | |
135 | |
136 $spacer: 1rem !default; | |
137 $spacers: ( | |
138 0: 0, | |
139 1: ($spacer * .25), | |
140 2: ($spacer * .5), | |
141 3: $spacer, | |
142 4: ($spacer * 1.5), | |
143 5: ($spacer * 3) | |
144 ) !default; | |
145 | |
146 // This variable affects the `.h-*` and `.w-*` classes. | |
147 $sizes: ( | |
148 25: 25%, | |
149 50: 50%, | |
150 75: 75%, | |
151 100: 100% | |
152 ) !default; | |
153 | |
154 // Body | |
155 // | |
156 // Settings for the `<body>` element. | |
157 | |
158 $body-bg: $white !default; | |
159 $body-color: $gray-900 !default; | |
160 | |
161 // Links | |
162 // | |
163 // Style anchor elements. | |
164 | |
165 $link-color: theme-color("primary") !default; | |
166 $link-decoration: none !default; | |
167 $link-hover-color: darken($link-color, 15%) !default; | |
168 $link-hover-decoration: underline !default; | |
169 | |
170 | |
171 // Grid breakpoints | |
172 // | |
173 // Define the minimum dimensions at which your layout will change, | |
174 // adapting to different screen sizes, for use in media queries. | |
175 | |
176 $grid-breakpoints: ( | |
177 xs: 0, | |
178 sm: 576px, | |
179 md: 768px, | |
180 lg: 992px, | |
181 xl: 1200px | |
182 ) !default; | |
183 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); | |
184 @include _assert-starts-at-zero($grid-breakpoints); | |
185 | |
186 | |
187 // Grid containers | |
188 // | |
189 // Define the maximum width of `.container` for different screen sizes. | |
190 | |
191 $container-max-widths: ( | |
192 sm: 540px, | |
193 md: 720px, | |
194 lg: 960px, | |
195 xl: 1140px | |
196 ) !default; | |
197 @include _assert-ascending($container-max-widths, "$container-max-widths"); | |
198 | |
199 | |
200 // Grid columns | |
201 // | |
202 // Set the number of columns and specify the width of the gutters. | |
203 | |
204 $grid-columns: 12 !default; | |
205 $grid-gutter-width: 30px !default; | |
206 | |
207 // Components | |
208 // | |
209 // Define common padding and border radius sizes and more. | |
210 | |
211 $line-height-lg: 1.5 !default; | |
212 $line-height-sm: 1.5 !default; | |
213 | |
214 $border-width: 1px !default; | |
215 | |
216 $border-radius: .25rem !default; | |
217 $border-radius-lg: .3rem !default; | |
218 $border-radius-sm: .2rem !default; | |
219 | |
220 $component-active-color: $white !default; | |
221 $component-active-bg: theme-color("primary") !default; | |
222 | |
223 $caret-width: .3em !default; | |
224 | |
225 $transition-base: all .2s ease-in-out !default; | |
226 $transition-fade: opacity .15s linear !default; | |
227 $transition-collapse: height .35s ease !default; | |
228 | |
229 | |
230 // Fonts | |
231 // | |
232 // Font, line-height, and color for body text, headings, and more. | |
233 | |
234 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; | |
235 $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; | |
236 $font-family-base: $font-family-sans-serif !default; | |
237 | |
238 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` | |
239 $font-size-lg: 1.25rem !default; | |
240 $font-size-sm: .875rem !default; | |
241 | |
242 $font-weight-normal: normal !default; | |
243 $font-weight-bold: bold !default; | |
244 | |
245 $font-weight-base: $font-weight-normal !default; | |
246 $line-height-base: 1.5 !default; | |
247 | |
248 $h1-font-size: 2.5rem !default; | |
249 $h2-font-size: 2rem !default; | |
250 $h3-font-size: 1.75rem !default; | |
251 $h4-font-size: 1.5rem !default; | |
252 $h5-font-size: 1.25rem !default; | |
253 $h6-font-size: 1rem !default; | |
254 | |
255 $headings-margin-bottom: ($spacer / 2) !default; | |
256 $headings-font-family: inherit !default; | |
257 $headings-font-weight: 500 !default; | |
258 $headings-line-height: 1.1 !default; | |
259 $headings-color: inherit !default; | |
260 | |
261 $display1-size: 6rem !default; | |
262 $display2-size: 5.5rem !default; | |
263 $display3-size: 4.5rem !default; | |
264 $display4-size: 3.5rem !default; | |
265 | |
266 $display1-weight: 300 !default; | |
267 $display2-weight: 300 !default; | |
268 $display3-weight: 300 !default; | |
269 $display4-weight: 300 !default; | |
270 $display-line-height: $headings-line-height !default; | |
271 | |
272 $lead-font-size: 1.25rem !default; | |
273 $lead-font-weight: 300 !default; | |
274 | |
275 $small-font-size: 80% !default; | |
276 | |
277 $text-muted: $gray-600 !default; | |
278 | |
279 $blockquote-small-color: $gray-600 !default; | |
280 $blockquote-font-size: ($font-size-base * 1.25) !default; | |
281 | |
282 $hr-border-color: rgba($black,.1) !default; | |
283 $hr-border-width: $border-width !default; | |
284 | |
285 $mark-padding: .2em !default; | |
286 | |
287 $dt-font-weight: $font-weight-bold !default; | |
288 | |
289 $kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; | |
290 $nested-kbd-font-weight: $font-weight-bold !default; | |
291 | |
292 $list-inline-padding: 5px !default; | |
293 | |
294 $mark-bg: #fcf8e3 !default; | |
295 | |
296 | |
297 // Tables | |
298 // | |
299 // Customizes the `.table` component with basic values, each used across all table variations. | |
300 | |
301 $table-cell-padding: .75rem !default; | |
302 $table-cell-padding-sm: .3rem !default; | |
303 | |
304 $table-bg: transparent !default; | |
305 $table-accent-bg: rgba($black,.05) !default; | |
306 $table-hover-bg: rgba($black,.075) !default; | |
307 $table-active-bg: $table-hover-bg !default; | |
308 | |
309 $table-border-width: $border-width !default; | |
310 $table-border-color: $gray-200 !default; | |
311 | |
312 $table-head-bg: $gray-200 !default; | |
313 $table-head-color: $gray-700 !default; | |
314 | |
315 $table-inverse-bg: $gray-900 !default; | |
316 $table-inverse-accent-bg: rgba($white, .05) !default; | |
317 $table-inverse-hover-bg: rgba($white, .075) !default; | |
318 $table-inverse-border-color: lighten($gray-900, 7.5%) !default; | |
319 $table-inverse-color: $body-bg !default; | |
320 | |
321 | |
322 // Buttons | |
323 // | |
324 // For each of Bootstrap's buttons, define text, background and border color. | |
325 | |
326 $input-btn-padding-y: .5rem !default; | |
327 $input-btn-padding-x: .75rem !default; | |
328 $input-btn-line-height: 1.25 !default; | |
329 | |
330 $input-btn-padding-y-sm: .25rem !default; | |
331 $input-btn-padding-x-sm: .5rem !default; | |
332 $input-btn-line-height-sm: 1.5 !default; | |
333 | |
334 $input-btn-padding-y-lg: .5rem !default; | |
335 $input-btn-padding-x-lg: 1rem !default; | |
336 $input-btn-line-height-lg: 1.5 !default; | |
337 | |
338 $btn-font-weight: $font-weight-normal !default; | |
339 $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; | |
340 $btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default; | |
341 $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; | |
342 | |
343 $btn-link-disabled-color: $gray-600 !default; | |
344 | |
345 $btn-block-spacing-y: .5rem !default; | |
346 | |
347 // Allows for customizing button radius independently from global border radius | |
348 $btn-border-radius: $border-radius !default; | |
349 $btn-border-radius-lg: $border-radius-lg !default; | |
350 $btn-border-radius-sm: $border-radius-sm !default; | |
351 | |
352 $btn-transition: all .15s ease-in-out !default; | |
353 | |
354 | |
355 // Forms | |
356 | |
357 $input-bg: $white !default; | |
358 $input-disabled-bg: $gray-200 !default; | |
359 | |
360 $input-color: $gray-700 !default; | |
361 $input-border-color: rgba($black,.15) !default; | |
362 $input-btn-border-width: $border-width !default; // For form controls and buttons | |
363 $input-box-shadow: inset 0 1px 1px rgba($black,.075) !default; | |
364 | |
365 $input-border-radius: $border-radius !default; | |
366 $input-border-radius-lg: $border-radius-lg !default; | |
367 $input-border-radius-sm: $border-radius-sm !default; | |
368 | |
369 $input-focus-bg: $input-bg !default; | |
370 $input-focus-border-color: lighten(theme-color("primary"), 25%) !default; | |
371 $input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; | |
372 $input-focus-color: $input-color !default; | |
373 | |
374 $input-placeholder-color: $gray-600 !default; | |
375 | |
376 $input-height-border: $input-btn-border-width * 2 !default; | |
377 | |
378 $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; | |
379 $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; | |
380 | |
381 $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; | |
382 $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; | |
383 | |
384 $input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; | |
385 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; | |
386 | |
387 $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; | |
388 | |
389 $form-text-margin-top: .25rem !default; | |
390 | |
391 $form-check-margin-bottom: .5rem !default; | |
392 $form-check-input-gutter: 1.25rem !default; | |
393 $form-check-input-margin-y: .25rem !default; | |
394 $form-check-input-margin-x: .25rem !default; | |
395 | |
396 $form-check-inline-margin-x: .75rem !default; | |
397 | |
398 $form-group-margin-bottom: 1rem !default; | |
399 | |
400 $input-group-addon-bg: $gray-200 !default; | |
401 $input-group-addon-border-color: $input-border-color !default; | |
402 | |
403 $custom-control-gutter: 1.5rem !default; | |
404 $custom-control-spacer-y: .25rem !default; | |
405 $custom-control-spacer-x: 1rem !default; | |
406 | |
407 $custom-control-indicator-size: 1rem !default; | |
408 $custom-control-indicator-bg: #ddd !default; | |
409 $custom-control-indicator-bg-size: 50% 50% !default; | |
410 $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; | |
411 | |
412 $custom-control-indicator-disabled-bg: $gray-200 !default; | |
413 $custom-control-description-disabled-color: $gray-600 !default; | |
414 | |
415 $custom-control-indicator-checked-color: $white !default; | |
416 $custom-control-indicator-checked-bg: theme-color("primary") !default; | |
417 $custom-control-indicator-checked-box-shadow: none !default; | |
418 | |
419 $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default; | |
420 | |
421 $custom-control-indicator-active-color: $white !default; | |
422 $custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; | |
423 $custom-control-indicator-active-box-shadow: none !default; | |
424 | |
425 $custom-checkbox-indicator-border-radius: $border-radius !default; | |
426 $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; | |
427 | |
428 $custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default; | |
429 $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; | |
430 $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; | |
431 $custom-checkbox-indicator-indeterminate-box-shadow: none !default; | |
432 | |
433 $custom-radio-indicator-border-radius: 50% !default; | |
434 $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; | |
435 | |
436 $custom-select-padding-y: .375rem !default; | |
437 $custom-select-padding-x: .75rem !default; | |
438 $custom-select-height: $input-height !default; | |
439 $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator | |
440 $custom-select-line-height: $input-btn-line-height !default; | |
441 $custom-select-color: $input-color !default; | |
442 $custom-select-disabled-color: $gray-600 !default; | |
443 $custom-select-bg: $white !default; | |
444 $custom-select-disabled-bg: $gray-200 !default; | |
445 $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions | |
446 $custom-select-indicator-color: #333 !default; | |
447 $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; | |
448 $custom-select-border-width: $input-btn-border-width !default; | |
449 $custom-select-border-color: $input-border-color !default; | |
450 $custom-select-border-radius: $border-radius !default; | |
451 | |
452 $custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default; | |
453 $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; | |
454 | |
455 $custom-select-font-size-sm: 75% !default; | |
456 $custom-select-height-sm: $input-height-sm !default; | |
457 | |
458 $custom-file-height: 2.5rem !default; | |
459 $custom-file-width: 14rem !default; | |
460 $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; | |
461 | |
462 $custom-file-padding-y: 1rem !default; | |
463 $custom-file-padding-x: .5rem !default; | |
464 $custom-file-line-height: 1.5 !default; | |
465 $custom-file-color: $gray-700 !default; | |
466 $custom-file-bg: $white !default; | |
467 $custom-file-border-width: $border-width !default; | |
468 $custom-file-border-color: $input-border-color !default; | |
469 $custom-file-border-radius: $border-radius !default; | |
470 $custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; | |
471 $custom-file-button-color: $custom-file-color !default; | |
472 $custom-file-button-bg: $gray-200 !default; | |
473 $custom-file-text: ( | |
474 placeholder: ( | |
475 en: "Choose file..." | |
476 ), | |
477 button-label: ( | |
478 en: "Browse" | |
479 ) | |
480 ) !default; | |
481 | |
482 | |
483 // Form validation | |
484 $form-feedback-valid-color: theme-color("success") !default; | |
485 $form-feedback-invalid-color: theme-color("danger") !default; | |
486 | |
487 | |
488 // Dropdowns | |
489 // | |
490 // Dropdown menu container and contents. | |
491 | |
492 $dropdown-min-width: 10rem !default; | |
493 $dropdown-padding-y: .5rem !default; | |
494 $dropdown-spacer: .125rem !default; | |
495 $dropdown-bg: $white !default; | |
496 $dropdown-border-color: rgba($black,.15) !default; | |
497 $dropdown-border-width: $border-width !default; | |
498 $dropdown-divider-bg: $gray-200 !default; | |
499 $dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; | |
500 | |
501 $dropdown-link-color: $gray-900 !default; | |
502 $dropdown-link-hover-color: darken($gray-900, 5%) !default; | |
503 $dropdown-link-hover-bg: $gray-100 !default; | |
504 | |
505 $dropdown-link-active-color: $component-active-color !default; | |
506 $dropdown-link-active-bg: $component-active-bg !default; | |
507 | |
508 $dropdown-link-disabled-color: $gray-600 !default; | |
509 | |
510 $dropdown-item-padding-y: .25rem !default; | |
511 $dropdown-item-padding-x: 1.5rem !default; | |
512 | |
513 $dropdown-header-color: $gray-600 !default; | |
514 | |
515 | |
516 // Z-index master list | |
517 // | |
518 // Warning: Avoid customizing these values. They're used for a bird's eye view | |
519 // of components dependent on the z-axis and are designed to all work together. | |
520 | |
521 $zindex-dropdown: 1000 !default; | |
522 $zindex-sticky: 1020 !default; | |
523 $zindex-fixed: 1030 !default; | |
524 $zindex-modal-backdrop: 1040 !default; | |
525 $zindex-modal: 1050 !default; | |
526 $zindex-popover: 1060 !default; | |
527 $zindex-tooltip: 1070 !default; | |
528 | |
529 // Navs | |
530 | |
531 $nav-link-padding-y: .5rem !default; | |
532 $nav-link-padding-x: 1rem !default; | |
533 $nav-link-disabled-color: $gray-600 !default; | |
534 | |
535 $nav-tabs-border-color: #ddd !default; | |
536 $nav-tabs-border-width: $border-width !default; | |
537 $nav-tabs-border-radius: $border-radius !default; | |
538 $nav-tabs-link-hover-border-color: $gray-200 !default; | |
539 $nav-tabs-link-active-color: $gray-700 !default; | |
540 $nav-tabs-link-active-bg: $body-bg !default; | |
541 $nav-tabs-link-active-border-color: #ddd !default; | |
542 | |
543 $nav-pills-border-radius: $border-radius !default; | |
544 $nav-pills-link-active-color: $component-active-color !default; | |
545 $nav-pills-link-active-bg: $component-active-bg !default; | |
546 | |
547 // Navbar | |
548 | |
549 $navbar-padding-y: ($spacer / 2) !default; | |
550 $navbar-padding-x: $spacer !default; | |
551 | |
552 $navbar-brand-font-size: $font-size-lg !default; | |
553 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link | |
554 $nav-link-height: $navbar-brand-font-size * $line-height-base !default; | |
555 $navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; | |
556 $navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; | |
557 | |
558 $navbar-toggler-padding-y: .25rem !default; | |
559 $navbar-toggler-padding-x: .75rem !default; | |
560 $navbar-toggler-font-size: $font-size-lg !default; | |
561 $navbar-toggler-border-radius: $btn-border-radius !default; | |
562 | |
563 $navbar-dark-color: rgba($white,.5) !default; | |
564 $navbar-dark-hover-color: rgba($white,.75) !default; | |
565 $navbar-dark-active-color: rgba($white,1) !default; | |
566 $navbar-dark-disabled-color: rgba($white,.25) !default; | |
567 $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; | |
568 $navbar-dark-toggler-border-color: rgba($white,.1) !default; | |
569 | |
570 $navbar-light-color: rgba($black,.5) !default; | |
571 $navbar-light-hover-color: rgba($black,.7) !default; | |
572 $navbar-light-active-color: rgba($black,.9) !default; | |
573 $navbar-light-disabled-color: rgba($black,.3) !default; | |
574 $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; | |
575 $navbar-light-toggler-border-color: rgba($black,.1) !default; | |
576 | |
577 // Pagination | |
578 | |
579 $pagination-padding-y: .5rem !default; | |
580 $pagination-padding-x: .75rem !default; | |
581 $pagination-padding-y-sm: .25rem !default; | |
582 $pagination-padding-x-sm: .5rem !default; | |
583 $pagination-padding-y-lg: .75rem !default; | |
584 $pagination-padding-x-lg: 1.5rem !default; | |
585 $pagination-line-height: 1.25 !default; | |
586 | |
587 $pagination-color: $link-color !default; | |
588 $pagination-bg: $white !default; | |
589 $pagination-border-width: $border-width !default; | |
590 $pagination-border-color: #ddd !default; | |
591 | |
592 $pagination-hover-color: $link-hover-color !default; | |
593 $pagination-hover-bg: $gray-200 !default; | |
594 $pagination-hover-border-color: #ddd !default; | |
595 | |
596 $pagination-active-color: $white !default; | |
597 $pagination-active-bg: theme-color("primary") !default; | |
598 $pagination-active-border-color: theme-color("primary") !default; | |
599 | |
600 $pagination-disabled-color: $gray-600 !default; | |
601 $pagination-disabled-bg: $white !default; | |
602 $pagination-disabled-border-color: #ddd !default; | |
603 | |
604 | |
605 // Jumbotron | |
606 | |
607 $jumbotron-padding: 2rem !default; | |
608 $jumbotron-bg: $gray-200 !default; | |
609 | |
610 | |
611 // Cards | |
612 | |
613 $card-spacer-y: .75rem !default; | |
614 $card-spacer-x: 1.25rem !default; | |
615 $card-border-width: 1px !default; | |
616 $card-border-radius: $border-radius !default; | |
617 $card-border-color: rgba($black,.125) !default; | |
618 $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; | |
619 $card-cap-bg: rgba($black, .03) !default; | |
620 $card-bg: $white !default; | |
621 | |
622 $card-img-overlay-padding: 1.25rem !default; | |
623 | |
624 $card-deck-margin: ($grid-gutter-width / 2) !default; | |
625 | |
626 $card-columns-count: 3 !default; | |
627 $card-columns-gap: 1.25rem !default; | |
628 $card-columns-margin: $card-spacer-y !default; | |
629 | |
630 | |
631 // Tooltips | |
632 | |
633 $tooltip-max-width: 200px !default; | |
634 $tooltip-color: $white !default; | |
635 $tooltip-bg: $black !default; | |
636 $tooltip-opacity: .9 !default; | |
637 $tooltip-padding-y: 3px !default; | |
638 $tooltip-padding-x: 8px !default; | |
639 $tooltip-margin: 0 !default; | |
640 | |
641 | |
642 $tooltip-arrow-width: 5px !default; | |
643 $tooltip-arrow-height: 5px !default; | |
644 $tooltip-arrow-color: $tooltip-bg !default; | |
645 | |
646 | |
647 // Popovers | |
648 | |
649 $popover-inner-padding: 1px !default; | |
650 $popover-bg: $white !default; | |
651 $popover-max-width: 276px !default; | |
652 $popover-border-width: $border-width !default; | |
653 $popover-border-color: rgba($black,.2) !default; | |
654 $popover-box-shadow: 0 5px 10px rgba($black,.2) !default; | |
655 | |
656 $popover-header-bg: darken($popover-bg, 3%) !default; | |
657 $popover-header-color: $headings-color !default; | |
658 $popover-header-padding-y: 8px !default; | |
659 $popover-header-padding-x: 14px !default; | |
660 | |
661 $popover-body-color: $body-color !default; | |
662 $popover-body-padding-y: 9px !default; | |
663 $popover-body-padding-x: 14px !default; | |
664 | |
665 $popover-arrow-width: 10px !default; | |
666 $popover-arrow-height: 5px !default; | |
667 $popover-arrow-color: $popover-bg !default; | |
668 | |
669 $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; | |
670 $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; | |
671 | |
672 | |
673 // Badges | |
674 | |
675 $badge-color: $white !default; | |
676 $badge-font-size: 75% !default; | |
677 $badge-font-weight: $font-weight-bold !default; | |
678 $badge-padding-y: .25em !default; | |
679 $badge-padding-x: .4em !default; | |
680 | |
681 $badge-pill-padding-x: .6em !default; | |
682 // Use a higher than normal value to ensure completely rounded edges when | |
683 // customizing padding or font-size on labels. | |
684 $badge-pill-border-radius: 10rem !default; | |
685 | |
686 | |
687 // Modals | |
688 | |
689 // Padding applied to the modal body | |
690 $modal-inner-padding: 15px !default; | |
691 | |
692 $modal-dialog-margin: 10px !default; | |
693 $modal-dialog-margin-y-sm-up: 30px !default; | |
694 | |
695 $modal-title-line-height: $line-height-base !default; | |
696 | |
697 $modal-content-bg: $white !default; | |
698 $modal-content-border-color: rgba($black,.2) !default; | |
699 $modal-content-border-width: $border-width !default; | |
700 $modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default; | |
701 $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default; | |
702 | |
703 $modal-backdrop-bg: $black !default; | |
704 $modal-backdrop-opacity: .5 !default; | |
705 $modal-header-border-color: $gray-200 !default; | |
706 $modal-footer-border-color: $modal-header-border-color !default; | |
707 $modal-header-border-width: $modal-content-border-width !default; | |
708 $modal-footer-border-width: $modal-header-border-width !default; | |
709 $modal-header-padding: 15px !default; | |
710 | |
711 $modal-lg: 800px !default; | |
712 $modal-md: 500px !default; | |
713 $modal-sm: 300px !default; | |
714 | |
715 $modal-transition: transform .3s ease-out !default; | |
716 | |
717 | |
718 // Alerts | |
719 // | |
720 // Define alert colors, border radius, and padding. | |
721 | |
722 $alert-padding-y: .75rem !default; | |
723 $alert-padding-x: 1.25rem !default; | |
724 $alert-margin-bottom: 1rem !default; | |
725 $alert-border-radius: $border-radius !default; | |
726 $alert-link-font-weight: $font-weight-bold !default; | |
727 $alert-border-width: $border-width !default; | |
728 | |
729 | |
730 // Progress bars | |
731 | |
732 $progress-height: 1rem !default; | |
733 $progress-font-size: .75rem !default; | |
734 $progress-bg: $gray-200 !default; | |
735 $progress-border-radius: $border-radius !default; | |
736 $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; | |
737 $progress-bar-color: $white !default; | |
738 $progress-bar-bg: theme-color("primary") !default; | |
739 $progress-bar-animation-timing: 1s linear infinite !default; | |
740 $progress-bar-transition: width .6s ease !default; | |
741 | |
742 // List group | |
743 | |
744 $list-group-bg: $white !default; | |
745 $list-group-border-color: rgba($black,.125) !default; | |
746 $list-group-border-width: $border-width !default; | |
747 $list-group-border-radius: $border-radius !default; | |
748 | |
749 $list-group-item-padding-y: .75rem !default; | |
750 $list-group-item-padding-x: 1.25rem !default; | |
751 | |
752 $list-group-hover-bg: $gray-100 !default; | |
753 $list-group-active-color: $component-active-color !default; | |
754 $list-group-active-bg: $component-active-bg !default; | |
755 $list-group-active-border-color: $list-group-active-bg !default; | |
756 | |
757 $list-group-disabled-color: $gray-600 !default; | |
758 $list-group-disabled-bg: $list-group-bg !default; | |
759 | |
760 $list-group-action-color: $gray-700 !default; | |
761 $list-group-action-hover-color: $list-group-action-color !default; | |
762 | |
763 $list-group-action-active-color: $body-color !default; | |
764 $list-group-action-active-bg: $gray-200 !default; | |
765 | |
766 | |
767 // Image thumbnails | |
768 | |
769 $thumbnail-padding: .25rem !default; | |
770 $thumbnail-bg: $body-bg !default; | |
771 $thumbnail-border-width: $border-width !default; | |
772 $thumbnail-border-color: #ddd !default; | |
773 $thumbnail-border-radius: $border-radius !default; | |
774 $thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default; | |
775 $thumbnail-transition: all .2s ease-in-out !default; | |
776 | |
777 | |
778 // Figures | |
779 | |
780 $figure-caption-font-size: 90% !default; | |
781 $figure-caption-color: $gray-600 !default; | |
782 | |
783 | |
784 // Breadcrumbs | |
785 | |
786 $breadcrumb-padding-y: .75rem !default; | |
787 $breadcrumb-padding-x: 1rem !default; | |
788 $breadcrumb-item-padding: .5rem !default; | |
789 | |
790 $breadcrumb-bg: $gray-200 !default; | |
791 $breadcrumb-divider-color: $gray-600 !default; | |
792 $breadcrumb-active-color: $gray-600 !default; | |
793 $breadcrumb-divider: "/" !default; | |
794 | |
795 | |
796 // Carousel | |
797 | |
798 $carousel-control-color: $white !default; | |
799 $carousel-control-width: 15% !default; | |
800 $carousel-control-opacity: .5 !default; | |
801 | |
802 $carousel-indicator-width: 30px !default; | |
803 $carousel-indicator-height: 3px !default; | |
804 $carousel-indicator-spacer: 3px !default; | |
805 $carousel-indicator-active-bg: $white !default; | |
806 | |
807 $carousel-caption-width: 70% !default; | |
808 $carousel-caption-color: $white !default; | |
809 | |
810 $carousel-control-icon-width: 20px !default; | |
811 | |
812 $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; | |
813 $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; | |
814 | |
815 $carousel-transition: transform .6s ease !default; | |
816 | |
817 | |
818 // Close | |
819 | |
820 $close-font-size: $font-size-base * 1.5 !default; | |
821 $close-font-weight: $font-weight-bold !default; | |
822 $close-color: $black !default; | |
823 $close-text-shadow: 0 1px 0 $white !default; | |
824 | |
825 // Code | |
826 | |
827 $code-font-size: 90% !default; | |
828 $code-padding-y: .2rem !default; | |
829 $code-padding-x: .4rem !default; | |
830 $code-color: #bd4147 !default; | |
831 $code-bg: $gray-100 !default; | |
832 | |
833 $kbd-color: $white !default; | |
834 $kbd-bg: $gray-900 !default; | |
835 | |
836 $pre-color: $gray-900 !default; | |
837 $pre-scrollable-max-height: 340px !default; |