_variables.scss 27.8 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-bg:                    #fff !default;
435
$dropdown-border-color:          rgba(0,0,0,.15) !default;
436
$dropdown-border-width:          $border-width !default;
437
$dropdown-divider-bg:            #e5e5e5 !default;
438
$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
439

440
441
442
$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
443

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

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

449
450
$dropdown-item-padding-x:        20px !default;

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


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

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


470
// Navbar
Mark Otto's avatar
Mark Otto committed
471

472
$navbar-border-radius:              $border-radius !default;
473
474
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
475

476
477
478
479
$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;
480

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


487
// Navs
Mark Otto's avatar
Mark Otto committed
488

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

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


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

513
514
515
516
517
518
519
520
$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;


521
522
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
523
$pagination-border-width:              $border-width !default;
524
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
525

526
527
528
$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
529

530
531
532
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
533

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


539
// Jumbotron
Mark Otto's avatar
Mark Otto committed
540

541
542
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
543
544


545
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
546
//
547
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
548

549
550
551
$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
552

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

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

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


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

577
578
$card-link-hover-color:    #fff !default;

579
580
$card-deck-margin:         .625rem !default;

581

582
// Tooltips
Mark Otto's avatar
Mark Otto committed
583

584
585
586
587
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
588
589
590
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
591

592
593
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
594
595


596
// Popovers
Mark Otto's avatar
Mark Otto committed
597

598
599
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
600
$popover-border-width:                $border-width !default;
601
$popover-border-color:                rgba(0,0,0,.2) !default;
602
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
603

604
$popover-title-bg:                    darken($popover-bg, 3%) !default;
605
606
607
608
609
$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
610

611
612
$popover-arrow-width:                 10px !default;
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
Mark Otto committed
613

614
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
615
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
616
617


618
619
// Tags

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

639
// Modals
Mark Otto's avatar
Mark Otto committed
640

641
// Padding applied to the modal body
642
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
643

644
$modal-dialog-margin:         10px !default;
645
$modal-dialog-sm-up-margin-y: 30px !default;
646

647
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
648
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
649

650
651
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
652
$modal-content-border-width:     $border-width !default;
653
654
$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
655

656
657
658
659
$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;
660
$modal-header-border-width:   $modal-content-border-width !default;
661
$modal-footer-border-width:   $modal-header-border-width !default;
Mark Otto's avatar
Mark Otto committed
662

663
664
665
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
666
667


668
// Alerts
Mark Otto's avatar
Mark Otto committed
669
//
670
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
671

672
$alert-padding:               15px !default;
673
$alert-border-radius:         $border-radius !default;
674
$alert-link-font-weight:      bold !default;
675
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
676

677
678
679
$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
680

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

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

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


694
// Progress bars
Mark Otto's avatar
Mark Otto committed
695

696
$progress-bg:                 #eee !default;
697
$progress-bar-color:          #0074d9 !default;
698
$progress-border-radius:      $border-radius !default;
699
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
700

701
702
703
704
705
$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
706
707


708
// List group
Mark Otto's avatar
Mark Otto committed
709

710
$list-group-bg:                 #fff !default;
711
$list-group-border-color:       #ddd !default;
712
$list-group-border-width:       $border-width !default;
713
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
714

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

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

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


Mark Otto's avatar
Mark Otto committed
730
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
731

732
733
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
734
$thumbnail-border-width:      $border-width !default;
735
$thumbnail-border-color:      #ddd !default;
736
$thumbnail-border-radius:     $border-radius !default;
737
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
738
739


740
741
742
743
744
// Figures

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


745
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
746

747
748
749
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
750

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


757
758
759
760
761
762
763
// Media objects

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


764
// Carousel
Mark Otto's avatar
Mark Otto committed
765

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

768
769
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
770
$carousel-control-sm-up-size:                 30px !default;
771
772
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
773

774
775
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
776

777
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
778
779


780
// Close
Mark Otto's avatar
Mark Otto committed
781

782
783
784
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
785
786


787
// Code
Mark Otto's avatar
Mark Otto committed
788

Mark Otto's avatar
Mark Otto committed
789
$code-color:                  #bd4147 !default;
790
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
791

792
793
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
794

795
796
797
798
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;