Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 31.3 KB
Newer Older
Mark Otto's avatar
convert to scss  
Mark Otto committed
1 
// Variables
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
2 
//
Mark Otto's avatar
Update _variables.scss    
Mark Otto committed
3 
// Variables should follow the `$component-state-property-size` formula for
Mark Otto's avatar
Mention variable naming scheme to help with #22414    
Mark Otto committed
4 
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
5
Mark Otto's avatar
update comment    
Mark Otto committed
6
7
8
9 

//
// Color system
//
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
10
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
11 
// stylelint-disable
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
12 
$white:    #fff !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
13
14
15
16
17
18
19
20
21 
$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;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
22 
$black:    #000 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
23
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
24
25 
$grays: () !default;
$grays: map-merge((
Martijn Cuppens's avatar
Add quotes to mapping keys (#23701)    
Martijn Cuppens committed
26
27
28
29
30
31
32
33
34 
  "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
35 
), $grays);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
36
37 

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

// Components
//
// Define common padding and border radius sizes and more.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
185
186 
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
187
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
188
189 
$border-width:                1px !default;
$border-color:                $gray-200 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
190
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
191
192
193 
$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
194
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
195
196 
$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
197
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
198 
$caret-width:                 .3em !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
199
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
200
201
202 
$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
203
204
Mark Otto's avatar
rip numbers    
Mark Otto committed
205 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
206 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
207 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
208
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
209 
// stylelint-disable value-keyword-case
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
210
211
212 
$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;
$font-family-monospace:       "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
213 
// stylelint-enable value-keyword-case
Mark Otto's avatar
convert to scss  
Mark Otto committed
214
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
215
216
217 
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                1.25rem !default;
$font-size-sm:                .875rem !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
218
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
219
220
221 
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
222
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
223
224 
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
225
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
226
227
228
229
230
231 
$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
232
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
233
234
235
236
237 
$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
238
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
239
240
241
242 
$display1-size:               6rem !default;
$display2-size:               5.5rem !default;
$display3-size:               4.5rem !default;
$display4-size:               3.5rem !default;
Mark Otto's avatar
fixes #21511: set line-height to 1.1 for display headings    
Mark Otto committed
243
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
244
245
246
247
248 
$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
fixes #21511: set line-height to 1.1 for display headings    
Mark Otto committed
249
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
250
251 
$lead-font-size:              1.25rem !default;
$lead-font-weight:            300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
252
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
253 
$small-font-size:             80% !default;
Mark Otto's avatar
Revert "Drop the $small-font-size variable for the newer $font-size-sm one"    
Mark Otto committed
254
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
255 
$text-muted:                  $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
256
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
257
258 
$blockquote-small-color:      $gray-600 !default;
$blockquote-font-size:        ($font-size-base * 1.25) !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
259
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
260
261 
$hr-border-color:             rgba($black,.1) !default;
$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
262
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
263 
$mark-padding:                .2em !default;
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
264
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
265 
$dt-font-weight:              $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
266
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
267
268 
$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black,.25) !default;
$nested-kbd-font-weight:      $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
269
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
270 
$list-inline-padding:         5px !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
271
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
272
273 
$mark-bg: #fcf8e3 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
274
Mark Otto's avatar
rip numbers    
Mark Otto committed
275 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
276 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
277 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
278
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
279
280 
$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
281
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
282
283
284
285 
$table-bg:                    transparent !default;
$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
286
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
287
288 
$table-border-width:          $border-width !default;
$table-border-color:          $gray-200 !default;
Mark Otto's avatar
reorder    
Mark Otto committed
289
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
290
291 
$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
292
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
293
294
295
296
297 
$table-dark-bg:               $gray-900 !default;
$table-dark-accent-bg:        rgba($white, .05) !default;
$table-dark-hover-bg:         rgba($white, .075) !default;
$table-dark-border-color:     lighten($gray-900, 7.5%) !default;
$table-dark-color:            $body-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
298
299
Mark Otto's avatar
rip numbers    
Mark Otto committed
300 
// Buttons
Mark Otto's avatar
convert to scss  
Mark Otto committed
301 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
302 
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
convert to scss  
Mark Otto committed
303
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
304
305
306 
$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
$input-btn-line-height:       $line-height-base !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
307
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
308
309
310 
$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-line-height-sm:    $line-height-sm !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
311
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
312
313
314 
$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-line-height-lg:    $line-height-lg !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
315
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
316
317
318
319 
$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow:        0 0 0 3px rgba(theme-color("primary"), .25) !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black,.125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
320
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
321 
$btn-link-disabled-color:     $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
322
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
323 
$btn-block-spacing-y:         .5rem !default;
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
324
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
325 
// Allows for customizing button radius independently from global border radius
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
326
327
328 
$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
329
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
330 
$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
331
Mark Otto's avatar
convert to scss  
Mark Otto committed
332
Mark Otto's avatar
rip numbers    
Mark Otto committed
333 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
334
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
335
336 
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
337
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
338
339
340
341 
$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-btn-border-width:                $border-width !default; // For form controls and buttons
$input-box-shadow:                      inset 0 1px 1px rgba($black,.075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
342
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
343
344
345 
$input-border-radius:                   $border-radius !default;
$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
346
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
347
348
349
350 
$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten(theme-color("primary"), 25%) !default;
$input-focus-box-shadow:                $input-box-shadow, $btn-focus-box-shadow !default;
$input-focus-color:                     $input-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
351
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
352 
$input-placeholder-color:               $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
353
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
354 
$input-height-border:                   $input-btn-border-width * 2 !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
355
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
356
357 
$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;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
358
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
359
360 
$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;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
361
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
362
363 
$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
364
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
365 
$input-transition:                      border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
366
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
367 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
368
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
369
370
371
372 
$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;
Mark Otto's avatar
add some vars    
Mark Otto committed
373
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
374 
$form-check-inline-margin-x:            .75rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
375
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
376 
$form-group-margin-bottom:              1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
377
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
378
379
380 
$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  $gray-200 !default;
$input-group-addon-border-color:        $input-border-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
381
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
382
383
384 
$custom-control-gutter:                 1.5rem !default;
$custom-control-spacer-y:               .25rem !default;
$custom-control-spacer-x:               1rem !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
385
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
386
387
388
389 
$custom-control-indicator-size:         1rem !default;
$custom-control-indicator-bg:           #ddd !default;
$custom-control-indicator-bg-size:      50% 50% !default;
$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
390
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
391
392 
$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
393
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
394
395
396 
$custom-control-indicator-checked-color:        $white !default;
$custom-control-indicator-checked-bg:           theme-color("primary") !default;
$custom-control-indicator-checked-box-shadow:   none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
397
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
398 
$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
399
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
400
401
402 
$custom-control-indicator-active-color:         $white !default;
$custom-control-indicator-active-bg:            lighten(theme-color("primary"), 35%) !default;
$custom-control-indicator-active-box-shadow:    none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
403
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
404
405 
$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
406
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
407 
$custom-checkbox-indicator-indeterminate-bg:    theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
408 
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
409 
$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;
Patrick Yeo's avatar
(#22414) Rename for consistency `$custom-checkbox-border-radius`,...    
Patrick Yeo committed
410 
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
411
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
412
413 
$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
414
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
415 
$custom-select-padding-y:           .375rem !default;
XhmikosR's avatar
Minor Sass cleanup and consistency changes. (#23959)    
XhmikosR committed
416
417 
$custom-select-padding-x:          .75rem !default;
$custom-select-height:              $input-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
418 
$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
419 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
420 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
421 
$custom-select-disabled-color:      $gray-600 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451 
$custom-select-bg:                  $white !default;
$custom-select-disabled-bg:         $gray-200 !default;
$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color:     #333 !default;
$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;
$custom-select-border-width:        $input-btn-border-width !default;
$custom-select-border-color:        $input-border-color !default;
$custom-select-border-radius:       $border-radius !default;

$custom-select-focus-border-color:  lighten(theme-color("primary"), 25%) !default;
$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;

$custom-select-font-size-sm:        75% !default;
$custom-select-height-sm:           $input-height-sm !default;

$custom-file-height:                $input-height !default;
$custom-file-width:                 14rem !default;
$custom-file-focus-box-shadow:      0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;

$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;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$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
452
453
454
455
456
457
458
459 
$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
460
461
Mark Otto's avatar
remove icons for now    
Mark Otto committed
462 
// Form validation
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
463
464 
$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
465
Mark Otto's avatar
convert to scss  
Mark Otto committed
466
Mark Otto's avatar
rip numbers    
Mark Otto committed
467 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
468 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
469 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
470
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
471
472
473
474
475
476
477
478 
$dropdown-min-width:                10rem !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black,.15) !default;
$dropdown-border-width:             $border-width !default;
$dropdown-divider-bg:               $gray-200 !default;
$dropdown-box-shadow:               0 .5rem 1rem rgba($black,.175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
479
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
480
481
482 
$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
483
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
484
485 
$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
486
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
487 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
488
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
489
490 
$dropdown-item-padding-y:           .25rem !default;
$dropdown-item-padding-x:           1.5rem !default;
Chris Rebert's avatar
Extract $dropdown-item-padding-x variable    
Chris Rebert committed
491
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
492 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
493
494
Mark Otto's avatar
rip numbers    
Mark Otto committed
495 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
496
497
498
499 
//
// 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.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
500
501
502
503
504
505
506 
$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$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
507
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
508
509 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
510
511
512 
$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$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
513
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
514
515
516
517
518
519
520 
$nav-tabs-border-color:             #ddd !default;
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
$nav-tabs-link-hover-border-color:  $gray-200 !default;
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: #ddd !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
521
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
522
523
524 
$nav-pills-border-radius:           $border-radius !default;
$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
525
Mark Otto's avatar
rip numbers    
Mark Otto committed
526 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
527
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
528 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
529 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
530
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
531 
$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
532 
// 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
533 
$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
534
535
536 
$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;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
537
538
539
540 
$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .75rem !default;
$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
541
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
542
543 
$navbar-dark-color:                 rgba($white,.5) !default;
$navbar-dark-hover-color:           rgba($white,.75) !default;
XhmikosR's avatar
Use `$white` variable for `.navbar-dark`'s color. (#24309)    
XhmikosR committed
544 
$navbar-dark-active-color:          $white !default;
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
545 
$navbar-dark-disabled-color:        rgba($white,.25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
546 
$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;
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
547 
$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
548
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
549
550
551
552 
$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;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
553 
$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
554 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
555
Mark Otto's avatar
rip numbers    
Mark Otto committed
556 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
557
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
558
559
560
561
562
563
564 
$pagination-padding-y:              .5rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;
$pagination-line-height:            1.25 !default;
Mark Otto's avatar
nuke the shared padding vars and assign to individual components    
Mark Otto committed
565
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
566
567
568
569 
$pagination-color:                  $link-color !default;
$pagination-bg:                     $white !default;
$pagination-border-width:           $border-width !default;
$pagination-border-color:           #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
570
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
571
572
573 
$pagination-hover-color:            $link-hover-color !default;
$pagination-hover-bg:               $gray-200 !default;
$pagination-hover-border-color:     #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
574
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
575
576
577 
$pagination-active-color:           $white !default;
$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
578
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
579
580
581 
$pagination-disabled-color:         $gray-600 !default;
$pagination-disabled-bg:            $white !default;
$pagination-disabled-border-color:  #ddd !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
582
583
Mark Otto's avatar
rip numbers    
Mark Otto committed
584 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
585
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
586
587 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
588
589
Mark Otto's avatar
rip numbers    
Mark Otto committed
590 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
591
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
592
593
594
595
596
597
598
599 
$card-spacer-y:                     .75rem !default;
$card-spacer-x:                     1.25rem !default;
$card-border-width:                 $border-width !default;
$card-border-radius:                $border-radius !default;
$card-border-color:                 rgba($black,.125) !default;
$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg:                       rgba($black, .03) !default;
$card-bg:                           $white !default;
Kevin Kirsche's avatar
Card variables should be in _variables.scss    
Kevin Kirsche committed
600
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
601 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
602
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
603
604 
$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
605
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
606
607
608 
$card-columns-count:                3 !default;
$card-columns-gap:                  1.25rem !default;
$card-columns-margin:               $card-spacer-y !default;
Chris Rebert's avatar
Add $card-columns-sm-up-column-gap variable    
Chris Rebert committed
609
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
610
Mark Otto's avatar
rip numbers    
Mark Otto committed
611 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
612
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
613
614
615
616
617
618
619 
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $white !default;
$tooltip-bg:                        $black !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 3px !default;
$tooltip-padding-x:                 8px !default;
$tooltip-margin:                    0 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
620
621
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
622
623
624 
$tooltip-arrow-width:               5px !default;
$tooltip-arrow-height:              5px !default;
$tooltip-arrow-color:               $tooltip-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
625
626
Mark Otto's avatar
rip numbers    
Mark Otto committed
627 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
628
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
629
630
631
632
633
634 
$popover-inner-padding:             1px !default;
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$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
635
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
636
637
638
639 
$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;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
640
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
641
642
643 
$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
644
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
645
646
647 
$popover-arrow-width:               10px !default;
$popover-arrow-height:              5px !default;
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
648
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
649
650 
$popover-arrow-outer-width:         ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
651
652
Mark Otto's avatar
rip numbers    
Mark Otto committed
653 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
654
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
655
656
657
658
659 
$badge-font-size:                   75% !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-padding-y:                   .25em !default;
$badge-padding-x:                   .4em !default;
$badge-border-radius:               $border-radius !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
660
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
661 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
662
663 
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
664 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
665
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
666
Mark Otto's avatar
rip numbers    
Mark Otto committed
667 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
668
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
669 
// Padding applied to the modal body
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
670 
$modal-inner-padding:               15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
671
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
672
673 
$modal-dialog-margin:               10px !default;
$modal-dialog-margin-y-sm-up:       30px !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
674
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
675 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
676
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
677
678
679
680
681 
$modal-content-bg:                  $white !default;
$modal-content-border-color:        rgba($black,.2) !default;
$modal-content-border-width:        $border-width !default;
$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
682
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
683
684
685
686
687
688
689 
$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;
$modal-header-border-color:         $gray-200 !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-footer-border-width:         $modal-header-border-width !default;
$modal-header-padding:              15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
690
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
691
692
693 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
694
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
695 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
696
Mark Otto's avatar
convert to scss  
Mark Otto committed
697
Mark Otto's avatar
rip numbers    
Mark Otto committed
698 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
699 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
700 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
701
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
702
703
704
705
706
707 
$alert-padding-y:                   .75rem !default;
$alert-padding-x:                   1.25rem !default;
$alert-margin-bottom:               1rem !default;
$alert-border-radius:               $border-radius !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-border-width:                $border-width !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
708
709
Mark Otto's avatar
rip numbers    
Mark Otto committed
710 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
711
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
712
713
714
715
716
717
718
719
720 
$progress-height:                   1rem !default;
$progress-font-size:                .75rem !default;
$progress-bg:                       $gray-200 !default;
$progress-border-radius:            $border-radius !default;
$progress-box-shadow:               inset 0 .1rem .1rem rgba($black,.1) !default;
$progress-bar-color:                $white !default;
$progress-bar-bg:                   theme-color("primary") !default;
$progress-bar-animation-timing:     1s linear infinite !default;
$progress-bar-transition:           width .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
721
Mark Otto's avatar
rip numbers    
Mark Otto committed
722 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
723
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
724
725
726
727 
$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
728
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
729
730 
$list-group-item-padding-y:         .75rem !default;
$list-group-item-padding-x:         1.25rem !default;
Mark Otto's avatar
Revamp list group states and docs to match    
Mark Otto committed
731
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
732
733
734
735 
$list-group-hover-bg:               $gray-100 !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
736
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
737
738 
$list-group-disabled-color:         $gray-600 !default;
$list-group-disabled-bg:            $list-group-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
739
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
740
741 
$list-group-action-color:           $gray-700 !default;
$list-group-action-hover-color:     $list-group-action-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
742
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
743
744 
$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $gray-200 !default;
Chris Rebert's avatar
Add $list-group-item-padding-{x,y} variables    
Chris Rebert committed
745
Mark Otto's avatar
convert to scss  
Mark Otto committed
746
Mark Otto's avatar
rip numbers    
Mark Otto committed
747 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
748
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
749
750
751
752
753
754
755 
$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
$thumbnail-border-color:            #ddd !default;
$thumbnail-border-radius:           $border-radius !default;
$thumbnail-box-shadow:              0 1px 2px rgba($black,.075) !default;
$thumbnail-transition:              all .2s ease-in-out !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
756
757
Mark Otto's avatar
rip numbers    
Mark Otto committed
758 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
759
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
760
761 
$figure-caption-font-size:          90% !default;
$figure-caption-color:              $gray-600 !default;
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
762
763
Mark Otto's avatar
rip numbers    
Mark Otto committed
764 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
765
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
766
767
768 
$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
769
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
770 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
771
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
772
773
774
775 
$breadcrumb-bg:                     $gray-200 !default;
$breadcrumb-divider-color:          $gray-600 !default;
$breadcrumb-active-color:           $gray-600 !default;
$breadcrumb-divider:                "/" !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
776
777
Mark Otto's avatar
rip numbers    
Mark Otto committed
778 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
779
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
780
781
782 
$carousel-control-color:            $white !default;
$carousel-control-width:            15% !default;
$carousel-control-opacity:          .5 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
783
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
784
785
786
787 
$carousel-indicator-width:          30px !default;
$carousel-indicator-height:         3px !default;
$carousel-indicator-spacer:         3px !default;
$carousel-indicator-active-bg:      $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
788
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
789
790 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
791
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
792 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
793
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
794
795 
$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='M5.25 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='M2.75 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
796
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
797 
$carousel-transition:               transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
798
Mark Otto's avatar
convert to scss  
Mark Otto committed
799
Mark Otto's avatar
rip numbers    
Mark Otto committed
800 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
801
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
802
803
804
805 
$close-font-size:                   $font-size-base * 1.5 !default;
$close-font-weight:                 $font-weight-bold !default;
$close-color:                       $black !default;
$close-text-shadow:                 0 1px 0 $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
806
Mark Otto's avatar
rip numbers    
Mark Otto committed
807 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
808
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
809
810
811
812
813 
$code-font-size:                    90% !default;
$code-padding-y:                    .2rem !default;
$code-padding-x:                    .4rem !default;
$code-color:                        #bd4147 !default;
$code-bg:                           $gray-100 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
814
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
815
816 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
817
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
818
819 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;