Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 31.6 KB
Newer Older
Mark Otto's avatar
convert to scss  
Mark Otto committed
1 
// Variables
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
2 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
3
4 
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
Mark Otto's avatar
Mention variable naming scheme to help with #22414    
Mark Otto committed
5 
//
Mark Otto's avatar
Update _variables.scss    
Mark Otto committed
6 
// Variables should follow the `$component-state-property-size` formula for
Mark Otto's avatar
Mention variable naming scheme to help with #22414    
Mark Otto committed
7 
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
8
Chris Bell's avatar
Update _variables.scss    
Chris Bell committed
9 
// Table of Contents
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
10 
//
Mark Otto's avatar
rip numbers    
Mark Otto committed
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navs
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
27 
// Navbar
Mark Otto's avatar
rip numbers    
Mark Otto committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
45
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 
// New colors

$white:  #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:  #000 !default;

$grays: (
  100: $gray-100,
  200: $gray-200,
  300: $gray-300,
  400: $gray-400,
  500: $gray-500,
  600: $gray-600,
  700: $gray-700,
  800: $gray-800,
  900: $gray-900
) !default;

$blue:    #007bff !default;
Mark Otto's avatar
update theme colors    
Mark Otto committed
73
74
75
76
77
78
79
80
81 
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100 

$colors: (
  blue: $blue,
  indigo: $indigo,
  purple: $purple,
  pink: $pink,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  cyan: $cyan,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-800
) !default;

$theme-colors: (
  primary: $blue,
Mark Otto's avatar
update theme colors    
Mark Otto committed
101 
  secondary: $gray-600,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
102
103 
  success: $green,
  info: $cyan,
Mark Otto's avatar
update theme colors    
Mark Otto committed
104 
  warning: $yellow,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
105 
  danger: $red,
Mark Otto's avatar
update theme colors    
Mark Otto committed
106
107 
  light: $gray-100,
  dark: $gray-800
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
108
109 
) !default;
Mark Otto's avatar
add theme-color-level function and interval so we can generate shades of colors    
Mark Otto committed
110
111 
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
112
Mark Otto's avatar
rip numbers    
Mark Otto committed
113 
// Colors
Mark Otto's avatar
convert to scss  
Mark Otto committed
114 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
115 
// Grayscale and brand colors for use across Bootstrap.
Mark Otto's avatar
convert to scss  
Mark Otto committed
116
Mark Otto's avatar
Redo color vars    
Mark Otto committed
117 
// Create grayscale
Mark Otto's avatar
v4: Miscellaneous color changes (#21199)    
Mark Otto committed
118
119
120 
$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
121
122 
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
123
124
Mark Otto's avatar
rip numbers    
Mark Otto committed
125 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
126 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
127
128
129
130
131 
// Quickly modify global styling by enabling or disabling optional features.

$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
Mark Otto's avatar
re-enable transitions (which according to the options.md doc is the default)    
Mark Otto committed
132 
$enable-transitions:        true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
133 
$enable-hover-media-query:  false !default;
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
134 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
135 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
136
137
Mark Otto's avatar
rip numbers    
Mark Otto committed
138 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
139
140
141 
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
Tobias's avatar
Document the possibility of extending the $spacers map    
Tobias committed
142 
// You can add more entries to the $spacers map, should you need more variation.
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
143
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
144 
$spacer: 1rem !default;
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
145 
$spacers: (
Starsam80's avatar
Clean up spacers a bit more    
Starsam80 committed
146
147
148
149
150
151 
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
152 
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
153
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
154 
// This variable affects the `.h-*` and `.w-*` classes.
Starsam80's avatar
Use variables for the width/height classes    
Starsam80 committed
155
156
157
158
159
160 
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
161
Mark Otto's avatar
rip numbers    
Mark Otto committed
162 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
163
164 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
165
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
166 
$body-bg:       $white !default;
Christopher Baker's avatar
add $inverse-bg and $inverse-color    
Christopher Baker committed
167 
$body-color:    $gray-dark !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
168
Mark Otto's avatar
rip numbers    
Mark Otto committed
169 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
170
171 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
172
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
173 
$link-color:            theme-color("primary") !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
174
175
176 
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
177
178
Mark Otto's avatar
rip numbers    
Mark Otto committed
179 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
180 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
181 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
182 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
183
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
184
185 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
186 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
187
188
189 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
190 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
191 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
192 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
193
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
194
Mark Otto's avatar
rip numbers    
Mark Otto committed
195 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
196 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
197 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
198
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
199 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
200 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
201 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
202 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
203 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
204 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
205 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
206
207
Mark Otto's avatar
rip numbers    
Mark Otto committed
208 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
209
210
211 
//
// Set the number of columns and specify the width of the gutters.
Kovah's avatar
Add breakpoint-specific gutters.    
Kovah committed
212
213
214
215
216
217
218
219
220 
$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;
Chris Rebert's avatar
add $use-hover-media-query to control @media (hover:hover) usage    
Chris Rebert committed
221
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
222
223
224
225
226 

// Components
//
// Define common padding and border radius sizes and more.
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
227 
$line-height-lg:         1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
228
229
230
231
232
233
234
235
236 
$line-height-sm:         1.5 !default;

$border-width: 1px !default;

$border-radius:          .25rem !default;
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;

$component-active-color: $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
237 
$component-active-bg:    theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
238
239
240
241
242
243
244
245 

$caret-width:            .3em !default;

$transition-base:        all .2s ease-in-out !default;
$transition-fade:        opacity .15s linear !default;
$transition-collapse:    height .35s ease !default;
Mark Otto's avatar
rip numbers    
Mark Otto committed
246 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
247 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
248 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
249
Mark Otto's avatar
Remove system-ui from font stack due to i18n issues    
Mark Otto committed
250 
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
Mark Otto's avatar
Add liberation Mono to the font stack for the Linux peeps    
Mark Otto committed
251 
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
252 
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
253
Mark Otto's avatar
Remove -size-root so we can respect user prefs on browser default font-size    
Mark Otto committed
254 
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
Mark Otto's avatar
more variables spacing    
Mark Otto committed
255
256
257 
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
258
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
259
260
261 
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
Mark Otto's avatar
Merge branch 'patch-1' of https://github.com/tomhorvat/bootstrap into tomhorvat-patch-1    
Mark Otto committed
262 
$font-weight-base: $font-weight-normal !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
263
264 
$line-height-base: 1.5 !default;
Patrick Yeo's avatar
Rename `$font-size-h*` to `$h*-font-size` for consistency (#22414)    
Patrick Yeo committed
265
266
267
268
269
270 
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.75rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
271
Mark Otto's avatar
more variables spacing    
Mark Otto committed
272
273
274
275
276 
$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
convert to scss  
Mark Otto committed
277
Mark Otto's avatar
fixes #21511: set line-height to 1.1 for display headings    
Mark Otto committed
278
279
280
281
282
283
284
285
286
287
288 
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

$display1-weight:     300 !default;
$display2-weight:     300 !default;
$display3-weight:     300 !default;
$display4-weight:     300 !default;
$display-line-height: $headings-line-height !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
289
290 
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
291
Mark Otto's avatar
Revert "Drop the $small-font-size variable for the newer $font-size-sm one"    
Mark Otto committed
292
293 
$small-font-size: 80% !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
294 
$text-muted: $gray-light !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
295
Mark Otto's avatar
more variables spacing    
Mark Otto committed
296
297
298 
$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
Chris Rebert's avatar
Extract $blockquote-border-width variable    
Chris Rebert committed
299 
$blockquote-border-width: .25rem !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
300
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
301 
$hr-border-color: rgba($black,.1) !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
302 
$hr-border-width: $border-width !default;
Mark Otto's avatar
unaffix sidebar and simplify styles of docs side nav to be more like v3    
Mark Otto committed
303
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
304
305 
$mark-padding: .2em !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
306 
$dt-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
307
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
308 
$kbd-box-shadow:         inset 0 -.1rem 0 rgba($black,.25) !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
309 
$nested-kbd-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
310
Mark Otto's avatar
more variables spacing    
Mark Otto committed
311 
$list-inline-padding: 5px !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
312
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
313
314 
$mark-bg: #fcf8e3 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
315
Mark Otto's avatar
rip numbers    
Mark Otto committed
316 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
317 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
318 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
319
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
320 
$table-cell-padding:            .75rem !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
321 
$table-cell-padding-sm:         .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
322
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
323 
$table-bg:                      transparent !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
324
325
326 
$table-accent-bg:               rgba($black,.05) !default;
$table-hover-bg:                rgba($black,.075) !default;
$table-active-bg:               $table-hover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
327
Mark Otto's avatar
reorder    
Mark Otto committed
328
329
330 
$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;
Christopher Baker's avatar
remove references to -* outside _variables.scss    
Christopher Baker committed
331
332
333 
$table-head-bg:                 $gray-lighter !default;
$table-head-color:              $gray !default;
Mark Otto's avatar
reorder    
Mark Otto committed
334 
$table-inverse-bg:              $gray-dark !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
335
336 
$table-inverse-accent-bg:       rgba($white, .05) !default;
$table-inverse-hover-bg:        rgba($white, .075) !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
337 
$table-inverse-border-color:    lighten($gray-dark, 7.5%) !default;
Mark Otto's avatar
reorder    
Mark Otto committed
338 
$table-inverse-color:           $body-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
339
340
Mark Otto's avatar
rip numbers    
Mark Otto committed
341 
// Buttons
Mark Otto's avatar
convert to scss  
Mark Otto committed
342 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
343 
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
convert to scss  
Mark Otto committed
344
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
345 
$input-btn-padding-y:       .5rem !default;
Mark Otto's avatar
tighten up horizontal input and button padding    
Mark Otto committed
346 
$input-btn-padding-x:       .75rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
347
348
349 
$input-btn-line-height:     1.25 !default;

$input-btn-padding-y-sm:    .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
350 
$input-btn-padding-x-sm:    .5rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
351
352
353 
$input-btn-line-height-sm:  1.5 !default;

$input-btn-padding-y-lg:    .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
354 
$input-btn-padding-x-lg:    1rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
355
356 
$input-btn-line-height-lg:  1.5 !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
357 
$btn-font-weight:                $font-weight-normal !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
358 
$btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
359 
$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
360 
$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
361
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
362 
$btn-primary-color:              $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
363 
$btn-primary-bg:                 theme-color("primary") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
364 
$btn-primary-border-color:       $btn-primary-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
365
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
366 
$btn-secondary-color:            $gray-dark !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
367 
$btn-secondary-bg:               $white !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
368 
$btn-secondary-border-color:     #ccc !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
369
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
370 
$btn-info-color:                 $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
371 
$btn-info-bg:                    theme-color("info") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
372 
$btn-info-border-color:          $btn-info-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
373
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
374 
$btn-success-color:              $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
375 
$btn-success-bg:                 theme-color("success") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
376 
$btn-success-border-color:       $btn-success-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
377
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
378 
$btn-warning-color:              $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
379 
$btn-warning-bg:                 theme-color("warning") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
380 
$btn-warning-border-color:       $btn-warning-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
381
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
382 
$btn-danger-color:               $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
383 
$btn-danger-bg:                  theme-color("danger") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
384 
$btn-danger-border-color:        $btn-danger-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
385
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
386 
$btn-link-disabled-color:        $gray-light !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
387
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
388
389 
$btn-block-spacing-y:            .5rem !default;
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
390 
// Allows for customizing button radius independently from global border radius
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
391
392
393 
$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
Merge branch 'master' into v4    
Mark Otto committed
394
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
395
396 
$btn-transition:                 all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
397
Mark Otto's avatar
rip numbers    
Mark Otto committed
398 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
399
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
400 
$input-bg:                       $white !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
401 
$input-disabled-bg:              $gray-lighter !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
402
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
403 
$input-color:                    $gray !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
404 
$input-border-color:             rgba($black,.15) !default;
Chris Rebert's avatar
Use $input-btn-border-width for both .form-control and .btn borders; fixes #18424    
Chris Rebert committed
405 
$input-btn-border-width:         $border-width !default; // For form controls and buttons
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
406 
$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
407
Mark Otto's avatar
drop the base (hahaha), no but seriously drop the -base from our vars since it's cleaner    
Mark Otto committed
408 
$input-border-radius:            $border-radius !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
409
410 
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
411
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
412 
$input-focus-bg:                 $input-bg !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
413 
$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
Mark Otto's avatar
Merge branch 'v4-dev' into form-tweaks    
Mark Otto committed
414 
$input-focus-box-shadow:         $input-box-shadow, $btn-focus-box-shadow !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
415 
$input-focus-color:              $input-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
416
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
417 
$input-placeholder-color:        $gray-light !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
418
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
419
420
421
422
423
424
425
426
427
428 
$input-height-border:           $input-btn-border-width * 2 !default;

$input-height-inner:            ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height:                  calc(#{$input-height-inner} + #{$input-height-border}) !default;

$input-height-inner-sm:         ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm:               calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;

$input-height-inner-lg:         ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
429
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
430
431 
$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
432
433
434
435
436
437
438
439
440
441 
$form-text-margin-top:     .25rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;

$form-check-margin-bottom:  .5rem !default;
$form-check-input-gutter:   1.25rem !default;
$form-check-input-margin-y: .25rem !default;
$form-check-input-margin-x: .25rem !default;

$form-check-inline-margin-x: .75rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
442 
$form-group-margin-bottom:       1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
443
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
444 
$input-group-addon-bg:           $gray-lighter !default;
Chris Rebert's avatar
$input-border => $input-border-color    
Chris Rebert committed
445 
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
446
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
447
448 
$custom-control-gutter:   1.5rem !default;
$custom-control-spacer-y: .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
449 
$custom-control-spacer-x: 1rem !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
450
451
452
453 

$custom-control-indicator-size:       1rem !default;
$custom-control-indicator-bg:         #ddd !default;
$custom-control-indicator-bg-size:    50% 50% !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
454 
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
455
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
456
457 
$custom-control-indicator-disabled-bg:       $gray-lighter !default;
$custom-control-description-disabled-color:  $gray-light !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
458
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
459 
$custom-control-indicator-checked-color:      $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
460 
$custom-control-indicator-checked-bg:         theme-color("primary") !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
461 
$custom-control-indicator-checked-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
462
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
463 
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
464
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
465 
$custom-control-indicator-active-color:      $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
466 
$custom-control-indicator-active-bg:         lighten(theme-color("primary"), 35%) !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
467 
$custom-control-indicator-active-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
468
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
469
470 
$custom-checkbox-border-radius: $border-radius !default;
$custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' 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"), "#", "%23") !default;
Mark Otto's avatar
Fixes #20118: Add and use Sass variables to control the color of our embedded...    
Mark Otto committed
471
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
472 
$custom-checkbox-indeterminate-bg: theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
473
474 
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
475
476 
$custom-checkbox-indeterminate-box-shadow: none !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
477
478 
$custom-radio-border-radius: 50% !default;
$custom-radio-icon-checked: str-replace(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='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
479
480 

$custom-select-padding-y:          .375rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
481 
$custom-select-padding-x:          .75rem  !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
482 
$custom-select-height:              $input-height  !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
483 
$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
484 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
485
486 
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      $gray-light !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
487 
$custom-select-bg:            $white !default;
Matthew Rayfield's avatar
Add disabled styling for .custom-select    
Matthew Rayfield committed
488 
$custom-select-disabled-bg:   $gray-lighter !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
489 
$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
Mark Otto's avatar
Fixes #20118: Add and use Sass variables to control the color of our embedded...    
Mark Otto committed
490 
$custom-select-indicator-color: #333 !default;
Patrick H. Lauke's avatar
replace `#` with `%23` in SVG data urls with str-replace    
Patrick H. Lauke committed
491 
$custom-select-indicator:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
492
493
494
495 
$custom-select-border-width:  $input-btn-border-width !default;
$custom-select-border-color:  $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
496 
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
497 
$custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
498
Mark Otto's avatar
Redo the small custom select vars    
Mark Otto committed
499
500 
$custom-select-font-size-sm:  75% !default;
$custom-select-height-sm: $input-height-sm !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
501
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
502
503 
$custom-file-height:           2.5rem !default;
$custom-file-width:            14rem !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
504 
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
505
506 

$custom-file-padding-y:     1rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
507 
$custom-file-padding-x:     .5rem !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
508 
$custom-file-line-height:   1.5 !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
509 
$custom-file-color:         $gray !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
510 
$custom-file-bg:            $white !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
511 
$custom-file-border-width:  $border-width !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
512 
$custom-file-border-color:  $input-border-color !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
513 
$custom-file-border-radius: $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
514 
$custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
515 
$custom-file-button-color:  $custom-file-color !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
516 
$custom-file-button-bg:     $gray-lighter !default;
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
517
518
519
520
521
522
523
524 
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
525
526
Mark Otto's avatar
remove icons for now    
Mark Otto committed
527 
// Form validation
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
528
529 
$form-feedback-valid-color:   theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;
Mark Otto's avatar
move form validation icon vars to variables file    
Mark Otto committed
530
Mark Otto's avatar
convert to scss  
Mark Otto committed
531
Mark Otto's avatar
rip numbers    
Mark Otto committed
532 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
533 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
534 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
535
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
536
537
538 
$dropdown-min-width:             10rem !default;
$dropdown-padding-y:             .5rem !default;
$dropdown-margin-top:            .125rem !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
539
540 
$dropdown-bg:                    $white !default;
$dropdown-border-color:          rgba($black,.15) !default;
Chris Rebert's avatar
Add $dropdown-border-width; refs #18150    
Chris Rebert committed
541 
$dropdown-border-width:          $border-width !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
542 
$dropdown-divider-bg:            $gray-lighter !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
543 
$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
544
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
545
546 
$dropdown-link-color:            $gray-dark !default;
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
Mark Otto's avatar
change uses of #f5f5f5 to -lightest    
Mark Otto committed
547 
$dropdown-link-hover-bg:         $gray-lightest !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
548
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
549
550 
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
551
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
552 
$dropdown-link-disabled-color:   $gray-light !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
553
Mark Otto's avatar
Add dropdown-item-padding-y var    
Mark Otto committed
554 
$dropdown-item-padding-y:        .25rem !default;
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
555 
$dropdown-item-padding-x:        1.5rem !default;
Chris Rebert's avatar
Extract $dropdown-item-padding-x variable    
Chris Rebert committed
556
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
557 
$dropdown-header-color:          $gray-light !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
558
559
Mark Otto's avatar
rip numbers    
Mark Otto committed
560 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
561
562
563
564 
//
// 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.
Mark Otto's avatar
update rest of docs, remove navbar specific modifiers, fix docs example css    
Mark Otto committed
565 
$zindex-dropdown:           1000 !default;
Catalin Zalog's avatar
Change sticky order (#22027)    
Catalin Zalog committed
566 
$zindex-sticky:             1020 !default;
Mark Otto's avatar
update rest of docs, remove navbar specific modifiers, fix docs example css    
Mark Otto committed
567
568
569
570
571 
$zindex-fixed:              1030 !default;
$zindex-modal-backdrop:     1040 !default;
$zindex-modal:              1050 !default;
$zindex-popover:            1060 !default;
$zindex-tooltip:            1070 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
572
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
573
574
575 
// Navs

$nav-link-padding-y:            .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
576 
$nav-link-padding-x:            1rem !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
577 
$nav-link-disabled-color:       $gray-light !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
578
579
580
581
582 

$nav-tabs-border-color:                       #ddd !default;
$nav-tabs-border-width:                       $border-width !default;
$nav-tabs-border-radius:                      $border-radius !default;
$nav-tabs-link-hover-border-color:            $gray-lighter !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
583
584
585 
$nav-tabs-link-active-color:                  $gray !default;
$nav-tabs-link-active-bg:                     $body-bg !default;
$nav-tabs-link-active-border-color:           #ddd !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
586
587 

$nav-pills-border-radius:     $border-radius !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
588
589 
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg:    $component-active-bg !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
590
Mark Otto's avatar
rip numbers    
Mark Otto committed
591 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
592
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
593 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
594 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
595
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
596 
$navbar-brand-font-size:            $font-size-lg !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
597 
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
598 
$nav-link-height:                   $navbar-brand-font-size * $line-height-base !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
599
600
601 
$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
Mark Otto's avatar
Redo navbar-toggler    
Mark Otto committed
602 
$navbar-toggler-padding-y:           .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
603 
$navbar-toggler-padding-x:           .75rem !default;
Mark Otto's avatar
correction, -toggler-*    
Mark Otto committed
604
605 
$navbar-toggler-font-size:           $font-size-lg !default;
$navbar-toggler-border-radius:       $btn-border-radius !default;
Mark Otto's avatar
add new variable for -toggle-font-size    
Mark Otto committed
606
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
607
608
609
610
611
612 
$navbar-dark-color:                 rgba($white,.5) !default;
$navbar-dark-hover-color:           rgba($white,.75) !default;
$navbar-dark-active-color:          rgba($white,1) !default;
$navbar-dark-disabled-color:        rgba($white,.25) !default;
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color:  rgba($white,.1) !default;
Mark Otto's avatar
rewrite navbar once more for lower key styles and a new take on modifiers for...    
Mark Otto committed
613
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
614
615
616
617 
$navbar-light-color:                rgba($black,.5) !default;
$navbar-light-hover-color:          rgba($black,.7) !default;
$navbar-light-active-color:         rgba($black,.9) !default;
$navbar-light-disabled-color:       rgba($black,.3) !default;
Patrick Yeo's avatar
Rename `$navbar-*-toggler-bg` to `$navbar-*-toggler-icon-bg` since it's placed...    
Patrick Yeo committed
618 
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
619 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
620
Mark Otto's avatar
rip numbers    
Mark Otto committed
621 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
622
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
623 
$pagination-padding-y:                .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
624 
$pagination-padding-x:                .75rem !default;
Mark Otto's avatar
Follow up to #21052 to match small pagination links with small buttons    
Mark Otto committed
625 
$pagination-padding-y-sm:             .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
626 
$pagination-padding-x-sm:             .5rem !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
627 
$pagination-padding-y-lg:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
628 
$pagination-padding-x-lg:             1.5rem !default;
Stefan Staynov's avatar
Set line-height for page-links (#21052)    
Stefan Staynov committed
629 
$pagination-line-height:              1.25 !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
630
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
631 
$pagination-color:                     $link-color !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
632 
$pagination-bg:                        $white !default;
Chris Rebert's avatar
Add $pagination-border-width; refs #18150    
Chris Rebert committed
633 
$pagination-border-width:              $border-width !default;
Chris Rebert's avatar
Rename $pagination-border => $pagination-border-color for clarity    
Chris Rebert committed
634 
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
635
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
636
637 
$pagination-hover-color:               $link-hover-color !default;
$pagination-hover-bg:                  $gray-lighter !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
638 
$pagination-hover-border-color:        #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
639
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
640 
$pagination-active-color:              $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
641
642 
$pagination-active-bg:                 theme-color("primary") !default;
$pagination-active-border-color:       theme-color("primary") !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
643
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
644 
$pagination-disabled-color:            $gray-light !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
645 
$pagination-disabled-bg:               $white !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
646 
$pagination-disabled-border-color:     #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
647
648
Mark Otto's avatar
rip numbers    
Mark Otto committed
649 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
650
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
651
652 
$jumbotron-padding:              2rem !default;
$jumbotron-bg:                   $gray-lighter !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
653
654
Mark Otto's avatar
rip numbers    
Mark Otto committed
655 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
656
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
657 
$card-spacer-y:            .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
658 
$card-spacer-x:            1.25rem !default;
Mark Otto's avatar
unfuck that border from rem to px    
Mark Otto committed
659 
$card-border-width:        1px !default;
Chris Rebert's avatar
Make $card-border-radius default to $border-radius    
Chris Rebert committed
660 
$card-border-radius:       $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
661 
$card-border-color:        rgba($black,.125) !default;
Patrick Yeo's avatar
Rename `$card-border-radius-inner` to `$card-inner-border-radius`    
Patrick Yeo committed
662 
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
Mark Otto's avatar
change uses of #f5f5f5 to -lightest    
Mark Otto committed
663 
$card-cap-bg:              $gray-lightest !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
664 
$card-bg:                  $white !default;
Kevin Kirsche's avatar
Card variables should be in _variables.scss    
Kevin Kirsche committed
665
Mark Otto's avatar
rename .card-inverse to .card-dark, update docs to match    
Mark Otto committed
666 
$card-dark-link-hover-color:    $white !default;
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
667
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
668
669 
$card-img-overlay-padding: 1.25rem !default;
Mark Otto's avatar
move to grid gutter width, fixes #21300    
Mark Otto committed
670 
$card-deck-margin:          ($grid-gutter-width-base / 2) !default;
Chris Rebert's avatar
Introduce $card-deck-margin variable    
Chris Rebert committed
671
Mark Otto's avatar
add card column count variable    
Mark Otto committed
672 
$card-columns-count:        3 !default;
Mark Otto's avatar
Rename card column gap variable    
Mark Otto committed
673 
$card-columns-gap:          1.25rem !default;
Mark Otto's avatar
add card column margin variable instead of relying on a default card margin    
Mark Otto committed
674 
$card-columns-margin:       $card-spacer-y !default;
Chris Rebert's avatar
Add $card-columns-sm-up-column-gap variable    
Chris Rebert committed
675
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
676
Mark Otto's avatar
rip numbers    
Mark Otto committed
677 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
678
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
679 
$tooltip-max-width:           200px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
680
681 
$tooltip-color:               $white !default;
$tooltip-bg:                  $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
682 
$tooltip-opacity:             .9 !default;
Chris Rebert's avatar
Introduce $tooltip-padding-{x,y} & $tooltip-margin vars    
Chris Rebert committed
683
684 
$tooltip-padding-y:           3px !default;
$tooltip-padding-x:           8px !default;
Johann-S's avatar
Fix tooltip margin to be stick at their caller    
Johann-S committed
685 
$tooltip-margin:              0 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
686
687
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
688 
$tooltip-arrow-width:         5px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
689 
$tooltip-arrow-height:        5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
690 
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
691
692
Mark Otto's avatar
rip numbers    
Mark Otto committed
693 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
694
Mark Otto's avatar
Alternate fix to #19006: Add a single variable for controlling that inner 1px padding on .popover    
Mark Otto committed
695 
$popover-inner-padding:               1px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
696 
$popover-bg:                          $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
697 
$popover-max-width:                   276px !default;
Chris Rebert's avatar
Add $popover-border-width; refs #18150    
Chris Rebert committed
698 
$popover-border-width:                $border-width !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
699
700 
$popover-border-color:                rgba($black,.2) !default;
$popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
701
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
702
703
704
705
706
707
708
709 
$popover-header-bg:                    darken($popover-bg, 3%) !default;
$popover-header-color:                 $headings-color !default;
$popover-header-padding-y:             8px !default;
$popover-header-padding-x:             14px !default;

$popover-body-color:               $body-color !default;
$popover-body-padding-y:           9px !default;
$popover-body-padding-x:           14px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
710
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
711 
$popover-arrow-width:                 10px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
712 
$popover-arrow-height:                5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
713 
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
714
Chris Rebert's avatar
Use proper units when adding/subtracting lengths    
Chris Rebert committed
715 
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
716 
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
717
718
Mark Otto's avatar
rip numbers    
Mark Otto committed
719 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
720
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
721 
$badge-default-bg:            $gray-light !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
722
723
724
725
726 
$badge-primary-bg:            theme-color("primary") !default;
$badge-success-bg:            theme-color("success") !default;
$badge-info-bg:               theme-color("info") !default;
$badge-warning-bg:            theme-color("warning") !default;
$badge-danger-bg:             theme-color("danger") !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
727
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
728
729 
$badge-color:                 $white !default;
$badge-link-hover-color:      $white !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
730
731
732 
$badge-font-size:             75% !default;
$badge-font-weight:           $font-weight-bold !default;
$badge-padding-y:             .25em !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
733 
$badge-padding-x:             .4em !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
734
735 

$badge-pill-padding-x:        .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
736
737 
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
738 
$badge-pill-border-radius:    10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
739
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
740
Mark Otto's avatar
rip numbers    
Mark Otto committed
741 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
742
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
743 
// Padding applied to the modal body
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
744 
$modal-inner-padding:         15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
745
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
746 
$modal-dialog-margin:         10px !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
747 
$modal-dialog-margin-y-sm-up: 30px !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
748
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
749 
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
750
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
751
752 
$modal-content-bg:               $white !default;
$modal-content-border-color:     rgba($black,.2) !default;
Chris Rebert's avatar
Extract $modal-content-border-width variable    
Chris Rebert committed
753 
$modal-content-border-width:     $border-width !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
754
755 
$modal-content-box-shadow-xs:    0 3px 9px rgba($black,.5) !default;
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
756
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
757 
$modal-backdrop-bg:           $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
758 
$modal-backdrop-opacity:      .5 !default;
Mark Otto's avatar
darker border on modal header    
Mark Otto committed
759 
$modal-header-border-color:   $gray-lighter !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
760 
$modal-footer-border-color:   $modal-header-border-color !default;
Chris Rebert's avatar
Extract $modal-content-border-width variable    
Chris Rebert committed
761 
$modal-header-border-width:   $modal-content-border-width !default;
Chris Rebert's avatar
Extract $modal-{header,footer}-border-width variables    
Chris Rebert committed
762 
$modal-footer-border-width:   $modal-header-border-width !default;
Elliot Evans's avatar
renamed modal-title-padding to modal-header-padding    
Elliot Evans committed
763 
$modal-header-padding:        15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
764
Mark Otto's avatar
decrease size of modal-md and modal-lg to ensure fitting in responsive layouts    
Mark Otto committed
765
766 
$modal-lg:                    800px !default;
$modal-md:                    500px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
767 
$modal-sm:                    300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
768
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
769
770 
$modal-transition:            transform .3s ease-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
771
Mark Otto's avatar
rip numbers    
Mark Otto committed
772 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
773 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
774 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
775
Mark Otto's avatar
Switch to separate vars for alert vertical/horizontal padding    
Mark Otto committed
776 
$alert-padding-y:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
777 
$alert-padding-x:             1.25rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
778 
$alert-margin-bottom:         1rem !default;
Mark Otto's avatar
drop the base (hahaha), no but seriously drop the -base from our vars since it's cleaner    
Mark Otto committed
779 
$alert-border-radius:         $border-radius !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
780 
$alert-link-font-weight:      $font-weight-bold !default;
Chris Bell's avatar
#17895 Added $alert-border-width that defaults to $border-width    
Chris Bell committed
781 
$alert-border-width:          $border-width !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
782
783
Mark Otto's avatar
rip numbers    
Mark Otto committed
784 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
785
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
786
787
788
789
790
791 
$progress-height:               1rem !default;
$progress-font-size:            .75rem !default;
$progress-bg:                   $gray-lighter !default;
$progress-border-radius:        $border-radius !default;
$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
$progress-bar-color:            $white !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
792 
$progress-bar-bg:               theme-color("primary") !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
793 
$progress-bar-animation-timing: 1s linear infinite !default;
Mark Otto's avatar
Add transition to .progress-bar    
Mark Otto committed
794 
$progress-bar-transition:       width .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
795
Mark Otto's avatar
rip numbers    
Mark Otto committed
796 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
797
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
798
799
800
801
802 
$list-group-color:               $body-color !default;
$list-group-bg:                  $white !default;
$list-group-border-color:        rgba($black,.125) !default;
$list-group-border-width:        $border-width !default;
$list-group-border-radius:       $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
803
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
804 
$list-group-item-padding-y:      .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
805 
$list-group-item-padding-x:      1.25rem !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
806
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
807
808
809
810 
$list-group-hover-bg:                 $gray-lightest !default;
$list-group-active-color:             $component-active-color !default;
$list-group-active-bg:                $component-active-bg !default;
$list-group-active-border-color:      $list-group-active-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
811
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
812 
$list-group-disabled-color:      $gray-light !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
813 
$list-group-disabled-bg:         $list-group-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
814
Patrick Yeo's avatar
(#22414) Rename for consistency `$list-group-link-*-*` to `$list-group-action-*-*`    
Patrick Yeo committed
815
816 
$list-group-action-color:             $gray !default;
$list-group-action-hover-color:       $list-group-action-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
817
Patrick Yeo's avatar
(#22414) Rename for consistency `$list-group-link-*-*` to `$list-group-action-*-*`    
Patrick Yeo committed
818
819 
$list-group-action-active-color:      $list-group-color !default;
$list-group-action-active-bg:         $gray-lighter !default;
Chris Rebert's avatar
Add $list-group-item-padding-{x,y} variables    
Chris Rebert committed
820
Mark Otto's avatar
convert to scss  
Mark Otto committed
821
Mark Otto's avatar
rip numbers    
Mark Otto committed
822 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
823
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
824
825 
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
Chris Rebert's avatar
Add $thumbnail-border-width; refs #18150    
Chris Rebert committed
826 
$thumbnail-border-width:      $border-width !default;
Chris Rebert's avatar
$thumbnail-border => $thumbnail-border-color    
Chris Rebert committed
827 
$thumbnail-border-color:      #ddd !default;
Mark Otto's avatar
drop the base (hahaha), no but seriously drop the -base from our vars since it's cleaner    
Mark Otto committed
828 
$thumbnail-border-radius:     $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
829 
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
830 
$thumbnail-transition:        all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
831
832
Mark Otto's avatar
rip numbers    
Mark Otto committed
833 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
834
835 

$figure-caption-font-size: 90% !default;
Christopher Baker's avatar
remove references to -* outside _variables.scss    
Christopher Baker committed
836 
$figure-caption-color:     $gray-light !default;
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
837
838
Mark Otto's avatar
rip numbers    
Mark Otto committed
839 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
840
Chris Rebert's avatar
Refactor Breadcrumbs component    
Chris Rebert committed
841
842
843 
$breadcrumb-padding-y:          .75rem !default;
$breadcrumb-padding-x:          1rem !default;
$breadcrumb-item-padding:       .5rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
844
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
845
846
847
848 
$breadcrumb-bg:                 $gray-lighter !default;
$breadcrumb-divider-color:      $gray-light !default;
$breadcrumb-active-color:       $gray-light !default;
$breadcrumb-divider:            "/" !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
849
850
Mark Otto's avatar
rip numbers    
Mark Otto committed
851 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
852
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
853 
$carousel-control-color:                      $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
854
855 
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
856
Mark Otto's avatar
redesign indicators    
Mark Otto committed
857
858 
$carousel-indicator-width:                    30px !default;
$carousel-indicator-height:                   3px !default;
Mark Otto's avatar
flexbox powered indicators    
Mark Otto committed
859 
$carousel-indicator-spacer:                   3px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
860 
$carousel-indicator-active-bg:                $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
861
Chris Rebert's avatar
Extract $carousel-caption{-sm-up}-width variables    
Chris Rebert committed
862 
$carousel-caption-width:                      70% !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
863 
$carousel-caption-color:                      $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
864
Mark Otto's avatar
rename var    
Mark Otto committed
865 
$carousel-control-icon-width:                 20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
866
Mark Otto's avatar
simplify svg by only using viewbox    
Mark Otto committed
867
868 
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
Mark Otto's avatar
redo control icons to use open iconic svgs inlined    
Mark Otto committed
869
Mark Otto's avatar
Switch to ease function to remove trailing animation movement    
Mark Otto committed
870 
$carousel-transition:           transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
871
Mark Otto's avatar
convert to scss  
Mark Otto committed
872
Mark Otto's avatar
rip numbers    
Mark Otto committed
873 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
874
Mark Otto's avatar
clarify usage of base font-size so we know what's up    
Mark Otto committed
875 
$close-font-size:             $font-size-base * 1.5 !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
876 
$close-font-weight:           $font-weight-bold !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
877
878 
$close-color:                 $black !default;
$close-text-shadow:           0 1px 0 $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
879
Mark Otto's avatar
rip numbers    
Mark Otto committed
880 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
881
Chris Rebert's avatar
Extract $code-font-size variable    
Chris Rebert committed
882 
$code-font-size:              90% !default;
Chris Rebert's avatar
Extract $code-padding-{x,y} variables    
Chris Rebert committed
883 
$code-padding-y:              .2rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
884 
$code-padding-x:              .4rem !default;
Mark Otto's avatar
tweak code styles    
Mark Otto committed
885 
$code-color:                  #bd4147 !default;
Mark Otto's avatar
change instances of hardcoded lightest gray to sass variable -lightest    
Mark Otto committed
886 
$code-bg:                     $gray-lightest !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
887
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
888 
$kbd-color:                   $white !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
889 
$kbd-bg:                      $gray-dark !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
890
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
891
892 
$pre-color:                   $gray-dark !default;
$pre-scrollable-max-height:   340px !default;