_variables.scss 28.7 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
247
248
249
$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
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
$btn-block-spacing-y:            5px !default;
299
300
301
302
$btn-toolbar-margin:             5px !default;

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

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

Mark Otto's avatar
Mark Otto committed
309

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

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

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

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

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

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

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

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

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

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

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

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

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

350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
$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;
374
$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;
375
$custom-checkbox-indeterminate-bg: #0074d9 !default;
376
$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;
377
378
379
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
380
$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;
381
382
383
384
385
386
387

$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
388
$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;
389
390
391
392
393
$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
394
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
395
396
397

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

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


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

Mark Otto's avatar
Mark Otto committed
429

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

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

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

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

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

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

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


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

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


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

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

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

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


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

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

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


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

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


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

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

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

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


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

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


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

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

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

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

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


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

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

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

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

587

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

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

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


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

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

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

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

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


624
625
// Tags

626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
$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;
641
642
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
643
$tag-pill-border-radius:    10rem !default;
Mark Otto's avatar
Mark Otto committed
644

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
739

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

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


750
751
752
753
754
// Figures

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


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

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

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


767
768
769
770
771
772
773
// Media objects

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


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

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

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

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

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

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


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

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


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

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

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

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