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


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

20
21
22
23
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


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

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


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

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


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

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


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

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

Mark Otto's avatar
Mark Otto committed
130

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

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


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

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

151

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

156
$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
157
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
158
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
Mark Otto committed
159
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
Mark Otto committed
160

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
220

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

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

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

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

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


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

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

246
$table-bg:                      transparent !default;
247
248
$table-bg-accent:               rgba(0,0,0,.05) !default;
$table-bg-hover:                rgba(0,0,0,.075) !default;
249
$table-bg-active:               $table-bg-hover !default;
Mark Otto's avatar
Mark Otto committed
250

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


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

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

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

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

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

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

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

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

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

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

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

298
299
300
$btn-block-spacing-y:            .5rem !default;
$btn-toolbar-margin:             .5rem !default;

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

Mark Otto's avatar
Mark Otto committed
306

307
// Forms
Mark Otto's avatar
Mark Otto committed
308

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

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

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

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

325
$input-bg-focus:                 $input-bg;
326
327
$input-border-focus:             #66afe9 !default;
$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
328
$input-color-focus:              $input-color;
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

$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
384
385
$custom-select-color:          $input-color !default;
$custom-select-disabled-color: $gray-light !default;
386
$custom-select-bg:            #fff !default;
387
$custom-select-disabled-bg:   $gray-lighter !default;
388
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
389
$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;
390
391
392
393
394
$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
395
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
396
397
398

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

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


425
// Form validation icons
426
427
428
$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;
429

Mark Otto's avatar
Mark Otto committed
430

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

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

444
445
446
$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
447

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

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

453
454
$dropdown-item-padding-x:        20px !default;

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


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

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


474
// Navbar
Mark Otto's avatar
Mark Otto committed
475

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

481
482
483
484
$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;
485

486
487
488
489
$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
490
491


492
// Navs
Mark Otto's avatar
Mark Otto committed
493

Mark Otto's avatar
Mark Otto committed
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;
504
$nav-tabs-border-radius:                      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
505
506
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
$nav-tabs-active-link-hover-color:            $gray !default;
507
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
508
509
510
511
$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;

512
513
514
$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
515
516


517
// Pagination
Mark Otto's avatar
Mark Otto committed
518

519
520
521
522
523
524
525
526
$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;


527
528
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
529
$pagination-border-width:              $border-width !default;
530
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
531

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

536
537
538
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
539

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


545
// Jumbotron
Mark Otto's avatar
Mark Otto committed
546

547
548
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
549
550


551
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
552
//
553
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
554

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

559
560
561
$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
562

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

568
569
570
$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
571
572


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

583
584
$card-link-hover-color:    #fff !default;

585
586
$card-img-overlay-padding: 1.25rem !default;

587
588
$card-deck-margin:         .625rem !default;

589
590
$card-columns-sm-up-column-gap: 1.25rem !default;

591

592
// Tooltips
Mark Otto's avatar
Mark Otto committed
593

594
595
596
597
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
598
599
600
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
601

602
603
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
604
605


606
// Popovers
Mark Otto's avatar
Mark Otto committed
607

608
609
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
610
$popover-border-width:                $border-width !default;
611
$popover-border-color:                rgba(0,0,0,.2) !default;
612
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
613

614
$popover-title-bg:                    darken($popover-bg, 3%) !default;
615
616
617
618
619
$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
620

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

624
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
625
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
626
627


628
// Tags
Mark Otto's avatar
Mark Otto committed
629

630
631
632
633
634
635
$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
636

637
638
639
640
641
642
$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
643

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

649
// Modals
Mark Otto's avatar
Mark Otto committed
650

651
// Padding applied to the modal body
652
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
653

654
$modal-dialog-margin:         10px !default;
655
$modal-dialog-sm-up-margin-y: 30px !default;
656

657
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
658
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
659

660
661
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
662
$modal-content-border-width:     $border-width !default;
663
664
$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
665

666
667
668
669
$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;
670
$modal-header-border-width:   $modal-content-border-width !default;
671
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
672

673
674
675
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
676
677


678
// Alerts
Mark Otto's avatar
Mark Otto committed
679
//
680
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
681

682
$alert-padding:               15px !default;
683
$alert-border-radius:         $border-radius !default;
684
$alert-link-font-weight:      bold !default;
685
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
686

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

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

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

699
700
701
$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
702
703


704
// Progress bars
Mark Otto's avatar
Mark Otto committed
705

706
$progress-bg:                 #eee !default;
707
$progress-bar-color:          #0074d9 !default;
708
$progress-border-radius:      $border-radius !default;
709
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
710

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


718
// List group
Mark Otto's avatar
Mark Otto committed
719

720
$list-group-bg:                 #fff !default;
721
$list-group-border-color:       #ddd !default;
722
$list-group-border-width:       $border-width !default;
723
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
724

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

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

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

739
740
741
$list-group-item-padding-x:             1.25rem !default;
$list-group-item-padding-y:             .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
742

Mark Otto's avatar
Mark Otto committed
743

Mark Otto's avatar
Mark Otto committed
744
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
745

746
747
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
748
$thumbnail-border-width:      $border-width !default;
749
$thumbnail-border-color:      #ddd !default;
750
$thumbnail-border-radius:     $border-radius !default;
751
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
752
753


754
755
756
757
758
// Figures

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


759
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
760

761
762
763
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
764

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


771
772
773
774
775
776
777
// Media objects

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


778
// Carousel
Mark Otto's avatar
Mark Otto committed
779

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

782
783
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
784
$carousel-control-sm-up-size:                 30px !default;
785
786
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
787

788
789
$carousel-indicators-width:                   60% !default;

790
791
$carousel-indicator-size:                     10px !default;
$carousel-indicator-active-size:              12px !default;
792
793
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
794

795
796
$carousel-caption-width:                      70% !default;
$carousel-caption-sm-up-width:                60% !default;
797
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
798

799
800
$carousel-icon-width:                         20px !default;

Mark Otto's avatar
Mark Otto committed
801

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

804
805
806
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
807
808


809
// Code
Mark Otto's avatar
Mark Otto committed
810

811
$code-font-size:              90% !default;
812
813
$code-padding-x:              .4rem !default;
$code-padding-y:              .2rem !default;
Mark Otto's avatar
Mark Otto committed
814
$code-color:                  #bd4147 !default;
815
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
816

817
818
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
819

820
821
822
823
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;