_variables.scss 29.9 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
// Variables
2
//
3
4
5
6
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.


Chris Bell's avatar
Chris Bell committed
7
// Table of Contents
8
9
10
11
12
13
14
15
16
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
Mark Otto's avatar
Mark Otto committed
17
18
// Fonts
// Components
Mark Otto's avatar
Mark Otto committed
19

20
21
22
23
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
24
25
26
27
28
    @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 {
29
30
31
32
33
34
35
      @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;
  }
}

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

Mark Otto's avatar
Mark Otto committed
40

41
// Colors
Mark Otto's avatar
Mark Otto committed
42
//
43
// Grayscale and brand colors for use across Bootstrap.
Mark Otto's avatar
Mark Otto committed
44

45
46
47
48
49
$gray-dark:                 #373a3c !default;
$gray:                      #55595c !default;
$gray-light:                #818a91 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
50

51
52
53
54
55
$brand-primary:             #0275d8 !default;
$brand-success:             #5cb85c !default;
$brand-info:                #5bc0de !default;
$brand-warning:             #f0ad4e !default;
$brand-danger:              #d9534f !default;
56
$brand-inverse:             $gray-dark !default;
Mark Otto's avatar
Mark Otto committed
57
58


59
// Options
Mark Otto's avatar
Mark Otto committed
60
//
61
62
63
64
65
66
67
68
// Quickly modify global styling by enabling or disabling optional features.

$enable-flex:               false !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;
$enable-hover-media-query:  false !default;
69
$enable-grid-classes:       true !default;
70
$enable-print-styles:       true !default;
71
72
73
74
75
76


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

Mark Otto's avatar
spacing    
Mark Otto committed
79
80
81
$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
82
83
$spacers: (
  0: (
Mark Otto's avatar
spacing    
Mark Otto committed
84
85
    x: 0,
    y: 0
86
87
  ),
  1: (
Mark Otto's avatar
spacing    
Mark Otto committed
88
89
    x: $spacer-x,
    y: $spacer-y
90
91
  ),
  2: (
Mark Otto's avatar
spacing    
Mark Otto committed
92
93
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
94
95
  ),
  3: (
Mark Otto's avatar
spacing    
Mark Otto committed
96
97
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
98
99
  )
) !default;
Mark Otto's avatar
spacing    
Mark Otto committed
100
$border-width: 1px !default;
101
102
103
104
105


// Body
//
// Settings for the `<body>` element.
Mark Otto's avatar
Mark Otto committed
106

Mark Otto's avatar
Mark Otto committed
107
108
$body-bg:    #fff !default;
$body-color: $gray-dark !default;
109
110
111
112
113


// Links
//
// Style anchor elements.
Mark Otto's avatar
Mark Otto committed
114

Mark Otto's avatar
Mark Otto committed
115
116
117
118
$link-color:            $brand-primary !default;
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
Mark Otto's avatar
Mark Otto committed
119
120


121
// Grid breakpoints
Mark Otto's avatar
Mark Otto committed
122
//
123
// Define the minimum dimensions at which your layout will change,
124
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
Mark Otto committed
125

126
127
$grid-breakpoints: (
  xs: 0,
128
129
130
131
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
132
) !default;
133
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
Mark Otto's avatar
Mark Otto committed
134

Mark Otto's avatar
Mark Otto committed
135

136
// Grid containers
Mark Otto's avatar
Mark Otto committed
137
//
138
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
Mark Otto committed
139

140
$container-max-widths: (
141
142
143
144
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
145
) !default;
146
@include _assert-ascending($container-max-widths, "$container-max-widths");
147
148
149
150
151
152


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

Mark Otto's avatar
Mark Otto committed
153
$grid-columns:      12 !default;
154
$grid-gutter-width: 30px !default;
Mark Otto's avatar
Mark Otto committed
155

156

157
// Typography
Mark Otto's avatar
Mark Otto committed
158
//
159
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
Mark Otto committed
160

161
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
Mark Otto's avatar
Mark Otto committed
162
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
163
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
Mark Otto committed
164
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
Mark Otto committed
165

166
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
Mark Otto's avatar
Mark Otto committed
167
$font-size-root: 16px !default;
168

Mark Otto's avatar
Mark Otto committed
169
170
171
172
$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
173

Mark Otto's avatar
Mark Otto committed
174
175
$line-height-base: 1.5 !default;

Mark Otto's avatar
Mark Otto committed
176
177
178
179
180
181
$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;
Mark Otto's avatar
Mark Otto committed
182

Mark Otto's avatar
Mark Otto committed
183
184
185
186
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
187

Mark Otto's avatar
Mark Otto committed
188
189
190
191
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
192

Mark Otto's avatar
Mark Otto committed
193
194
195
196
197
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   500 !default;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;
Mark Otto's avatar
Mark Otto committed
198

Mark Otto's avatar
Mark Otto committed
199
200
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
Mark Otto committed
201

Chris Rebert's avatar
Chris Rebert committed
202
203
$small-font-size: 80% !default;

Mark Otto's avatar
Mark Otto committed
204
$text-muted: $gray-light !default;
Mark Otto's avatar
Mark Otto committed
205

Mark Otto's avatar
Mark Otto committed
206
$abbr-border-color: $gray-light !default;
Mark Otto's avatar
Mark Otto committed
207

Mark Otto's avatar
Mark Otto committed
208
209
210
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
211
$blockquote-border-width: .25rem !default;
Mark Otto's avatar
Mark Otto committed
212

Mark Otto's avatar
Mark Otto committed
213
214
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
215

Chris Rebert's avatar
Chris Rebert committed
216
217
$mark-padding: .2em !default;

Mark Otto's avatar
Mark Otto committed
218
$dt-font-weight: bold !default;
219

220
$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
Mark Otto's avatar
Mark Otto committed
221
$nested-kbd-font-weight: bold !default;
222

Mark Otto's avatar
Mark Otto committed
223
$list-inline-padding: 5px !default;
224

Mark Otto's avatar
Mark Otto committed
225

226
// Components
Mark Otto's avatar
Mark Otto committed
227
//
Mark Otto's avatar
Mark Otto committed
228
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Mark Otto committed
229

XhmikosR's avatar
XhmikosR committed
230
$line-height-lg:         (4 / 3) !default;
231
$line-height-sm:         1.5 !default;
Mark Otto's avatar
Mark Otto committed
232

233
$border-radius:          .25rem !default;
234
235
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;
Mark Otto's avatar
Mark Otto committed
236

237
238
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
239

240
$caret-width:            .3em !default;
241
$caret-width-lg:         $caret-width !default;
Mark Otto's avatar
Mark Otto committed
242
243


244
// Tables
Mark Otto's avatar
Mark Otto committed
245
//
246
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
Mark Otto committed
247

248
249
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Mark Otto's avatar
Mark Otto committed
250

251
$table-bg:                      transparent !default;
252
253
$table-bg-accent:               rgba(0,0,0,.05) !default;
$table-bg-hover:                rgba(0,0,0,.075) !default;
254
$table-bg-active:               $table-bg-hover !default;
Mark Otto's avatar
Mark Otto committed
255

256
$table-border-width:            $border-width !default;
257
$table-border-color:            $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
258
259


260
// Buttons
Mark Otto's avatar
Mark Otto committed
261
//
262
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
Mark Otto committed
263

264
$btn-padding-x:                  1rem !default;
265
266
$btn-padding-y:                  .5rem !default;
$btn-line-height:                1.25 !default;
267
$btn-font-weight:                normal !default;
268
$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
269
$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
Mark Otto's avatar
Mark Otto committed
270

271
272
$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
273
$btn-primary-border:             $btn-primary-bg !default;
Mark Otto's avatar
Mark Otto committed
274

275
276
$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
277
$btn-secondary-border:           #ccc !default;
Mark Otto's avatar
Mark Otto committed
278

279
280
$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
281
$btn-info-border:                $btn-info-bg !default;
Mark Otto's avatar
Mark Otto committed
282

283
284
$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
285
$btn-success-border:             $btn-success-bg !default;
Mark Otto's avatar
Mark Otto committed
286

287
288
$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
289
$btn-warning-border:             $btn-warning-bg !default;
Mark Otto's avatar
Mark Otto committed
290

291
292
$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
293
$btn-danger-border:              $btn-danger-bg !default;
Mark Otto's avatar
Mark Otto committed
294

295
$btn-link-disabled-color:        $gray-light !default;
Mark Otto's avatar
Mark Otto committed
296

297
$btn-padding-x-sm:               .5rem !default;
298
$btn-padding-y-sm:               .25rem !default;
299

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

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

Mark Otto's avatar
Mark Otto committed
306
// Allows for customizing button radius independently from global border radius
307
308
309
$btn-border-radius:              $border-radius !default;
$btn-border-radius-lg:           $border-radius-lg !default;
$btn-border-radius-sm:           $border-radius-sm !default;
Mark Otto's avatar
Mark Otto committed
310

Mark Otto's avatar
Mark Otto committed
311

312
// Forms
Mark Otto's avatar
Mark Otto committed
313

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

318
319
$input-bg:                       #fff !default;
$input-bg-disabled:              $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
320

321
$input-color:                    $gray !default;
322
$input-border-color:             rgba(0,0,0,.15) !default;
323
$input-btn-border-width:         $border-width !default; // For form controls and buttons
Mark Otto's avatar
Mark Otto committed
324
$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
325

326
$input-border-radius:            $border-radius !default;
327
328
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;
Mark Otto's avatar
Mark Otto committed
329

330
$input-bg-focus:                 $input-bg !default;
331
$input-border-focus:             #66afe9 !default;
332
333
$input-box-shadow-focus:         $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default;
$input-color-focus:              $input-color !default;
Mark Otto's avatar
Mark Otto committed
334

335
$input-color-placeholder:        #999 !default;
Mark Otto's avatar
Mark Otto committed
336

337
338
$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;
339

340
$input-padding-x-lg:             1.5rem !default;
341
342
$input-padding-y-lg:             .75rem !default;

Mark Otto's avatar
Mark Otto committed
343
$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
344
345
$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;
Mark Otto's avatar
Mark Otto committed
346

Mark Otto's avatar
Mark Otto committed
347
$form-group-margin-bottom:       $spacer-y !default;
Mark Otto's avatar
Mark Otto committed
348

349
$input-group-addon-bg:           $gray-lighter !default;
350
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
Mark Otto committed
351

352
$cursor-disabled:                not-allowed !default;
Mark Otto's avatar
Mark Otto committed
353

354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
$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-bg:         #ddd !default;
$custom-control-indicator-bg-size:    50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;

$custom-control-disabled-cursor:             $cursor-disabled !default;
$custom-control-disabled-indicator-bg:       #eee !default;
$custom-control-disabled-description-color:  #767676 !default;

$custom-control-checked-indicator-color:      #fff !default;
$custom-control-checked-indicator-bg:         #0074d9 !default;
$custom-control-checked-indicator-box-shadow: none !default;

$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;

$custom-control-active-indicator-color:      #fff !default;
$custom-control-active-indicator-bg:         #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !default;

$custom-checkbox-radius: $border-radius !default;
378
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' 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") !default;
379
$custom-checkbox-indeterminate-bg: #0074d9 !default;
380
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
381
382
383
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
384
$custom-radio-checked-icon: 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='%23fff'/%3E%3C/svg%3E") !default;
385
386
387
388

$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
389
390
$custom-select-color:          $input-color !default;
$custom-select-disabled-color: $gray-light !default;
391
$custom-select-bg:            #fff !default;
392
$custom-select-disabled-bg:   $gray-lighter !default;
393
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
394
$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
395
396
397
398
399
$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: #51a7e8 !default;
Mark Otto's avatar
linter    
Mark Otto committed
400
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
401
402
403

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

405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
$custom-file-height:           2.5rem !default;
$custom-file-width:            14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;

$custom-file-padding-x:     .5rem !default;
$custom-file-padding-y:     1rem !default;
$custom-file-line-height:   1.5 !default;
$custom-file-color:         #555 !default;
$custom-file-bg:            #fff !default;
$custom-file-border-width:  $border-width !default;
$custom-file-border-color:  #ddd !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
$custom-file-button-color:  $custom-file-color !default;
$custom-file-button-bg:     #eee !default;
420
421
422
423
424
425
426
427
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
428
429


430
// Form validation icons
431
432
433
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' 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") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' 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") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' 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") !default;
434

Mark Otto's avatar
Mark Otto committed
435

436
// Dropdowns
Mark Otto's avatar
Mark Otto committed
437
//
438
// Dropdown menu container and contents.
Mark Otto's avatar
Mark Otto committed
439

Mark Otto's avatar
Mark Otto committed
440
441
442
$dropdown-min-width:             10rem !default;
$dropdown-padding-y:             .5rem !default;
$dropdown-margin-top:            .125rem !default;
443
$dropdown-bg:                    #fff !default;
444
$dropdown-border-color:          rgba(0,0,0,.15) !default;
445
$dropdown-border-width:          $border-width !default;
446
$dropdown-divider-bg:            #e5e5e5 !default;
Mark Otto's avatar
Mark Otto committed
447
$dropdown-box-shadow:            0 .5rem 1rem rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
448

449
450
451
$dropdown-link-color:            $gray-dark !default;
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg:         #f5f5f5 !default;
Mark Otto's avatar
Mark Otto committed
452

453
454
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
Mark Otto committed
455

456
$dropdown-link-disabled-color:   $gray-light !default;
Mark Otto's avatar
Mark Otto committed
457

Mark Otto's avatar
Mark Otto committed
458
$dropdown-item-padding-x:        1.5rem !default;
459

460
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
Mark Otto committed
461
462


463
// Z-index master list
Mark Otto's avatar
Mark Otto committed
464
465
466
467
//
// 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.

468
$zindex-dropdown-backdrop:  990 !default;
469
470
471
472
473
$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
$zindex-navbar-fixed:      1030 !default;
Mark Otto's avatar
Mark Otto committed
474
$zindex-navbar-sticky:     1030 !default;
Mark Otto's avatar
Mark Otto committed
475
476
$zindex-modal-bg:          1040 !default;
$zindex-modal:             1050 !default;
Mark Otto's avatar
Mark Otto committed
477
478


479
// Navbar
Mark Otto's avatar
Mark Otto committed
480

481
$navbar-border-radius:              $border-radius !default;
482
483
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
484
$navbar-brand-padding-y:            .25rem !default;
485

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

492
493
494
495
$navbar-light-color:                rgba(0,0,0,.3) !default;
$navbar-light-hover-color:          rgba(0,0,0,.6) !default;
$navbar-light-active-color:         rgba(0,0,0,.8) !default;
$navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
496
$navbar-light-toggler-bg: 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") !default;
Mark Otto's avatar
Mark Otto committed
497
498


499
// Navs
Mark Otto's avatar
Mark Otto committed
500

Mark Otto's avatar
Mark Otto committed
501
502
503
504
505
506
507
508
509
510
$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-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg:    transparent !default;

$nav-tabs-border-color:                       #ddd !default;
$nav-tabs-border-width:                       $border-width !default;
511
$nav-tabs-border-radius:                      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
512
513
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
514
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
515
516
517
518
$nav-tabs-active-link-hover-border-color:     #ddd !default;
$nav-tabs-justified-link-border-color:        #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;

519
520
521
$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;
Mark Otto's avatar
Mark Otto committed
522
523


524
// Pagination
Mark Otto's avatar
Mark Otto committed
525

526
527
528
529
530
531
532
533
$pagination-padding-x:                .75rem !default;
$pagination-padding-y:                .5rem !default;
$pagination-padding-x-sm:             .75rem !default;
$pagination-padding-y-sm:             .275rem !default;
$pagination-padding-x-lg:             1.5rem !default;
$pagination-padding-y-lg:             .75rem !default;


534
535
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
536
$pagination-border-width:              $border-width !default;
537
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
538

539
540
541
$pagination-hover-color:               $link-hover-color !default;
$pagination-hover-bg:                  $gray-lighter !default;
$pagination-hover-border:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
542

543
544
545
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
546

547
548
549
$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;
Mark Otto's avatar
Mark Otto committed
550
551


552
// Jumbotron
Mark Otto's avatar
Mark Otto committed
553

554
555
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
556
557


558
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
559
//
560
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
561

562
563
564
$state-success-text:             #3c763d !default;
$state-success-bg:               #dff0d8 !default;
$state-success-border:           darken($state-success-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
565

566
567
568
$state-info-text:                #31708f !default;
$state-info-bg:                  #d9edf7 !default;
$state-info-border:              darken($state-info-bg, 7%) !default;
Mark Otto's avatar
Mark Otto committed
569

570
571
$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
572
$mark-bg:                        $state-warning-bg !default;
573
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
574

575
576
577
$state-danger-text:              #a94442 !default;
$state-danger-bg:                #f2dede !default;
$state-danger-border:            darken($state-danger-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
578
579


580
// Cards
581
582
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
583
$card-border-width:        1px !default;
584
$card-border-radius:       $border-radius !default;
585
$card-border-color:        rgba(0,0,0,.125) !default;
586
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
587
$card-cap-bg:              #f5f5f5 !default;
588
$card-bg:                  #fff !default;
589

590
591
$card-link-hover-color:    #fff !default;

592
593
$card-img-overlay-padding: 1.25rem !default;

594
595
$card-deck-margin:         .625rem !default;

596
597
$card-columns-sm-up-column-gap: 1.25rem !default;

598

599
// Tooltips
Mark Otto's avatar
Mark Otto committed
600

601
602
603
604
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
605
606
607
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
608

609
610
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
611
612


613
// Popovers
Mark Otto's avatar
Mark Otto committed
614

615
$popover-inner-padding:               1px !default;
616
617
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
618
$popover-border-width:                $border-width !default;
619
$popover-border-color:                rgba(0,0,0,.2) !default;
620
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
621

622
$popover-title-bg:                    darken($popover-bg, 3%) !default;
623
624
625
626
627
$popover-title-padding-x:             14px !default;
$popover-title-padding-y:             8px !default;

$popover-content-padding-x:           14px !default;
$popover-content-padding-y:           9px !default;
Mark Otto's avatar
Mark Otto committed
628

629
630
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
Mark Otto committed
631

632
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
633
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
634
635


636
// Tags
Mark Otto's avatar
Mark Otto committed
637

638
639
640
641
642
643
$tag-default-bg:            $gray-light !default;
$tag-primary-bg:            $brand-primary !default;
$tag-success-bg:            $brand-success !default;
$tag-info-bg:               $brand-info !default;
$tag-warning-bg:            $brand-warning !default;
$tag-danger-bg:             $brand-danger !default;
Mark Otto's avatar
Mark Otto committed
644

645
646
647
648
649
650
$tag-color:                 #fff !default;
$tag-link-hover-color:      #fff !default;
$tag-font-size:             75% !default;
$tag-font-weight:           bold !default;
$tag-padding-x:             .4em !default;
$tag-padding-y:             .25em !default;
Mark Otto's avatar
Mark Otto committed
651

652
$tag-pill-padding-x:        .6em !default;
653
654
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
655
$tag-pill-border-radius:    10rem !default;
Mark Otto's avatar
Mark Otto committed
656

657
// Modals
Mark Otto's avatar
Mark Otto committed
658

659
// Padding applied to the modal body
660
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
661

662
$modal-dialog-margin:         10px !default;
663
$modal-dialog-sm-up-margin-y: 30px !default;
664

665
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
666
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
667

668
669
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
670
$modal-content-border-width:     $border-width !default;
671
672
$modal-content-xs-box-shadow:    0 3px 9px rgba(0,0,0,.5) !default;
$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
Mark Otto's avatar
Mark Otto committed
673

674
675
676
677
$modal-backdrop-bg:           #000 !default;
$modal-backdrop-opacity:      .5 !default;
$modal-header-border-color:   #e5e5e5 !default;
$modal-footer-border-color:   $modal-header-border-color !default;
678
$modal-header-border-width:   $modal-content-border-width !default;
679
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
680

681
682
683
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
684
685


686
// Alerts
Mark Otto's avatar
Mark Otto committed
687
//
688
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
689

690
$alert-padding:               1rem !default;
691
$alert-border-radius:         $border-radius !default;
692
$alert-link-font-weight:      bold !default;
693
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
694

695
696
697
$alert-success-bg:            $state-success-bg !default;
$alert-success-text:          $state-success-text !default;
$alert-success-border:        $state-success-border !default;
Mark Otto's avatar
Mark Otto committed
698

699
700
701
$alert-info-bg:               $state-info-bg !default;
$alert-info-text:             $state-info-text !default;
$alert-info-border:           $state-info-border !default;
Mark Otto's avatar
Mark Otto committed
702

703
704
705
$alert-warning-bg:            $state-warning-bg !default;
$alert-warning-text:          $state-warning-text !default;
$alert-warning-border:        $state-warning-border !default;
Mark Otto's avatar
Mark Otto committed
706

707
708
709
$alert-danger-bg:             $state-danger-bg !default;
$alert-danger-text:           $state-danger-text !default;
$alert-danger-border:         $state-danger-border !default;
Mark Otto's avatar
Mark Otto committed
710
711


712
// Progress bars
Mark Otto's avatar
Mark Otto committed
713

714
$progress-bg:                 #eee !default;
715
$progress-bar-color:          #0074d9 !default;
716
$progress-border-radius:      $border-radius !default;
717
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
718

719
720
721
722
723
$progress-bar-bg:             $brand-primary !default;
$progress-bar-success-bg:     $brand-success !default;
$progress-bar-warning-bg:     $brand-warning !default;
$progress-bar-danger-bg:      $brand-danger !default;
$progress-bar-info-bg:        $brand-info !default;
Mark Otto's avatar
Mark Otto committed
724
725


726
// List group
Mark Otto's avatar
Mark Otto committed
727

728
$list-group-bg:                 #fff !default;
729
$list-group-border-color:       #ddd !default;
730
$list-group-border-width:       $border-width !default;
731
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
732

733
734
735
736
737
$list-group-hover-bg:           #f5f5f5 !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, 40%) !default;
Mark Otto's avatar
Mark Otto committed
738

739
740
741
$list-group-disabled-color:      $gray-light !default;
$list-group-disabled-bg:         $gray-lighter !default;
$list-group-disabled-text-color: $list-group-disabled-color !default;
Mark Otto's avatar
Mark Otto committed
742

743
744
745
$list-group-link-color:         #555 !default;
$list-group-link-hover-color:   $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;
Mark Otto's avatar
Mark Otto committed
746

747
748
749
$list-group-item-padding-x:             1.25rem !default;
$list-group-item-padding-y:             .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
750

Mark Otto's avatar
Mark Otto committed
751

Mark Otto's avatar
Mark Otto committed
752
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
753

754
755
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
756
$thumbnail-border-width:      $border-width !default;
757
$thumbnail-border-color:      #ddd !default;
758
$thumbnail-border-radius:     $border-radius !default;
759
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
760
761


762
763
764
765
766
// Figures

$figure-caption-font-size: 90% !default;


767
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
768

769
770
771
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
772

773
774
775
776
$breadcrumb-bg:                 $gray-lighter !default;
$breadcrumb-divider-color:      $gray-light !default;
$breadcrumb-active-color:       $gray-light !default;
$breadcrumb-divider:            "/" !default;
Mark Otto's avatar
Mark Otto committed
777
778


779
780
781
782
783
784
785
// Media objects

$media-margin-top:            15px !default;
$media-heading-margin-bottom:  5px !default;
$media-alignment-padding-x:   10px !default;


786
// Carousel
Mark Otto's avatar
Mark Otto committed
787

788
$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
Mark Otto's avatar
Mark Otto committed
789

790
791
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
792
$carousel-control-sm-up-size:                 30px !default;
793
794
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
795

796
797
$carousel-indicators-width:                   60% !default;

798
799
$carousel-indicator-size:                     10px !default;
$carousel-indicator-active-size:              12px !default;
800
801
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
802

803
804
$carousel-caption-width:                      70% !default;
$carousel-caption-sm-up-width:                60% !default;
805
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
806

807
808
$carousel-icon-width:                         20px !default;

Mark Otto's avatar
Mark Otto committed
809

810
// Close
Mark Otto's avatar
Mark Otto committed
811

812
813
814
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
815
816


817
// Code
Mark Otto's avatar
Mark Otto committed
818

819
$code-font-size:              90% !default;
820
821
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
Mark Otto's avatar
Mark Otto committed
822
$code-color:                  #bd4147 !default;
823
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
824

825
826
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
827

828
829
830
831
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;