_variables.scss 27 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
118
// Define the minimum and maximum dimensions at which your layout will change,
// 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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
215

216
// Components
Mark Otto's avatar
Mark Otto committed
217
//
Mark Otto's avatar
Mark Otto committed
218
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Mark Otto committed
219

XhmikosR's avatar
XhmikosR committed
220
$line-height-lg:         (4 / 3) !default;
221
$line-height-sm:         1.5 !default;
Mark Otto's avatar
Mark Otto committed
222

223
$border-radius:          .25rem !default;
224
225
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;
Mark Otto's avatar
Mark Otto committed
226

227
228
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
229

230
$caret-width:            .3em !default;
231
$caret-width-lg:         $caret-width !default;
Mark Otto's avatar
Mark Otto committed
232
233


234
// Tables
Mark Otto's avatar
Mark Otto committed
235
//
236
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
Mark Otto committed
237

238
239
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Mark Otto's avatar
Mark Otto committed
240

241
242
243
244
$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
245

246
$table-border-width:            $border-width !default;
247
$table-border-color:            $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
248
249


250
// Buttons
Mark Otto's avatar
Mark Otto committed
251
//
252
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
Mark Otto committed
253

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

261
262
$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
263
$btn-primary-border:             $btn-primary-bg !default;
Mark Otto's avatar
Mark Otto committed
264

265
266
$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
267
$btn-secondary-border:           #ccc !default;
Mark Otto's avatar
Mark Otto committed
268

269
270
$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
271
$btn-info-border:                $btn-info-bg !default;
Mark Otto's avatar
Mark Otto committed
272

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

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

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

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

287
$btn-padding-x-sm:               .5rem !default;
288
$btn-padding-y-sm:               .25rem !default;
289

290
$btn-padding-x-lg:               1.5rem !default;
291
292
$btn-padding-y-lg:               .75rem !default;

293
$btn-block-spacing-y:            5px !default;
294
295
296
297
$btn-toolbar-margin:             5px !default;

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

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

Mark Otto's avatar
Mark Otto committed
304

305
// Forms
Mark Otto's avatar
Mark Otto committed
306

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

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

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

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

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

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

328
329
$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;
330

331
$input-padding-x-lg:             1.5rem !default;
332
333
$input-padding-y-lg:             .75rem !default;

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

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

340
$input-group-addon-bg:           $gray-lighter !default;
341
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
Mark Otto committed
342

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

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

$custom-radio-radius: 50% !default;
375
$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;
376
377
378
379
380
381
382

$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
383
$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;
384
385
386
387
388
$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
389
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
390
391
392

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

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


419
// Form validation icons
420
421
422
$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;
423

Mark Otto's avatar
Mark Otto committed
424

425
// Dropdowns
Mark Otto's avatar
Mark Otto committed
426
//
427
// Dropdown menu container and contents.
Mark Otto's avatar
Mark Otto committed
428

429
$dropdown-bg:                    #fff !default;
430
$dropdown-border-color:          rgba(0,0,0,.15) !default;
431
$dropdown-border-width:          $border-width !default;
432
$dropdown-divider-bg:            #e5e5e5 !default;
433
$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
434

435
436
437
$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
438

439
440
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
Mark Otto committed
441

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

444
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
Mark Otto committed
445
446


447
// Z-index master list
Mark Otto's avatar
Mark Otto committed
448
449
450
451
//
// 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.

452
$zindex-dropdown-backdrop:  990 !default;
453
454
455
456
457
$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
458
$zindex-navbar-sticky:     1030 !default;
Mark Otto's avatar
Mark Otto committed
459
460
$zindex-modal-bg:          1040 !default;
$zindex-modal:             1050 !default;
Mark Otto's avatar
Mark Otto committed
461
462


463
// Navbar
Mark Otto's avatar
Mark Otto committed
464

465
$navbar-border-radius:              $border-radius !default;
466
467
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
468

469
470
471
472
$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;
473

474
475
476
477
$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
478
479


480
// Navs
Mark Otto's avatar
Mark Otto committed
481

Mark Otto's avatar
Mark Otto committed
482
483
484
485
486
487
488
489
490
491
492
493
$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;
494
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
495
496
497
498
$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;

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


504
// Pagination
Mark Otto's avatar
Mark Otto committed
505

506
507
508
509
510
511
512
513
$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;


514
515
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
516
$pagination-border-width:              $border-width !default;
517
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
518

519
520
521
$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
522

523
524
525
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
526

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


532
// Jumbotron
Mark Otto's avatar
Mark Otto committed
533

534
535
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
536
537


538
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
539
//
540
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
541

542
543
544
$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
545

546
547
548
$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
549

550
551
552
$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
$state-warning-border:           darken($state-warning-bg, 5%) !default;
Mark Otto's avatar
Mark Otto committed
553

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


559
// Cards
560
561
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
562
$card-border-width:        1px !default;
563
$card-border-radius:       $border-radius !default;
564
$card-border-color:        rgba(0,0,0,.125) !default;
565
$card-border-radius-inner: $card-border-radius !default;
566
$card-cap-bg:              #f5f5f5 !default;
567
$card-bg:                  #fff !default;
568

569
570
$card-link-hover-color:    #fff !default;

571
572
$card-deck-margin:         .625rem !default;

573

574
// Tooltips
Mark Otto's avatar
Mark Otto committed
575

576
577
578
579
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
580
581
582
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
583

584
585
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
586
587


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

590
591
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
592
$popover-border-width:                $border-width !default;
593
$popover-border-color:                rgba(0,0,0,.2) !default;
594
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
595

596
$popover-title-bg:                    darken($popover-bg, 3%) !default;
597
598
599
600
601
$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
602

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

606
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
607
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
Mark Otto committed
608
609


610
// Labels
Mark Otto's avatar
Mark Otto committed
611

612
613
614
615
616
617
$label-default-bg:            $gray-light !default;
$label-primary-bg:            $brand-primary !default;
$label-success-bg:            $brand-success !default;
$label-info-bg:               $brand-info !default;
$label-warning-bg:            $brand-warning !default;
$label-danger-bg:             $brand-danger !default;
Mark Otto's avatar
Mark Otto committed
618

619
620
$label-color:                 #fff !default;
$label-link-hover-color:      #fff !default;
621
$label-font-weight:           bold !default;
Mark Otto's avatar
Mark Otto committed
622
623


624
// Modals
Mark Otto's avatar
Mark Otto committed
625

626
// Padding applied to the modal body
627
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
628

629
$modal-dialog-margin:         10px !default;
630
$modal-dialog-sm-up-margin-y: 30px !default;
631

632
$modal-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
633
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
634

635
636
637
638
$modal-content-bg:               #fff !default;
$modal-content-border-color:     rgba(0,0,0,.2) !default;
$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
639

640
641
642
643
$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;
Mark Otto's avatar
Mark Otto committed
644

645
646
647
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
648
649


650
// Alerts
Mark Otto's avatar
Mark Otto committed
651
//
652
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
653

654
$alert-padding:               15px !default;
655
$alert-border-radius:         $border-radius !default;
656
$alert-link-font-weight:      bold !default;
657
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
658

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

663
664
665
$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
666

667
668
669
$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
670

671
672
673
$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
674
675


676
// Progress bars
Mark Otto's avatar
Mark Otto committed
677

678
$progress-bg:                 #eee !default;
679
$progress-bar-color:          #0074d9 !default;
680
$progress-border-radius:      $border-radius !default;
681
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
682

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


690
// List group
Mark Otto's avatar
Mark Otto committed
691

692
$list-group-bg:                 #fff !default;
693
$list-group-border-color:       #ddd !default;
694
$list-group-border-width:       $border-width !default;
695
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
696

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

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

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


Mark Otto's avatar
Mark Otto committed
712
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
713

714
715
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
716
$thumbnail-border-width:      $border-width !default;
717
$thumbnail-border-color:      #ddd !default;
718
$thumbnail-border-radius:     $border-radius !default;
719
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
720
721


722
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
723

724
725
726
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
727

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


734
735
736
737
738
739
740
// Media objects

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


741
// Carousel
Mark Otto's avatar
Mark Otto committed
742

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

745
746
747
748
$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;
Mark Otto's avatar
Mark Otto committed
749

750
751
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
752

753
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
754
755


756
// Close
Mark Otto's avatar
Mark Otto committed
757

758
759
760
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
761
762


763
// Code
Mark Otto's avatar
Mark Otto committed
764

Mark Otto's avatar
Mark Otto committed
765
$code-color:                  #bd4147 !default;
766
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
767

768
769
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
770

771
772
773
774
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;