_variables.scss 35.1 KB
Newer Older
David Haynes's avatar
David Haynes committed
1
// Masonstrap 4.0
Corey Sewell's avatar
Corey Sewell committed
2
// Variables
David Haynes's avatar
David Haynes committed
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
// -----------------------------------------------------
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code

@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Replace `$search` with `$replace` in `$string`
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@mixin _assert-starts-at-zero($map) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
  }
}


// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.


// Colors
//
// Grayscale and brand colors for use across Bootstrap.

// Start with assigning color names to specific hex values.
$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green:  #5cb85c !default;
$blue:   #0275d8 !default;
$teal:   #5bc0de !default;
$pink:   #ff5b77 !default;
$purple: #613d7c !default;

// Create grayscale
David Haynes's avatar
David Haynes committed
104
105
106
107
108
$gray-dark:                 darken(#87908F, 20%);
$gray:                      #87908F;
$gray-light:                lighten(#87908F, 20%);
$gray-lighter:              lighten(#87908F, 25%);;
$gray-lightest:             lighten(#87908F, 30%);;
David Haynes's avatar
David Haynes committed
109
110

// Reassign color vars to semantic color scheme
111
$brand-primary:             #006633;
David Haynes's avatar
David Haynes committed
112
113
114
115
116
$brand-secondary:           #FFCC33;
$brand-success:             $brand-primary;
$brand-info:                #007DC5;
$brand-warning:             #F7941E;
$brand-danger:              #AC1D37;
David Haynes's avatar
David Haynes committed
117

David Haynes's avatar
David Haynes committed
118
119
120
// Custom colors
$bg-classic:                #3c4042;

David Haynes's avatar
David Haynes committed
121
122
123
124
125
126

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-rounded:            true !default;
127
$enable-shadows:            true !default;
David Haynes's avatar
David Haynes committed
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
$enable-gradients:          false !default;
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;
$border-width: 1px !default;

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;

// Body
//
// Settings for the `<body>` element.

$body-bg:       #fff !default;
$body-color:    $gray-dark !default;
$inverse-bg:    $gray-dark !default;
$inverse-color: $gray-lighter !default;


// Links
//
// Style anchor elements.
Corey Sewell's avatar
Corey Sewell committed
193

David Haynes's avatar
David Haynes committed
194
195
196
197
$link-color:            $brand-primary !default;
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
Corey Sewell's avatar
Corey Sewell committed
198
199


David Haynes's avatar
David Haynes committed
200
201
202
203
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
Corey Sewell's avatar
Corey Sewell committed
204

David Haynes's avatar
David Haynes committed
205
206
207
208
209
210
211
212
213
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
Corey Sewell's avatar
Corey Sewell committed
214
215


David Haynes's avatar
David Haynes committed
216
// Grid containers
Corey Sewell's avatar
Corey Sewell committed
217
//
David Haynes's avatar
David Haynes committed
218
// Define the maximum width of `.container` for different screen sizes.
Corey Sewell's avatar
Corey Sewell committed
219

David Haynes's avatar
David Haynes committed
220
221
222
223
224
225
226
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
Corey Sewell's avatar
Corey Sewell committed
227
228


David Haynes's avatar
David Haynes committed
229
// Grid columns
Corey Sewell's avatar
Corey Sewell committed
230
//
David Haynes's avatar
David Haynes committed
231
232
233
234
235
236
237
238
239
240
241
242
243
// Set the number of columns and specify the width of the gutters.

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

// Fonts
Corey Sewell's avatar
Corey Sewell committed
244
//
David Haynes's avatar
David Haynes committed
245
// Font, line-height, and color for body text, headings, and more.
Corey Sewell's avatar
Corey Sewell committed
246

247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
//$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
  system-ui,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif !default;

David Haynes's avatar
David Haynes committed
263
264
265
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;
Corey Sewell's avatar
Corey Sewell committed
266

David Haynes's avatar
David Haynes committed
267
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
David Haynes's avatar
David Haynes committed
268
269
270
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
Corey Sewell's avatar
Corey Sewell committed
271

David Haynes's avatar
David Haynes committed
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;

$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   300;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;

$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
Corey Sewell's avatar
Corey Sewell committed
295

David Haynes's avatar
David Haynes committed
296
297
298
299
300
$display1-weight:     300 !default;
$display2-weight:     300 !default;
$display3-weight:     300 !default;
$display4-weight:     300 !default;
$display-line-height: $headings-line-height !default;
Corey Sewell's avatar
Corey Sewell committed
301

David Haynes's avatar
David Haynes committed
302
303
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Corey Sewell's avatar
Corey Sewell committed
304

David Haynes's avatar
David Haynes committed
305
$small-font-size: 80% !default;
Corey Sewell's avatar
Corey Sewell committed
306

David Haynes's avatar
David Haynes committed
307
$text-muted: $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
308

David Haynes's avatar
David Haynes committed
309
$abbr-border-color: $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
310

David Haynes's avatar
David Haynes committed
311
312
313
314
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lightest;
$blockquote-border-width: .25rem !default;
Corey Sewell's avatar
Corey Sewell committed
315

David Haynes's avatar
David Haynes committed
316
317
$hr-border-color: rgba($black,.1) !default;
$hr-border-width: $border-width !default;
Corey Sewell's avatar
Corey Sewell committed
318

David Haynes's avatar
David Haynes committed
319
$mark-padding: .2em !default;
Corey Sewell's avatar
Corey Sewell committed
320

David Haynes's avatar
David Haynes committed
321
$dt-font-weight: $font-weight-bold !default;
Corey Sewell's avatar
Corey Sewell committed
322

David Haynes's avatar
David Haynes committed
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
$kbd-box-shadow:         inset 0 -.1rem 0 rgba($black,.25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;

$list-inline-padding: 5px !default;


// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:         (4 / 3) !default;
$line-height-sm:         1.5 !default;

$border-radius:          0;
$border-radius-lg:       0;
$border-radius-sm:       0;

$component-active-color: $white !default;
$component-active-bg:    $brand-primary !default;

$caret-width:            .3em !default;

$transition-base:        all .2s ease-in-out !default;
$transition-fade:        opacity .15s linear !default;
$transition-collapse:    height .35s ease !default;


// Tables
Corey Sewell's avatar
Corey Sewell committed
351
//
David Haynes's avatar
David Haynes committed
352
// Customizes the `.table` component with basic values, each used across all table variations.
Corey Sewell's avatar
Corey Sewell committed
353

David Haynes's avatar
David Haynes committed
354
355
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Corey Sewell's avatar
Corey Sewell committed
356

357
$table-bg:                      transparent !default;
David Haynes's avatar
David Haynes committed
358
359
360
361
362
363

$table-inverse-bg:              $gray-dark !default;
$table-inverse-color:           $body-bg !default;

$table-bg-accent:               rgba($black,.05) !default;
$table-bg-hover:                rgba($black,.075) !default;
364
$table-bg-active:               $table-bg-hover !default;
Corey Sewell's avatar
Corey Sewell committed
365

David Haynes's avatar
David Haynes committed
366
367
$table-head-bg:                 $gray-lighter !default;
$table-head-color:              $gray !default;
Corey Sewell's avatar
Corey Sewell committed
368

David Haynes's avatar
David Haynes committed
369
370
$table-border-width:            $border-width !default;
$table-border-color:            $gray-lightest;
Corey Sewell's avatar
Corey Sewell committed
371
372


David Haynes's avatar
David Haynes committed
373
374
375
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
Corey Sewell's avatar
Corey Sewell committed
376

David Haynes's avatar
David Haynes committed
377
378
379
380
381
382
383
$btn-padding-x:                  1rem !default;
$btn-padding-y:                  .5rem !default;
$btn-line-height:                1.25 !default;
$btn-font-weight:                300;
$btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
Corey Sewell's avatar
Corey Sewell committed
384

David Haynes's avatar
David Haynes committed
385
$btn-primary-color:              $white !default;
386
$btn-primary-bg:                 $brand-primary !default;
David Haynes's avatar
David Haynes committed
387
$btn-primary-border:             darken($btn-primary-bg, 5%);
Corey Sewell's avatar
Corey Sewell committed
388

David Haynes's avatar
David Haynes committed
389
390
391
$btn-secondary-color:            $gray;
$btn-secondary-bg:               $gray-lightest;
$btn-secondary-border:           darken($btn-secondary-bg, 5%);
Corey Sewell's avatar
Corey Sewell committed
392

David Haynes's avatar
David Haynes committed
393
$btn-info-color:                 $white !default;
394
$btn-info-bg:                    $brand-info !default;
David Haynes's avatar
David Haynes committed
395
396
397
398
399
$btn-info-border:                darken($btn-info-bg, 5%);

$btn-success-color:              $white !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%);
Corey Sewell's avatar
Corey Sewell committed
400

David Haynes's avatar
David Haynes committed
401
$btn-warning-color:              $white !default;
402
$btn-warning-bg:                 $brand-warning !default;
David Haynes's avatar
David Haynes committed
403
$btn-warning-border:             darken($btn-warning-bg, 5%);
Corey Sewell's avatar
Corey Sewell committed
404

David Haynes's avatar
David Haynes committed
405
$btn-danger-color:               $white !default;
406
$btn-danger-bg:                  $brand-danger !default;
David Haynes's avatar
David Haynes committed
407
$btn-danger-border:              darken($btn-danger-bg, 5%);
Corey Sewell's avatar
Corey Sewell committed
408

409
$btn-link-disabled-color:        $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
410

David Haynes's avatar
David Haynes committed
411
412
413
414
415
416
417
418
419
$btn-padding-x-sm:               .5rem !default;
$btn-padding-y-sm:               .25rem !default;

$btn-padding-x-lg:               1.5rem !default;
$btn-padding-y-lg:               .75rem !default;

$btn-block-spacing-y:            .5rem !default;
$btn-toolbar-margin:             .5rem !default;

Thomas Park's avatar
Thomas Park committed
420
// Allows for customizing button radius independently from global border radius
David Haynes's avatar
David Haynes committed
421
422
423
$btn-border-radius:              $border-radius !default;
$btn-border-radius-lg:           $border-radius-lg !default;
$btn-border-radius-sm:           $border-radius-sm !default;
Thomas Park's avatar
Thomas Park committed
424

David Haynes's avatar
David Haynes committed
425
$btn-transition:                 all .2s ease-in-out !default;
Corey Sewell's avatar
Corey Sewell committed
426
427


David Haynes's avatar
David Haynes committed
428
429
430
431
432
433
434
435
// Forms

$input-padding-x:                .75rem !default;
$input-padding-y:                .5rem !default;
$input-line-height:              1.25 !default;

$input-bg:                       $white !default;
$input-bg-disabled:              $gray-lightest;
Corey Sewell's avatar
Corey Sewell committed
436

437
$input-color:                    $gray !default;
David Haynes's avatar
David Haynes committed
438
439
440
441
442
443
444
445
446
447
448
449
450
$input-border-color:             rgba($black,.15) !default;
$input-btn-border-width:         $border-width !default; // For form controls and buttons
$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;

$input-border-radius:            $border-radius !default;
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;

$input-bg-focus:                 $input-bg !default;
$input-border-focus:             lighten($brand-primary, 25%) !default;
$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6) !default;
$input-color-focus:              $input-color !default;

451
$input-color-placeholder:        $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
452

David Haynes's avatar
David Haynes committed
453
454
$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;
Corey Sewell's avatar
Corey Sewell committed
455

David Haynes's avatar
David Haynes committed
456
457
$input-padding-x-lg:             1.5rem !default;
$input-padding-y-lg:             .75rem !default;
Thomas Park's avatar
Thomas Park committed
458

David Haynes's avatar
David Haynes committed
459
460
461
$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
Corey Sewell's avatar
Corey Sewell committed
462

David Haynes's avatar
David Haynes committed
463
$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
Corey Sewell's avatar
Corey Sewell committed
464

David Haynes's avatar
David Haynes committed
465
466
$form-text-margin-top:     .25rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;
Corey Sewell's avatar
Corey Sewell committed
467

David Haynes's avatar
David Haynes committed
468
469
470
471
$form-check-margin-bottom:  .5rem !default;
$form-check-input-gutter:   1.25rem !default;
$form-check-input-margin-y: .25rem !default;
$form-check-input-margin-x: .25rem !default;
Corey Sewell's avatar
Corey Sewell committed
472

David Haynes's avatar
David Haynes committed
473
474
475
$form-check-inline-margin-x: .75rem !default;

$form-group-margin-bottom:       $spacer-y !default;
Corey Sewell's avatar
Corey Sewell committed
476

David Haynes's avatar
David Haynes committed
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
$input-group-addon-bg:           $gray-lightest;
$input-group-addon-border-color: $input-border-color !default;

$cursor-disabled:                not-allowed !default;

$custom-control-gutter:   1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;

$custom-control-indicator-size:       1rem !default;
$custom-control-indicator-margin-y:   (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
$custom-control-indicator-bg:         #ddd !default;
$custom-control-indicator-bg-size:    50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;

$custom-control-disabled-cursor:             $cursor-disabled !default;
$custom-control-disabled-indicator-bg:       $gray-lighter !default;
$custom-control-disabled-description-color:  $gray-light !default;

$custom-control-checked-indicator-color:      $white !default;
$custom-control-checked-indicator-bg:         $brand-primary !default;
$custom-control-checked-indicator-box-shadow: none !default;

$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;

$custom-control-active-indicator-color:      $white !default;
$custom-control-active-indicator-bg:         lighten($brand-primary, 35%) !default;
$custom-control-active-indicator-box-shadow: none !default;

$custom-checkbox-radius: $border-radius !default;
$custom-checkbox-checked-icon: 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-checked-indicator-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;

$custom-checkbox-indeterminate-bg: $brand-primary !default;
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
$custom-checkbox-indeterminate-icon: 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-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
$custom-radio-checked-icon: 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-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;

$custom-select-padding-x:          .75rem  !default;
$custom-select-padding-y:          .375rem !default;
$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height:         $input-line-height !default;
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      $gray-light !default;
$custom-select-bg:            $white !default;
$custom-select-disabled-bg:   $gray-lighter !default;
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: #333 !default;
$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;
$custom-select-border-width:  $input-btn-border-width !default;
$custom-select-border-color:  $input-border-color !default;
$custom-select-border-radius: $border-radius !default;

$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;

$custom-select-sm-padding-y:  .2rem !default;
$custom-select-sm-font-size:  75% !default;

$custom-file-height:           2.5rem !default;
$custom-file-width:            14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;

$custom-file-padding-x:     .5rem !default;
$custom-file-padding-y:     1rem !default;
$custom-file-line-height:   1.5 !default;
$custom-file-color:         $gray !default;
$custom-file-bg:            $white !default;
$custom-file-border-width:  $border-width !default;
$custom-file-border-color:  $input-border-color !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
$custom-file-button-color:  $custom-file-color !default;
$custom-file-button-bg:     $gray-lighter !default;
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;


// Form validation icons
$form-icon-success-color: $brand-success !default;
$form-icon-success: 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='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;

$form-icon-warning-color: $brand-warning !default;
$form-icon-warning: 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='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;

$form-icon-danger-color: $brand-danger !default;
$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;


// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-min-width:             10rem !default;
$dropdown-padding-y:             .5rem !default;
$dropdown-margin-top:            .125rem !default;
581
$dropdown-bg:                    #fff !default;
David Haynes's avatar
David Haynes committed
582
583
584
585
586
587
$dropdown-border-color:          rgba(0,0,0,.1);
$dropdown-border-width:          $border-width !default;
$dropdown-divider-bg:            rgba(0,0,0,.1);
$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;

$dropdown-link-color:            $gray-dark !default;
588
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
David Haynes's avatar
David Haynes committed
589
$dropdown-link-hover-bg:         $gray-lightest !default;
Corey Sewell's avatar
Corey Sewell committed
590

591
$dropdown-link-active-color:     $component-active-color !default;
David Haynes's avatar
David Haynes committed
592
$dropdown-link-active-bg:        $component-active-bg !default;
Corey Sewell's avatar
Corey Sewell committed
593

594
$dropdown-link-disabled-color:   $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
595

David Haynes's avatar
David Haynes committed
596
$dropdown-item-padding-x:        1.5rem !default;
Corey Sewell's avatar
Corey Sewell committed
597

David Haynes's avatar
David Haynes committed
598
$dropdown-header-color:          $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
599
600


David Haynes's avatar
David Haynes committed
601
// Z-index master list
Corey Sewell's avatar
Corey Sewell committed
602
603
604
605
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

David Haynes's avatar
David Haynes committed
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
$zindex-dropdown-backdrop:  990 !default;
$zindex-navbar:             1000 !default;
$zindex-dropdown:           1000 !default;
$zindex-fixed:              1030 !default;
$zindex-sticky:             1030 !default;
$zindex-modal-backdrop:     1040 !default;
$zindex-modal:              1050 !default;
$zindex-popover:            1060 !default;
$zindex-tooltip:            1070 !default;


// Navbar

$navbar-border-radius:              $border-radius !default;
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;

$navbar-brand-padding-y:            .25rem !default;

$navbar-toggler-padding-x:           .75rem !default;
$navbar-toggler-padding-y:           .25rem !default;
$navbar-toggler-font-size:           $font-size-lg !default;
$navbar-toggler-border-radius:       $btn-border-radius !default;

$navbar-inverse-color:                 rgba(255,255,255,.7);
$navbar-inverse-hover-color:           rgba(255,255,255,1);
$navbar-inverse-active-color:          rgba(255,255,255,1) !default;
$navbar-inverse-disabled-color:        rgba(255,255,255,.25) !default;
$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-inverse-toggler-border:        rgba($white,.1) !default;

$navbar-light-color:                rgba($black,.5) !default;
$navbar-light-hover-color:          rgba($black,.7) !default;
$navbar-light-active-color:         rgba($black,.9) !default;
$navbar-light-disabled-color:       rgba($black,.3) !default;
$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border:       rgba($black,.1) !default;

// Navs

$nav-item-margin:               .2rem !default;
$nav-item-inline-spacer:        1rem !default;
$nav-link-padding:              .5em 1em !default;
$nav-link-hover-bg:             $gray-lighter !default;
$nav-disabled-link-color:       $gray-lighter;

$nav-tabs-border-color:                       $dropdown-border-color;
$nav-tabs-border-width:                       $border-width !default;
$nav-tabs-border-radius:                      $border-radius !default;
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
$nav-tabs-active-link-hover-bg:               $body-bg !default;
$nav-tabs-active-link-hover-border-color:     $nav-tabs-border-color;
$nav-tabs-justified-link-border-color:        $nav-tabs-border-color;
$nav-tabs-justified-active-link-border-color: $body-bg !default;

$nav-pills-border-radius:     $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg:    $component-active-bg !default;


// Pagination

$pagination-padding-x:                .75rem !default;
$pagination-padding-y:                .5rem !default;
$pagination-padding-x-sm:             .5rem !default;
$pagination-padding-y-sm:             .25rem !default;
$pagination-padding-x-lg:             1.5rem !default;
$pagination-padding-y-lg:             .75rem !default;
$pagination-line-height:              1.25 !default;

$pagination-color:                     $gray-light;
$pagination-bg:                        $white !default;
$pagination-border-width:              $border-width !default;
$pagination-border-color:              $dropdown-border-color;
Corey Sewell's avatar
Corey Sewell committed
681

David Haynes's avatar
David Haynes committed
682
683
684
$pagination-hover-color:               $link-hover-color !default;
$pagination-hover-bg:                  $gray-lightest;
$pagination-hover-border:              #ddd !default;
Corey Sewell's avatar
Corey Sewell committed
685

David Haynes's avatar
David Haynes committed
686
687
688
$pagination-active-color:              $white !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $btn-primary-border;
Corey Sewell's avatar
Corey Sewell committed
689

David Haynes's avatar
David Haynes committed
690
691
692
$pagination-disabled-color:            $gray-lighter;
$pagination-disabled-bg:               $white !default;
$pagination-disabled-border:           #ddd !default;
Corey Sewell's avatar
Corey Sewell committed
693
694


David Haynes's avatar
David Haynes committed
695
// Jumbotron
Corey Sewell's avatar
Corey Sewell committed
696

David Haynes's avatar
David Haynes committed
697
698
$jumbotron-padding:              4rem;
$jumbotron-bg:                   $gray-lightest;
Corey Sewell's avatar
Corey Sewell committed
699
700


David Haynes's avatar
David Haynes committed
701
// Form states and alerts
Corey Sewell's avatar
Corey Sewell committed
702
//
David Haynes's avatar
David Haynes committed
703
// Define colors for form feedback states and, by default, alerts.
Corey Sewell's avatar
Corey Sewell committed
704

David Haynes's avatar
David Haynes committed
705
706
707
$state-success-text:             #fff;
$state-success-bg:               $brand-success;
$state-success-border:           darken($state-success-bg, 5%) !default;
Corey Sewell's avatar
Corey Sewell committed
708

David Haynes's avatar
David Haynes committed
709
710
711
$state-info-text:                #fff;
$state-info-bg:                  $brand-info;
$state-info-border:              darken($state-info-bg, 7%) !default;
Corey Sewell's avatar
Corey Sewell committed
712

David Haynes's avatar
David Haynes committed
713
714
715
716
$state-warning-text:             #fff;
$state-warning-bg:               $brand-warning;
$mark-bg:                        $state-warning-bg !default;
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Corey Sewell's avatar
Corey Sewell committed
717

David Haynes's avatar
David Haynes committed
718
719
720
$state-danger-text:              #fff;
$state-danger-bg:                $brand-danger;
$state-danger-border:            darken($state-danger-bg, 5%) !default;
Corey Sewell's avatar
Corey Sewell committed
721
722


David Haynes's avatar
David Haynes committed
723
// Cards
Corey Sewell's avatar
Corey Sewell committed
724

David Haynes's avatar
David Haynes committed
725
726
727
728
729
730
731
732
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
$card-border-width:        1px !default;
$card-border-radius:       $border-radius !default;
$card-border-color:        rgba($black,.125) !default;
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg:              $gray-lightest !default;
$card-bg:                  $white !default;
Corey Sewell's avatar
Corey Sewell committed
733

David Haynes's avatar
David Haynes committed
734
$card-link-hover-color:    $white !default;
Corey Sewell's avatar
Corey Sewell committed
735

David Haynes's avatar
David Haynes committed
736
$card-img-overlay-padding: 1.25rem !default;
Corey Sewell's avatar
Corey Sewell committed
737

David Haynes's avatar
David Haynes committed
738
$card-deck-margin:          ($grid-gutter-width-base / 2) !default;
Corey Sewell's avatar
Corey Sewell committed
739

David Haynes's avatar
David Haynes committed
740
741
742
$card-columns-count:        3 !default;
$card-columns-gap:          1.25rem !default;
$card-columns-margin:       $card-spacer-y !default;
Corey Sewell's avatar
Corey Sewell committed
743
744


David Haynes's avatar
David Haynes committed
745
// Tooltips
Corey Sewell's avatar
Corey Sewell committed
746

David Haynes's avatar
David Haynes committed
747
748
749
750
751
752
753
$tooltip-max-width:           200px !default;
$tooltip-color:               $white !default;
$tooltip-bg:                  $black !default;
$tooltip-opacity:             .9 !default;
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Corey Sewell's avatar
Corey Sewell committed
754

David Haynes's avatar
David Haynes committed
755
756
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Corey Sewell's avatar
Corey Sewell committed
757
758


David Haynes's avatar
David Haynes committed
759
// Popovers
Corey Sewell's avatar
Corey Sewell committed
760

David Haynes's avatar
David Haynes committed
761
762
763
764
765
766
$popover-inner-padding:               1px !default;
$popover-bg:                          $white !default;
$popover-max-width:                   276px !default;
$popover-border-width:                $border-width !default;
$popover-border-color:                rgba($black,.2) !default;
$popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
Corey Sewell's avatar
Corey Sewell committed
767

David Haynes's avatar
David Haynes committed
768
769
770
$popover-title-bg:                    darken($popover-bg, 3%) !default;
$popover-title-padding-x:             14px !default;
$popover-title-padding-y:             8px !default;
Corey Sewell's avatar
Corey Sewell committed
771

David Haynes's avatar
David Haynes committed
772
773
$popover-content-padding-x:           14px !default;
$popover-content-padding-y:           9px !default;
Corey Sewell's avatar
Corey Sewell committed
774

David Haynes's avatar
David Haynes committed
775
776
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Corey Sewell's avatar
Corey Sewell committed
777

David Haynes's avatar
David Haynes committed
778
779
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Corey Sewell's avatar
Corey Sewell committed
780
781


David Haynes's avatar
David Haynes committed
782
// Badges
Corey Sewell's avatar
Corey Sewell committed
783

David Haynes's avatar
David Haynes committed
784
785
786
787
788
789
$badge-default-bg:            $gray-light !default;
$badge-primary-bg:            $brand-primary !default;
$badge-success-bg:            $brand-success !default;
$badge-info-bg:               $brand-info !default;
$badge-warning-bg:            $brand-warning !default;
$badge-danger-bg:             $brand-danger !default;
Corey Sewell's avatar
Corey Sewell committed
790

David Haynes's avatar
David Haynes committed
791
792
793
794
795
796
$badge-color:                 $white !default;
$badge-link-hover-color:      $white !default;
$badge-font-size:             75% !default;
$badge-font-weight:           300;
$badge-padding-x:             1em;
$badge-padding-y:             .4em !default;
Corey Sewell's avatar
Corey Sewell committed
797

David Haynes's avatar
David Haynes committed
798
799
800
801
$badge-pill-padding-x:        .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius:    10rem !default;
Corey Sewell's avatar
Corey Sewell committed
802
803


David Haynes's avatar
David Haynes committed
804
// Modals
Corey Sewell's avatar
Corey Sewell committed
805

David Haynes's avatar
David Haynes committed
806
807
// Padding applied to the modal body
$modal-inner-padding:         15px !default;
Corey Sewell's avatar
Corey Sewell committed
808

David Haynes's avatar
David Haynes committed
809
810
$modal-dialog-margin:         10px !default;
$modal-dialog-sm-up-margin-y: 30px !default;
Corey Sewell's avatar
Corey Sewell committed
811

812
$modal-title-line-height:     $line-height-base !default;
Corey Sewell's avatar
Corey Sewell committed
813

David Haynes's avatar
David Haynes committed
814
815
816
817
818
$modal-content-bg:               $white !default;
$modal-content-border-color:     rgba($black,.2) !default;
$modal-content-border-width:     $border-width !default;
$modal-content-xs-box-shadow:    0 3px 9px rgba($black,.5) !default;
$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default;
Corey Sewell's avatar
Corey Sewell committed
819

David Haynes's avatar
David Haynes committed
820
$modal-backdrop-bg:           $black !default;
821
$modal-backdrop-opacity:      .5 !default;
David Haynes's avatar
David Haynes committed
822
$modal-header-border-color:   $gray-lighter !default;
823
$modal-footer-border-color:   $modal-header-border-color !default;
David Haynes's avatar
David Haynes committed
824
825
826
827
828
829
830
$modal-header-border-width:   $modal-content-border-width !default;
$modal-footer-border-width:   $modal-header-border-width !default;
$modal-header-padding:        15px !default;

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;
Corey Sewell's avatar
Corey Sewell committed
831

David Haynes's avatar
David Haynes committed
832
$modal-transition:            transform .3s ease-out !default;
Corey Sewell's avatar
Corey Sewell committed
833
834


David Haynes's avatar
David Haynes committed
835
// Alerts
Corey Sewell's avatar
Corey Sewell committed
836
//
David Haynes's avatar
David Haynes committed
837
// Define alert colors, border radius, and padding.
Corey Sewell's avatar
Corey Sewell committed
838

David Haynes's avatar
David Haynes committed
839
840
841
842
843
844
$alert-padding-x:             1.25rem !default;
$alert-padding-y:             .75rem !default;
$alert-margin-bottom:         $spacer-y !default;
$alert-border-radius:         $border-radius !default;
$alert-link-font-weight:      $font-weight-bold !default;
$alert-border-width:          $border-width !default;
Corey Sewell's avatar
Corey Sewell committed
845

David Haynes's avatar
David Haynes committed
846
847
$alert-success-bg:            $state-success-bg !default;
$alert-success-text:          $state-success-text !default;
848
$alert-success-border:        $state-success-border !default;
Corey Sewell's avatar
Corey Sewell committed
849

David Haynes's avatar
David Haynes committed
850
851
$alert-info-bg:               $state-info-bg !default;
$alert-info-text:             $state-info-text !default;
852
$alert-info-border:           $state-info-border !default;
Corey Sewell's avatar
Corey Sewell committed
853

David Haynes's avatar
David Haynes committed
854
855
$alert-warning-bg:            $state-warning-bg !default;
$alert-warning-text:          $state-warning-text !default;
856
$alert-warning-border:        $state-warning-border !default;
Corey Sewell's avatar
Corey Sewell committed
857

David Haynes's avatar
David Haynes committed
858
859
$alert-danger-bg:             $state-danger-bg !default;
$alert-danger-text:           $state-danger-text !default;
860
$alert-danger-border:         $state-danger-border !default;
Corey Sewell's avatar
Corey Sewell committed
861
862


David Haynes's avatar
David Haynes committed
863
// Progress bars
Corey Sewell's avatar
Corey Sewell committed
864

David Haynes's avatar
David Haynes committed
865
866
867
868
869
870
871
872
$progress-height:               1rem !default;
$progress-font-size:            .75rem !default;
$progress-bg:                   #f6f6f6;
$progress-border-radius:        $border-radius !default;
$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
$progress-bar-color:            $brand-primary;
$progress-bar-bg:               $brand-primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
Corey Sewell's avatar
Corey Sewell committed
873

David Haynes's avatar
David Haynes committed
874
// List group
Corey Sewell's avatar
Corey Sewell committed
875

David Haynes's avatar
David Haynes committed
876
877
878
879
880
$list-group-color:               $body-color !default;
$list-group-bg:                  $white !default;
$list-group-border-color:        rgba($black,.125) !default;
$list-group-border-width:        $border-width !default;
$list-group-border-radius:       $border-radius !default;
Corey Sewell's avatar
Corey Sewell committed
881

David Haynes's avatar
David Haynes committed
882
883
$list-group-item-padding-x:      1.25rem !default;
$list-group-item-padding-y:      .75rem !default;
Corey Sewell's avatar
Corey Sewell committed
884

David Haynes's avatar
David Haynes committed
885
886
887
888
889
$list-group-hover-bg:            $gray-lightest !default;
$list-group-active-color:        $component-active-color !default;
$list-group-active-bg:           $component-active-bg !default;
$list-group-active-border:       $list-group-active-bg !default;
$list-group-active-text-color:   lighten($list-group-active-bg, 50%) !default;
Corey Sewell's avatar
Corey Sewell committed
890

David Haynes's avatar
David Haynes committed
891
892
893
$list-group-disabled-color:      $gray-light !default;
$list-group-disabled-bg:         $gray-lightest;
$list-group-disabled-text-color: $list-group-disabled-color !default;
Corey Sewell's avatar
Corey Sewell committed
894

David Haynes's avatar
David Haynes committed
895
896
897
$list-group-link-color:          $gray !default;
$list-group-link-heading-color:  $gray-dark !default;
$list-group-link-hover-color:    $list-group-link-color !default;
Corey Sewell's avatar
Corey Sewell committed
898

David Haynes's avatar
David Haynes committed
899
900
$list-group-link-active-color:   $list-group-color !default;
$list-group-link-active-bg:      $gray-lighter !default;
Corey Sewell's avatar
Corey Sewell committed
901
902


David Haynes's avatar
David Haynes committed
903
// Image thumbnails
Corey Sewell's avatar
Corey Sewell committed
904

David Haynes's avatar
David Haynes committed
905
$thumbnail-padding:           .25rem !default;
906
$thumbnail-bg:                $body-bg !default;
David Haynes's avatar
David Haynes committed
907
908
909
910
911
$thumbnail-border-width:      $border-width !default;
$thumbnail-border-color:      #ddd !default;
$thumbnail-border-radius:     $border-radius !default;
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
$thumbnail-transition:        all .2s ease-in-out !default;
Corey Sewell's avatar
Corey Sewell committed
912
913


David Haynes's avatar
David Haynes committed
914
// Figures
Corey Sewell's avatar
Corey Sewell committed
915

David Haynes's avatar
David Haynes committed
916
917
$figure-caption-font-size: 90% !default;
$figure-caption-color:     $gray-light !default;
Corey Sewell's avatar
Corey Sewell committed
918
919


David Haynes's avatar
David Haynes committed
920
// Breadcrumbs
Corey Sewell's avatar
Corey Sewell committed
921

David Haynes's avatar
David Haynes committed
922
923
924
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Corey Sewell's avatar
Corey Sewell committed
925

David Haynes's avatar
David Haynes committed
926
927
928
929
$breadcrumb-bg:                 $gray-lightest;
$breadcrumb-divider-color:      $gray-light !default;
$breadcrumb-active-color:       $gray-light !default;
$breadcrumb-divider:            "/" !default;
Corey Sewell's avatar
Corey Sewell committed
930
931


David Haynes's avatar
David Haynes committed
932
// Carousel
Corey Sewell's avatar
Corey Sewell committed
933

David Haynes's avatar
David Haynes committed
934
935
936
$carousel-control-color:                      $white !default;
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
Corey Sewell's avatar
Corey Sewell committed
937

David Haynes's avatar
David Haynes committed
938
939
940
941
$carousel-indicator-width:                    30px !default;
$carousel-indicator-height:                   3px !default;
$carousel-indicator-spacer:                   3px !default;
$carousel-indicator-active-bg:                $white !default;
Corey Sewell's avatar
Corey Sewell committed
942

David Haynes's avatar
David Haynes committed
943
944
$carousel-caption-width:                      70% !default;
$carousel-caption-color:                      $white !default;
Corey Sewell's avatar
Corey Sewell committed
945

David Haynes's avatar
David Haynes committed
946
$carousel-control-icon-width:                 20px !default;
Corey Sewell's avatar
Corey Sewell committed
947

David Haynes's avatar
David Haynes committed
948
949
$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;
$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;
Corey Sewell's avatar
Corey Sewell committed
950

David Haynes's avatar
David Haynes committed
951
$carousel-transition:           transform .6s ease-in-out !default;
Corey Sewell's avatar
Corey Sewell committed
952
953


David Haynes's avatar
David Haynes committed
954
// Close
Corey Sewell's avatar
Corey Sewell committed
955

David Haynes's avatar
David Haynes committed
956
957
958
959
$close-font-size:             $font-size-base * 1.5 !default;
$close-font-weight:           $font-weight-bold !default;
$close-color:                 $gray;
$close-text-shadow:           none;
Corey Sewell's avatar
Corey Sewell committed
960
961


David Haynes's avatar
David Haynes committed
962
// Code
Corey Sewell's avatar
Corey Sewell committed
963

David Haynes's avatar
David Haynes committed
964
965
966
967
968
$code-font-size:              90% !default;
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
$code-color:                  #bd4147 !default;
$code-bg:                     $gray-lightest !default;
Corey Sewell's avatar
Corey Sewell committed
969

David Haynes's avatar
David Haynes committed
970
971
$kbd-color:                   $white !default;
$kbd-bg:                      $gray-dark !default;
Corey Sewell's avatar
Corey Sewell committed
972

David Haynes's avatar
David Haynes committed
973
$pre-bg:                      $gray-lightest !default;
974
975
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
David Haynes's avatar
David Haynes committed
976
$pre-scrollable-max-height:   340px !default;