Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 31.7 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
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR 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
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR 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
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR 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
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
317
318
319
320 
$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
321
322
323 
$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
324
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
325
326
327 
$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
328
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
329
330
331 
$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
332
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
333 
$btn-link-disabled-color:     $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
334
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
335 
$btn-block-spacing-y:         .5rem !default;
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
336
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
337 
// Allows for customizing button radius independently from global border radius
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
338
339
340 
$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
341
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
342 
$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
343
Mark Otto's avatar
convert to scss  
Mark Otto committed
344
Mark Otto's avatar
rip numbers    
Mark Otto committed
345 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
346
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
347
348 
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
349
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
350
351
352
353 
$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
354
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
355
356
357 
$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
358
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
359
360
361 
$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
362
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
363 
$input-placeholder-color:               $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
364
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
365 
$input-height-border:                   $input-btn-border-width * 2 !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
366
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
367
368 
$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
369
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
370
371 
$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
372
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
373
374 
$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
375
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
376 
$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
377
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
378 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
379
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
380
381
382
383 
$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
384
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
385 
$form-check-inline-margin-x:            .75rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
386
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
387 
$form-group-margin-bottom:              1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
388
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
389
390
391 
$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
392
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
393
394
395 
$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
396
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
397
398
399
400 
$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
401
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
402
403 
$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
404
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
405
406
407 
$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
408
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
409 
$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
410
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
411
412
413 
$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
414
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
415
416 
$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
417
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
418 
$custom-checkbox-indicator-indeterminate-bg:    theme-color("primary") !default;
Patrick Yeo's avatar
(Fixes #22414) Rename for consistency `$custom-checkbox-radius`,...    
Patrick Yeo committed
419 
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
420 
$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
421 
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
422
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
423
424 
$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
425
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
426 
$custom-select-padding-y:           .375rem !default;
XhmikosR's avatar
Minor Sass cleanup and consistency changes. (#23959)    
XhmikosR committed
427
428 
$custom-select-padding-x:          .75rem !default;
$custom-select-height:              $input-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
429 
$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
430 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
431 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
432 
$custom-select-disabled-color:      $gray-600 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
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
461
462 
$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
463
464
465
466
467
468
469
470 
$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
471
472
Mark Otto's avatar
remove icons for now    
Mark Otto committed
473 
// Form validation
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
474
475 
$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
476
Mark Otto's avatar
convert to scss  
Mark Otto committed
477
Mark Otto's avatar
rip numbers    
Mark Otto committed
478 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
479 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
480 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
481
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
482
483
484
485
486
487
488
489 
$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
490
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
491
492
493 
$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
494
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
495
496 
$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
497
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
498 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
499
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
500
501 
$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
502
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
503 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
504
505
Mark Otto's avatar
rip numbers    
Mark Otto committed
506 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
507
508
509
510 
//
// 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
511
512
513
514
515
516
517 
$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
518
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
519
520 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
521
522
523 
$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
524
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
525
526
527
528
529
530
531 
$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
532
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
533
534
535 
$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
536
Mark Otto's avatar
rip numbers    
Mark Otto committed
537 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
538
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
539 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
540 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
541
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
542 
$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
543 
// 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
544
545
546 
$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
547
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
548
549
550
551 
$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
552
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
553
554 
$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
555 
$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
556 
$navbar-dark-disabled-color:        rgba($white,.25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
557 
$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
558 
$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
559
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
560
561
562
563 
$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
564 
$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
565 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
566
Mark Otto's avatar
rip numbers    
Mark Otto committed
567 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
568
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
569
570
571
572
573
574
575 
$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
576
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
577
578
579
580 
$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
581
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
582
583
584 
$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
585
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
586
587
588 
$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
589
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
590
591
592 
$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
593
594
Mark Otto's avatar
rip numbers    
Mark Otto committed
595 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
596
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
597
598 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
599
600
Mark Otto's avatar
rip numbers    
Mark Otto committed
601 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
602
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
603
604
605
606
607
608
609
610 
$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
611
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
612 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
613
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
614
615 
$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
616
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
617
618
619 
$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
620
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
621
Mark Otto's avatar
rip numbers    
Mark Otto committed
622 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
623
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
624
625
626
627
628
629
630 
$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
631
632
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
633
634
635 
$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
636
637
Mark Otto's avatar
rip numbers    
Mark Otto committed
638 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
639
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
640
641
642
643 
$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
644 
$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
645
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
646
647 
$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
648
649 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
650
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
651 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
652
653 
$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
654
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
655
656 
$popover-arrow-width:               .8rem !default;
$popover-arrow-height:              .4rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
657 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
658
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
659 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
660
661
Mark Otto's avatar
rip numbers    
Mark Otto committed
662 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
663
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
664
665
666
667
668 
$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
669
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
670 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
671
672 
// 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
673 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
674
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
675
Mark Otto's avatar
rip numbers    
Mark Otto committed
676 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
677
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
678 
// Padding applied to the modal body
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
679 
$modal-inner-padding:               15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
680
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
681
682 
$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
683
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
684 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
685
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
686
687
688
689
690 
$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
691
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
692
693
694
695
696
697
698 
$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
699
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
700
701
702 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
703
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
704 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
705
Mark Otto's avatar
convert to scss  
Mark Otto committed
706
Mark Otto's avatar
rip numbers    
Mark Otto committed
707 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
708 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
709 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
710
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
711
712
713
714
715
716 
$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
717
718
Mark Otto's avatar
rip numbers    
Mark Otto committed
719 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
720
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
721
722
723
724
725
726
727
728
729 
$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
730
Mark Otto's avatar
rip numbers    
Mark Otto committed
731 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
732
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
733
734
735
736 
$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
737
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
738
739 
$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
740
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
741
742
743
744 
$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
745
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
746
747 
$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
748
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
749
750 
$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
751
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
752
753 
$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
754
Mark Otto's avatar
convert to scss  
Mark Otto committed
755
Mark Otto's avatar
rip numbers    
Mark Otto committed
756 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
757
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
758
759
760
761
762
763 
$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
764
765
Mark Otto's avatar
rip numbers    
Mark Otto committed
766 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
767
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
768
769 
$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
770
771
Mark Otto's avatar
rip numbers    
Mark Otto committed
772 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
773
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
774
775
776 
$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
777
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
778 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
779
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
780
781
782
783 
$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
784
785
Mark Otto's avatar
rip numbers    
Mark Otto committed
786 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
787
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
788
789
790 
$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
791
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
792
793
794
795 
$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
796
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
797
798 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
799
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
800 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
801
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
802
803 
$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
804
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
805 
$carousel-transition:               transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
806
Mark Otto's avatar
convert to scss  
Mark Otto committed
807
Mark Otto's avatar
rip numbers    
Mark Otto committed
808 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
809
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
810
811
812
813 
$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
814
Mark Otto's avatar
rip numbers    
Mark Otto committed
815 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
816
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
817
818
819
820
821 
$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
822
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
823
824 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
825
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
826
827 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;