_variables.scss 31.2 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
  md: 720px,
143
  lg: 960px,
144
  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

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
$form-icon-success-color: $brand-success !default;
441
$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;
442
443
444
445
446
447

$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;
Mark Otto's avatar
Mark Otto committed
498

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

Mark Otto's avatar
Mark Otto committed
501
502
$navbar-divider-padding-y:          .425rem !default;

503
504
$navbar-toggler-padding-x:           .75rem !default;
$navbar-toggler-padding-y:           .5rem !default;
Mark Otto's avatar
Mark Otto committed
505
506
$navbar-toggler-font-size:           $font-size-lg !default;
$navbar-toggler-border-radius:       $btn-border-radius !default;
507
508
$navbar-toggler-padding-x:           .75rem !default;
$navbar-toggler-padding-y:           .5rem !default;
509

510
511
512
513
$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;
514
$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;
515
$navbar-dark-toggler-border:        rgba(255,255,255,.1) !default;
516

517
518
519
520
$navbar-light-color:                rgba(0,0,0,.5) !default;
$navbar-light-hover-color:          rgba(0,0,0,.7) !default;
$navbar-light-active-color:         rgba(0,0,0,.9) !default;
$navbar-light-disabled-color:       rgba(0,0,0,.3) !default;
521
$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;
522
$navbar-light-toggler-border:       rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
523

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

Mark Otto's avatar
Mark Otto committed
526
527
528
529
530
531
532
533
534
535
$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;
536
$nav-tabs-border-radius:                      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
537
538
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
539
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
540
541
542
543
$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;

544
545
546
$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
547
548


549
// Pagination
Mark Otto's avatar
Mark Otto committed
550

551
552
553
554
555
556
557
558
$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;


559
560
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
561
$pagination-border-width:              $border-width !default;
562
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
563

564
565
566
$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
567

568
569
570
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
571

572
573
574
$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;
Mark Otto's avatar
Mark Otto committed
575
576


577
// Jumbotron
Mark Otto's avatar
Mark Otto committed
578

579
580
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
581
582


583
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
584
//
585
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
586

587
588
589
$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
590

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

595
596
$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
597
$mark-bg:                        $state-warning-bg !default;
598
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
599

600
601
602
$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
603
604


605
// Cards
606
607
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
608
$card-border-width:        1px !default;
609
$card-border-radius:       $border-radius !default;
610
$card-border-color:        rgba(0,0,0,.125) !default;
611
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
612
$card-cap-bg:              #f5f5f5 !default;
613
$card-bg:                  #fff !default;
614

615
616
$card-link-hover-color:    #fff !default;

617
618
$card-img-overlay-padding: 1.25rem !default;

619
620
$card-deck-margin:         .625rem !default;

621
622
$card-columns-sm-up-column-gap: 1.25rem !default;

623

624
// Tooltips
Mark Otto's avatar
Mark Otto committed
625

626
627
628
629
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
630
631
632
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
633

634
635
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
636
637


638
// Popovers
Mark Otto's avatar
Mark Otto committed
639

640
$popover-inner-padding:               1px !default;
641
642
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
643
$popover-border-width:                $border-width !default;
644
$popover-border-color:                rgba(0,0,0,.2) !default;
645
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
646

647
$popover-title-bg:                    darken($popover-bg, 3%) !default;
648
649
650
651
652
$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
653

654
655
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
Mark Otto committed
656

657
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
658
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
659
660


661
// Tags
Mark Otto's avatar
Mark Otto committed
662

663
664
665
666
667
668
$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
669

670
671
672
673
674
675
$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
676

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

682
// Modals
Mark Otto's avatar
Mark Otto committed
683

684
// Padding applied to the modal body
685
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
686

687
$modal-dialog-margin:         10px !default;
688
$modal-dialog-sm-up-margin-y: 30px !default;
689

690
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
691
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
692

693
694
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
695
$modal-content-border-width:     $border-width !default;
696
697
$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
698

699
700
701
702
$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;
703
$modal-header-border-width:   $modal-content-border-width !default;
704
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
705

706
707
708
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
709
710


711
// Alerts
Mark Otto's avatar
Mark Otto committed
712
//
713
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
714

715
716
$alert-padding-x:             1.25rem !default;
$alert-padding-y:             .75rem !default;
717
$alert-border-radius:         $border-radius !default;
718
$alert-link-font-weight:      bold !default;
719
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
720

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

725
726
727
$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
728

729
730
731
$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
732

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


738
// Progress bars
Mark Otto's avatar
Mark Otto committed
739

740
$progress-bg:                 #eee !default;
741
$progress-bar-color:          #0074d9 !default;
742
$progress-border-radius:      $border-radius !default;
743
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
744

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


752
// List group
Mark Otto's avatar
Mark Otto committed
753

754
$list-group-bg:                 #fff !default;
755
$list-group-border-color:       #ddd !default;
756
$list-group-border-width:       $border-width !default;
757
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
758

759
760
761
762
763
$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
764

765
766
767
$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
768

769
770
771
$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
772

773
774
775
$list-group-item-padding-x:             1.25rem !default;
$list-group-item-padding-y:             .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
776

Mark Otto's avatar
Mark Otto committed
777

Mark Otto's avatar
Mark Otto committed
778
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
779

780
781
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
782
$thumbnail-border-width:      $border-width !default;
783
$thumbnail-border-color:      #ddd !default;
784
$thumbnail-border-radius:     $border-radius !default;
785
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
786
787


788
789
790
791
792
// Figures

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


793
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
794

795
796
797
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
798

799
800
801
802
$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
803
804


805
806
807
808
809
810
811
// Media objects

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


812
// Carousel
Mark Otto's avatar
Mark Otto committed
813

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

816
817
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
818
$carousel-control-sm-up-size:                 30px !default;
819
820
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
821

822
823
$carousel-indicators-width:                   60% !default;

824
825
$carousel-indicator-size:                     10px !default;
$carousel-indicator-active-size:              12px !default;
826
827
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
828

829
830
$carousel-caption-width:                      70% !default;
$carousel-caption-sm-up-width:                60% !default;
831
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
832

833
834
$carousel-icon-width:                         20px !default;

Mark Otto's avatar
Mark Otto committed
835

836
// Close
Mark Otto's avatar
Mark Otto committed
837

838
839
840
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
841
842


843
// Code
Mark Otto's avatar
Mark Otto committed
844

845
$code-font-size:              90% !default;
846
847
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
Mark Otto's avatar
Mark Otto committed
848
$code-color:                  #bd4147 !default;
849
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
850

851
852
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
853

854
855
856
857
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;