_variables.scss 30.6 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
  sm: 576px,
129
130
131
  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
  sm: 540px,
142
143
144
  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.

Kovah's avatar
Kovah committed
153
154
155
156
157
158
159
160
161
$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;
162

163
// Typography
Mark Otto's avatar
Mark Otto committed
164
//
165
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
Mark Otto committed
166

167
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
Mark Otto's avatar
Mark Otto committed
168
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
169
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
Mark Otto committed
170
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
Mark Otto committed
171

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

Mark Otto's avatar
Mark Otto committed
175
176
177
178
$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
179

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

Mark Otto's avatar
Mark Otto committed
182
183
184
185
186
187
$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
188

Mark Otto's avatar
Mark Otto committed
189
190
191
192
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
193

Mark Otto's avatar
Mark Otto committed
194
195
196
197
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
198

Mark Otto's avatar
Mark Otto committed
199
200
201
202
203
$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
204

Mark Otto's avatar
Mark Otto committed
205
206
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
Mark Otto committed
207

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

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

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

Mark Otto's avatar
Mark Otto committed
214
215
216
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
217
$blockquote-border-width: .25rem !default;
Mark Otto's avatar
Mark Otto committed
218

Mark Otto's avatar
Mark Otto committed
219
220
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
221

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

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

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

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

Mark Otto's avatar
Mark Otto committed
231

232
// Components
Mark Otto's avatar
Mark Otto committed
233
//
Mark Otto's avatar
Mark Otto committed
234
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Mark Otto committed
235

XhmikosR's avatar
XhmikosR committed
236
$line-height-lg:         (4 / 3) !default;
237
$line-height-sm:         1.5 !default;
Mark Otto's avatar
Mark Otto committed
238

239
$border-radius:          .25rem !default;
240
241
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;
Mark Otto's avatar
Mark Otto committed
242

243
244
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
245

246
$caret-width:            .3em !default;
247
$caret-width-lg:         $caret-width !default;
Mark Otto's avatar
Mark Otto committed
248
249


250
// Tables
Mark Otto's avatar
Mark Otto committed
251
//
252
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
Mark Otto committed
253

254
255
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Mark Otto's avatar
Mark Otto committed
256

257
$table-bg:                      transparent !default;
258
259
$table-bg-accent:               rgba(0,0,0,.05) !default;
$table-bg-hover:                rgba(0,0,0,.075) !default;
260
$table-bg-active:               $table-bg-hover !default;
Mark Otto's avatar
Mark Otto committed
261

262
$table-border-width:            $border-width !default;
263
$table-border-color:            $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
264
265


266
// Buttons
Mark Otto's avatar
Mark Otto committed
267
//
268
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
Mark Otto committed
269

270
$btn-padding-x:                  1rem !default;
271
272
$btn-padding-y:                  .5rem !default;
$btn-line-height:                1.25 !default;
273
$btn-font-weight:                normal !default;
274
$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
275
$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
Mark Otto's avatar
Mark Otto committed
276

277
278
$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
279
$btn-primary-border:             $btn-primary-bg !default;
Mark Otto's avatar
Mark Otto committed
280

281
282
$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
283
$btn-secondary-border:           #ccc !default;
Mark Otto's avatar
Mark Otto committed
284

285
286
$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
287
$btn-info-border:                $btn-info-bg !default;
Mark Otto's avatar
Mark Otto committed
288

289
290
$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
291
$btn-success-border:             $btn-success-bg !default;
Mark Otto's avatar
Mark Otto committed
292

293
294
$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
295
$btn-warning-border:             $btn-warning-bg !default;
Mark Otto's avatar
Mark Otto committed
296

297
298
$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
299
$btn-danger-border:              $btn-danger-bg !default;
Mark Otto's avatar
Mark Otto committed
300

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

303
$btn-padding-x-sm:               .5rem !default;
304
$btn-padding-y-sm:               .25rem !default;
305

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

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

Mark Otto's avatar
Mark Otto committed
312
// Allows for customizing button radius independently from global border radius
313
314
315
$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
316

Mark Otto's avatar
Mark Otto committed
317

318
// Forms
Mark Otto's avatar
Mark Otto committed
319

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

324
325
$input-bg:                       #fff !default;
$input-bg-disabled:              $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
326

327
$input-color:                    $gray !default;
328
$input-border-color:             rgba(0,0,0,.15) !default;
329
$input-btn-border-width:         $border-width !default; // For form controls and buttons
Mark Otto's avatar
Mark Otto committed
330
$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
331

332
$input-border-radius:            $border-radius !default;
333
334
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;
Mark Otto's avatar
Mark Otto committed
335

336
$input-bg-focus:                 $input-bg !default;
337
$input-border-focus:             #66afe9 !default;
338
339
$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
340

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

343
344
$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;
345

346
$input-padding-x-lg:             1.5rem !default;
347
348
$input-padding-y-lg:             .75rem !default;

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

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

355
$input-group-addon-bg:           $gray-lighter !default;
356
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
Mark Otto committed
357

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

360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
$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;
384
385
$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='#{$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") !default;

386
$custom-checkbox-indeterminate-bg: #0074d9 !default;
387
388
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
$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='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
389
390
391
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
392
$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='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
393
394
395
396

$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
397
398
$custom-select-color:          $input-color !default;
$custom-select-disabled-color: $gray-light !default;
399
$custom-select-bg:            #fff !default;
400
$custom-select-disabled-bg:   $gray-lighter !default;
401
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
402
403
$custom-select-indicator-color: #333 !default;
$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='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
404
405
406
407
408
$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
409
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
410
411
412

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

414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
$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;
429
430
431
432
433
434
435
436
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
437
438


439
// Form validation icons
440
441
442
443
444
445
446
447
$form-icon-success-color: $brand-success !default;
$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='$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") !default;

$form-icon-warning-color: $brand-warning !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='#{$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") !default;

$form-icon-danger-color: $brand-danger !default;
$form-icon-danger: 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") !default;
448

Mark Otto's avatar
Mark Otto committed
449

450
// Dropdowns
Mark Otto's avatar
Mark Otto committed
451
//
452
// Dropdown menu container and contents.
Mark Otto's avatar
Mark Otto committed
453

Mark Otto's avatar
Mark Otto committed
454
455
456
$dropdown-min-width:             10rem !default;
$dropdown-padding-y:             .5rem !default;
$dropdown-margin-top:            .125rem !default;
457
$dropdown-bg:                    #fff !default;
458
$dropdown-border-color:          rgba(0,0,0,.15) !default;
459
$dropdown-border-width:          $border-width !default;
460
$dropdown-divider-bg:            #e5e5e5 !default;
Mark Otto's avatar
Mark Otto committed
461
$dropdown-box-shadow:            0 .5rem 1rem rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
462

463
464
465
$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
466

467
468
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
Mark Otto committed
469

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

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

474
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
Mark Otto committed
475
476


477
// Z-index master list
Mark Otto's avatar
Mark Otto committed
478
479
480
481
//
// 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.

482
$zindex-dropdown-backdrop:  990 !default;
483
484
485
486
487
$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
488
$zindex-navbar-sticky:     1030 !default;
Mark Otto's avatar
Mark Otto committed
489
490
$zindex-modal-bg:          1040 !default;
$zindex-modal:             1050 !default;
Mark Otto's avatar
Mark Otto committed
491
492


493
// Navbar
Mark Otto's avatar
Mark Otto committed
494

495
$navbar-border-radius:              $border-radius !default;
496
497
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
498
$navbar-brand-padding-y:            .25rem !default;
499

500
501
502
503
$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;
504
$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;
505

506
507
508
509
$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;
510
$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
511
512


513
// Navs
Mark Otto's avatar
Mark Otto committed
514

Mark Otto's avatar
Mark Otto committed
515
516
517
518
519
520
521
522
523
524
$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;
525
$nav-tabs-border-radius:                      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
526
527
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
528
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
529
530
531
532
$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;

533
534
535
$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
536
537


538
// Pagination
Mark Otto's avatar
Mark Otto committed
539

540
541
542
543
544
545
546
547
$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;


548
549
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
550
$pagination-border-width:              $border-width !default;
551
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
552

553
554
555
$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
556

557
558
559
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
560

561
562
563
$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;
Mark Otto's avatar
Mark Otto committed
564
565


566
// Jumbotron
Mark Otto's avatar
Mark Otto committed
567

568
569
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
570
571


572
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
573
//
574
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
575

576
577
578
$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
579

580
581
582
$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
583

584
585
$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
586
$mark-bg:                        $state-warning-bg !default;
587
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
588

589
590
591
$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
592
593


594
// Cards
595
596
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
597
$card-border-width:        1px !default;
598
$card-border-radius:       $border-radius !default;
599
$card-border-color:        rgba(0,0,0,.125) !default;
600
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
601
$card-cap-bg:              #f5f5f5 !default;
602
$card-bg:                  #fff !default;
603

604
605
$card-link-hover-color:    #fff !default;

606
607
$card-img-overlay-padding: 1.25rem !default;

608
609
$card-deck-margin:         .625rem !default;

610
611
$card-columns-sm-up-column-gap: 1.25rem !default;

612

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

615
616
617
618
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
619
620
621
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
622

623
624
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
625
626


627
// Popovers
Mark Otto's avatar
Mark Otto committed
628

629
$popover-inner-padding:               1px !default;
630
631
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
632
$popover-border-width:                $border-width !default;
633
$popover-border-color:                rgba(0,0,0,.2) !default;
634
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
635

636
$popover-title-bg:                    darken($popover-bg, 3%) !default;
637
638
639
640
641
$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
642

643
644
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
Mark Otto committed
645

646
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
647
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
648
649


650
// Tags
Mark Otto's avatar
Mark Otto committed
651

652
653
654
655
656
657
$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
658

659
660
661
662
663
664
$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
665

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

671
// Modals
Mark Otto's avatar
Mark Otto committed
672

673
// Padding applied to the modal body
674
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
675

676
$modal-dialog-margin:         10px !default;
677
$modal-dialog-sm-up-margin-y: 30px !default;
678

679
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
680
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
681

682
683
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
684
$modal-content-border-width:     $border-width !default;
685
686
$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
687

688
689
690
691
$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;
692
$modal-header-border-width:   $modal-content-border-width !default;
693
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
694

695
696
697
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
698
699


700
// Alerts
Mark Otto's avatar
Mark Otto committed
701
//
702
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
703

704
$alert-padding:               1rem !default;
705
$alert-border-radius:         $border-radius !default;
706
$alert-link-font-weight:      bold !default;
707
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
708

709
710
711
$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
712

713
714
715
$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
716

717
718
719
$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
720

721
722
723
$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
724
725


726
// Progress bars
Mark Otto's avatar
Mark Otto committed
727

728
$progress-bg:                 #eee !default;
729
$progress-bar-color:          #0074d9 !default;
730
$progress-border-radius:      $border-radius !default;
731
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
732

733
734
735
736
737
$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
738
739


740
// List group
Mark Otto's avatar
Mark Otto committed
741

742
$list-group-bg:                 #fff !default;
743
$list-group-border-color:       #ddd !default;
744
$list-group-border-width:       $border-width !default;
745
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
746

747
748
749
750
751
$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
752

753
754
755
$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
756

757
758
759
$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
760

761
762
763
$list-group-item-padding-x:             1.25rem !default;
$list-group-item-padding-y:             .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
764

Mark Otto's avatar
Mark Otto committed
765

Mark Otto's avatar
Mark Otto committed
766
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
767

768
769
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
770
$thumbnail-border-width:      $border-width !default;
771
$thumbnail-border-color:      #ddd !default;
772
$thumbnail-border-radius:     $border-radius !default;
773
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
774
775


776
777
778
779
780
// Figures

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


781
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
782

783
784
785
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
786

787
788
789
790
$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
791
792


793
794
795
796
797
798
799
// Media objects

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


800
// Carousel
Mark Otto's avatar
Mark Otto committed
801

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

804
805
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
806
$carousel-control-sm-up-size:                 30px !default;
807
808
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
809

810
811
$carousel-indicators-width:                   60% !default;

812
813
$carousel-indicator-size:                     10px !default;
$carousel-indicator-active-size:              12px !default;
814
815
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
816

817
818
$carousel-caption-width:                      70% !default;
$carousel-caption-sm-up-width:                60% !default;
819
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
820

821
822
$carousel-icon-width:                         20px !default;

Mark Otto's avatar
Mark Otto committed
823

824
// Close
Mark Otto's avatar
Mark Otto committed
825

826
827
828
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
829
830


831
// Code
Mark Otto's avatar
Mark Otto committed
832

833
$code-font-size:              90% !default;
834
835
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
Mark Otto's avatar
Mark Otto committed
836
$code-color:                  #bd4147 !default;
837
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
838

839
840
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
841

842
843
844
845
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;