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


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

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

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

Mark Otto's avatar
Mark Otto committed
36

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

41
42
43
44
45
$gray-dark:                 #373a3c !default;
$gray:                      #55595c !default;
$gray-light:                #818a91 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
46

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


54
// Options
Mark Otto's avatar
Mark Otto committed
55
//
56
57
58
59
60
61
62
63
// Quickly modify global styling by enabling or disabling optional features.

$enable-flex:               false !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;
$enable-hover-media-query:  false !default;
64
$enable-grid-classes:       true !default;
65
$enable-print-styles:       true !default;
66
67
68
69
70
71
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
611
612
613
614
615
616
617
618
619
620
621
// Tags

$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-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-title-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
630
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
Mark Otto committed
631

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

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

642
643
644
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
645
646


647
// Alerts
Mark Otto's avatar
Mark Otto committed
648
//
649
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
650

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

656
657
658
$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
659

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

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

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


673
// Progress bars
Mark Otto's avatar
Mark Otto committed
674

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

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


687
// List group
Mark Otto's avatar
Mark Otto committed
688

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

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

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

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


Mark Otto's avatar
Mark Otto committed
709
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
710

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


719
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
720

721
722
723
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
724

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


731
732
733
734
735
736
737
// Media objects

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


738
// Carousel
Mark Otto's avatar
Mark Otto committed
739

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

742
743
744
745
$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
746

747
748
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
749

750
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
751
752


753
// Close
Mark Otto's avatar
Mark Otto committed
754

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


760
// Code
Mark Otto's avatar
Mark Otto committed
761

Mark Otto's avatar
Mark Otto committed
762
$code-color:                  #bd4147 !default;
763
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
764

765
766
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
767

768
769
770
771
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;