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

//
// Color system
//
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
10
XhmikosR's avatar
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
Restore feedback icons on validated form fields    
Mark Otto committed
120 
$enable-validation-icons:   true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
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 
$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;
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
520
521 
$custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
522
523
524 
$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
525 
$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
526
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
527 
$custom-select-focus-border-color:  $input-focus-border-color !default;
Mark Otto's avatar
Update box-shadows on .custom-select (#26754)    
Mark Otto committed
528
529 
$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
530
Robert's avatar
Fix custom-select font size/padding (#26585)    
Robert committed
531
532
533 
$custom-select-padding-y-sm:        $input-btn-padding-y-sm !default;
$custom-select-padding-x-sm:        $input-btn-padding-x-sm !default;
$custom-select-font-size-sm:        $font-size-sm !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
534
535 
$custom-select-height-sm:           $input-height-sm !default;
Robert's avatar
Fix custom-select font size/padding (#26585)    
Robert committed
536
537
538 
$custom-select-padding-y-lg:        $input-btn-padding-y-lg !default;
$custom-select-padding-x-lg:        $input-btn-padding-x-lg !default;
$custom-select-font-size-lg:        $font-size-lg !default;
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
539
540 
$custom-select-height-lg:           $input-height-lg !default;
Mark Otto's avatar
Custom range input (#25600)    
Mark Otto committed
541
542
543
544
545
546
547 
$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
548
549
550
551
552
553
554
555
556 
$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;
Martijn Cuppens's avatar
Custom input range disabled styling (#26540)    
Martijn Cuppens committed
557 
$custom-range-thumb-disabled-bg:             $gray-500 !default;
Mark Otto's avatar
Custom range input (#25600)    
Mark Otto committed
558
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
559 
$custom-file-height:                $input-height !default;
Mark Otto's avatar
Simplify custom file inner height for generated browse button    
Mark Otto committed
560 
$custom-file-height-inner:          $input-height-inner !default;
Mark Otto's avatar
Custom select updates (#24699)    
Mark Otto committed
561
562 
$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
563 
$custom-file-disabled-bg:           $input-disabled-bg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
564
565
566
567
568
569
570
571
572
573
574
575 

$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
576 
$custom-file-text: (
Mark Otto's avatar
Rewrite custom file input    
Mark Otto committed
577 
  en: "Browse"
Chris Rebert's avatar
Make translation of custom file input text easier; fixes #18922    
Chris Rebert committed
578 
) !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
579
580
Mark Otto's avatar
remove icons for now    
Mark Otto committed
581 
// Form validation
Andres Galante's avatar
Adds variables for form validation messages (#24767)    
Andres Galante committed
582
583 
$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
584
585 
$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
586
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
587
588
589
590
591 
$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          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='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
592
Mark Otto's avatar
rip numbers    
Mark Otto committed
593 
// Dropdowns
Mark Otto's avatar
convert to scss  
Mark Otto committed
594 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
595 
// Dropdown menu container and contents.
Mark Otto's avatar
convert to scss  
Mark Otto committed
596
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
597
598
599
600 
$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
601 
$dropdown-border-color:             rgba($black, .15) !default;
José Francisco's avatar
Add variable to configure the `$dropdown-border-radius`. (#24376)    
José Francisco committed
602 
$dropdown-border-radius:            $border-radius !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
603
604 
$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
605 
$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
606
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
607
608
609 
$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
610
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
611
612 
$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
613
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
614 
$dropdown-link-disabled-color:      $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
615
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
616
617 
$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
618
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
619 
$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
620
621
Mark Otto's avatar
rip numbers    
Mark Otto committed
622 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
623
624
625
626 
//
// 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
627
628
629
630
631
632
633 
$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
634
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
635
636 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
637
638
639 
$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
640
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
641 
$nav-tabs-border-color:             $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
642
643 
$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
644 
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
645
646 
$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
647 
$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
648
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
649
650
651 
$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
652
Jacob Müller's avatar
Replace "loose" HEX values with their respective variables (#25672)    
Jacob Müller committed
653 
$nav-divider-color:                 $gray-200 !default;
Mark Otto's avatar
make it a var    
Mark Otto committed
654
655 
$nav-divider-margin-y:              ($spacer / 2) !default;
Mark Otto's avatar
rip numbers    
Mark Otto committed
656 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
657
Chris Rebert's avatar
Rename 2 navbar variables to comply with updated naming convention    
Chris Rebert committed
658 
$navbar-padding-y:                  ($spacer / 2) !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
659 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
660
Andres Galante's avatar
removes hardcoded value for nav-link padding    
Andres Galante committed
661
662 
$navbar-nav-link-padding-x:         .5rem !default;
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
663 
$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
664 
// 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
665
666
667 
$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
668
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
669
670
671
672 
$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
673
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
674
675 
$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
676 
$navbar-dark-active-color:          $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
677 
$navbar-dark-disabled-color:        rgba($white, .25) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
678 
$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
679 
$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
680
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
681
682
683
684 
$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
685 
$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
686 
$navbar-light-toggler-border-color: rgba($black, .1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
687
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
688
Mark Otto's avatar
rip numbers    
Mark Otto committed
689 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
690
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
691
692
693
694
695
696
697 
$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
698
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
699
700
701 
$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
702 
$pagination-border-color:           $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
703
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
704 
$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
705 
$pagination-focus-outline:          0 !default;
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
706
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
707
708 
$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
709 
$pagination-hover-border-color:     $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
710
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
711
712
713 
$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
714
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
715
716 
$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
717 
$pagination-disabled-border-color:  $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
718
719
Mark Otto's avatar
rip numbers    
Mark Otto committed
720 
// Jumbotron
Mark Otto's avatar
convert to scss  
Mark Otto committed
721
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
722
723 
$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
724
725
Mark Otto's avatar
rip numbers    
Mark Otto committed
726 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
727
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
728
729
730
731 
$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
732 
$card-border-color:                 rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
733
734
735 
$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
736
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
737 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
738
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
739
740 
$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
741
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
742
743
744 
$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
745
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
746
Mark Otto's avatar
rip numbers    
Mark Otto committed
747 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
748
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
749
750
751
752
753
754
755
756
757 
$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
758
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
759
760
761 
$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
762
763
Mark Otto's avatar
rip numbers    
Mark Otto committed
764 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
765
Patrick Yeo's avatar
Allow customizing Popover and Tooltip `font-size` outside of `$font-size-sm`    
Patrick Yeo committed
766 
$popover-font-size:                 $font-size-sm !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
767
768
769 
$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
770 
$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
771 
$popover-border-radius:             $border-radius-lg !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
772 
$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
773
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
774
775 
$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
776
777 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
778
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
779 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
780
781 
$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
782
Mark Otto's avatar
smaller popover arrows for more reasonable visuals and more ideal pixel rounding    
Mark Otto committed
783
784 
$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
785 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
786
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
787 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
788
789
Mark Otto's avatar
rip numbers    
Mark Otto committed
790 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
791
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
792
793
794
795
796 
$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
797
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
798 
$badge-pill-padding-x:              .6em !default;
Chris Rebert's avatar
Add $label-pill-border-radius variable    
Chris Rebert committed
799
800 
// 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
801 
$badge-pill-border-radius:          10rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
802
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
803
Mark Otto's avatar
rip numbers    
Mark Otto committed
804 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
805
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
806 
// Padding applied to the modal body
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
807 
$modal-inner-padding:               1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
808
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
809
810 
$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
811
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
812 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
813
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
814
815
816
817
818
819
820
821
822
823
824
825
826
827 
$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
828
Mark Otto's avatar
Merge branch 'v4-dev' of https://github.com/malkomich/bootstrap into malkomich-v4-dev    
Mark Otto committed
829 
$modal-xl:                          1140px !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
830
831
832 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
833
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
834 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
835
Mark Otto's avatar
convert to scss  
Mark Otto committed
836
Mark Otto's avatar
rip numbers    
Mark Otto committed
837 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
838 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
839 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
840
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
841
842
843
844
845
846 
$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
847
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
848
849 
$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
Mark Otto's avatar
linting    
Mark Otto committed
850 
$alert-color-level:                 6 !default;
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
851
Mark Otto's avatar
convert to scss  
Mark Otto committed
852
Mark Otto's avatar
rip numbers    
Mark Otto committed
853 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
854
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
855
856
857
858 
$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
859 
$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
860
861
862
863 
$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
864
Mark Otto's avatar
rip numbers    
Mark Otto committed
865 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
866
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
867 
$list-group-bg:                     $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
868 
$list-group-border-color:           rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
869
870 
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
871
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
872
873 
$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
874
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
875
876
877
878 
$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
879
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
880
881 
$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
882
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
883
884 
$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
885
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
886
887 
$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
888
Mark Otto's avatar
convert to scss  
Mark Otto committed
889
Mark Otto's avatar
rip numbers    
Mark Otto committed
890 
// Image thumbnails
Mark Otto's avatar
convert to scss  
Mark Otto committed
891
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
892
893
894 
$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
895 
$thumbnail-border-color:            $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
896 
$thumbnail-border-radius:           $border-radius !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
897 
$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
898
899
Mark Otto's avatar
rip numbers    
Mark Otto committed
900 
// Figures
Chris Rebert's avatar
Add $figure-caption-font-size variable    
Chris Rebert committed
901
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
902
903 
$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
904
905
Mark Otto's avatar
rip numbers    
Mark Otto committed
906 
// Breadcrumbs
Mark Otto's avatar
convert to scss  
Mark Otto committed
907
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
908
909
910 
$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
911
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
912 
$breadcrumb-margin-bottom:          1rem !default;
Prateek Goel's avatar
Add margin variable for breadcrumb (#23138)    
Prateek Goel committed
913
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
914
915
916 
$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
917 
$breadcrumb-divider:                quote("/") !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
918
Alexander Hjorth's avatar
Allow customization of breadcrumb border radius (#25807)    
Alexander Hjorth committed
919
920 
$breadcrumb-border-radius:          $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
921
Mark Otto's avatar
rip numbers    
Mark Otto committed
922 
// Carousel
Mark Otto's avatar
convert to scss  
Mark Otto committed
923
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
924
925
926 
$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
927
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
928
929
930
931 
$carousel-indicator-width:          30px !default;
$carousel-indicator-height:         3px !default;
$carousel-indicator-spacer:         3px !default;
$carousel-indicator-active-bg:      $white !default;
Martijn Cuppens's avatar
Carousel indicators transition (#26902)    
Martijn Cuppens committed
932 
$carousel-indicator-transition:     opacity .6s ease !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
933
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
934
935 
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
936
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
937 
$carousel-control-icon-width:       20px !default;
Chris Rebert's avatar
Extract $carousel-icon-width variable    
Chris Rebert committed
938
Gisete Kindahl's avatar
Centered SVG icon within its own container (#24292)    
Gisete Kindahl committed
939
940 
$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
941
Varunram Ganesh's avatar
[trivial] Correct typos (#26297)    
Varunram Ganesh committed
942 
$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
943
Mark Otto's avatar
convert to scss  
Mark Otto committed
944
Mark Otto's avatar
rip numbers    
Mark Otto committed
945 
// Close
Mark Otto's avatar
convert to scss  
Mark Otto committed
946
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
947
948
949
950 
$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
951
Mark Otto's avatar
rip numbers    
Mark Otto committed
952 
// Code
Mark Otto's avatar
convert to scss  
Mark Otto committed
953
Mark Otto's avatar
Restyle code element, remove docs example overflow, improve docs examples (#25054)    
Mark Otto committed
954
955 
$code-font-size:                    87.5% !default;
$code-color:                        $pink !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
956
Mark Otto's avatar
Restyle code element, remove docs example overflow, improve docs examples (#25054)    
Mark Otto committed
957
958
959 
$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
960
961 
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
962
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
963
964 
$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;
Mark Otto's avatar
Print tweaks (#25164)    
Mark Otto committed
965
966
967
968
969 


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