Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 37.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
Reindent _variables.scss.    
XhmikosR committed
11 
$white:    #fff !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
12
13
14
15
16 
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
Mark Otto's avatar
Darken $gray-600 by 10% for AA contrast (#25123)    
Mark Otto committed
17 
$gray-600: #6c757d !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
18
19
20 
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
21 
$black:    #000 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
22
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
23 
$grays: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "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
  ),
  $grays
);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
40
41 

$blue:    #007bff !default;
Mark Otto's avatar
update theme colors    
Mark Otto committed
42
43
44
45
46
47
48
49
50 
$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
51
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
52 
$colors: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "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
  ),
  $colors
);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
72
Andres Galante's avatar
Move theme variables outside of the theme map. (#23918)    
Andres Galante committed
73
74
75
76
77
78
79
80
81 
$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
82 
$theme-colors: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96 
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
97
Mark Otto's avatar
add theme-color-level function and interval so we can generate shades of colors    
Mark Otto committed
98 
// Set a specific jump point for requesting color jumps
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
99 
$theme-color-interval:      8% !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
100
Andres Galante's avatar
Adds variable for color yiq threshold (#24886)    
Andres Galante committed
101 
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
102 
$yiq-contrasted-threshold:  150 !default;
Andres Galante's avatar
Adds variable for color yiq threshold (#24886)    
Andres Galante committed
103
Mark Otto's avatar
add vars for yiq color contrast function    
Mark Otto committed
104 
// Customize the light and dark text colors for use in our YIQ color contrast function.
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
105
106 
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;
Mark Otto's avatar
add vars for yiq color contrast function    
Mark Otto committed
107
Mark Otto's avatar
rip numbers    
Mark Otto committed
108 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
109 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
110
111 
// 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
112 
$enable-caret:              true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
113
114
115 
$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
116 
$enable-transitions:        true !default;
Mark Otto's avatar
Deprecate hover media query shim and mixins (#25270)    
Mark Otto committed
117 
$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
Mark Otto's avatar
Make predefined grid classes conditional    
Mark Otto committed
118 
$enable-grid-classes:       true !default;
Chris Rebert's avatar
Add $enable-print-styles variable for _print.scss; fixes #19101    
Chris Rebert committed
119 
$enable-print-styles:       true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
120
121
Mark Otto's avatar
rip numbers    
Mark Otto committed
122 
// Spacing
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
123
124
125 
//
// 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
126 
// 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
127
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
128 
$spacer: 1rem !default;
Andrew Luca's avatar
Extend spacers and sizes (#25101)    
Andrew Luca committed
129 
$spacers: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
130
131
132
133
134
135
136
137
138
139
140
141 
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
142
Mark Otto's avatar
Revert "Drop width from sizing utils given .col- classes can do the same thing...    
Mark Otto committed
143 
// This variable affects the `.h-*` and `.w-*` classes.
Andrew Luca's avatar
Extend spacers and sizes (#25101)    
Andrew Luca committed
144 
$sizes: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
145
146
147
148
149
150
151
152
153
154
155 
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
156
Mark Otto's avatar
rip numbers    
Mark Otto committed
157 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
158
159 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
160
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
161
162 
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
163
Mark Otto's avatar
rip numbers    
Mark Otto committed
164 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
165
166 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
167
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
168
169
170
171 
$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
172
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
173
174
175
176 
// Paragraphs
//
// Style p element.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
177 
$paragraph-margin-bottom:   1rem !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
178
Mark Otto's avatar
convert to scss  
Mark Otto committed
179
Mark Otto's avatar
rip numbers    
Mark Otto committed
180 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
181 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
182 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
183 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
184
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
185
186 
$grid-breakpoints: (
  xs: 0,
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
187 
  sm: 576px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
188
189
190 
  md: 768px,
  lg: 992px,
  xl: 1200px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
191 
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
192
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
193 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
alberto's avatar
@warn if minimum width of smallest breakpoint != 0    
alberto committed
194 
@include _assert-starts-at-zero($grid-breakpoints);
Mark Otto's avatar
convert to scss  
Mark Otto committed
195
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
196
Mark Otto's avatar
rip numbers    
Mark Otto committed
197 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
198 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
199 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
200
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
201 
$container-max-widths: (
Mark Otto's avatar
Change sm grid breakpoint and container max-width    
Mark Otto committed
202 
  sm: 540px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
203 
  md: 720px,
Mark Otto's avatar
Change 940px breakpoint to 960px so that all widths are divisible by 12    
Mark Otto committed
204 
  lg: 960px,
Gleb Mazovetskiy's avatar
Change grid and container sizes to px    
Gleb Mazovetskiy committed
205 
  xl: 1140px
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
206 
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
207
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
208 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
209
210
Mark Otto's avatar
rip numbers    
Mark Otto committed
211 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
212
213
214 
//
// Set the number of columns and specify the width of the gutters.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
215
216 
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
217
218
219
220
221 

// Components
//
// Define common padding and border radius sizes and more.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
222
223 
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
224
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
225 
$border-width:                1px !default;
Mark Otto's avatar
Darken border color slightly    
Mark Otto committed
226 
$border-color:                $gray-300 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
227
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
228
229
230 
$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
231
Mark Otto's avatar
Add box-shadow utilities (#25758)    
Mark Otto committed
232
233
234
235 
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
236
237 
$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
238
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
239 
$caret-width:                 .3em !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
240
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
241
242
243 
$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
244
245
Mark Otto's avatar
rip numbers    
Mark Otto committed
246 
// Fonts
Mark Otto's avatar
convert to scss  
Mark Otto committed
247 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
248 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
249
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
250 
// stylelint-disable value-keyword-case
Mark Otto's avatar
Add Noto Color Emoji to font stack    
Mark Otto committed
251 
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
XhmikosR's avatar
Minor Sass consistency changes. (#24677)    
XhmikosR committed
252 
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
253 
$font-family-base:            $font-family-sans-serif !default;
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
254 
// stylelint-enable value-keyword-case
Mark Otto's avatar
convert to scss  
Mark Otto committed
255
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
256
257
258 
$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
259
Andrew's avatar
add 'lighter' and 'bolder' font weight classes (#26580)    
Andrew committed
260 
$font-weight-lighter:         lighter !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
261
262
263 
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
Andrew's avatar
add 'lighter' and 'bolder' font weight classes (#26580)    
Andrew committed
264 
$font-weight-bolder:          bolder !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
265
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
266
267 
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
268
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
269
270
271
272
273
274 
$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
275
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
276
277
278 
$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
279 
$headings-line-height:        1.2 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
280 
$headings-color:              inherit !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
281
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
282
283
284
285 
$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
286
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
287
288
289
290
291 
$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
292
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
293
294 
$lead-font-size:              ($font-size-base * 1.25) !default;
$lead-font-weight:            300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
295
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
296 
$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
297
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
298 
$text-muted:                  $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
299
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
300
301 
$blockquote-small-color:      $gray-600 !default;
$blockquote-font-size:        ($font-size-base * 1.25) !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
302
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
303 
$hr-border-color:             rgba($black, .1) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
304 
$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
305
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
306 
$mark-padding:                .2em !default;
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
307
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
308 
$dt-font-weight:              $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
309
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
310 
$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
311 
$nested-kbd-font-weight:      $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
312
Andres Galante's avatar
changes list-inline-padding from 5px to .5rem    
Andres Galante committed
313 
$list-inline-padding:         .5rem !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
314
Andres Galante's avatar
adds variables for the hr element margin    
Andres Galante committed
315
316
317 
$mark-bg:                     #fcf8e3 !default;

$hr-margin-y:                 $spacer !default;
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
318
Mark Otto's avatar
convert to scss  
Mark Otto committed
319
Mark Otto's avatar
rip numbers    
Mark Otto committed
320 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
321 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
322 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
323
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
324
325 
$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
326
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
327 
$table-bg:                    transparent !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
328
329 
$table-accent-bg:             rgba($black, .05) !default;
$table-hover-bg:              rgba($black, .075) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
330 
$table-active-bg:             $table-hover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
331
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
332 
$table-border-width:          $border-width !default;
Mark Otto's avatar
Darken table border-color    
Mark Otto committed
333 
$table-border-color:          $gray-300 !default;
Mark Otto's avatar
reorder    
Mark Otto committed
334
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
335
336 
$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
337
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
338
339
340
341
342 
$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
343
Andrew Luca's avatar
Allow to change `.table-striped` `odd` or `even` (#25333)    
Andrew Luca committed
344
345 
$table-striped-order:         odd !default;
ysds's avatar
Add color variable for caption (#25657)    
ysds committed
346 
$table-caption-color:         $text-muted !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
347
Mark Otto's avatar
edit code comments    
Mark Otto committed
348
349
350 
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
Mark Otto's avatar
convert to scss  
Mark Otto committed
351
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
352
353
354 
$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
355
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
356 
$input-btn-focus-width:       .2rem !default;
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
357 
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
358
359 
$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
360
361
362 
$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
363
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
364
365
366 
$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
367
Mark Otto's avatar
edit code comments    
Mark Otto committed
368 
$input-btn-border-width:      $border-width !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
369
370
371
372 


// Buttons
//
Mark Otto's avatar
edit code comments    
Mark Otto committed
373 
// For each of Bootstrap's buttons, define text, background, and border color.
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388 

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-line-height:             $input-btn-line-height !default;

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-line-height-sm:          $input-btn-line-height-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;

$btn-border-width:            $input-btn-border-width !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
389 
$btn-font-weight:             $font-weight-normal !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
390 
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
Mark Otto's avatar
update new focus and shadow properties to use vars    
Mark Otto committed
391
392 
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
Patrick Yeo's avatar
Move hardcoded opacity value in `.btn:disabled` to variable `$btn-disabled-opacity` (#24680)    
Patrick Yeo committed
393 
$btn-disabled-opacity:        .65 !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
394 
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
395
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
396 
$btn-link-disabled-color:     $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
397
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
398 
$btn-block-spacing-y:         .5rem !default;
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
399
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
400 
// Allows for customizing button radius independently from global border radius
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
401
402
403 
$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
404
Mark Otto's avatar
match property order    
Mark Otto committed
405 
$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
406
Mark Otto's avatar
convert to scss  
Mark Otto committed
407
Mark Otto's avatar
rip numbers    
Mark Otto committed
408 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
409
Andres Galante's avatar
Create a variable for label margin bottom (#25561)    
Andres Galante committed
410
411 
$label-margin-bottom:                   .5rem !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
412
413
414
415
416
417
418
419
420
421
422
423 
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
424
425 
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
426
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
427
428 
$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
429 
$input-border-width:                    $input-btn-border-width !default;
Mark Otto's avatar
Update _variables.scss    
Mark Otto committed
430 
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
431
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
432
433
434 
$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
435
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
436 
$input-focus-bg:                        $input-bg !default;
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
437 
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
438 
$input-focus-color:                     $input-color !default;
Mark Otto's avatar
update new focus and shadow properties to use vars    
Mark Otto committed
439
440 
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
441
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
442 
$input-placeholder-color:               $gray-600 !default;
m5o's avatar
set color to form-control-plaintext (#25565)    
m5o committed
443 
$input-plaintext-color:                 $body-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
444
Andrew Luca's avatar
Fix input height border (#25331)    
Andrew Luca committed
445 
$input-height-border:                   $input-border-width * 2 !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
446
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
447
448 
$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
449
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
450
451 
$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
452
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
453
454 
$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
455
XhmikosR's avatar
Minor Sass consistency changes. (#24677)    
XhmikosR committed
456 
$input-transition:                      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
457
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
458 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
459
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
460 
$form-check-input-gutter:               1.25rem !default;
Mark Otto's avatar
Form check markup v2 (#25050)    
Mark Otto committed
461 
$form-check-input-margin-y:             .3rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
462 
$form-check-input-margin-x:             .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
463
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
464 
$form-check-inline-margin-x:            .75rem !default;
Mark Otto's avatar
Form check markup v2 (#25050)    
Mark Otto committed
465 
$form-check-inline-input-margin-x:      .3125rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
466
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
467 
$form-group-margin-bottom:              1rem !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
468
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
469
470
471 
$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
472
Martijn Cuppens's avatar
Custom forms transition    
Martijn Cuppens committed
473
474 
$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
475
476 
$custom-control-gutter:                 1.5rem !default;
$custom-control-spacer-x:               1rem !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
477
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
478 
$custom-control-indicator-size:         1rem !default;
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
479 
$custom-control-indicator-bg:           $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
480 
$custom-control-indicator-bg-size:      50% 50% !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
481 
$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
482
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
483 
$custom-control-indicator-disabled-bg:          $gray-200 !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
484 
$custom-control-label-disabled-color:           $gray-600 !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
485
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
486
487 
$custom-control-indicator-checked-color:        $component-active-color !default;
$custom-control-indicator-checked-bg:           $component-active-bg !default;
gijsbotje's avatar
added variable for the background of checked and indeterminate custom inputs...    
gijsbotje committed
488 
$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
489 
$custom-control-indicator-checked-box-shadow:   none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
490
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
491 
$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
492
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
493
494 
$custom-control-indicator-active-color:         $component-active-color !default;
$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
495 
$custom-control-indicator-active-box-shadow:    none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
496
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
497
498 
$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
499
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
500
501
502
503 
$custom-checkbox-indicator-indeterminate-bg:          $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color:       $custom-control-indicator-checked-color !default;
$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;
$custom-checkbox-indicator-indeterminate-box-shadow:  none !default;
Mark Otto's avatar
Hella vars for custom checkboxes and radios and selects    
Mark Otto committed
504
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
505
506 
$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
507
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
508 
$custom-select-padding-y:           .375rem !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
509 
$custom-select-padding-x:           .75rem !default;
XhmikosR's avatar
Minor Sass cleanup and consistency changes. (#23959)    
XhmikosR committed
510 
$custom-select-height:              $input-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
511 
$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
512 
$custom-select-line-height:         $input-btn-line-height !default;
Kovah's avatar
#14840 - Use color variables consistently    
Kovah committed
513 
$custom-select-color:               $input-color !default;
Mark Otto's avatar
Drop the old $gray- variables for the new color range    
Mark Otto committed
514 
$custom-select-disabled-color:      $gray-600 !default;
m5o's avatar
use $input-bg for $custom-select-bg (#25564)    
m5o committed
515 
$custom-select-bg:                  $input-bg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
516
517 
$custom-select-disabled-bg:         $gray-200 !default;
$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
518 
$custom-select-indicator-color:     $gray-800 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
519
520
521
522 
$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;
Mark Otto's avatar
Update box-shadows on .custom-select (#26754)    
Mark Otto committed
523 
$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
524
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
525 
$custom-select-focus-border-color:  $input-focus-border-color !default;
Mark Otto's avatar
Update box-shadows on .custom-select (#26754)    
Mark Otto committed
526
527 
$custom-select-focus-width:         $input-btn-focus-width !default;
$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
528
529
530
531 

$custom-select-font-size-sm:        75% !default;
$custom-select-height-sm:           $input-height-sm !default;
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
532
533
534 
$custom-select-font-size-lg:        125% !default;
$custom-select-height-lg:           $input-height-lg !default;
Mark Otto's avatar
Custom range input (#25600)    
Mark Otto committed
535
536
537
538
539
540
541 
$custom-range-track-width:          100% !default;
$custom-range-track-height:         .5rem !default;
$custom-range-track-cursor:         pointer !default;
$custom-range-track-bg:             $gray-300 !default;
$custom-range-track-border-radius:  1rem !default;
$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
ysds's avatar
Fix custom range thumb style (#26385)    
ysds committed
542
543
544
545
546
547
548
549
550 
$custom-range-thumb-width:                   1rem !default;
$custom-range-thumb-height:                  $custom-range-thumb-width !default;
$custom-range-thumb-bg:                      $component-active-bg !default;
$custom-range-thumb-border:                  0 !default;
$custom-range-thumb-border-radius:           1rem !default;
$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-range-thumb-focus-box-shadow-width:  $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
Mark Otto's avatar
Custom range input (#25600)    
Mark Otto committed
551
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
552 
$custom-file-height:                $input-height !default;
Mark Otto's avatar
Simplify custom file inner height for generated browse button    
Mark Otto committed
553 
$custom-file-height-inner:          $input-height-inner !default;
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
554
555 
$custom-file-focus-border-color:    $input-focus-border-color !default;
$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
ysds's avatar
Add disabled bg color to disabled custom file    
ysds committed
556 
$custom-file-disabled-bg:           $input-disabled-bg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
557
558
559
560
561
562
563
564
565
566
567
568 

$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
569 
$custom-file-text: (
Mark Otto's avatar
Rewrite custom file input    
Mark Otto committed
570 
  en: "Browse"
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
571 
) !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
572
573
Mark Otto's avatar
remove icons for now    
Mark Otto committed
574 
// Form validation
Andres Galante's avatar
Adds variables for form validation messages (#24767)    
Andres Galante committed
575
576 
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
577
578 
$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
579
Mark Otto's avatar
convert to scss  
Mark Otto committed
580
Mark Otto's avatar
rip numbers    
Mark Otto committed
581 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
582 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
583 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
584
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
585
586
587
588 
$dropdown-min-width:                10rem !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-bg:                       $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
589 
$dropdown-border-color:             rgba($black, .15) !default;
José Francisco's avatar
Add variable to configure the `$dropdown-border-radius`. (#24376)    
José Francisco committed
590 
$dropdown-border-radius:            $border-radius !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
591
592 
$dropdown-border-width:             $border-width !default;
$dropdown-divider-bg:               $gray-200 !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
593 
$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
594
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
595
596
597 
$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
598
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
599
600 
$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
601
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
602 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
603
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
604
605 
$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
606
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
607 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
608
609
Mark Otto's avatar
rip numbers    
Mark Otto committed
610 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
611
612
613
614 
//
// 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
615
616
617
618
619
620
621 
$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
622
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
623
624 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
625
626
627 
$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
628
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
629 
$nav-tabs-border-color:             $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
630
631 
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
Patrick Yeo's avatar
Nav Tabs use single variable to style `$nav-tabs-link-hover-border-color` and...    
Patrick Yeo committed
632 
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
633
634 
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
Patrick Yeo's avatar
Nav Tabs use single variable to style `$nav-tabs-link-hover-border-color` and...    
Patrick Yeo committed
635 
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
636
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
637
638
639 
$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
640
Jacob Müller's avatar
Replace "loose" HEX values with their respective variables (#25672)    
Jacob Müller committed
641 
$nav-divider-color:                 $gray-200 !default;
Mark Otto's avatar
make it a var    
Mark Otto committed
642
643 
$nav-divider-margin-y:              ($spacer / 2) !default;
Mark Otto's avatar
rip numbers    
Mark Otto committed
644 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
645
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
646 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
647 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
648
Andres Galante's avatar
removes hardcoded value for nav-link padding    
Andres Galante committed
649
650 
$navbar-nav-link-padding-x:         .5rem !default;
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
651 
$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
652 
// 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
653
654
655 
$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
656
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
657
658
659
660 
$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
661
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
662
663 
$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
664 
$navbar-dark-active-color:          $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
665 
$navbar-dark-disabled-color:        rgba($white, .25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
666 
$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;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
667 
$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
668
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
669
670
671
672 
$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
673 
$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;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
674 
$navbar-light-toggler-border-color: rgba($black, .1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
675
Mark Otto's avatar
rip numbers    
Mark Otto committed
676 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
677
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
678
679
680
681
682
683
684 
$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
685
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
686
687
688 
$pagination-color:                  $link-color !default;
$pagination-bg:                     $white !default;
$pagination-border-width:           $border-width !default;
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
689 
$pagination-border-color:           $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
690
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
691 
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
Patrick Yeo's avatar
Pagination move `.page-link:focus` outline value to variable...    
Patrick Yeo committed
692 
$pagination-focus-outline:          0 !default;
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
693
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
694
695 
$pagination-hover-color:            $link-hover-color !default;
$pagination-hover-bg:               $gray-200 !default;
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
696 
$pagination-hover-border-color:     $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
697
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
698
699
700 
$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              $component-active-bg !default;
$pagination-active-border-color:    $pagination-active-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
701
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
702
703 
$pagination-disabled-color:         $gray-600 !default;
$pagination-disabled-bg:            $white !default;
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
704 
$pagination-disabled-border-color:  $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
705
706
Mark Otto's avatar
rip numbers    
Mark Otto committed
707 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
708
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
709
710 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
711
712
Mark Otto's avatar
rip numbers    
Mark Otto committed
713 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
714
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
715
716
717
718 
$card-spacer-y:                     .75rem !default;
$card-spacer-x:                     1.25rem !default;
$card-border-width:                 $border-width !default;
$card-border-radius:                $border-radius !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
719 
$card-border-color:                 rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
720
721
722 
$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
723
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
724 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
725
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
726
727 
$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
728
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
729
730
731 
$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
732
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
733
Mark Otto's avatar
rip numbers    
Mark Otto committed
734 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
735
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
736
737
738
739
740
741
742
743
744 
$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $white !default;
$tooltip-bg:                        $black !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 .25rem !default;
$tooltip-padding-x:                 .5rem !default;
$tooltip-margin:                    0 !default;
Andres Galante's avatar
Convert px values to rem on tooltip variables (#23468)    
Andres Galante committed
745
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
746
747
748 
$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
$tooltip-arrow-color:               $tooltip-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
749
750
Mark Otto's avatar
rip numbers    
Mark Otto committed
751 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
752
Patrick Yeo's avatar
Allow customizing Popover and Tooltip `font-size` outside of `$font-size-sm`    
Patrick Yeo committed
753 
$popover-font-size:                 $font-size-sm !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
754
755
756 
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
757 
$popover-border-color:              rgba($black, .2) !default;
Patrick Yeo's avatar
Allow customizing Popover and Tooltip `border-radius` while I'm at it    
Patrick Yeo committed
758 
$popover-border-radius:             $border-radius-lg !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
759 
$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
760
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
761
762 
$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
763
764 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
765
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
766 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
767
768 
$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
769
Mark Otto's avatar
smaller popover arrows for more reasonable visuals and more ideal pixel rounding    
Mark Otto committed
770
771 
$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
772 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
773
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
774 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
775
776
Mark Otto's avatar
rip numbers    
Mark Otto committed
777 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
778
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
779
780
781
782
783 
$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
784
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
785 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
786
787 
// 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
788 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
789
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
790
Mark Otto's avatar
rip numbers    
Mark Otto committed
791 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
792
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
793 
// Padding applied to the modal body
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
794 
$modal-inner-padding:               1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
795
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
796
797 
$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;
Chris Rebert's avatar
Extract new $modal-dialog-margin variable    
Chris Rebert committed
798
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
799 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
800
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
801
802
803
804
805
806
807
808
809
810
811
812
813
814 
$modal-content-bg:                  $white !default;
$modal-content-border-color:        rgba($black, .2) !default;
$modal-content-border-width:        $border-width !default;
$modal-content-border-radius:       $border-radius-lg !default;
$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;

$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:              1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
815
Mark Otto's avatar
Merge branch 'v4-dev' of https://github.com/malkomich/bootstrap into malkomich-v4-dev    
Mark Otto committed
816 
$modal-xl:                          1140px !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
817
818
819 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
820
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
821 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
822
Mark Otto's avatar
convert to scss  
Mark Otto committed
823
Mark Otto's avatar
rip numbers    
Mark Otto committed
824 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
825 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
826 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
827
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
828
829
830
831
832
833 
$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
834
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
835
836 
$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
Mark Otto's avatar
linting    
Mark Otto committed
837 
$alert-color-level:                 6 !default;
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
838
Mark Otto's avatar
convert to scss  
Mark Otto committed
839
Mark Otto's avatar
rip numbers    
Mark Otto committed
840 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
841
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
842
843
844
845 
$progress-height:                   1rem !default;
$progress-font-size:                ($font-size-base * .75) !default;
$progress-bg:                       $gray-200 !default;
$progress-border-radius:            $border-radius !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
846 
$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
847
848
849
850 
$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
851
Mark Otto's avatar
rip numbers    
Mark Otto committed
852 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
853
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
854 
$list-group-bg:                     $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
855 
$list-group-border-color:           rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
856
857 
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
858
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
859
860 
$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
861
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
862
863
864
865 
$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
866
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
867
868 
$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
869
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
870
871 
$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
872
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
873
874 
$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
875
Mark Otto's avatar
convert to scss  
Mark Otto committed
876
Mark Otto's avatar
rip numbers    
Mark Otto committed
877 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
878
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
879
880
881 
$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
882 
$thumbnail-border-color:            $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
883 
$thumbnail-border-radius:           $border-radius !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
884 
$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
885
886
Mark Otto's avatar
rip numbers    
Mark Otto committed
887 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
888
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
889
890 
$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
891
892
Mark Otto's avatar
rip numbers    
Mark Otto committed
893 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
894
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
895
896
897 
$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
898
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
899 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
900
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
901
902
903 
$breadcrumb-bg:                     $gray-200 !default;
$breadcrumb-divider-color:          $gray-600 !default;
$breadcrumb-active-color:           $gray-600 !default;
Martijn Cuppens's avatar
Allow non-string content as breadcrumb divider (#25581)    
Martijn Cuppens committed
904 
$breadcrumb-divider:                quote("/") !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
905
Alexander Hjorth's avatar
Allow customization of breadcrumb border radius (#25807)    
Alexander Hjorth committed
906
907 
$breadcrumb-border-radius:          $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
908
Mark Otto's avatar
rip numbers    
Mark Otto committed
909 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
910
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
911
912
913 
$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
914
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
915
916
917
918 
$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
919
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
920
921 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
922
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
923 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
924
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
925
926 
$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
927
Varunram Ganesh's avatar
[trivial] Correct typos (#26297)    
Varunram Ganesh committed
928 
$carousel-transition:               transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
929
Mark Otto's avatar
convert to scss  
Mark Otto committed
930
Mark Otto's avatar
rip numbers    
Mark Otto committed
931 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
932
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
933
934
935
936 
$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
937
Mark Otto's avatar
rip numbers    
Mark Otto committed
938 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
939
Mark Otto's avatar
Restyle code element, remove docs example overflow, improve docs examples (#25054)    
Mark Otto committed
940
941 
$code-font-size:                    87.5% !default;
$code-color:                        $pink !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
942
Mark Otto's avatar
Restyle code element, remove docs example overflow, improve docs examples (#25054)    
Mark Otto committed
943
944
945 
$kbd-padding-y:                     .2rem !default;
$kbd-padding-x:                     .4rem !default;
$kbd-font-size:                     $code-font-size !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
946
947 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
948
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
949
950 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;
Mark Otto's avatar
Print tweaks (#25164)    
Mark Otto committed
951
952
953
954
955 


// Printing
$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;