Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 30.1 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 

$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
64
65 
$grays: () !default;
$grays: map-merge((
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
66
67
68
69
70
71
72
73
74 
  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
75 
), $grays);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
76
77 

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

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

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

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

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

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

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

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

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

$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
552
553 
$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
554
555 
$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
556
557 

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

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

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