_variables.scss 28.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
24
25
26
27
28
29
30
31
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num != null and $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

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

Mark Otto's avatar
Mark Otto committed
36

37
// Colors
Mark Otto's avatar
Mark Otto committed
38
//
39
// Grayscale and brand colors for use across Bootstrap.
Mark Otto's avatar
Mark Otto committed
40

41
42
43
44
45
$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
46

47
48
49
50
51
$brand-primary:             #0275d8 !default;
$brand-success:             #5cb85c !default;
$brand-info:                #5bc0de !default;
$brand-warning:             #f0ad4e !default;
$brand-danger:              #d9534f !default;
Mark Otto's avatar
Mark Otto committed
52
53


54
// Options
Mark Otto's avatar
Mark Otto committed
55
//
56
57
58
59
60
61
62
63
// 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;
64
$enable-grid-classes:       true !default;
65
$enable-print-styles:       true !default;
66
67
68
69
70
71
72


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.

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


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

Mark Otto's avatar
Mark Otto committed
101
102
$body-bg:    #fff !default;
$body-color: $gray-dark !default;
103
104
105
106
107


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

Mark Otto's avatar
Mark Otto committed
109
110
111
112
$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
113
114


115
// Grid breakpoints
Mark Otto's avatar
Mark Otto committed
116
//
117
// Define the minimum dimensions at which your layout will change,
118
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
Mark Otto committed
119

120
121
$grid-breakpoints: (
  xs: 0,
122
123
124
125
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
126
) !default;
127
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
Mark Otto's avatar
Mark Otto committed
128

Mark Otto's avatar
Mark Otto committed
129

130
// Grid containers
Mark Otto's avatar
Mark Otto committed
131
//
132
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
Mark Otto committed
133

134
$container-max-widths: (
135
136
137
138
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
139
) !default;
140
@include _assert-ascending($container-max-widths, "$container-max-widths");
141
142
143
144
145
146


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

Mark Otto's avatar
Mark Otto committed
147
$grid-columns:      12 !default;
148
$grid-gutter-width: 30px !default;
Mark Otto's avatar
Mark Otto committed
149

150

151
// Typography
Mark Otto's avatar
Mark Otto committed
152
//
153
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
Mark Otto committed
154

155
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
Mark Otto's avatar
Mark Otto committed
156
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
157
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
Mark Otto committed
158
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
Mark Otto committed
159

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

Mark Otto's avatar
Mark Otto committed
163
164
165
166
$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
167

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

Mark Otto's avatar
Mark Otto committed
170
171
172
173
174
175
$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
176

Mark Otto's avatar
Mark Otto committed
177
178
179
180
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
181

Mark Otto's avatar
Mark Otto committed
182
183
184
185
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
186

Mark Otto's avatar
Mark Otto committed
187
188
189
190
191
$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
192

Mark Otto's avatar
Mark Otto committed
193
194
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
Mark Otto committed
195

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

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

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

Mark Otto's avatar
Mark Otto committed
202
203
204
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
205
$blockquote-border-width: .25rem !default;
Mark Otto's avatar
Mark Otto committed
206

Mark Otto's avatar
Mark Otto committed
207
208
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
209

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

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

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

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

Mark Otto's avatar
Mark Otto committed
219

220
// Components
Mark Otto's avatar
Mark Otto committed
221
//
Mark Otto's avatar
Mark Otto committed
222
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Mark Otto committed
223

XhmikosR's avatar
XhmikosR committed
224
$line-height-lg:         (4 / 3) !default;
225
$line-height-sm:         1.5 !default;
Mark Otto's avatar
Mark Otto committed
226

227
$border-radius:          .25rem !default;
228
229
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;
Mark Otto's avatar
Mark Otto committed
230

231
232
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
233

234
$caret-width:            .3em !default;
235
$caret-width-lg:         $caret-width !default;
Mark Otto's avatar
Mark Otto committed
236
237


238
// Tables
Mark Otto's avatar
Mark Otto committed
239
//
240
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
Mark Otto committed
241

242
243
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Mark Otto's avatar
Mark Otto committed
244

245
246
247
248
$table-bg:                      transparent !default;
$table-bg-accent:               #f9f9f9 !default;
$table-bg-hover:                #f5f5f5 !default;
$table-bg-active:               $table-bg-hover !default;
Mark Otto's avatar
Mark Otto committed
249

250
$table-border-width:            $border-width !default;
251
$table-border-color:            $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
252
253


254
// Buttons
Mark Otto's avatar
Mark Otto committed
255
//
256
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
Mark Otto committed
257

258
$btn-padding-x:                  1rem !default;
259
260
$btn-padding-y:                  .5rem !default;
$btn-line-height:                1.25 !default;
261
$btn-font-weight:                normal !default;
262
$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
263
$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
Mark Otto's avatar
Mark Otto committed
264

265
266
$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
267
$btn-primary-border:             $btn-primary-bg !default;
Mark Otto's avatar
Mark Otto committed
268

269
270
$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
271
$btn-secondary-border:           #ccc !default;
Mark Otto's avatar
Mark Otto committed
272

273
274
$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
275
$btn-info-border:                $btn-info-bg !default;
Mark Otto's avatar
Mark Otto committed
276

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

281
282
$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
283
$btn-warning-border:             $btn-warning-bg !default;
Mark Otto's avatar
Mark Otto committed
284

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

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

291
$btn-padding-x-sm:               .5rem !default;
292
$btn-padding-y-sm:               .25rem !default;
293

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

297
$btn-block-spacing-y:            5px !default;
298
299
300
301
$btn-toolbar-margin:             5px !default;

$split-btn-dropdown-toggle-padding-x:     8px !default;
$split-btn-lg-dropdown-toggle-padding-x: 12px !default;
302

Mark Otto's avatar
Mark Otto committed
303
// Allows for customizing button radius independently from global border radius
304
305
306
$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
307

Mark Otto's avatar
Mark Otto committed
308

309
// Forms
Mark Otto's avatar
Mark Otto committed
310

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

315
316
$input-bg:                       #fff !default;
$input-bg-disabled:              $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
317

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

323
$input-border-radius:            $border-radius !default;
324
325
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;
Mark Otto's avatar
Mark Otto committed
326

327
328
$input-border-focus:             #66afe9 !default;
$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
Mark Otto's avatar
Mark Otto committed
329

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

332
333
$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;
334

335
$input-padding-x-lg:             1.5rem !default;
336
337
$input-padding-y-lg:             .75rem !default;

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

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

344
$input-group-addon-bg:           $gray-lighter !default;
345
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
Mark Otto committed
346

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

349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
$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;
373
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
374
$custom-checkbox-indeterminate-bg: #0074d9 !default;
375
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
376
377
378
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
379
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
380
381
382
383
384
385
386

$custom-select-padding-x:          .75rem  !default;
$custom-select-padding-y:          .375rem !default;
$custom-select-indicator-padding:  1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-color:         $input-color !default;
$custom-select-bg:            #fff !default;
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
387
$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
388
389
390
391
392
$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
393
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
394
395
396

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

398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
$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;
413
414
415
416
417
418
419
420
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
421
422


423
// Form validation icons
424
425
426
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
427

Mark Otto's avatar
Mark Otto committed
428

429
// Dropdowns
Mark Otto's avatar
Mark Otto committed
430
//
431
// Dropdown menu container and contents.
Mark Otto's avatar
Mark Otto committed
432

433
$dropdown-min-width:             160px !default;
434
$dropdown-padding-y:             5px !default;
435
$dropdown-margin-top:            2px !default;
436
$dropdown-bg:                    #fff !default;
437
$dropdown-border-color:          rgba(0,0,0,.15) !default;
438
$dropdown-border-width:          $border-width !default;
439
$dropdown-divider-bg:            #e5e5e5 !default;
440
$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
441

442
443
444
$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
445

446
447
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
Mark Otto committed
448

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

451
452
$dropdown-item-padding-x:        20px !default;

453
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
Mark Otto committed
454
455


456
// Z-index master list
Mark Otto's avatar
Mark Otto committed
457
458
459
460
//
// 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.

461
$zindex-dropdown-backdrop:  990 !default;
462
463
464
465
466
$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
467
$zindex-navbar-sticky:     1030 !default;
Mark Otto's avatar
Mark Otto committed
468
469
$zindex-modal-bg:          1040 !default;
$zindex-modal:             1050 !default;
Mark Otto's avatar
Mark Otto committed
470
471


472
// Navbar
Mark Otto's avatar
Mark Otto committed
473

474
$navbar-border-radius:              $border-radius !default;
475
476
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
477
$navbar-brand-padding-y:            .25rem !default;
478

479
480
481
482
$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;
483

484
485
486
487
$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;
Mark Otto's avatar
Mark Otto committed
488
489


490
// Navs
Mark Otto's avatar
Mark Otto committed
491

Mark Otto's avatar
Mark Otto committed
492
493
494
495
496
497
498
499
500
501
502
503
$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;
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
504
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
505
506
507
508
$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;

509
510
511
$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
512
513


514
// Pagination
Mark Otto's avatar
Mark Otto committed
515

516
517
518
519
520
521
522
523
$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;


524
525
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
526
$pagination-border-width:              $border-width !default;
527
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
528

529
530
531
$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
532

533
534
535
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
536

537
538
539
$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;
Mark Otto's avatar
Mark Otto committed
540
541


542
// Jumbotron
Mark Otto's avatar
Mark Otto committed
543

544
545
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
546
547


548
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
549
//
550
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
551

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

556
557
558
$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
559

560
561
$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
562
$mark-bg:                        $state-warning-bg !default;
563
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
564

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


570
// Cards
571
572
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
573
$card-border-width:        1px !default;
574
$card-border-radius:       $border-radius !default;
575
$card-border-color:        rgba(0,0,0,.125) !default;
576
$card-border-radius-inner: $card-border-radius !default;
577
$card-cap-bg:              #f5f5f5 !default;
578
$card-bg:                  #fff !default;
579

580
581
$card-link-hover-color:    #fff !default;

582
583
$card-deck-margin:         .625rem !default;

584
585
$card-columns-sm-up-column-gap: 1.25rem !default;

586

587
// Tooltips
Mark Otto's avatar
Mark Otto committed
588

589
590
591
592
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
593
594
595
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
596

597
598
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
599
600


601
// Popovers
Mark Otto's avatar
Mark Otto committed
602

603
604
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
605
$popover-border-width:                $border-width !default;
606
$popover-border-color:                rgba(0,0,0,.2) !default;
607
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
608

609
$popover-title-bg:                    darken($popover-bg, 3%) !default;
610
611
612
613
614
$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
615

616
617
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
Mark Otto committed
618

619
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
620
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
621
622


623
624
// Tags

625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
$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;

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

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

644
// Modals
Mark Otto's avatar
Mark Otto committed
645

646
// Padding applied to the modal body
647
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
648

649
$modal-dialog-margin:         10px !default;
650
$modal-dialog-sm-up-margin-y: 30px !default;
651

652
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
653
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
654

655
656
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
657
$modal-content-border-width:     $border-width !default;
658
659
$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
660

661
662
663
664
$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;
665
$modal-header-border-width:   $modal-content-border-width !default;
666
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
667

668
669
670
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
671
672


673
// Alerts
Mark Otto's avatar
Mark Otto committed
674
//
675
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
676

677
$alert-padding:               15px !default;
678
$alert-border-radius:         $border-radius !default;
679
$alert-link-font-weight:      bold !default;
680
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
681

682
683
684
$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
685

686
687
688
$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
689

690
691
692
$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
693

694
695
696
$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
697
698


699
// Progress bars
Mark Otto's avatar
Mark Otto committed
700

701
$progress-bg:                 #eee !default;
702
$progress-bar-color:          #0074d9 !default;
703
$progress-border-radius:      $border-radius !default;
704
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
705

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


713
// List group
Mark Otto's avatar
Mark Otto committed
714

715
$list-group-bg:                 #fff !default;
716
$list-group-border-color:       #ddd !default;
717
$list-group-border-width:       $border-width !default;
718
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
719

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

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

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

734
735
736
$list-group-item-padding-x:             1.25rem !default;
$list-group-item-padding-y:             .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
737

Mark Otto's avatar
Mark Otto committed
738

Mark Otto's avatar
Mark Otto committed
739
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
740

741
742
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
743
$thumbnail-border-width:      $border-width !default;
744
$thumbnail-border-color:      #ddd !default;
745
$thumbnail-border-radius:     $border-radius !default;
746
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
747
748


749
750
751
752
753
// Figures

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


754
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
755

756
757
758
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
759

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


766
767
768
769
770
771
772
// Media objects

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


773
// Carousel
Mark Otto's avatar
Mark Otto committed
774

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

777
778
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
779
$carousel-control-sm-up-size:                 30px !default;
780
781
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
782

783
784
$carousel-indicators-width:                   60% !default;

785
786
$carousel-indicator-size:                     10px !default;
$carousel-indicator-active-size:              12px !default;
787
788
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
789

790
791
$carousel-caption-width:                      70% !default;
$carousel-caption-sm-up-width:                60% !default;
792
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
793
794


795
// Close
Mark Otto's avatar
Mark Otto committed
796

797
798
799
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
800
801


802
// Code
Mark Otto's avatar
Mark Otto committed
803

804
$code-font-size:              90% !default;
805
806
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
Mark Otto's avatar
Mark Otto committed
807
$code-color:                  #bd4147 !default;
808
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
809

810
811
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
812

813
814
815
816
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;