_variables.scss 29 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;
52
$brand-inverse:             $gray-dark !default;
Mark Otto's avatar
Mark Otto committed
53
54


55
// Options
Mark Otto's avatar
Mark Otto committed
56
//
57
58
59
60
61
62
63
64
// 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;
65
$enable-grid-classes:       true !default;
66
$enable-print-styles:       true !default;
67
68
69
70
71
72


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

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


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

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


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

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


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

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

Mark Otto's avatar
Mark Otto committed
131

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

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


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

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

152

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
221

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
307

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

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

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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
339
$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
340
341
$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
Mark Otto's avatar
Mark Otto committed
342

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

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

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

350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
$custom-control-gutter:   1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;

$custom-control-indicator-size:       1rem !default;
$custom-control-indicator-bg:         #ddd !default;
$custom-control-indicator-bg-size:    50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;

$custom-control-disabled-cursor:             $cursor-disabled !default;
$custom-control-disabled-indicator-bg:       #eee !default;
$custom-control-disabled-description-color:  #767676 !default;

$custom-control-checked-indicator-color:      #fff !default;
$custom-control-checked-indicator-bg:         #0074d9 !default;
$custom-control-checked-indicator-box-shadow: none !default;

$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;

$custom-control-active-indicator-color:      #fff !default;
$custom-control-active-indicator-bg:         #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !default;

$custom-checkbox-radius: $border-radius !default;
374
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
375
$custom-checkbox-indeterminate-bg: #0074d9 !default;
376
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
377
378
379
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
380
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
381
382
383
384

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

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

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


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

Mark Otto's avatar
Mark Otto committed
431

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

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

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

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

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

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

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


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

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


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

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

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

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


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

Mark Otto's avatar
Mark Otto committed
495
496
497
498
499
500
501
502
503
504
$nav-item-margin:               .2rem !default;
$nav-item-inline-spacer:        1rem !default;
$nav-link-padding:              .5em 1em !default;
$nav-link-hover-bg:             $gray-lighter !default;
$nav-disabled-link-color:       $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg:    transparent !default;

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

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


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

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


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

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

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

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


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

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


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

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

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

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

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


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

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

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

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

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

592

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

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

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


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

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

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

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

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


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

631
632
633
634
635
636
$tag-default-bg:            $gray-light !default;
$tag-primary-bg:            $brand-primary !default;
$tag-success-bg:            $brand-success !default;
$tag-info-bg:               $brand-info !default;
$tag-warning-bg:            $brand-warning !default;
$tag-danger-bg:             $brand-danger !default;
Mark Otto's avatar
Mark Otto committed
637

638
639
640
641
642
643
$tag-color:                 #fff !default;
$tag-link-hover-color:      #fff !default;
$tag-font-size:             75% !default;
$tag-font-weight:           bold !default;
$tag-padding-x:             .4em !default;
$tag-padding-y:             .25em !default;
Mark Otto's avatar
Mark Otto committed
644

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
744

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

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


755
756
757
758
759
// Figures

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


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

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

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


772
773
774
775
776
777
778
// Media objects

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


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

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

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

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

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

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

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

Mark Otto's avatar
Mark Otto committed
802

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

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


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

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

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

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