_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
  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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
229

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
315

316
// Forms
Mark Otto's avatar
Mark Otto committed
317

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

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

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

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

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

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

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

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

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

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

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

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

358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
$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;
382
383
$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;

384
$custom-checkbox-indeterminate-bg: #0074d9 !default;
385
386
$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;
387
388
389
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
390
$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;
391
392
393
394

$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
395
396
$custom-select-color:          $input-color !default;
$custom-select-disabled-color: $gray-light !default;
397
$custom-select-bg:            #fff !default;
398
$custom-select-disabled-bg:   $gray-lighter !default;
399
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
400
401
$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;
402
403
404
405
406
$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
407
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
408
409
410

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

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


437
// Form validation icons
438
$form-icon-success-color: $brand-success !default;
439
$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;
440
441
442
443
444
445

$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;
446

Mark Otto's avatar
Mark Otto committed
447

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

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

461
462
463
$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
464

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

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

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

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


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

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


491
// Navbar
Mark Otto's avatar
Mark Otto committed
492

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

498
499
500
501
$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;
502
$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;
503

504
505
506
507
$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;
508
$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
509
510


511
// Navs
Mark Otto's avatar
Mark Otto committed
512

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

531
532
533
$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
534
535


536
// Pagination
Mark Otto's avatar
Mark Otto committed
537

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


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

551
552
553
$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
554

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

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


564
// Jumbotron
Mark Otto's avatar
Mark Otto committed
565

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


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

574
575
576
$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
577

578
579
580
$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
581

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

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


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

602
603
$card-link-hover-color:    #fff !default;

604
605
$card-img-overlay-padding: 1.25rem !default;

606
607
$card-deck-margin:         .625rem !default;

608
609
$card-columns-sm-up-column-gap: 1.25rem !default;

610

611
// Tooltips
Mark Otto's avatar
Mark Otto committed
612

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

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


625
// Popovers
Mark Otto's avatar
Mark Otto committed
626

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

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

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

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


648
// Tags
Mark Otto's avatar
Mark Otto committed
649

650
651
652
653
654
655
$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
656

657
658
659
660
661
662
$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
663

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

669
// Modals
Mark Otto's avatar
Mark Otto committed
670

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

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

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

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

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

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


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

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

707
708
709
$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
710

711
712
713
$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
714

715
716
717
$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
718

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


724
// Progress bars
Mark Otto's avatar
Mark Otto committed
725

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

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


738
// List group
Mark Otto's avatar
Mark Otto committed
739

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

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

751
752
753
$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
754

755
756
757
$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
758

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

Mark Otto's avatar
Mark Otto committed
763

Mark Otto's avatar
Mark Otto committed
764
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
765

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


774
775
776
777
778
// Figures

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


779
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
780

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

785
786
787
788
$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
789
790


791
792
793
794
795
796
797
// Media objects

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


798
// Carousel
Mark Otto's avatar
Mark Otto committed
799

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

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

808
809
$carousel-indicators-width:                   60% !default;

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

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

819
820
$carousel-icon-width:                         20px !default;

Mark Otto's avatar
Mark Otto committed
821

822
// Close
Mark Otto's avatar
Mark Otto committed
823

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


829
// Code
Mark Otto's avatar
Mark Otto committed
830

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

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

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