Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 29.4 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
Update _variables.scss    
Mark Otto committed
3 
// 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
4 
// 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
5
Mark Otto's avatar
update comment    
Mark Otto committed
6
7
8
9 

//
// Color system
//
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
10
11
12
13
14
15
16
17
18
19
20
21
22 

$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;
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
23
24 
$grays: () !default;
$grays: map-merge((
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
25
26
27
28
29
30
31
32
33 
  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
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
34 
), $grays);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
35
36 

$blue:    #007bff !default;
Mark Otto's avatar
update theme colors    
Mark Otto committed
37
38
39
40
41
42
43
44
45 
$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
46
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
47
48 
$colors: () !default;
$colors: map-merge((
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
49
50
51
52
53
54
55
56
57
58
59
60
61 
  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
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
62 
), $colors);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
63
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
64
65 
$theme-colors: () !default;
$theme-colors: map-merge((
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
66 
  primary: $blue,
Mark Otto's avatar
update theme colors    
Mark Otto committed
67 
  secondary: $gray-600,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
68
69 
  success: $green,
  info: $cyan,
Mark Otto's avatar
update theme colors    
Mark Otto committed
70 
  warning: $yellow,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
71 
  danger: $red,
Mark Otto's avatar
update theme colors    
Mark Otto committed
72
73 
  light: $gray-100,
  dark: $gray-800
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
74 
), $theme-colors);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
75
Mark Otto's avatar
add theme-color-level function and interval so we can generate shades of colors    
Mark Otto committed
76
77 
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
78
79
Mark Otto's avatar
rip numbers    
Mark Otto committed
80 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
81 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
82
83
84
85
86 
// 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
87 
$enable-transitions:        true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
88 
$enable-hover-media-query:  false !default;
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
89 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
90 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
91
92
Mark Otto's avatar
rip numbers    
Mark Otto committed
93 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
94
95
96 
//
// 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
97 
// 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
98
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
99 
$spacer: 1rem !default;
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
100 
$spacers: (
Starsam80's avatar
Clean up spacers a bit more    
Starsam80 committed
101
102
103
104
105
106 
  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
107 
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
108
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
109 
// This variable affects the `.h-*` and `.w-*` classes.
Starsam80's avatar
Use variables for the width/height classes    
Starsam80 committed
110
111
112
113
114
115 
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
116
Mark Otto's avatar
rip numbers    
Mark Otto committed
117 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
118
119 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
120
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
121 
$body-bg:       $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
122 
$body-color:    $gray-900 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
123
Mark Otto's avatar
rip numbers    
Mark Otto committed
124 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
125
126 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
127
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
128 
$link-color:            theme-color("primary") !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
129
130
131 
$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
132
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
133
134
135
136 
// Paragraphs
//
// Style p element.
Andres Galante's avatar
Adds a default flag to paragraph-margin-bottom (#23420)    
Andres Galante committed
137 
$paragraph-margin-bottom: 1rem !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
138
Mark Otto's avatar
convert to scss  
Mark Otto committed
139
Mark Otto's avatar
rip numbers    
Mark Otto committed
140 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
141 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
142 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
143 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
144
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
145
146 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
147 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
148
149
150 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
151 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
152 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
153 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
154
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
155
Mark Otto's avatar
rip numbers    
Mark Otto committed
156 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
157 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
158 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
159
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
160 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
161 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
162 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
163 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
164 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
165 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
166 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
167
168
Mark Otto's avatar
rip numbers    
Mark Otto committed
169 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
170
171
172 
//
// Set the number of columns and specify the width of the gutters.
Mark Otto's avatar
remove grid gutter sass map as it's output css was all jacked up    
Mark Otto committed
173
174 
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
175
176
177
178
179 

// 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
180 
$line-height-lg:         1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
181
182
183 
$line-height-sm:         1.5 !default;

$border-width: 1px !default;
envolute's avatar
Add "$border-color" variable    
envolute committed
184 
$border-color: $gray-200 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
185
186
187
188
189
190 

$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
191 
$component-active-bg:    theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
192
193
194
195
196
197
198
199 

$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
200 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
201 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
202 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
203
Pascal Pixel's avatar
Emoji Defaults (#22565)    
Pascal Pixel committed
204 
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Mark Otto's avatar
Add SF Mono to the monospace font stack    
Mark Otto committed
205 
$font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
206 
$font-family-base:       $font-family-sans-serif !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
207
Mark Otto's avatar
Remove -size-root so we can respect user prefs on browser default font-size    
Mark Otto committed
208 
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
Mark Otto's avatar
more variables spacing    
Mark Otto committed
209
210 
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
211
Mark Otto's avatar
300, not light    
Mark Otto committed
212 
$font-weight-light: 300 !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
213
214
215 
$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
216 
$font-weight-base: $font-weight-normal !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
217
218 
$line-height-base: 1.5 !default;
Patrick Yeo's avatar
Rename `$font-size-h*` to `$h*-font-size` for consistency (#22414)    
Patrick Yeo committed
219
220
221
222
223
224 
$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
225
Mark Otto's avatar
more variables spacing    
Mark Otto committed
226
227
228
229
230 
$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
231
Mark Otto's avatar
fixes #21511: set line-height to 1.1 for display headings    
Mark Otto committed
232
233
234
235
236
237
238
239
240
241
242 
$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
243
244 
$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
245
Mark Otto's avatar
Revert "Drop the $small-font-size variable for the newer $font-size-sm one"    
Mark Otto committed
246
247 
$small-font-size: 80% !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
248 
$text-muted: $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
249
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
250 
$blockquote-small-color:  $gray-600 !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
251 
$blockquote-font-size:    ($font-size-base * 1.25) !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
252
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
253 
$hr-border-color: rgba($black,.1) !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
254 
$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
255
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
256
257 
$mark-padding: .2em !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
258 
$dt-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
259
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
260 
$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
261 
$nested-kbd-font-weight: $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
262
Mark Otto's avatar
more variables spacing    
Mark Otto committed
263 
$list-inline-padding: 5px !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
264
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
265
266 
$mark-bg: #fcf8e3 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
267
Mark Otto's avatar
rip numbers    
Mark Otto committed
268 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
269 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
270 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
271
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
272 
$table-cell-padding:            .75rem !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
273 
$table-cell-padding-sm:         .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
274
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
275 
$table-bg:                      transparent !default;
Patrick Yeo's avatar
Rename for consistency `$table-sm-cell-padding`, `$table-bg-accent`,...    
Patrick Yeo committed
276
277
278 
$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
279
Mark Otto's avatar
reorder    
Mark Otto committed
280 
$table-border-width:            $border-width !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
281 
$table-border-color:            $gray-200 !default;
Mark Otto's avatar
reorder    
Mark Otto committed
282
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
283
284 
$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
285
Patrick Yeo's avatar
(#22414) Rename variables `$table-inverse-bg`, `$table-inverse-accent-bg`,...    
Patrick Yeo committed
286
287
288
289
290 
$table-dark-bg:              $gray-900 !default;
$table-dark-accent-bg:       rgba($white, .05) !default;
$table-dark-hover-bg:        rgba($white, .075) !default;
$table-dark-border-color:    lighten($gray-900, 7.5%) !default;
$table-dark-color:           $body-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
291
292
Mark Otto's avatar
rip numbers    
Mark Otto committed
293 
// Buttons
Mark Otto's avatar
convert to scss  
Mark Otto committed
294 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
295 
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
convert to scss  
Mark Otto committed
296
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
297 
$input-btn-padding-y:       .5rem !default;
Mark Otto's avatar
tighten up horizontal input and button padding    
Mark Otto committed
298 
$input-btn-padding-x:       .75rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
299
300
301 
$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
302 
$input-btn-padding-x-sm:    .5rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
303
304
305 
$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
306 
$input-btn-padding-x-lg:    1rem !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
307
308 
$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
309 
$btn-font-weight:                $font-weight-normal !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
310 
$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
311 
$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
312 
$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
313
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
314 
$btn-link-disabled-color:        $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
315
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
316
317 
$btn-block-spacing-y:            .5rem !default;
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
318 
// Allows for customizing button radius independently from global border radius
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
319
320
321 
$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
322
Patrick Yeo's avatar
Only add CSS transitions on Buttons for background-color, border-color, and box-shadow    
Patrick Yeo committed
323 
$btn-transition:                 background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
324
Mark Otto's avatar
convert to scss  
Mark Otto committed
325
Mark Otto's avatar
rip numbers    
Mark Otto committed
326 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
327
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
328 
$input-bg:                       $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
329 
$input-disabled-bg:              $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
330
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
331 
$input-color:                    $gray-700 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
332 
$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
333 
$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
334 
$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
335
Mark Otto's avatar
drop the base (hahaha), no but seriously drop the -base from our vars since it's cleaner    
Mark Otto committed
336 
$input-border-radius:            $border-radius !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
337
338 
$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
339
Patrick Yeo's avatar
(#22414) Rename for consistency `$input-bg-disabled`, `$input-bg-focus`,...    
Patrick Yeo committed
340 
$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
341 
$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
Mark Otto's avatar
Merge branch 'v4-dev' into form-tweaks    
Mark Otto committed
342 
$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
343 
$input-focus-color:              $input-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
344
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
345 
$input-placeholder-color:        $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
346
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
347
348
349
350
351
352
353
354 
$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;
Patrick Yeo's avatar
`$input-height-inner-lg` should use `$font-size-lg` instead of `$font-size-sm` (#23150)    
Patrick Yeo committed
355 
$input-height-inner-lg:         ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
356 
$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
357
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
358
359 
$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
360
361
362
363
364
365
366
367
368 
$form-text-margin-top:     .25rem !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
369 
$form-group-margin-bottom:       1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
370
Patrick Yeo's avatar
Input Group Addon add option to configure `$input-group-addon-color`    
Patrick Yeo committed
371 
$input-group-addon-color:        $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
372 
$input-group-addon-bg:           $gray-200 !default;
Chris Rebert's avatar
$input-border => $input-border-color    
Chris Rebert committed
373 
$input-group-addon-border-color: $input-border-color !default;
Nathan Woltman's avatar
Fix border on input group elements and custom form inputs    
Nathan Woltman committed
374 
$input-group-btn-border-color:   $input-border-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
375
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
376
377 
$custom-control-gutter:   1.5rem !default;
$custom-control-spacer-y: .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
378 
$custom-control-spacer-x: 1rem !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
379
380
381
382 

$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
383 
$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
384
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
385
386 
$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
387
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
388 
$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
389 
$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
390 
$custom-control-indicator-checked-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
391
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
392 
$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
393
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
394 
$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
395 
$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
396 
$custom-control-indicator-active-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
397
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
398
399 
$custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-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
400
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
401 
$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
402 
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
403
404 
$custom-checkbox-indicator-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;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
405
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
406
407 
$custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-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
408
409 

$custom-select-padding-y:          .375rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
410 
$custom-select-padding-x:          .75rem  !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
411 
$custom-select-height:              $input-height  !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
412 
$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
413 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
414 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
415 
$custom-select-disabled-color:      $gray-600 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
416 
$custom-select-bg:            $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
417 
$custom-select-disabled-bg:   $gray-200 !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
418 
$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
419 
$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
420 
$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
421
422
423
424 
$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
425 
$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
426 
$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
427
Mark Otto's avatar
Redo the small custom select vars    
Mark Otto committed
428
429 
$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
430
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
431 
$custom-file-height:           $input-height !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
432 
$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
433 
$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
434
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
435
436
437
438
439
440 
$custom-file-padding-y:     $input-btn-padding-y !default;
$custom-file-padding-x:     $input-btn-padding-x !default;
$custom-file-line-height:   $input-btn-line-height !default;
$custom-file-color:         $input-color !default;
$custom-file-bg:            $input-bg !default;
$custom-file-border-width:  $input-btn-border-width !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
441 
$custom-file-border-color:  $input-border-color !default;
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
442
443 
$custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow:    $input-box-shadow !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
444 
$custom-file-button-color:  $custom-file-color !default;
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
445 
$custom-file-button-bg:     $input-group-addon-bg !default;
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
446
447
448
449
450
451
452
453 
$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
454
455
Mark Otto's avatar
remove icons for now    
Mark Otto committed
456 
// Form validation
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
457
458 
$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
459
Mark Otto's avatar
convert to scss  
Mark Otto committed
460
Mark Otto's avatar
rip numbers    
Mark Otto committed
461 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
462 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
463 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
464
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
465
466 
$dropdown-min-width:             10rem !default;
$dropdown-padding-y:             .5rem !default;
Patrick Yeo's avatar
(#22414) Rename for consistency `$dropdown-margin-top` to `$dropdown-spacer`    
Patrick Yeo committed
467 
$dropdown-spacer:                .125rem !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
468
469 
$dropdown-bg:                    $white !default;
$dropdown-border-color:          rgba($black,.15) !default;
Chris Rebert's avatar
Add $dropdown-border-width; refs #18150    
Chris Rebert committed
470 
$dropdown-border-width:          $border-width !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
471 
$dropdown-divider-bg:            $gray-200 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
472 
$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
473
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
474
475
476 
$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
477
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
478
479 
$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
480
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
481 
$dropdown-link-disabled-color:   $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
482
Mark Otto's avatar
Add dropdown-item-padding-y var    
Mark Otto committed
483 
$dropdown-item-padding-y:        .25rem !default;
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
484 
$dropdown-item-padding-x:        1.5rem !default;
Chris Rebert's avatar
Extract $dropdown-item-padding-x variable    
Chris Rebert committed
485
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
486 
$dropdown-header-color:          $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
487
488
Mark Otto's avatar
rip numbers    
Mark Otto committed
489 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
490
491
492
493 
//
// 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
494 
$zindex-dropdown:           1000 !default;
Catalin Zalog's avatar
Change sticky order (#22027)    
Catalin Zalog committed
495 
$zindex-sticky:             1020 !default;
Mark Otto's avatar
update rest of docs, remove navbar specific modifiers, fix docs example css    
Mark Otto committed
496
497
498
499
500 
$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
501
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
502
503
504 
// Navs

$nav-link-padding-y:            .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
505 
$nav-link-padding-x:            1rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
506 
$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
507
508
509
510 

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

$nav-pills-border-radius:     $border-radius !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$nav-disabled-link-color`,...    
Patrick Yeo committed
517
518 
$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
519
Mark Otto's avatar
rip numbers    
Mark Otto committed
520 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
521
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
522 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
523 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
524
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
525 
$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
526 
// 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
527 
$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
528
529
530 
$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
531 
$navbar-toggler-padding-y:           .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
532 
$navbar-toggler-padding-x:           .75rem !default;
Mark Otto's avatar
correction, -toggler-*    
Mark Otto committed
533
534 
$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
535
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
536
537
538
539
540
541 
$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
542
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
543
544
545
546 
$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
547 
$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
548 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
549
Mark Otto's avatar
rip numbers    
Mark Otto committed
550 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
551
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
552 
$pagination-padding-y:                .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
553 
$pagination-padding-x:                .75rem !default;
Mark Otto's avatar
Follow up to #21052 to match small pagination links with small buttons    
Mark Otto committed
554 
$pagination-padding-y-sm:             .25rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
555 
$pagination-padding-x-sm:             .5rem !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
556 
$pagination-padding-y-lg:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
557 
$pagination-padding-x-lg:             1.5rem !default;
Stefan Staynov's avatar
Set line-height for page-links (#21052)    
Stefan Staynov committed
558 
$pagination-line-height:              1.25 !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
559
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
560 
$pagination-color:                     $link-color !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
561 
$pagination-bg:                        $white !default;
Chris Rebert's avatar
Add $pagination-border-width; refs #18150    
Chris Rebert committed
562 
$pagination-border-width:              $border-width !default;
Chris Rebert's avatar
Rename $pagination-border => $pagination-border-color for clarity    
Chris Rebert committed
563 
$pagination-border-color:              #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
564
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
565 
$pagination-hover-color:               $link-hover-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
566 
$pagination-hover-bg:                  $gray-200 !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
567 
$pagination-hover-border-color:        #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
568
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
569 
$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
570
571 
$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
572
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
573 
$pagination-disabled-color:            $gray-600 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
574 
$pagination-disabled-bg:               $white !default;
Patrick Yeo's avatar
Rename variable $input-border-focus to $input-border-color-focus (#22413)    
Patrick Yeo committed
575 
$pagination-disabled-border-color:     #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
576
577
Mark Otto's avatar
rip numbers    
Mark Otto committed
578 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
579
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
580 
$jumbotron-padding:              2rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
581 
$jumbotron-bg:                   $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
582
583
Mark Otto's avatar
rip numbers    
Mark Otto committed
584 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
585
Catalin Zalog's avatar
Apply !default to SCSS variables    
Catalin Zalog committed
586 
$card-spacer-y:            .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
587 
$card-spacer-x:            1.25rem !default;
Andres Galante's avatar
changes 1px to border-width variable on cards    
Andres Galante committed
588 
$card-border-width:        $border-width !default;
Chris Rebert's avatar
Make $card-border-radius default to $border-radius    
Chris Rebert committed
589 
$card-border-radius:       $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
590 
$card-border-color:        rgba($black,.125) !default;
Patrick Yeo's avatar
Rename `$card-border-radius-inner` to `$card-inner-border-radius`    
Patrick Yeo committed
591 
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
Mark Otto's avatar
make card headers and footers translucent    
Mark Otto committed
592 
$card-cap-bg:              rgba($black, .03) !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
593 
$card-bg:                  $white !default;
Kevin Kirsche's avatar
Card variables should be in _variables.scss    
Kevin Kirsche committed
594
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
595
596 
$card-img-overlay-padding: 1.25rem !default;
Mark Otto's avatar
Redo .card-deck and .card-group so they're always flex (#22860)    
Mark Otto committed
597
598 
$card-group-margin:         ($grid-gutter-width / 2) !default;
$card-deck-margin:          $card-group-margin !default;
Chris Rebert's avatar
Introduce $card-deck-margin variable    
Chris Rebert committed
599
Mark Otto's avatar
add card column count variable    
Mark Otto committed
600 
$card-columns-count:        3 !default;
Mark Otto's avatar
Rename card column gap variable    
Mark Otto committed
601 
$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
602 
$card-columns-margin:       $card-spacer-y !default;
Chris Rebert's avatar
Add $card-columns-sm-up-column-gap variable    
Chris Rebert committed
603
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
604
Mark Otto's avatar
rip numbers    
Mark Otto committed
605 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
606
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
607 
$tooltip-max-width:           200px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
608
609 
$tooltip-color:               $white !default;
$tooltip-bg:                  $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
610 
$tooltip-opacity:             .9 !default;
Chris Rebert's avatar
Introduce $tooltip-padding-{x,y} & $tooltip-margin vars    
Chris Rebert committed
611
612 
$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
613 
$tooltip-margin:              0 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
614
615
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
616 
$tooltip-arrow-width:         5px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
617 
$tooltip-arrow-height:        5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
618 
$tooltip-arrow-color:         $tooltip-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
619
620
Mark Otto's avatar
rip numbers    
Mark Otto committed
621 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
622
Mark Otto's avatar
Alternate fix to #19006: Add a single variable for controlling that inner 1px padding on .popover    
Mark Otto committed
623 
$popover-inner-padding:               1px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
624 
$popover-bg:                          $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
625 
$popover-max-width:                   276px !default;
Chris Rebert's avatar
Add $popover-border-width; refs #18150    
Chris Rebert committed
626 
$popover-border-width:                $border-width !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
627
628 
$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
629
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
630
631
632
633
634
635
636
637 
$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
638
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
639 
$popover-arrow-width:                 10px !default;
Johann-S's avatar
Use Popper.js to manage arrow position    
Johann-S committed
640 
$popover-arrow-height:                5px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
641 
$popover-arrow-color:                 $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
642
Chris Rebert's avatar
Use proper units when adding/subtracting lengths    
Chris Rebert committed
643 
$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
Mark Otto's avatar
linter    
Mark Otto committed
644 
$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
645
646
Mark Otto's avatar
rip numbers    
Mark Otto committed
647 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
648
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
649
650
651 
$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
652 
$badge-padding-x:             .4em !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
653
654 

$badge-pill-padding-x:        .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
655
656 
// 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
657 
$badge-pill-border-radius:    10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
658
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
659
Mark Otto's avatar
rip numbers    
Mark Otto committed
660 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
661
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
662 
// Padding applied to the modal body
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
663 
$modal-inner-padding:         15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
664
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
665 
$modal-dialog-margin:         10px !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
666 
$modal-dialog-margin-y-sm-up: 30px !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
667
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
668 
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
669
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
670
671 
$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
672 
$modal-content-border-width:     $border-width !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
673
674 
$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
675
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
676 
$modal-backdrop-bg:           $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
677 
$modal-backdrop-opacity:      .5 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
678 
$modal-header-border-color:   $gray-200 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
679 
$modal-footer-border-color:   $modal-header-border-color !default;
Chris Rebert's avatar
Extract $modal-content-border-width variable    
Chris Rebert committed
680 
$modal-header-border-width:   $modal-content-border-width !default;
Chris Rebert's avatar
Extract $modal-{header,footer}-border-width variables    
Chris Rebert committed
681 
$modal-footer-border-width:   $modal-header-border-width !default;
Elliot Evans's avatar
renamed modal-title-padding to modal-header-padding    
Elliot Evans committed
682 
$modal-header-padding:        15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
683
Mark Otto's avatar
decrease size of modal-md and modal-lg to ensure fitting in responsive layouts    
Mark Otto committed
684
685 
$modal-lg:                    800px !default;
$modal-md:                    500px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
686 
$modal-sm:                    300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
687
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
688
689 
$modal-transition:            transform .3s ease-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
690
Mark Otto's avatar
rip numbers    
Mark Otto committed
691 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
692 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
693 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
694
Mark Otto's avatar
Switch to separate vars for alert vertical/horizontal padding    
Mark Otto committed
695 
$alert-padding-y:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
696 
$alert-padding-x:             1.25rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
697 
$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
698 
$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
699 
$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
700 
$alert-border-width:          $border-width !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
701
702
Mark Otto's avatar
rip numbers    
Mark Otto committed
703 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
704
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
705
706 
$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
707 
$progress-bg:                   $gray-200 !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
708
709
710 
$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
711 
$progress-bar-bg:               theme-color("primary") !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
712 
$progress-bar-animation-timing: 1s linear infinite !default;
Mark Otto's avatar
Add transition to .progress-bar    
Mark Otto committed
713 
$progress-bar-transition:       width .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
714
Mark Otto's avatar
rip numbers    
Mark Otto committed
715 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
716
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
717
718
719
720 
$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
721
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
722 
$list-group-item-padding-y:      .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
723 
$list-group-item-padding-x:      1.25rem !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
724
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
725 
$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
726
727
728 
$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
729
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
730 
$list-group-disabled-color:      $gray-600 !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
731 
$list-group-disabled-bg:         $list-group-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
732
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
733 
$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
734 
$list-group-action-hover-color:       $list-group-action-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
735
Mark Otto's avatar
follow up to 4e067f722    
Mark Otto committed
736 
$list-group-action-active-color:      $body-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
737 
$list-group-action-active-bg:         $gray-200 !default;
Chris Rebert's avatar
Add $list-group-item-padding-{x,y} variables    
Chris Rebert committed
738
Mark Otto's avatar
convert to scss  
Mark Otto committed
739
Mark Otto's avatar
rip numbers    
Mark Otto committed
740 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
741
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
742
743 
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
Chris Rebert's avatar
Add $thumbnail-border-width; refs #18150    
Chris Rebert committed
744 
$thumbnail-border-width:      $border-width !default;
Chris Rebert's avatar
$thumbnail-border => $thumbnail-border-color    
Chris Rebert committed
745 
$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
746 
$thumbnail-border-radius:     $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
747 
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
748 
$thumbnail-transition:        all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
749
750
Mark Otto's avatar
rip numbers    
Mark Otto committed
751 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
752
753 

$figure-caption-font-size: 90% !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
754 
$figure-caption-color:     $gray-600 !default;
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
755
756
Mark Otto's avatar
rip numbers    
Mark Otto committed
757 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
758
Chris Rebert's avatar
Refactor Breadcrumbs component    
Chris Rebert committed
759
760
761 
$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
762
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
763
764 
$breadcrumb-margin-bottom:      1rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
765
766
767 
$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
768 
$breadcrumb-divider:            "/" !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
769
770
Mark Otto's avatar
rip numbers    
Mark Otto committed
771 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
772
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
773 
$carousel-control-color:                      $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
774
775 
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
776
Mark Otto's avatar
redesign indicators    
Mark Otto committed
777
778 
$carousel-indicator-width:                    30px !default;
$carousel-indicator-height:                   3px !default;
Mark Otto's avatar
flexbox powered indicators    
Mark Otto committed
779 
$carousel-indicator-spacer:                   3px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
780 
$carousel-indicator-active-bg:                $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
781
Chris Rebert's avatar
Extract $carousel-caption{-sm-up}-width variables    
Chris Rebert committed
782 
$carousel-caption-width:                      70% !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
783 
$carousel-caption-color:                      $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
784
Mark Otto's avatar
rename var    
Mark Otto committed
785 
$carousel-control-icon-width:                 20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
786
Mark Otto's avatar
simplify svg by only using viewbox    
Mark Otto committed
787
788 
$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
789
Mark Otto's avatar
Switch to ease function to remove trailing animation movement    
Mark Otto committed
790 
$carousel-transition:           transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
791
Mark Otto's avatar
convert to scss  
Mark Otto committed
792
Mark Otto's avatar
rip numbers    
Mark Otto committed
793 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
794
Mark Otto's avatar
clarify usage of base font-size so we know what's up    
Mark Otto committed
795 
$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
796 
$close-font-weight:           $font-weight-bold !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
797
798 
$close-color:                 $black !default;
$close-text-shadow:           0 1px 0 $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
799
Mark Otto's avatar
rip numbers    
Mark Otto committed
800 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
801
Chris Rebert's avatar
Extract $code-font-size variable    
Chris Rebert committed
802 
$code-font-size:              90% !default;
Chris Rebert's avatar
Extract $code-padding-{x,y} variables    
Chris Rebert committed
803 
$code-padding-y:              .2rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
804 
$code-padding-x:              .4rem !default;
Mark Otto's avatar
tweak code styles    
Mark Otto committed
805 
$code-color:                  #bd4147 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
806 
$code-bg:                     $gray-100 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
807
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
808 
$kbd-color:                   $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
809 
$kbd-bg:                      $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
810
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
811 
$pre-color:                   $gray-900 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
812 
$pre-scrollable-max-height:   340px !default;