Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 30 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
update comment    
Mark Otto committed
11 
// Color system
Mark Otto's avatar
rip numbers    
Mark Otto committed
12
13
14
15 
// Options
// Spacing
// Body
// Links
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
16 
// Paragraphs
Mark Otto's avatar
rip numbers    
Mark Otto committed
17
18
19
20
21
22
23
24
25
26
27 
// 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
28 
// Navbar
Mark Otto's avatar
rip numbers    
Mark Otto committed
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 
// 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
46
Mark Otto's avatar
update comment    
Mark Otto committed
47
48
49
50 

//
// Color system
//
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 

$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
77
78
79
80
81
82
83
84
85 
$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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104 

$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
105 
  secondary: $gray-600,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
106
107 
  success: $green,
  info: $cyan,
Mark Otto's avatar
update theme colors    
Mark Otto committed
108 
  warning: $yellow,
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
109 
  danger: $red,
Mark Otto's avatar
update theme colors    
Mark Otto committed
110
111 
  light: $gray-100,
  dark: $gray-800
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
112
113 
) !default;
Mark Otto's avatar
add theme-color-level function and interval so we can generate shades of colors    
Mark Otto committed
114
115 
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
116
117
Mark Otto's avatar
rip numbers    
Mark Otto committed
118 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
119 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
120
121
122
123
124 
// 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
125 
$enable-transitions:        true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
126 
$enable-hover-media-query:  false !default;
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
127 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
128 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
129
130
Mark Otto's avatar
rip numbers    
Mark Otto committed
131 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
132
133
134 
//
// 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
135 
// 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
136
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
137 
$spacer: 1rem !default;
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
138 
$spacers: (
Starsam80's avatar
Clean up spacers a bit more    
Starsam80 committed
139
140
141
142
143
144 
  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
145 
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
146
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
147 
// This variable affects the `.h-*` and `.w-*` classes.
Starsam80's avatar
Use variables for the width/height classes    
Starsam80 committed
148
149
150
151
152
153 
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
154
Mark Otto's avatar
rip numbers    
Mark Otto committed
155 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
156
157 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
158
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
159 
$body-bg:       $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
160 
$body-color:    $gray-900 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
161
Mark Otto's avatar
rip numbers    
Mark Otto committed
162 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
163
164 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
165
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
166 
$link-color:            theme-color("primary") !default;
Mark Otto's avatar
more variables spacing    
Mark Otto committed
167
168
169 
$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
170
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
171
172
173
174
175
176 
// Paragraphs
//
// Style p element.

$paragraph-margin-bottom: 1rem;
Mark Otto's avatar
convert to scss  
Mark Otto committed
177
Mark Otto's avatar
rip numbers    
Mark Otto committed
178 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
179 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
180 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
181 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
182
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
183
184 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
185 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
186
187
188 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
189 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
190 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
191 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
192
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
193
Mark Otto's avatar
rip numbers    
Mark Otto committed
194 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
195 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
196 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
197
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
198 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
199 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
200 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
201 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
202 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
203 
) !default;
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
204 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
205
206
Mark Otto's avatar
rip numbers    
Mark Otto committed
207 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
208
209
210 
//
// 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
211
212 
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
213
214
215
216
217 

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

$border-width: 1px !default;
envolute's avatar
Add "$border-color" variable    
envolute committed
222 
$border-color: $gray-200 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
223
224
225
226
227
228 

$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
229 
$component-active-bg:    theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
230
231
232
233
234
235
236
237 

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

$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
421 
$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
422
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
423
424 
$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
425
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
426 
$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
427 
$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
428 
$custom-control-indicator-checked-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
429
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
430 
$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
431
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`,...    
Patrick Yeo committed
432 
$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
433 
$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
434 
$custom-control-indicator-active-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
435
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
436
437 
$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
438
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
439 
$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
440 
$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
441
442 
$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
443
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
444
445 
$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
446
447 

$custom-select-padding-y:          .375rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
448 
$custom-select-padding-x:          .75rem  !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
449 
$custom-select-height:              $input-height  !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
450 
$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
451 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
452 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
453 
$custom-select-disabled-color:      $gray-600 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
454 
$custom-select-bg:            $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
455 
$custom-select-disabled-bg:   $gray-200 !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
456 
$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
457 
$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
458 
$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
459
460
461
462 
$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
463 
$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
464 
$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
465
Mark Otto's avatar
Redo the small custom select vars    
Mark Otto committed
466
467 
$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
468
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
469 
$custom-file-height:           $input-height !default;
Mark Otto's avatar
add custom file vars, fix up custom select var    
Mark Otto committed
470 
$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
471 
$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
472
Patrick Yeo's avatar
Custom File padding-x and padding-y values are reversed (#23067)    
Patrick Yeo committed
473
474
475
476
477
478 
$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
479 
$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
480
481 
$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
482 
$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
483 
$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
484
485
486
487
488
489
490
491 
$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
492
493
Mark Otto's avatar
remove icons for now    
Mark Otto committed
494 
// Form validation
Mark Otto's avatar
remove - vars, update docs to generate from data yml files, update mixins, and...    
Mark Otto committed
495
496 
$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
497
Mark Otto's avatar
convert to scss  
Mark Otto committed
498
Mark Otto's avatar
rip numbers    
Mark Otto committed
499 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
500 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
501 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
502
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
503
504 
$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
505 
$dropdown-spacer:                .125rem !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
506
507 
$dropdown-bg:                    $white !default;
$dropdown-border-color:          rgba($black,.15) !default;
Chris Rebert's avatar
Add $dropdown-border-width; refs #18150    
Chris Rebert committed
508 
$dropdown-border-width:          $border-width !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
509 
$dropdown-divider-bg:            $gray-200 !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
510 
$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
511
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
512
513
514 
$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
515
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
516
517 
$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
518
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
519 
$dropdown-link-disabled-color:   $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
520
Mark Otto's avatar
Add dropdown-item-padding-y var    
Mark Otto committed
521 
$dropdown-item-padding-y:        .25rem !default;
Mark Otto's avatar
v4: Dropdown units (#20701)    
Mark Otto committed
522 
$dropdown-item-padding-x:        1.5rem !default;
Chris Rebert's avatar
Extract $dropdown-item-padding-x variable    
Chris Rebert committed
523
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
524 
$dropdown-header-color:          $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
525
526
Mark Otto's avatar
rip numbers    
Mark Otto committed
527 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
528
529
530
531 
//
// 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
532 
$zindex-dropdown:           1000 !default;
Catalin Zalog's avatar
Change sticky order (#22027)    
Catalin Zalog committed
533 
$zindex-sticky:             1020 !default;
Mark Otto's avatar
update rest of docs, remove navbar specific modifiers, fix docs example css    
Mark Otto committed
534
535
536
537
538 
$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
539
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
540
541
542 
// Navs

$nav-link-padding-y:            .5rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
543 
$nav-link-padding-x:            1rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
544 
$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
545
546
547
548 

$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
549
550 
$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
551
552 
$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
553
554 

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

$badge-pill-padding-x:        .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
694
695 
// 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
696 
$badge-pill-border-radius:    10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
697
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
698
Mark Otto's avatar
rip numbers    
Mark Otto committed
699 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
700
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
701 
// Padding applied to the modal body
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
702 
$modal-inner-padding:         15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
703
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
704 
$modal-dialog-margin:         10px !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
705 
$modal-dialog-margin-y-sm-up: 30px !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
706
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
707 
$modal-title-line-height:     $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
708
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
709
710 
$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
711 
$modal-content-border-width:     $border-width !default;
Patrick Yeo's avatar
(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`,...    
Patrick Yeo committed
712
713 
$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
714
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
715 
$modal-backdrop-bg:           $black !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
716 
$modal-backdrop-opacity:      .5 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
717 
$modal-header-border-color:   $gray-200 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
718 
$modal-footer-border-color:   $modal-header-border-color !default;
Chris Rebert's avatar
Extract $modal-content-border-width variable    
Chris Rebert committed
719 
$modal-header-border-width:   $modal-content-border-width !default;
Chris Rebert's avatar
Extract $modal-{header,footer}-border-width variables    
Chris Rebert committed
720 
$modal-footer-border-width:   $modal-header-border-width !default;
Elliot Evans's avatar
renamed modal-title-padding to modal-header-padding    
Elliot Evans committed
721 
$modal-header-padding:        15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
722
Mark Otto's avatar
decrease size of modal-md and modal-lg to ensure fitting in responsive layouts    
Mark Otto committed
723
724 
$modal-lg:                    800px !default;
$modal-md:                    500px !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
725 
$modal-sm:                    300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
726
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
727
728 
$modal-transition:            transform .3s ease-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
729
Mark Otto's avatar
rip numbers    
Mark Otto committed
730 
// Alerts
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 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
733
Mark Otto's avatar
Switch to separate vars for alert vertical/horizontal padding    
Mark Otto committed
734 
$alert-padding-y:             .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
735 
$alert-padding-x:             1.25rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
736 
$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
737 
$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
738 
$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
739 
$alert-border-width:          $border-width !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
740
741
Mark Otto's avatar
rip numbers    
Mark Otto committed
742 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
743
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
744
745 
$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
746 
$progress-bg:                   $gray-200 !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
747
748
749 
$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
750 
$progress-bar-bg:               theme-color("primary") !default;
Mark Otto's avatar
Rewrite progress component without <progress> element    
Mark Otto committed
751 
$progress-bar-animation-timing: 1s linear infinite !default;
Mark Otto's avatar
Add transition to .progress-bar    
Mark Otto committed
752 
$progress-bar-transition:       width .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
753
Mark Otto's avatar
rip numbers    
Mark Otto committed
754 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
755
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
756
757
758
759 
$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
760
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
761 
$list-group-item-padding-y:      .75rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
762 
$list-group-item-padding-x:      1.25rem !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
763
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
764 
$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
765
766
767 
$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
768
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
769 
$list-group-disabled-color:      $gray-600 !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
770 
$list-group-disabled-bg:         $list-group-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
771
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
772 
$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
773 
$list-group-action-hover-color:       $list-group-action-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
774
Mark Otto's avatar
follow up to 4e067f722    
Mark Otto committed
775 
$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
776 
$list-group-action-active-bg:         $gray-200 !default;
Chris Rebert's avatar
Add $list-group-item-padding-{x,y} variables    
Chris Rebert committed
777
Mark Otto's avatar
convert to scss  
Mark Otto committed
778
Mark Otto's avatar
rip numbers    
Mark Otto committed
779 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
780
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
781
782 
$thumbnail-padding:           .25rem !default;
$thumbnail-bg:                $body-bg !default;
Chris Rebert's avatar
Add $thumbnail-border-width; refs #18150    
Chris Rebert committed
783 
$thumbnail-border-width:      $border-width !default;
Chris Rebert's avatar
$thumbnail-border => $thumbnail-border-color    
Chris Rebert committed
784 
$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
785 
$thumbnail-border-radius:     $border-radius !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
786 
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
787 
$thumbnail-transition:        all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
788
789
Mark Otto's avatar
rip numbers    
Mark Otto committed
790 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
791
792 

$figure-caption-font-size: 90% !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
793 
$figure-caption-color:     $gray-600 !default;
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
794
795
Mark Otto's avatar
rip numbers    
Mark Otto committed
796 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
797
Chris Rebert's avatar
Refactor Breadcrumbs component    
Chris Rebert committed
798
799
800 
$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
801
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
802
803 
$breadcrumb-margin-bottom:      1rem !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
804
805
806 
$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
807 
$breadcrumb-divider:            "/" !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
808
809
Mark Otto's avatar
rip numbers    
Mark Otto committed
810 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
811
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
812 
$carousel-control-color:                      $white !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
813
814 
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
815
Mark Otto's avatar
redesign indicators    
Mark Otto committed
816
817 
$carousel-indicator-width:                    30px !default;
$carousel-indicator-height:                   3px !default;
Mark Otto's avatar
flexbox powered indicators    
Mark Otto committed
818 
$carousel-indicator-spacer:                   3px !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
819 
$carousel-indicator-active-bg:                $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
820
Chris Rebert's avatar
Extract $carousel-caption{-sm-up}-width variables    
Chris Rebert committed
821 
$carousel-caption-width:                      70% !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
822 
$carousel-caption-color:                      $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
823
Mark Otto's avatar
rename var    
Mark Otto committed
824 
$carousel-control-icon-width:                 20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
825
Mark Otto's avatar
simplify svg by only using viewbox    
Mark Otto committed
826
827 
$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
828
Mark Otto's avatar
Switch to ease function to remove trailing animation movement    
Mark Otto committed
829 
$carousel-transition:           transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
830
Mark Otto's avatar
convert to scss  
Mark Otto committed
831
Mark Otto's avatar
rip numbers    
Mark Otto committed
832 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
833
Mark Otto's avatar
clarify usage of base font-size so we know what's up    
Mark Otto committed
834 
$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
835 
$close-font-weight:           $font-weight-bold !default;
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
836
837 
$close-color:                 $black !default;
$close-text-shadow:           0 1px 0 $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
838
Mark Otto's avatar
rip numbers    
Mark Otto committed
839 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
840
Chris Rebert's avatar
Extract $code-font-size variable    
Chris Rebert committed
841 
$code-font-size:              90% !default;
Chris Rebert's avatar
Extract $code-padding-{x,y} variables    
Chris Rebert committed
842 
$code-padding-y:              .2rem !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
843 
$code-padding-x:              .4rem !default;
Mark Otto's avatar
tweak code styles    
Mark Otto committed
844 
$code-color:                  #bd4147 !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
845 
$code-bg:                     $gray-100 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
846
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
847 
$kbd-color:                   $white !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
848 
$kbd-bg:                      $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
849
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
850 
$pre-color:                   $gray-900 !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
851 
$pre-scrollable-max-height:   340px !default;