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

//
// Color system
//
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
10
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
11 
// stylelint-disable
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
12 
$white:    #fff !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
13
14
15
16
17
18
19
20
21 
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
22 
$black:    #000 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
23
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
24
25 
$grays: () !default;
$grays: map-merge((
Martijn Cuppens's avatar
Add quotes to mapping keys (#23701)    
Martijn Cuppens committed
26
27
28
29
30
31
32
33
34 
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
35 
), $grays);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
36
37 

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

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

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

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

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

$custom-file-padding-y:             $input-btn-padding-y !default;
$custom-file-padding-x:             $input-btn-padding-x !default;
$custom-file-line-height:           $input-btn-line-height !default;
$custom-file-color:                 $input-color !default;
$custom-file-bg:                    $input-bg !default;
$custom-file-border-width:          $input-btn-border-width !default;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$custom-file-button-bg:             $input-group-addon-bg !default;
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
467
468
469
470
471
472
473
474 
$custom-file-text: (
  placeholder: (
    en: "Choose file..."
  ),
  button-label: (
    en: "Browse"
  )
) !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
475
476
Mark Otto's avatar
remove icons for now    
Mark Otto committed
477 
// Form validation
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
478
479 
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;
Mark Otto's avatar
move form validation icon vars to variables file    
Mark Otto committed
480
Mark Otto's avatar
convert to scss  
Mark Otto committed
481
Mark Otto's avatar
rip numbers    
Mark Otto committed
482 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
483 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
484 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
485
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
486
487
488
489
490 
$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;
José Francisco's avatar
Add variable to configure the `$dropdown-border-radius`. (#24376)    
José Francisco committed
491 
$dropdown-border-radius:            $border-radius !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
492
493
494 
$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
495
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
496
497
498 
$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
499
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
500
501 
$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
502
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
503 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
504
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
505
506 
$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
507
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
508 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
509
510
Mark Otto's avatar
rip numbers    
Mark Otto committed
511 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
512
513
514
515 
//
// 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
516
517
518
519
520
521
522 
$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
523
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
524
525 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
526
527
528 
$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
529
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
530
531
532
533
534
535
536 
$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
537
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
538
539
540 
$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
541
Mark Otto's avatar
rip numbers    
Mark Otto committed
542 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
543
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
544 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
545 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
546
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
547 
$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
548 
// 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
549
550
551 
$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
552
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
553
554
555
556 
$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
557
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
558
559 
$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
560 
$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
561 
$navbar-dark-disabled-color:        rgba($white,.25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
562 
$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
563 
$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
564
Jacob Müller's avatar
Add color variables for white and black (#21397)    
Jacob Müller committed
565
566
567
568 
$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
569 
$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
570 
$navbar-light-toggler-border-color: rgba($black,.1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
571
Mark Otto's avatar
rip numbers    
Mark Otto committed
572 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
573
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
574
575
576
577
578
579
580 
$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
581
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
582
583
584
585 
$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
586
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
587
588
589 
$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
590
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
591
592
593 
$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
594
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
595
596
597 
$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
598
599
Mark Otto's avatar
rip numbers    
Mark Otto committed
600 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
601
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
602
603 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
604
605
Mark Otto's avatar
rip numbers    
Mark Otto committed
606 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
607
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
608
609
610
611
612
613
614
615 
$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
616
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
617 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
618
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
619
620 
$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
621
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
622
623
624 
$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
625
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
626
Mark Otto's avatar
rip numbers    
Mark Otto committed
627 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
628
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
629
630
631
632
633
634
635 
$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
636
637
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
638
639
640 
$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
641
642
Mark Otto's avatar
rip numbers    
Mark Otto committed
643 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
644
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
645
646
647
648 
$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
649 
$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
650
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
651
652 
$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
653
654 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
655
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
656 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
657
658 
$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
659
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
660
661 
$popover-arrow-width:               .8rem !default;
$popover-arrow-height:              .4rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
662 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
663
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
664 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
665
666
Mark Otto's avatar
rip numbers    
Mark Otto committed
667 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
668
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
669
670
671
672
673 
$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
674
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
675 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
676
677 
// 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
678 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
679
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
680
Mark Otto's avatar
rip numbers    
Mark Otto committed
681 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
682
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
683 
// Padding applied to the modal body
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
684 
$modal-inner-padding:               15px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
685
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
686
687 
$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
688
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
689 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
690
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
691
692
693
694
695 
$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
696
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
697
698
699
700
701
702
703 
$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
704
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
705
706
707 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
708
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
709 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
710
Mark Otto's avatar
convert to scss  
Mark Otto committed
711
Mark Otto's avatar
rip numbers    
Mark Otto committed
712 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
713 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
714 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
715
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
716
717
718
719
720
721 
$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
722
723
Mark Otto's avatar
rip numbers    
Mark Otto committed
724 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
725
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
726
727
728
729
730
731
732
733
734 
$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
735
Mark Otto's avatar
rip numbers    
Mark Otto committed
736 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
737
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
738
739
740
741 
$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
742
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
743
744 
$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
745
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
746
747
748
749 
$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
750
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
751
752 
$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
753
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
754
755 
$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
756
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
757
758 
$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
759
Mark Otto's avatar
convert to scss  
Mark Otto committed
760
Mark Otto's avatar
rip numbers    
Mark Otto committed
761 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
762
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
763
764
765
766
767
768 
$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
769
770
Mark Otto's avatar
rip numbers    
Mark Otto committed
771 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
772
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
773
774 
$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
775
776
Mark Otto's avatar
rip numbers    
Mark Otto committed
777 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
778
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
779
780
781 
$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
782
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
783 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
784
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
785
786
787
788 
$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
789
790
Mark Otto's avatar
rip numbers    
Mark Otto committed
791 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
792
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
793
794
795 
$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
796
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
797
798
799
800 
$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
801
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
802
803 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
804
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
805 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
806
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
807
808 
$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
809
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
810 
$carousel-transition:               transform .6s ease !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
811
Mark Otto's avatar
convert to scss  
Mark Otto committed
812
Mark Otto's avatar
rip numbers    
Mark Otto committed
813 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
814
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
815
816
817
818 
$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
819
Mark Otto's avatar
rip numbers    
Mark Otto committed
820 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
821
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
822
823
824
825
826 
$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
827
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
828
829 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
830
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
831
832 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;