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

// Components
//
// Define common padding and border radius sizes and more.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
198
199 
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
200
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
201
202 
$border-width:                1px !default;
$border-color:                $gray-200 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
203
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
204
205
206 
$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
207
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
208
209 
$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
210
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
211 
$caret-width:                 .3em !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
212
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
213
214
215 
$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
216
217
Mark Otto's avatar
rip numbers    
Mark Otto committed
218 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
219 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
220 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
221
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
222 
// stylelint-disable value-keyword-case
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
223
224
225 
$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
226 
// stylelint-enable value-keyword-case
Mark Otto's avatar
convert to scss  
Mark Otto committed
227
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
228
229
230 
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
Chris Rebert's avatar
Apply !default to SCSS variables    
Chris Rebert committed
231
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
232
233
234 
$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
235
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
236
237 
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
238
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
239
240
241
242
243
244 
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
245
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
246
247
248 
$headings-margin-bottom:      ($spacer / 2) !default;
$headings-font-family:        inherit !default;
$headings-font-weight:        500 !default;
Mark Otto's avatar
Increase headings-line-height from 1.1 to 1.2 (#24423)    
Mark Otto committed
249 
$headings-line-height:        1.2 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
250 
$headings-color:              inherit !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
251
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
252
253
254
255 
$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
256
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
257
258
259
260
261 
$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
262
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
263
264 
$lead-font-size:              ($font-size-base * 1.25) !default;
$lead-font-weight:            300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
265
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
266 
$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
267
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
268 
$text-muted:                  $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
269
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
270
271 
$blockquote-small-color:      $gray-600 !default;
$blockquote-font-size:        ($font-size-base * 1.25) !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
272
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
273
274 
$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
275
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
276 
$mark-padding:                .2em !default;
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
277
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
278 
$dt-font-weight:              $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
279
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
280
281 
$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
282
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
283 
$list-inline-padding:         5px !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
284
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
285
286 
$mark-bg: #fcf8e3 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
287
Mark Otto's avatar
rip numbers    
Mark Otto committed
288 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
289 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
290 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
291
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
292
293 
$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
294
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
295
296
297
298 
$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
299
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
300
301 
$table-border-width:          $border-width !default;
$table-border-color:          $gray-200 !default;
Mark Otto's avatar
reorder    
Mark Otto committed
302
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
303
304 
$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
305
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
306
307
308
309
310 
$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
311
312
Mark Otto's avatar
rip numbers    
Mark Otto committed
313 
// Buttons
Mark Otto's avatar
convert to scss  
Mark Otto committed
314 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
315 
// For each of Bootstrap's buttons, define text, background and border color.
Mark Otto's avatar
convert to scss  
Mark Otto committed
316
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
317
318
319 
$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
320
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
321
322
323
324 
$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba(theme-color("primary"), .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
325
326
327 
$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
328
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
329
330
331 
$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
332
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
333
334
335 
$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-active-box-shadow:       inset 0 3px 5px rgba($black,.125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
336
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
337 
$btn-link-disabled-color:     $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
338
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
339 
$btn-block-spacing-y:         .5rem !default;
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
340
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
341 
// Allows for customizing button radius independently from global border radius
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
342
343
344 
$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
345
Andres Galante's avatar
adds animation to color on outlined btns    
Andres Galante committed
346 
$btn-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
347
Mark Otto's avatar
convert to scss  
Mark Otto committed
348
Mark Otto's avatar
rip numbers    
Mark Otto committed
349 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
350
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
351
352 
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
353
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
354
355
356
357 
$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
358
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
359
360
361 
$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
362
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
363
364
365 
$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten(theme-color("primary"), 25%) !default;
$input-focus-color:                     $input-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
366
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
367 
$input-placeholder-color:               $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
368
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
369 
$input-height-border:                   $input-btn-border-width * 2 !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
370
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
371
372 
$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
373
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
374
375 
$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
376
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
377
378 
$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
379
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
380 
$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
381
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
382 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
383
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
384
385
386
387 
$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
388
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
389 
$form-check-inline-margin-x:            .75rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
390
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
391 
$form-group-margin-bottom:              1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
392
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
393
394
395 
$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
396
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
397
398
399 
$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
400
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
401
402
403
404 
$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
405
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
406
407 
$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
408
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
409
410
411 
$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
412
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
413 
$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !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
416
417 
$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
418
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
419
420 
$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
421
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
422 
$custom-checkbox-indicator-indeterminate-bg:    theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
423 
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
424 
$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
425 
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
426
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
427
428 
$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
429
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
430 
$custom-select-padding-y:           .375rem !default;
XhmikosR's avatar
Minor Sass cleanup and consistency changes. (#23959)    
XhmikosR committed
431
432 
$custom-select-padding-x:          .75rem !default;
$custom-select-height:              $input-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
433 
$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
434 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
435 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
436 
$custom-select-disabled-color:      $gray-600 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466 
$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
467
468
469
470
471
472
473
474 
$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
475
476
Mark Otto's avatar
remove icons for now    
Mark Otto committed
477 
// Form validation
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
478
479 
$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
480
Mark Otto's avatar
convert to scss  
Mark Otto committed
481
Mark Otto's avatar
rip numbers    
Mark Otto committed
482 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
483 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
484 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
485
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
486
487
488
489
490
491
492
493 
$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
494
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
495
496
497 
$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
498
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
499
500 
$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
501
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
502 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
503
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
504
505 
$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
506
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
507 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
508
509
Mark Otto's avatar
rip numbers    
Mark Otto committed
510 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
511
512
513
514 
//
// 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
515
516
517
518
519
520
521 
$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
522
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
523
524 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
525
526
527 
$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
528
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
529
530
531
532
533
534
535 
$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
536
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
537
538
539 
$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
540
Mark Otto's avatar
rip numbers    
Mark Otto committed
541 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
542
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
543 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
544 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
545
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
546 
$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
547 
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
Dylan Seago's avatar
Rename navbar height variables to reflect their value (#24161)    
Dylan Seago committed
548
549
550 
$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
551
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
552
553
554
555 
$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
556
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
557
558 
$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
559 
$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
560 
$navbar-dark-disabled-color:        rgba($white,.25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
561 
$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
562 
$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
563
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
564
565
566
567 
$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
568 
$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
569 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
570
Mark Otto's avatar
rip numbers    
Mark Otto committed
571 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
572
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
573
574
575
576
577
578
579 
$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
580
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
581
582
583
584 
$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
585
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
586
587
588 
$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
589
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
590
591
592 
$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
593
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
594
595
596 
$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
597
598
Mark Otto's avatar
rip numbers    
Mark Otto committed
599 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
600
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
601
602 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
603
604
Mark Otto's avatar
rip numbers    
Mark Otto committed
605 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
606
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
607
608
609
610
611
612
613
614 
$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
615
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
616 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
617
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
618
619 
$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
620
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
621
622
623 
$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
624
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
625
Mark Otto's avatar
rip numbers    
Mark Otto committed
626 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
627
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
628
629
630
631
632
633
634 
$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
635
636
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
637
638
639 
$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
640
641
Mark Otto's avatar
rip numbers    
Mark Otto committed
642 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
643
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
644
645
646
647 
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$popover-border-color:              rgba($black,.2) !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
648 
$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
649
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
650
651 
$popover-header-bg:                 darken($popover-bg, 3%) !default;
$popover-header-color:              $headings-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
652
653 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
654
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
655 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
656
657 
$popover-body-padding-y:            $popover-header-padding-y !default;
$popover-body-padding-x:            $popover-header-padding-x !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
658
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
659
660 
$popover-arrow-width:               .8rem !default;
$popover-arrow-height:              .4rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
661 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
662
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
663 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
664
665
Mark Otto's avatar
rip numbers    
Mark Otto committed
666 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
667
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
668
669
670
671
672 
$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
673
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
674 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
675
676 
// 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
677 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
678
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
679
Mark Otto's avatar
rip numbers    
Mark Otto committed
680 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
681
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
682 
// Padding applied to the modal body
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
683 
$modal-inner-padding:               15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
684
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
685
686 
$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
687
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
688 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
689
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
690
691
692
693
694 
$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
695
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
696
697
698
699
700
701
702 
$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
703
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
704
705
706 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
707
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
708 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
709
Mark Otto's avatar
convert to scss  
Mark Otto committed
710
Mark Otto's avatar
rip numbers    
Mark Otto committed
711 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
712 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
713 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
714
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
715
716
717
718
719
720 
$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
721
722
Mark Otto's avatar
rip numbers    
Mark Otto committed
723 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
724
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
725
726
727
728
729
730
731
732
733 
$progress-height:                   1rem !default;
$progress-font-size:                ($font-size-base * .75) !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
734
Mark Otto's avatar
rip numbers    
Mark Otto committed
735 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
736
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
737
738
739
740 
$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
741
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
742
743 
$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
744
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
745
746
747
748 
$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
749
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
750
751 
$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
752
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
753
754 
$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
755
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
756
757 
$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
758
Mark Otto's avatar
convert to scss  
Mark Otto committed
759
Mark Otto's avatar
rip numbers    
Mark Otto committed
760 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
761
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
762
763
764
765
766
767 
$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;
Mark Otto's avatar
convert to scss  
Mark Otto committed
768
769
Mark Otto's avatar
rip numbers    
Mark Otto committed
770 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
771
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
772
773 
$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
774
775
Mark Otto's avatar
rip numbers    
Mark Otto committed
776 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
777
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
778
779
780 
$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
781
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
782 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
783
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
784
785
786
787 
$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
788
789
Mark Otto's avatar
rip numbers    
Mark Otto committed
790 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
791
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
792
793
794 
$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
795
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
796
797
798
799 
$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
800
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
801
802 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
803
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
804 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
805
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
806
807 
$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
808
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
809 
$carousel-transition:               transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
810
Mark Otto's avatar
convert to scss  
Mark Otto committed
811
Mark Otto's avatar
rip numbers    
Mark Otto committed
812 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
813
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
814
815
816
817 
$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
818
Mark Otto's avatar
rip numbers    
Mark Otto committed
819 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
820
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
821
822
823
824
825 
$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
826
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
827
828 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
829
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
830
831 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;