Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 31.5 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
90
Mark Otto's avatar
rip numbers    
Mark Otto committed
91 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
92 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
93
94 
// 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
95 
$enable-caret:              true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
96
97
98 
$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
99 
$enable-transitions:        true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
100 
$enable-hover-media-query:  false !default;
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
101 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
102 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
103
104
Mark Otto's avatar
rip numbers    
Mark Otto committed
105 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
106
107
108 
//
// 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
109 
// 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
110
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
111 
$spacer: 1rem !default;
Chris Rebert's avatar
Refactor _utilities-spacing.scss; fixes #18129    
Chris Rebert committed
112 
$spacers: (
Starsam80's avatar
Clean up spacers a bit more    
Starsam80 committed
113
114
115
116
117
118 
  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
119 
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
120
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
121 
// This variable affects the `.h-*` and `.w-*` classes.
Starsam80's avatar
Use variables for the width/height classes    
Starsam80 committed
122
123
124
125
126
127 
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
128
Mark Otto's avatar
rip numbers    
Mark Otto committed
129 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
130
131 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
132
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
133
134 
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
135
Mark Otto's avatar
rip numbers    
Mark Otto committed
136 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
137
138 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
139
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
140
141
142
143 
$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
144
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
145
146
147
148 
// Paragraphs
//
// Style p element.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
149 
$paragraph-margin-bottom:   1rem !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
150
Mark Otto's avatar
convert to scss  
Mark Otto committed
151
Mark Otto's avatar
rip numbers    
Mark Otto committed
152 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
153 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
154 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
155 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
156
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
157
158 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
159 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
160
161
162 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
163 
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
164
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
165 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
166 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
167
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
168
Mark Otto's avatar
rip numbers    
Mark Otto committed
169 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
170 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
171 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
172
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
173 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
174 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
175 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
176 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
177 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
178 
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
179
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
180 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
181
182
Mark Otto's avatar
rip numbers    
Mark Otto committed
183 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
184
185
186 
//
// Set the number of columns and specify the width of the gutters.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
187
188 
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
189
190
191
192
193 

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