Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 31.2 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
113
Mark Otto's avatar
rip numbers    
Mark Otto committed
114 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
115 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
116
117
118
119
120 
// 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
121 
$enable-transitions:        true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
122 
$enable-hover-media-query:  false !default;
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
123 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
124 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
125
126
Mark Otto's avatar
rip numbers    
Mark Otto committed
127 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
128
129
130 
//
// 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
131 
// 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
132
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
133 
$spacer: 1rem !default;
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
134 
$spacers: (
Starsam80's avatar
Clean up spacers a bit more    
Starsam80 committed
135
136
137
138
139
140 
  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
141 
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
142
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
143 
// This variable affects the `.h-*` and `.w-*` classes.
Starsam80's avatar
Use variables for the width/height classes    
Starsam80 committed
144
145
146
147
148
149 
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
150
Mark Otto's avatar
rip numbers    
Mark Otto committed
151 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
152
153 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
154
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
155 
$body-bg:       $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
156 
$body-color:    $gray-900 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
157
Mark Otto's avatar
rip numbers    
Mark Otto committed
158 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
159
160 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
161
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
162 
$link-color:            theme-color("primary") !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
163
164
165 
$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
166
167
Mark Otto's avatar
rip numbers    
Mark Otto committed
168 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
169 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
170 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
171 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
172
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
173
174 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
175 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
176
177
178 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
179 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
180 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
181 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
182
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
183
Mark Otto's avatar
rip numbers    
Mark Otto committed
184 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
185 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
186 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
187
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
188 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
189 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
190 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
191 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
192 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
193 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
194 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
195
196
Mark Otto's avatar
rip numbers    
Mark Otto committed
197 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
198
199
200 
//
// Set the number of columns and specify the width of the gutters.
Kovah's avatar
Add breakpoint-specific gutters.    
Kovah committed
201
202
203
204
205
206
207
208
209 
$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
210
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
211
212
213
214
215 

// 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
216 
$line-height-lg:         1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
217
218
219
220
221
222
223
224
225 
$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
226 
$component-active-bg:    theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
227
228
229
230
231
232
233
234 

$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
235 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
236 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
237 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
238
Mark Otto's avatar
Remove system-ui from font stack due to i18n issues    
Mark Otto committed
239 
$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
240 
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
241 
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
242
Mark Otto's avatar
Remove -size-root so we can respect user prefs on browser default font-size    
Mark Otto committed
243 
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
Mark Otto's avatar
more variables spacing    
Mark Otto committed
244
245
246 
$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
247
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
248
249
250 
$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
251 
$font-weight-base: $font-weight-normal !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
252
253 
$line-height-base: 1.5 !default;
Patrick Yeo's avatar
Rename `$font-size-h*` to `$h*-font-size` for consistency (#22414)    
Patrick Yeo committed
254
255
256
257
258
259 
$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
260
Mark Otto's avatar
more variables spacing    
Mark Otto committed
261
262
263
264
265 
$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
266
Mark Otto's avatar
fixes #21511: set line-height to 1.1 for display headings    
Mark Otto committed
267
268
269
270
271
272
273
274
275
276
277 
$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
278
279 
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
280
Mark Otto's avatar
Revert "Drop the $small-font-size variable for the newer $font-size-sm one"    
Mark Otto committed
281
282 
$small-font-size: 80% !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
283 
$text-muted: $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
284
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
285 
$blockquote-small-color:  $gray-600 !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
286 
$blockquote-font-size:    ($font-size-base * 1.25) !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
287 
$blockquote-border-color: $gray-200 !default;
Chris Rebert's avatar
Extract $blockquote-border-width variable    
Chris Rebert committed
288 
$blockquote-border-width: .25rem !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
289
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
290 
$hr-border-color: rgba($black,.1) !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
291 
$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
292
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
293
294 
$mark-padding: .2em !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
295 
$dt-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
296
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
297 
$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
298 
$nested-kbd-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
299
Mark Otto's avatar
more variables spacing    
Mark Otto committed
300 
$list-inline-padding: 5px !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
301
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
302
303 
$mark-bg: #fcf8e3 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
304
Mark Otto's avatar
rip numbers    
Mark Otto committed
305 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
306 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
307 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
308
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
309 
$table-cell-padding:            .75rem !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
310 
$table-cell-padding-sm:         .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
311
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
312 
$table-bg:                      transparent !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
313
314
315 
$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
316
Mark Otto's avatar
reorder    
Mark Otto committed
317 
$table-border-width:            $border-width !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
318 
$table-border-color:            $gray-200 !default;
Mark Otto's avatar
reorder    
Mark Otto committed
319
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
320
321 
$table-head-bg:                 $gray-200 !default;
$table-head-color:              $gray-700 !default;
Christopher Baker's avatar
remove references to -* outside _variables.scss    
Christopher Baker committed
322
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
323 
$table-inverse-bg:              $gray-900 !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
324
325 
$table-inverse-accent-bg:       rgba($white, .05) !default;
$table-inverse-hover-bg:        rgba($white, .075) !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
326 
$table-inverse-border-color:    lighten($gray-900, 7.5%) !default;
Mark Otto's avatar
reorder    
Mark Otto committed
327 
$table-inverse-color:           $body-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
328
329
Mark Otto's avatar
rip numbers    
Mark Otto committed
330 
// Buttons
Mark Otto's avatar
convert to scss  
Mark Otto committed
331 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
332 
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
convert to scss  
Mark Otto committed
333
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
334 
$input-btn-padding-y:       .5rem !default;
Mark Otto's avatar
tighten up horizontal input and button padding    
Mark Otto committed
335 
$input-btn-padding-x:       .75rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
336
337
338 
$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
339 
$input-btn-padding-x-sm:    .5rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
340
341
342 
$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
343 
$input-btn-padding-x-lg:    1rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
344
345 
$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
346 
$btn-font-weight:                $font-weight-normal !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
347 
$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
348 
$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
349 
$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
350
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
351 
$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
352 
$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
353 
$btn-primary-border-color:       $btn-primary-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
354
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
355 
$btn-secondary-color:            $gray-900 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
356 
$btn-secondary-bg:               $white !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
357 
$btn-secondary-border-color:     #ccc !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
358
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
359 
$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
360 
$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
361 
$btn-info-border-color:          $btn-info-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
362
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
363 
$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
364 
$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
365 
$btn-success-border-color:       $btn-success-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
366
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
367 
$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
368 
$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
369 
$btn-warning-border-color:       $btn-warning-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
370
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
371 
$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
372 
$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
373 
$btn-danger-border-color:        $btn-danger-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
374
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
375 
$btn-link-disabled-color:        $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
376
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
377
378 
$btn-block-spacing-y:            .5rem !default;
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
379 
// Allows for customizing button radius independently from global border radius
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
380
381
382 
$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
383
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
384
385 
$btn-transition:                 all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
386
Mark Otto's avatar
rip numbers    
Mark Otto committed
387 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
388
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
389 
$input-bg:                       $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
390 
$input-disabled-bg:              $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
391
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
392 
$input-color:                    $gray-700 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
393 
$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
394 
$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
395 
$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
396
Mark Otto's avatar
drop the base (hahaha), no but seriously drop the -base from our vars since it's cleaner    
Mark Otto committed
397 
$input-border-radius:            $border-radius !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
398
399 
$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
400
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
401 
$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
402 
$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
Mark Otto's avatar
Merge branch 'v4-dev' into form-tweaks    
Mark Otto committed
403 
$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
404 
$input-focus-color:              $input-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
405
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
406 
$input-placeholder-color:        $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
407
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
408
409
410
411
412
413
414
415
416
417 
$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
418
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
419
420 
$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
421
422
423
424
425
426
427
428
429
430 
$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
431 
$form-group-margin-bottom:       1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
432
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
433 
$input-group-addon-bg:           $gray-200 !default;
Chris Rebert's avatar
$input-border => $input-border-color    
Chris Rebert committed
434 
$input-group-addon-border-color: $input-border-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
435
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
436
437 
$custom-control-gutter:   1.5rem !default;
$custom-control-spacer-y: .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
438 
$custom-control-spacer-x: 1rem !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
439
440
441
442 

$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
443 
$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
444
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
445
446 
$custom-control-indicator-disabled-bg:       $gray-200 !default;
$custom-control-description-disabled-color:  $gray-600 !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
447
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
448 
$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
449 
$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
450 
$custom-control-indicator-checked-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
451
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
452 
$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
453
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
454 
$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
455 
$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
456 
$custom-control-indicator-active-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
457
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
458
459 
$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
460
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
461 
$custom-checkbox-indeterminate-bg: theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
462
463 
$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
464
465 
$custom-checkbox-indeterminate-box-shadow: none !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
466
467 
$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
468
469 

$custom-select-padding-y:          .375rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
470 
$custom-select-padding-x:          .75rem  !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
471 
$custom-select-height:              $input-height  !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
472 
$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
473 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
474 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
475 
$custom-select-disabled-color:      $gray-600 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
476 
$custom-select-bg:            $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
477 
$custom-select-disabled-bg:   $gray-200 !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
478 
$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
479 
$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
480 
$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
481
482
483
484 
$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
485 
$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
486 
$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
487
Mark Otto's avatar
Redo the small custom select vars    
Mark Otto committed
488
489 
$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
490
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
491
492 
$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
493 
$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
494
495 

$custom-file-padding-y:     1rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
496 
$custom-file-padding-x:     .5rem !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
497 
$custom-file-line-height:   1.5 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
498 
$custom-file-color:         $gray-700 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
499 
$custom-file-bg:            $white !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
500 
$custom-file-border-width:  $border-width !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
501 
$custom-file-border-color:  $input-border-color !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
502 
$custom-file-border-radius: $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
503 
$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
504 
$custom-file-button-color:  $custom-file-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
505 
$custom-file-button-bg:     $gray-200 !default;
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
506
507
508
509
510
511
512
513 
$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
514
515
Mark Otto's avatar
remove icons for now    
Mark Otto committed
516 
// Form validation
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
517
518 
$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
519
Mark Otto's avatar
convert to scss  
Mark Otto committed
520
Mark Otto's avatar
rip numbers    
Mark Otto committed
521 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
522 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
523 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
524
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
525
526
527 
$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
528
529 
$dropdown-bg:                    $white !default;
$dropdown-border-color:          rgba($black,.15) !default;
Chris Rebert's avatar
Add $dropdown-border-width; refs #18150    
Chris Rebert committed
530 
$dropdown-border-width:          $border-width !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
531 
$dropdown-divider-bg:            $gray-200 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
532 
$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
533
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
534
535
536 
$dropdown-link-color:            $gray-900 !default;
$dropdown-link-hover-color:      darken($gray-900, 5%) !default;
$dropdown-link-hover-bg:         $gray-100 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
537
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
538
539 
$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
540
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
541 
$dropdown-link-disabled-color:   $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
542
Mark Otto's avatar
Add dropdown-item-padding-y var    
Mark Otto committed
543 
$dropdown-item-padding-y:        .25rem !default;
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
544 
$dropdown-item-padding-x:        1.5rem !default;
Chris Rebert's avatar
Extract $dropdown-item-padding-x variable    
Chris Rebert committed
545
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
546 
$dropdown-header-color:          $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
547
548
Mark Otto's avatar
rip numbers    
Mark Otto committed
549 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
550
551
552
553 
//
// 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
554 
$zindex-dropdown:           1000 !default;
Catalin Zalog's avatar
Change sticky order (#22027)    
Catalin Zalog committed
555 
$zindex-sticky:             1020 !default;
Mark Otto's avatar
update rest of docs, remove navbar specific modifiers, fix docs example css    
Mark Otto committed
556
557
558
559
560 
$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
561
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
562
563
564 
// Navs

$nav-link-padding-y:            .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
565 
$nav-link-padding-x:            1rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
566 
$nav-link-disabled-color:       $gray-600 !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
567
568
569
570 

$nav-tabs-border-color:                       #ddd !default;
$nav-tabs-border-width:                       $border-width !default;
$nav-tabs-border-radius:                      $border-radius !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
571
572 
$nav-tabs-link-hover-border-color:            $gray-200 !default;
$nav-tabs-link-active-color:                  $gray-700 !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
573
574 
$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
575
576 

$nav-pills-border-radius:     $border-radius !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
577
578 
$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
579
Mark Otto's avatar
rip numbers    
Mark Otto committed
580 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
581
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
582 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
583 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
584
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
585 
$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
586 
// 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
587 
$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
588
589
590 
$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
591 
$navbar-toggler-padding-y:           .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
592 
$navbar-toggler-padding-x:           .75rem !default;
Mark Otto's avatar
correction, -toggler-*    
Mark Otto committed
593
594 
$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
595
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
596
597
598
599
600
601 
$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
602
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
603
604
605
606 
$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
607 
$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
608 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
609
Mark Otto's avatar
rip numbers    
Mark Otto committed
610 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
611
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
612 
$pagination-padding-y:                .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
613 
$pagination-padding-x:                .75rem !default;
Mark Otto's avatar
Follow up to #21052 to match small pagination links with small buttons    
Mark Otto committed
614 
$pagination-padding-y-sm:             .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
615 
$pagination-padding-x-sm:             .5rem !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
616 
$pagination-padding-y-lg:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
617 
$pagination-padding-x-lg:             1.5rem !default;
Stefan Staynov's avatar
Set line-height for page-links (#21052)    
Stefan Staynov committed
618 
$pagination-line-height:              1.25 !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
619
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
620 
$pagination-color:                     $link-color !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
621 
$pagination-bg:                        $white !default;
Chris Rebert's avatar
Add $pagination-border-width; refs #18150    
Chris Rebert committed
622 
$pagination-border-width:              $border-width !default;
Chris Rebert's avatar
Rename $pagination-border => $pagination-border-color for clarity    
Chris Rebert committed
623 
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
624
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
625 
$pagination-hover-color:               $link-hover-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
626 
$pagination-hover-bg:                  $gray-200 !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
627 
$pagination-hover-border-color:        #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
628
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
629 
$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
630
631 
$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
632
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
633 
$pagination-disabled-color:            $gray-600 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
634 
$pagination-disabled-bg:               $white !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
635 
$pagination-disabled-border-color:     #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
636
637
Mark Otto's avatar
rip numbers    
Mark Otto committed
638 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
639
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
640 
$jumbotron-padding:              2rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
641 
$jumbotron-bg:                   $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
642
643
Mark Otto's avatar
rip numbers    
Mark Otto committed
644 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
645
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
646 
$card-spacer-y:            .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
647 
$card-spacer-x:            1.25rem !default;
Mark Otto's avatar
unfuck that border from rem to px    
Mark Otto committed
648 
$card-border-width:        1px !default;
Chris Rebert's avatar
Make $card-border-radius default to $border-radius    
Chris Rebert committed
649 
$card-border-radius:       $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
650 
$card-border-color:        rgba($black,.125) !default;
Patrick Yeo's avatar
Rename `$card-border-radius-inner` to `$card-inner-border-radius`    
Patrick Yeo committed
651 
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
652 
$card-cap-bg:              $gray-100 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
653 
$card-bg:                  $white !default;
Kevin Kirsche's avatar
Card variables should be in _variables.scss    
Kevin Kirsche committed
654
Mark Otto's avatar
rename .card-inverse to .card-dark, update docs to match    
Mark Otto committed
655 
$card-dark-link-hover-color:    $white !default;
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
656
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
657
658 
$card-img-overlay-padding: 1.25rem !default;
Mark Otto's avatar
move to grid gutter width, fixes #21300    
Mark Otto committed
659 
$card-deck-margin:          ($grid-gutter-width-base / 2) !default;
Chris Rebert's avatar
Introduce $card-deck-margin variable    
Chris Rebert committed
660
Mark Otto's avatar
add card column count variable    
Mark Otto committed
661 
$card-columns-count:        3 !default;
Mark Otto's avatar
Rename card column gap variable    
Mark Otto committed
662 
$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
663 
$card-columns-margin:       $card-spacer-y !default;
Chris Rebert's avatar
Add $card-columns-sm-up-column-gap variable    
Chris Rebert committed
664
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
665
Mark Otto's avatar
rip numbers    
Mark Otto committed
666 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
667
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
668 
$tooltip-max-width:           200px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
669
670 
$tooltip-color:               $white !default;
$tooltip-bg:                  $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
671 
$tooltip-opacity:             .9 !default;
Chris Rebert's avatar
Introduce $tooltip-padding-{x,y} & $tooltip-margin vars    
Chris Rebert committed
672
673 
$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
674 
$tooltip-margin:              0 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
675
676
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
677 
$tooltip-arrow-width:         5px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
678 
$tooltip-arrow-height:        5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
679 
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
680
681
Mark Otto's avatar
rip numbers    
Mark Otto committed
682 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
683
Mark Otto's avatar
Alternate fix to #19006: Add a single variable for controlling that inner 1px padding on .popover    
Mark Otto committed
684 
$popover-inner-padding:               1px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
685 
$popover-bg:                          $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
686 
$popover-max-width:                   276px !default;
Chris Rebert's avatar
Add $popover-border-width; refs #18150    
Chris Rebert committed
687 
$popover-border-width:                $border-width !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
688
689 
$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
690
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
691
692
693
694
695
696
697
698 
$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
699
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
700 
$popover-arrow-width:                 10px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
701 
$popover-arrow-height:                5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
702 
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
703
Chris Rebert's avatar
Use proper units when adding/subtracting lengths    
Chris Rebert committed
704 
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
705 
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
706
707
Mark Otto's avatar
rip numbers    
Mark Otto committed
708 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
709
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
710 
$badge-default-bg:            $gray-600 !default;
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
711
712
713
714
715 
$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
716
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
717
718 
$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
719
720
721 
$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
722 
$badge-padding-x:             .4em !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
723
724 

$badge-pill-padding-x:        .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
725
726 
// 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
727 
$badge-pill-border-radius:    10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
728
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
729
Mark Otto's avatar
rip numbers    
Mark Otto committed
730 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
731
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
732 
// Padding applied to the modal body
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
733 
$modal-inner-padding:         15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
734
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
735 
$modal-dialog-margin:         10px !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
736 
$modal-dialog-margin-y-sm-up: 30px !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
737
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
738 
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
739
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
740
741 
$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
742 
$modal-content-border-width:     $border-width !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
743
744 
$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
745
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
746 
$modal-backdrop-bg:           $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
747 
$modal-backdrop-opacity:      .5 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
748 
$modal-header-border-color:   $gray-200 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
749 
$modal-footer-border-color:   $modal-header-border-color !default;
Chris Rebert's avatar
Extract $modal-content-border-width variable    
Chris Rebert committed
750 
$modal-header-border-width:   $modal-content-border-width !default;
Chris Rebert's avatar
Extract $modal-{header,footer}-border-width variables    
Chris Rebert committed
751 
$modal-footer-border-width:   $modal-header-border-width !default;
Elliot Evans's avatar
renamed modal-title-padding to modal-header-padding    
Elliot Evans committed
752 
$modal-header-padding:        15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
753
Mark Otto's avatar
decrease size of modal-md and modal-lg to ensure fitting in responsive layouts    
Mark Otto committed
754
755 
$modal-lg:                    800px !default;
$modal-md:                    500px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
756 
$modal-sm:                    300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
757
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
758
759 
$modal-transition:            transform .3s ease-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
760
Mark Otto's avatar
rip numbers    
Mark Otto committed
761 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
762 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
763 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
764
Mark Otto's avatar
Switch to separate vars for alert vertical/horizontal padding    
Mark Otto committed
765 
$alert-padding-y:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
766 
$alert-padding-x:             1.25rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
767 
$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
768 
$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
769 
$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
770 
$alert-border-width:          $border-width !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
771
772
Mark Otto's avatar
rip numbers    
Mark Otto committed
773 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
774
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
775
776 
$progress-height:               1rem !default;
$progress-font-size:            .75rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
777 
$progress-bg:                   $gray-200 !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
778
779
780 
$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
781 
$progress-bar-bg:               theme-color("primary") !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
782 
$progress-bar-animation-timing: 1s linear infinite !default;
Mark Otto's avatar
Add transition to .progress-bar    
Mark Otto committed
783 
$progress-bar-transition:       width .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
784
Mark Otto's avatar
rip numbers    
Mark Otto committed
785 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
786
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
787
788
789
790
791 
$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
792
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
793 
$list-group-item-padding-y:      .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
794 
$list-group-item-padding-x:      1.25rem !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
795
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
796 
$list-group-hover-bg:                 $gray-100 !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
797
798
799 
$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
800
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
801 
$list-group-disabled-color:      $gray-600 !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
802 
$list-group-disabled-bg:         $list-group-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
803
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
804 
$list-group-action-color:             $gray-700 !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$list-group-link-*-*` to `$list-group-action-*-*`    
Patrick Yeo committed
805 
$list-group-action-hover-color:       $list-group-action-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
806
Patrick Yeo's avatar
(#22414) Rename for consistency `$list-group-link-*-*` to `$list-group-action-*-*`    
Patrick Yeo committed
807 
$list-group-action-active-color:      $list-group-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
808 
$list-group-action-active-bg:         $gray-200 !default;
Chris Rebert's avatar
Add $list-group-item-padding-{x,y} variables    
Chris Rebert committed
809
Mark Otto's avatar
convert to scss  
Mark Otto committed
810
Mark Otto's avatar
rip numbers    
Mark Otto committed
811 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
812
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
813
814 
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
Chris Rebert's avatar
Add $thumbnail-border-width; refs #18150    
Chris Rebert committed
815 
$thumbnail-border-width:      $border-width !default;
Chris Rebert's avatar
$thumbnail-border => $thumbnail-border-color    
Chris Rebert committed
816 
$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
817 
$thumbnail-border-radius:     $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
818 
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
819 
$thumbnail-transition:        all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
820
821
Mark Otto's avatar
rip numbers    
Mark Otto committed
822 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
823
824 

$figure-caption-font-size: 90% !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
825 
$figure-caption-color:     $gray-600 !default;
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
826
827
Mark Otto's avatar
rip numbers    
Mark Otto committed
828 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
829
Chris Rebert's avatar
Refactor Breadcrumbs component    
Chris Rebert committed
830
831
832 
$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
833
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
834
835
836 
$breadcrumb-bg:                 $gray-200 !default;
$breadcrumb-divider-color:      $gray-600 !default;
$breadcrumb-active-color:       $gray-600 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
837 
$breadcrumb-divider:            "/" !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
838
839
Mark Otto's avatar
rip numbers    
Mark Otto committed
840 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
841
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
842 
$carousel-control-color:                      $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
843
844 
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
845
Mark Otto's avatar
redesign indicators    
Mark Otto committed
846
847 
$carousel-indicator-width:                    30px !default;
$carousel-indicator-height:                   3px !default;
Mark Otto's avatar
flexbox powered indicators    
Mark Otto committed
848 
$carousel-indicator-spacer:                   3px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
849 
$carousel-indicator-active-bg:                $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
850
Chris Rebert's avatar
Extract $carousel-caption{-sm-up}-width variables    
Chris Rebert committed
851 
$carousel-caption-width:                      70% !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
852 
$carousel-caption-color:                      $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
853
Mark Otto's avatar
rename var    
Mark Otto committed
854 
$carousel-control-icon-width:                 20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
855
Mark Otto's avatar
simplify svg by only using viewbox    
Mark Otto committed
856
857 
$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
858
Mark Otto's avatar
Switch to ease function to remove trailing animation movement    
Mark Otto committed
859 
$carousel-transition:           transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
860
Mark Otto's avatar
convert to scss  
Mark Otto committed
861
Mark Otto's avatar
rip numbers    
Mark Otto committed
862 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
863
Mark Otto's avatar
clarify usage of base font-size so we know what's up    
Mark Otto committed
864 
$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
865 
$close-font-weight:           $font-weight-bold !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
866
867 
$close-color:                 $black !default;
$close-text-shadow:           0 1px 0 $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
868
Mark Otto's avatar
rip numbers    
Mark Otto committed
869 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
870
Chris Rebert's avatar
Extract $code-font-size variable    
Chris Rebert committed
871 
$code-font-size:              90% !default;
Chris Rebert's avatar
Extract $code-padding-{x,y} variables    
Chris Rebert committed
872 
$code-padding-y:              .2rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
873 
$code-padding-x:              .4rem !default;
Mark Otto's avatar
tweak code styles    
Mark Otto committed
874 
$code-color:                  #bd4147 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
875 
$code-bg:                     $gray-100 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
876
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
877 
$kbd-color:                   $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
878 
$kbd-bg:                      $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
879
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
880 
$pre-color:                   $gray-900 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
881 
$pre-scrollable-max-height:   340px !default;