_variables.scss 28.4 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
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.

Mark Otto's avatar
Mark Otto committed
24

25
// Colors
Mark Otto's avatar
Mark Otto committed
26
//
27
// Grayscale and brand colors for use across Bootstrap.
Mark Otto's avatar
Mark Otto committed
28

29
30
31
32
33
$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
34

35
36
37
38
39
$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
40
41


42
// Options
Mark Otto's avatar
Mark Otto committed
43
//
44
45
46
47
48
49
50
51
// 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;
52
$enable-grid-classes:       true !default;
53
54
55
56
57
58
59


// 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
60
61
62
$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
63
64
$spacers: (
  0: (
Mark Otto's avatar
spacing    
Mark Otto committed
65
66
    x: 0,
    y: 0
67
68
  ),
  1: (
Mark Otto's avatar
spacing    
Mark Otto committed
69
70
    x: $spacer-x,
    y: $spacer-y
71
72
  ),
  2: (
Mark Otto's avatar
spacing    
Mark Otto committed
73
74
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
75
76
  ),
  3: (
Mark Otto's avatar
spacing    
Mark Otto committed
77
78
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
79
80
  )
) !default;
Mark Otto's avatar
spacing    
Mark Otto committed
81
$border-width: 1px !default;
82
83
84
85
86


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

Mark Otto's avatar
Mark Otto committed
88
89
$body-bg:    #fff !default;
$body-color: $gray-dark !default;
90
91
92
93
94


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

Mark Otto's avatar
Mark Otto committed
96
97
98
99
$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
100
101


102
// Grid breakpoints
Mark Otto's avatar
Mark Otto committed
103
//
104
105
// 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
106

107
108
$grid-breakpoints: (
  xs: 0,
109
110
111
112
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
113
) !default;
Mark Otto's avatar
Mark Otto committed
114

Mark Otto's avatar
Mark Otto committed
115

116
// Grid containers
Mark Otto's avatar
Mark Otto committed
117
//
118
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
Mark Otto committed
119

120
$container-max-widths: (
121
122
123
124
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
125
126
127
128
129
130
131
) !default;


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

Mark Otto's avatar
Mark Otto committed
132
133
$grid-columns:      12 !default;
$grid-gutter-width: 1.875rem !default; // 30px
Mark Otto's avatar
Mark Otto committed
134

135

136
// Typography
Mark Otto's avatar
Mark Otto committed
137
//
138
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
Mark Otto committed
139

Mark Otto's avatar
Mark Otto committed
140
141
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
142
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
Mark Otto committed
143
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
Mark Otto committed
144

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

Mark Otto's avatar
Mark Otto committed
148
149
150
151
$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
152

Mark Otto's avatar
Mark Otto committed
153
154
155
156
157
158
$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
159

Mark Otto's avatar
Mark Otto committed
160
161
162
163
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
164

Mark Otto's avatar
Mark Otto committed
165
166
167
168
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
169

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

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

Mark Otto's avatar
Mark Otto committed
178
179
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
Mark Otto committed
180

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

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

Mark Otto's avatar
Mark Otto committed
185
186
187
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
188

Mark Otto's avatar
Mark Otto committed
189
190
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
191

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

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

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

Mark Otto's avatar
Mark Otto committed
199

200
// Components
Mark Otto's avatar
Mark Otto committed
201
//
Mark Otto's avatar
Mark Otto committed
202
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Mark Otto committed
203

XhmikosR's avatar
XhmikosR committed
204
$line-height-lg:         (4 / 3) !default;
205
$line-height-sm:         1.5 !default;
Mark Otto's avatar
Mark Otto committed
206

207
$border-radius:          .25rem !default;
208
209
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;
Mark Otto's avatar
Mark Otto committed
210

211
212
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
213

214
$caret-width:            .3em !default;
215
$caret-width-lg:         $caret-width !default;
Mark Otto's avatar
Mark Otto committed
216
217


218
// Tables
Mark Otto's avatar
Mark Otto committed
219
//
220
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
Mark Otto committed
221

222
223
$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;
Mark Otto's avatar
Mark Otto committed
224

225
226
227
228
$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
229

230
$table-border-width:            $border-width !default;
231
$table-border-color:            $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
232
233


234
// Buttons
Mark Otto's avatar
Mark Otto committed
235
//
236
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
Mark Otto committed
237

238
239
$btn-padding-x:                  1rem !default;
$btn-padding-y:                  .375rem !default;
240
$btn-font-weight:                normal !default;
241
$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
242
$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
Mark Otto's avatar
Mark Otto committed
243

244
245
$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
246
$btn-primary-border:             $btn-primary-bg !default;
Mark Otto's avatar
Mark Otto committed
247

248
249
$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
250
$btn-secondary-border:           #ccc !default;
Mark Otto's avatar
Mark Otto committed
251

252
253
$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
254
$btn-info-border:                $btn-info-bg !default;
Mark Otto's avatar
Mark Otto committed
255

256
257
$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
258
$btn-success-border:             $btn-success-bg !default;
Mark Otto's avatar
Mark Otto committed
259

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

264
265
$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
266
$btn-danger-border:              $btn-danger-bg !default;
Mark Otto's avatar
Mark Otto committed
267

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

270
$btn-padding-x-sm:               .75rem !default;
271
$btn-padding-y-sm:               .25rem !default;
272

273
$btn-padding-x-lg:               1.25rem !default;
274
275
$btn-padding-y-lg:               .75rem !default;

276
$btn-block-spacing-y:            5px !default;
277
278
279
280
$btn-toolbar-margin:             5px !default;

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

Mark Otto's avatar
Mark Otto committed
282
// Allows for customizing button radius independently from global border radius
283
284
285
$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
286

Mark Otto's avatar
Mark Otto committed
287

288
// Forms
Mark Otto's avatar
Mark Otto committed
289

290
$input-padding-x:                .75rem !default;
291
$input-padding-y:                .375rem !default;
292

293
294
$input-bg:                       #fff !default;
$input-bg-disabled:              $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
295

296
$input-color:                    $gray !default;
297
$input-border-color:             #ccc !default;
298
$input-btn-border-width:         $border-width !default; // For form controls and buttons
Mark Otto's avatar
Mark Otto committed
299
$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
300

301
$input-border-radius:            $border-radius !default;
302
303
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;
Mark Otto's avatar
Mark Otto committed
304

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

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

310
311
312
$input-padding-x-sm:             .75rem !default;
$input-padding-y-sm:             .275rem !default;

313
$input-padding-x-lg:             1.25rem !default;
314
315
$input-padding-y-lg:             .75rem !default;

316
317
318
$input-height:                   (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
$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
319

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

322
$input-group-addon-bg:           $gray-lighter !default;
323
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
Mark Otto committed
324

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

327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
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
369
370
371
372
373
374
$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;
$custom-checkbox-checked-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=" !default;
$custom-checkbox-indeterminate-bg: #0074d9 !default;
$custom-checkbox-indeterminate-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K" !default;
$custom-checkbox-indeterminate-box-shadow: none !default;

$custom-radio-radius: 50% !default;
$custom-radio-checked-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==" !default;

$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
$custom-select-indicator:     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC" !default;
$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;
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5) !default;

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

376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
$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;
391
392
393
394
395
396
397
398
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
399
400


401
// Form validation icons
402
403
404
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;
$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default;
405

Mark Otto's avatar
Mark Otto committed
406

407
// Dropdowns
Mark Otto's avatar
Mark Otto committed
408
//
409
// Dropdown menu container and contents.
Mark Otto's avatar
Mark Otto committed
410

411
$dropdown-bg:                    #fff !default;
412
$dropdown-border-color:          rgba(0,0,0,.15) !default;
413
$dropdown-border-width:          $border-width !default;
414
$dropdown-divider-bg:            #e5e5e5 !default;
415
$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
Mark Otto's avatar
Mark Otto committed
416

417
418
419
$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
420

421
422
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
Mark Otto committed
423

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

426
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
Mark Otto committed
427
428


429
// Z-index master list
Mark Otto's avatar
Mark Otto committed
430
431
432
433
//
// 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.

434
$zindex-dropdown-backdrop:  990 !default;
435
436
437
438
439
$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
440
$zindex-navbar-sticky:     1030 !default;
Mark Otto's avatar
Mark Otto committed
441
442
$zindex-modal-bg:          1040 !default;
$zindex-modal:             1050 !default;
Mark Otto's avatar
Mark Otto committed
443
444


445
// Navbar
Mark Otto's avatar
Mark Otto committed
446

447
$navbar-border-radius:              $border-radius !default;
448
449
$navbar-padding-x:                  $spacer !default;
$navbar-padding-y:                  ($spacer / 2) !default;
450

451
452
453
454
$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;
455

456
457
458
459
$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
460
461


462
// Navs
Mark Otto's avatar
Mark Otto committed
463

Mark Otto's avatar
Mark Otto committed
464
465
466
467
468
469
470
471
472
473
474
475
$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;
476
$nav-tabs-active-link-hover-bg:               $body-bg !default;
Mark Otto's avatar
Mark Otto committed
477
478
479
480
$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;

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


486
// Pagination
Mark Otto's avatar
Mark Otto committed
487

488
489
490
491
492
493
494
495
$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;


496
497
$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
498
$pagination-border-width:              $border-width !default;
499
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
Mark Otto committed
500

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

505
506
507
$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;
Mark Otto's avatar
Mark Otto committed
508

509
510
511
$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;
Mark Otto's avatar
Mark Otto committed
512
513


514
// Jumbotron
Mark Otto's avatar
Mark Otto committed
515

516
517
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
Mark Otto committed
518
519


520
// Form states and alerts
Mark Otto's avatar
Mark Otto committed
521
//
522
// Define colors for form feedback states and, by default, alerts.
Mark Otto's avatar
Mark Otto committed
523

524
525
526
$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
527

528
529
530
$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
531

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

536
537
538
$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
539
540


541
// Cards
542
543
$card-spacer-x:            1.25rem !default;
$card-spacer-y:            .75rem !default;
544
$card-border-width:        1px !default;
545
$card-border-radius:       $border-radius !default;
546
$card-border-color:        #e5e5e5 !default;
547
$card-border-radius-inner: $card-border-radius !default;
548
$card-cap-bg:              #f5f5f5 !default;
549
$card-bg:                  #fff !default;
550

551
552
$card-link-hover-color:    #fff !default;

553
554
$card-deck-margin:         .625rem !default;

555

556
// Tooltips
Mark Otto's avatar
Mark Otto committed
557

558
559
560
561
$tooltip-max-width:           200px !default;
$tooltip-color:               #fff !default;
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;
562
563
564
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
$tooltip-margin:              3px !default;
Mark Otto's avatar
Mark Otto committed
565

566
567
$tooltip-arrow-width:         5px !default;
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
Mark Otto committed
568
569


570
// Popovers
Mark Otto's avatar
Mark Otto committed
571

572
573
$popover-bg:                          #fff !default;
$popover-max-width:                   276px !default;
574
$popover-border-width:                $border-width !default;
575
$popover-border-color:                rgba(0,0,0,.2) !default;
576
$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
Mark Otto's avatar
Mark Otto committed
577

578
$popover-title-bg:                    darken($popover-bg, 3%) !default;
579
580
581
582
583
$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
584

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

588
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Gleb Mazovetskiy's avatar
Gleb Mazovetskiy committed
589
$popover-arrow-outer-color:           fade-in($popover-border-color, 0.05) !default;
Mark Otto's avatar
Mark Otto committed
590
591


592
// Labels
Mark Otto's avatar
Mark Otto committed
593

594
595
596
597
598
599
$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
600

601
602
$label-color:                 #fff !default;
$label-link-hover-color:      #fff !default;
603
$label-font-weight:           bold !default;
Mark Otto's avatar
Mark Otto committed
604
605


606
// Modals
Mark Otto's avatar
Mark Otto committed
607

608
// Padding applied to the modal body
609
$modal-inner-padding:         15px !default;
Mark Otto's avatar
Mark Otto committed
610

611
$modal-title-padding:         15px !default;
612
$modal-title-line-height:     $line-height !default;
Mark Otto's avatar
Mark Otto committed
613

614
615
616
617
$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
618

619
620
621
622
$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
623

624
625
626
$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
Mark Otto's avatar
Mark Otto committed
627
628


629
// Alerts
Mark Otto's avatar
Mark Otto committed
630
//
631
// Define alert colors, border radius, and padding.
Mark Otto's avatar
Mark Otto committed
632

633
$alert-padding:               15px !default;
634
$alert-border-radius:         $border-radius !default;
635
$alert-link-font-weight:      bold !default;
636
$alert-border-width:          $border-width !default;
Mark Otto's avatar
Mark Otto committed
637

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

642
643
644
$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
645

646
647
648
$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
649

650
651
652
$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
653
654


655
// Progress bars
Mark Otto's avatar
Mark Otto committed
656

657
$progress-bg:                 #eee !default;
658
$progress-bar-color:          #0074d9 !default;
659
$progress-border-radius:      $border-radius !default;
660
$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
Mark Otto's avatar
Mark Otto committed
661

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


669
// List group
Mark Otto's avatar
Mark Otto committed
670

671
$list-group-bg:                 #fff !default;
672
$list-group-border-color:       #ddd !default;
673
$list-group-border-width:       $border-width !default;
674
$list-group-border-radius:      $border-radius !default;
Mark Otto's avatar
Mark Otto committed
675

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

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

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


Mark Otto's avatar
Mark Otto committed
691
// Image thumbnails
Mark Otto's avatar
Mark Otto committed
692

693
694
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
695
$thumbnail-border-width:      $border-width !default;
696
$thumbnail-border-color:      #ddd !default;
697
$thumbnail-border-radius:     $border-radius !default;
698
$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
Mark Otto's avatar
Mark Otto committed
699
700


701
// Breadcrumbs
Mark Otto's avatar
Mark Otto committed
702

703
704
705
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
Mark Otto committed
706

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


713
714
715
716
717
718
719
// Media objects

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


720
// Carousel
Mark Otto's avatar
Mark Otto committed
721

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

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

729
730
$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;
Mark Otto's avatar
Mark Otto committed
731

732
$carousel-caption-color:                      #fff !default;
Mark Otto's avatar
Mark Otto committed
733
734


735
// Close
Mark Otto's avatar
Mark Otto committed
736

737
738
739
$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;
Mark Otto's avatar
Mark Otto committed
740
741


742
// Code
Mark Otto's avatar
Mark Otto committed
743

Mark Otto's avatar
Mark Otto committed
744
$code-color:                  #bd4147 !default;
745
$code-bg:                     #f7f7f9 !default;
Mark Otto's avatar
Mark Otto committed
746

747
748
$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;
Mark Otto's avatar
Mark Otto committed
749

750
751
752
753
$pre-bg:                      #f7f7f9 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;