Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
_variables.scss 46.3 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 
// Color system
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
7
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
8 
$white:    #fff !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
9
10
11
12
13 
$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
14 
$gray-600: #6c757d !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
15
16
17 
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
18 
$black:    #000 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
19
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
20 
$grays: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 
// 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
37 
$blue:    #007bff !default;
Mark Otto's avatar
update theme colors    
Mark Otto committed
38
39
40
41
42
43
44
45
46 
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;
Mark Otto's avatar
add new color vars and maps    
Mark Otto committed
47
Mark Otto's avatar
Use empty Sass map and merge into it for easier customization of color maps (#23260)    
Mark Otto committed
48 
$colors: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67 
// 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
68
Andres Galante's avatar
Move theme variables outside of the theme map. (#23918)    
Andres Galante committed
69
70
71
72
73
74
75
76
77 
$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
78 
$theme-colors: () !default;
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
79
80
81
82
83
84
85
86
87
88
89
90
91
92 
// 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
93
Mark Otto's avatar
add theme-color-level function and interval so we can generate shades of colors    
Mark Otto committed
94 
// Set a specific jump point for requesting color jumps
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
95 
$theme-color-interval:      8% !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
96
Andres Galante's avatar
Adds variable for color yiq threshold (#24886)    
Andres Galante committed
97 
// 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
98 
$yiq-contrasted-threshold:  150 !default;
Andres Galante's avatar
Adds variable for color yiq threshold (#24886)    
Andres Galante committed
99
Mark Otto's avatar
add vars for yiq color contrast function    
Mark Otto committed
100 
// 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
101
102 
$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
103
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
104
Mark Otto's avatar
rip numbers    
Mark Otto committed
105 
// Options
Mark Otto's avatar
convert to scss  
Mark Otto committed
106 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
107
108 
// Quickly modify global styling by enabling or disabling optional features.
Patrick H. Lauke's avatar
Add Sass variable for prefers-reduced-motion, add callout to affected components (#27581)    
Patrick H. Lauke committed
109
110
111
112
113
114
115 
$enable-caret:                                true !default;
$enable-rounded:                              true !default;
$enable-shadows:                              false !default;
$enable-gradients:                            false !default;
$enable-transitions:                          true !default;
$enable-prefers-reduced-motion-media-query:   true !default;
$enable-grid-classes:                         true !default;
Martijn Cuppens's avatar
Move hand cursor for buttons to reboot    
Martijn Cuppens committed
116 
$enable-pointer-cursor-for-buttons:           true !default;
Martijn Cuppens's avatar
Responsive font size implementation (#23816)    
Martijn Cuppens committed
117 
$enable-responsive-font-sizes:                false !default;
Patrick H. Lauke's avatar
Add Sass variable for prefers-reduced-motion, add callout to affected components (#27581)    
Patrick H. Lauke committed
118 
$enable-validation-icons:                     true !default;
Martijn Cuppens's avatar
Add `deprecate()` mixin (#28092)    
Martijn Cuppens committed
119 
$enable-deprecation-messages:                 true !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
120
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog 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 
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
Martijn Cuppens's avatar
Helpers & utilities split (#28445)    
Martijn Cuppens committed
134
135 
    1: $spacer * .25,
    2: $spacer * .5,
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
136 
    3: $spacer,
Martijn Cuppens's avatar
Helpers & utilities split (#28445)    
Martijn Cuppens committed
137
138 
    4: $spacer * 1.5,
    5: $spacer * 3,
Martijn Cuppens's avatar
Stricter stylelint rules    
Martijn Cuppens committed
139
140
141 
  ),
  $spacers
);
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
142
Martijn Cuppens's avatar
Helpers & utilities split (#28445)    
Martijn Cuppens committed
143 
$negative-spacers: negativify-map($spacers) !default;
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
144
Mark Otto's avatar
rip numbers    
Mark Otto committed
145 
// Body
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
146
147 
//
// Settings for the `<body>` element.
Mark Otto's avatar
convert to scss  
Mark Otto committed
148
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
149
150 
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
Martijn Cuppens's avatar
Make text align configurable (#28989)    
Martijn Cuppens committed
151 
$body-text-align:           null !default;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
152
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
153
Mark Otto's avatar
rip numbers    
Mark Otto committed
154 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
155
156 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
157
Martijn Cuppens's avatar
Use theme-color function for colors (#27848)    
Martijn Cuppens committed
158 
$link-color:                              theme-color("primary") !default;
Martijn Cuppens's avatar
Variable darken percentage for emphasized links    
Martijn Cuppens committed
159
160
161
162
163 
$link-decoration:                         none !default;
$link-hover-color:                        darken($link-color, 15%) !default;
$link-hover-decoration:                   underline !default;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
164
Martijn Cuppens's avatar
Stretched link updates (#28958)    
Martijn Cuppens committed
165
166
167 
$stretched-link-pseudo-element:           after !default;
$stretched-link-z-index:                  1 !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
168
169
170
171 
// Paragraphs
//
// Style p element.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
172 
$paragraph-margin-bottom:   1rem !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
173
Mark Otto's avatar
convert to scss  
Mark Otto committed
174
Mark Otto's avatar
rip numbers    
Mark Otto committed
175 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
176 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
177 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
178 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
179
Martijn Cuppens's avatar
Remove map-merge (#28033)    
Martijn Cuppens committed
180
181
182
183
184
185
186 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
187
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
188 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
Zachary Welch's avatar
Add map-name param to _assert-starts-at-zero (#24986)    
Zachary Welch committed
189 
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
Mark Otto's avatar
convert to scss  
Mark Otto committed
190
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
191
Mark Otto's avatar
rip numbers    
Mark Otto committed
192 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
193 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
194 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
195
Martijn Cuppens's avatar
Remove map-merge (#28033)    
Martijn Cuppens committed
196
197
198
199
200
201 
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
202
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
203 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
204
205
Mark Otto's avatar
rip numbers    
Mark Otto committed
206 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
207
208
209 
//
// Set the number of columns and specify the width of the gutters.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
210
211 
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
212
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
213
Martijn Cuppens's avatar
Configurable container padding (#28554)    
Martijn Cuppens committed
214
215
216
217
218 
// Container padding

$container-padding-x: $grid-gutter-width / 2 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
219
220
221
222 
// Components
//
// Define common padding and border radius sizes and more.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
223
224 
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
225
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
226 
$border-width:                1px !default;
Mark Otto's avatar
Darken border color slightly    
Mark Otto committed
227 
$border-color:                $gray-300 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
228
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
229
230
231 
$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;
sts-ryan-holton's avatar
Add new `.rounded-pill` utility (#27339)    
sts-ryan-holton committed
232
233 

$rounded-pill:                50rem !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
234
Mark Otto's avatar
Add box-shadow utilities (#25758)    
Mark Otto committed
235
236
237 
$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;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
238 
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
Mark Otto's avatar
Add box-shadow utilities (#25758)    
Mark Otto committed
239
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
240 
$component-active-color:      $white !default;
Martijn Cuppens's avatar
Use theme-color function for colors (#27848)    
Martijn Cuppens committed
241 
$component-active-bg:         theme-color("primary") !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
242
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
243 
$caret-width:                 .3em !default;
Martijn Cuppens's avatar
Allow configuration of caret spacing and vertical alignment (#27994)    
Martijn Cuppens committed
244
245 
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
246
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
247
248
249 
$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
250
Martijn Cuppens's avatar
Allow to add more embed responsive ratios (#25894)    
Martijn Cuppens committed
251
252 
$embed-responsive-aspect-ratios: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
Martijn Cuppens's avatar
Switch from list to map for responsive embeds (#28678)    
Martijn Cuppens committed
253 
$embed-responsive-aspect-ratios: map-merge(
Martijn Cuppens's avatar
Allow to add more embed responsive ratios (#25894)    
Martijn Cuppens committed
254 
  (
Martijn Cuppens's avatar
Switch from list to map for responsive embeds (#28678)    
Martijn Cuppens committed
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270 
    "21by9": (
      x: 21,
      y: 9
    ),
    "16by9": (
      x: 16,
      y: 9
    ),
    "4by3": (
      x: 4,
      y: 3
    ),
    "1by1": (
      x: 1,
      y: 1
    )
Martijn Cuppens's avatar
Allow to add more embed responsive ratios (#25894)    
Martijn Cuppens committed
271
272
273 
  ),
  $embed-responsive-aspect-ratios
);
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
274
Martijn Cuppens's avatar
Change comment heading title to `Typography` (#28032)    
Martijn Cuppens committed
275 
// Typography
Mark Otto's avatar
convert to scss  
Mark Otto committed
276 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
277 
// Font, line-height, and color for body text, headings, and more.
Mark Otto's avatar
convert to scss  
Mark Otto committed
278
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
279 
// stylelint-disable value-keyword-case
Shohei Yoshida's avatar
Add quotes according to the stylelint rule (#27771)    
Shohei Yoshida committed
280 
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 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
281 
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
282 
$font-family-base:            $font-family-sans-serif !default;
XhmikosR's avatar
Switch to stylelint. (#23572)    
XhmikosR committed
283 
// stylelint-enable value-keyword-case
Mark Otto's avatar
convert to scss  
Mark Otto committed
284
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
285 
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
Florian Lacreuse's avatar
Remove unnecessary brackets for consistency (#27966)    
Florian Lacreuse committed
286
287 
$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
288
Andrew's avatar
add 'lighter' and 'bolder' font weight classes (#26580)    
Andrew committed
289 
$font-weight-lighter:         lighter !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
290
291
292 
$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
293 
$font-weight-bolder:          bolder !default;
Simon Bächler's avatar
Use a variable for the default font weights. Fixes #20741    
Simon Bächler committed
294
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
295
296 
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
Mark Otto's avatar
Redo line-height globally    
Mark Otto committed
297
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
298
299
300
301
302
303 
$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
304
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
305 
$headings-margin-bottom:      $spacer / 2 !default;
Martijn Cuppens's avatar
Prevent useless property rendering    
Martijn Cuppens committed
306 
$headings-font-family:        null !default;
Martijn Cuppens's avatar
Headings font style (#28544)    
Martijn Cuppens committed
307 
$headings-font-style:         null !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
308 
$headings-font-weight:        500 !default;
Mark Otto's avatar
Increase headings-line-height from 1.1 to 1.2 (#24423)    
Mark Otto committed
309 
$headings-line-height:        1.2 !default;
Martijn Cuppens's avatar
Prevent useless property rendering    
Martijn Cuppens committed
310 
$headings-color:              null !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
311
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
312
313
314
315 
$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
316
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
317
318
319
320
321 
$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
322
Florian Lacreuse's avatar
Remove unnecessary brackets for consistency (#27966)    
Florian Lacreuse committed
323 
$lead-font-size:              $font-size-base * 1.25 !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
324 
$lead-font-weight:            300 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
325
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
326 
$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
327
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
328 
$text-muted:                  $gray-600 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
329
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
330 
$blockquote-small-color:      $gray-600 !default;
acj's avatar
Move blockquote footer font size to variables    
acj committed
331 
$blockquote-small-font-size:  $small-font-size !default;
Florian Lacreuse's avatar
Remove unnecessary brackets for consistency (#27966)    
Florian Lacreuse committed
332 
$blockquote-font-size:        $font-size-base * 1.25 !default;
Mark Otto's avatar
variables cleanup    
Mark Otto committed
333
Martijn Cuppens's avatar
Reboot & Type cleanup (#28698)    
Martijn Cuppens committed
334
335
336 
$hr-color:                    inherit !default;
$hr-height:                   $border-width !default;
$hr-opacity:                  .25 !default;
Mark Otto's avatar
unaffix sidebar and simplify styles of docs side nav to be more like v3    
Mark Otto committed
337
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
338 
$mark-padding:                .2em !default;
Chris Rebert's avatar
Add $mark-padding variable    
Chris Rebert committed
339
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
340 
$dt-font-weight:              $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
341
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
342 
$nested-kbd-font-weight:      $font-weight-bold !default;
Chris Rebert's avatar
Add 3 more font-weight variables    
Chris Rebert committed
343
Andres Galante's avatar
changes list-inline-padding from 5px to .5rem    
Andres Galante committed
344 
$list-inline-padding:         .5rem !default;
Chris Rebert's avatar
Add $list-inline-padding variable    
Chris Rebert committed
345
Andres Galante's avatar
adds variables for the hr element margin    
Andres Galante committed
346
347
348 
$mark-bg:                     #fcf8e3 !default;

$hr-margin-y:                 $spacer !default;
Mark Otto's avatar
remove $state-vars now    
Mark Otto committed
349
Mark Otto's avatar
convert to scss  
Mark Otto committed
350
Mark Otto's avatar
rip numbers    
Mark Otto committed
351 
// Tables
Mark Otto's avatar
convert to scss  
Mark Otto committed
352 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
353 
// Customizes the `.table` component with basic values, each used across all table variations.
Mark Otto's avatar
convert to scss  
Mark Otto committed
354
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
355
356 
$table-cell-padding:          .5rem !default;
$table-cell-padding-sm:       .25rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
357
Martijn Cuppens's avatar
Make it possible to change default alignment & allow to inherit alignment from table (#29039)    
Martijn Cuppens committed
358
359 
$table-cell-vertical-align:   top !default;
Mark Otto's avatar
Add table-hover-color variables    
Mark Otto committed
360 
$table-color:                 $body-color !default;
Martijn Cuppens's avatar
Don't render a background by default    
Martijn Cuppens committed
361 
$table-bg:                    null !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
362 
$table-accent-bg:             rgba($black, .05) !default;
Mark Otto's avatar
Add table-hover-color variables    
Mark Otto committed
363 
$table-hover-color:           $table-color !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
364 
$table-hover-bg:              rgba($black, .075) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
365 
$table-active-bg:             $table-hover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
366
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
367 
$table-border-width:          $border-width !default;
Martijn Cuppens's avatar
Sync `$table-border-color` with `$border-color`    
Martijn Cuppens committed
368 
$table-border-color:          $border-color !default;
Mark Otto's avatar
reorder    
Mark Otto committed
369
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
370
371 
$table-head-bg:               $gray-200 !default;
$table-head-color:            $gray-700 !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
372 
$table-head-border-color:     $gray-700 !default;
Christopher Baker's avatar
remove references to -* outside _variables.scss    
Christopher Baker committed
373
Mark Otto's avatar
Add table-hover-color variables    
Mark Otto committed
374 
$table-dark-color:            $white !default;
Mark Otto's avatar
Match .table-dark background-color to the -dark variable    
Mark Otto committed
375 
$table-dark-bg:               $gray-800 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
376 
$table-dark-accent-bg:        rgba($white, .05) !default;
Mark Otto's avatar
Add table-hover-color variables    
Mark Otto committed
377 
$table-dark-hover-color:      $table-dark-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
378 
$table-dark-hover-bg:         rgba($white, .075) !default;
Mark Otto's avatar
Match .table-dark background-color to the -dark variable    
Mark Otto committed
379 
$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
380
Andrew Luca's avatar
Allow to change `.table-striped` `odd` or `even` (#25333)    
Andrew Luca committed
381
382 
$table-striped-order:         odd !default;
ysds's avatar
Add color variable for caption (#25657)    
ysds committed
383 
$table-caption-color:         $text-muted !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
384
Bastien's avatar
table: Add border color relative to theme for accessibility (#25755)    
Bastien committed
385
386
387 
$table-bg-level:              -9 !default;
$table-border-level:          -6 !default;
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
388
Mark Otto's avatar
edit code comments    
Mark Otto committed
389
390
391 
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
Mark Otto's avatar
convert to scss  
Mark Otto committed
392
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
393
394 
$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
Martijn Cuppens's avatar
Optional btn & input font sizes (#28068)    
Martijn Cuppens committed
395 
$input-btn-font-family:       null !default;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
396 
$input-btn-font-size:         $font-size-base !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
397 
$input-btn-line-height:       $line-height-base !default;
Mark Otto's avatar
Revamp button and input vars while fixing #21587 (#22287)    
Mark Otto committed
398
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
399 
$input-btn-focus-width:       .2rem !default;
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
400 
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
Mark Otto's avatar
Gradients and shadows (#24429)    
Mark Otto committed
401
402 
$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
403
404 
$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
405 
$input-btn-font-size-sm:      $font-size-sm !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
406 
$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
407
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
408
409 
$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
410 
$input-btn-font-size-lg:      $font-size-lg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
411 
$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
412
Mark Otto's avatar
edit code comments    
Mark Otto committed
413 
$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
414
415
416
417 


// Buttons
//
Mark Otto's avatar
edit code comments    
Mark Otto committed
418 
// 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
419
420
421 

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
Martijn Cuppens's avatar
Optional btn & input font sizes (#28068)    
Martijn Cuppens committed
422 
$btn-font-family:             $input-btn-font-family !default;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
423 
$btn-font-size:               $input-btn-font-size !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
424
425
426
427 
$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;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
428 
$btn-font-size-sm:            $input-btn-font-size-sm !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
429
430
431
432 
$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;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
433 
$btn-font-size-lg:            $input-btn-font-size-lg !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
434
435
436
437 
$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
438 
$btn-font-weight:             $font-weight-normal !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
439 
$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
440
441 
$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
442 
$btn-disabled-opacity:        .65 !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
443 
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
444
GeoSot's avatar
Separate `$btn-link` colors from `$link-color` (#28681)    
GeoSot committed
445
446 
$btn-link-color:              $link-color !default;
$btn-link-hover-color:        $link-hover-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
447 
$btn-link-disabled-color:     $gray-600 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
448
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
449 
$btn-block-spacing-y:         .5rem !default;
Mark Otto's avatar
Switch up some split button stuff    
Mark Otto committed
450
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
451 
// Allows for customizing button radius independently from global border radius
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
452
453
454 
$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
455
Mark Otto's avatar
match property order    
Mark Otto committed
456 
$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
457
Mark Otto's avatar
convert to scss  
Mark Otto committed
458
Mark Otto's avatar
rip numbers    
Mark Otto committed
459 
// Forms
Mark Otto's avatar
convert to scss  
Mark Otto committed
460
Andres Galante's avatar
Create a variable for label margin bottom (#25561)    
Andres Galante committed
461
462 
$label-margin-bottom:                   .5rem !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
463
464 
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
Martijn Cuppens's avatar
Optional btn & input font sizes (#28068)    
Martijn Cuppens committed
465 
$input-font-family:                     $input-btn-font-family !default;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
466 
$input-font-size:                       $input-btn-font-size !default;
Andres Galante's avatar
Add font weight options for form controls and custom select (#27343)    
Andres Galante committed
467 
$input-font-weight:                     $font-weight-base !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
468
469
470
471 
$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;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
472 
$input-font-size-sm:                    $input-btn-font-size-sm !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
473
474
475
476 
$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;
Martijn Cuppens's avatar
Variable .btn and .form-control font sizes (#26908)    
Martijn Cuppens committed
477 
$input-font-size-lg:                    $input-btn-font-size-lg !default;
i.sychev's avatar
append btn-* and input-* variables and extends their from input-btn-* variables    
i.sychev committed
478
479 
$input-line-height-lg:                  $input-btn-line-height-lg !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
480
481 
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
482
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
483
484 
$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
485 
$input-border-width:                    $input-btn-border-width !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
486 
$input-box-shadow:                      $box-shadow-inset !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
487
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
488
489
490 
$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
491
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
492 
$input-focus-bg:                        $input-bg !default;
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
493 
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
494 
$input-focus-color:                     $input-color !default;
Mark Otto's avatar
update new focus and shadow properties to use vars    
Mark Otto committed
495
496 
$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
497
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
498 
$input-placeholder-color:               $gray-600 !default;
m5o's avatar
set color to form-control-plaintext (#25565)    
m5o committed
499 
$input-plaintext-color:                 $body-color !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
500
Andrew Luca's avatar
Fix input height border (#25331)    
Andrew Luca committed
501 
$input-height-border:                   $input-border-width * 2 !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
502
Martijn Cuppens's avatar
Responsive font size implementation (#23816)    
Martijn Cuppens committed
503
504
505 
$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
Mark Otto's avatar
Change how input and select height is computed    
Mark Otto committed
506
Martijn Cuppens's avatar
Responsive font size implementation (#23816)    
Martijn Cuppens committed
507
508
509 
$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
510
XhmikosR's avatar
Minor Sass consistency changes. (#24677)    
XhmikosR committed
511 
$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
512
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533 

$form-check-input-width:                  1.25em !default;
$form-check-min-height:                   $font-size-base * $line-height-base !default;
$form-check-padding-left:                 $form-check-input-width + .5em !default;
$form-check-margin-bottom:                .125rem !default;

$form-check-input-active-filter:          brightness(90%) !default;

$form-check-input-bg:                     $body-bg !default;
$form-check-input-border:                 1px solid rgba(0, 0, 0, .25) !default;
$form-check-input-border-radius:          .25em !default;
$form-check-radio-border-radius:          50% !default;
$form-check-input-focus-border:           $input-focus-border-color !default;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;

$form-check-input-checked-color:          $component-active-color !default;
$form-check-input-checked-bg-color:       $component-active-bg !default;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-repeat:      no-repeat !default;
$form-check-input-checked-bg-position:    center center !default;
$form-check-input-checked-bg-size:        1em !default;
Martijn Cuppens's avatar
Remove redundant fill-rule    
Martijn Cuppens committed
534
535 
$form-check-input-checked-bg-image:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='#{$form-check-input-checked-color}' stroke-width='3' d='M4 8.5L6.5 11l6-6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-check-radio-checked-bg-image:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-check-input-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
536
537
538
539
540
541
542 

$form-check-input-indeterminate-color:          $component-active-color !default;
$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-repeat:      no-repeat !default;
$form-check-input-indeterminate-bg-position:    center center !default;
$form-check-input-indeterminate-bg-size:        1em !default;
Martijn Cuppens's avatar
Remove redundant fill-rule    
Martijn Cuppens committed
543 
$form-check-input-indeterminate-bg-image:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M5 8h6' stroke='#{$form-check-input-indeterminate-color}' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560 

$form-switch-color:               rgba(0, 0, 0, .25) !default;
$form-switch-width:               2em !default;
$form-switch-height:              $form-check-input-width !default;
$form-switch-padding-left:        $form-switch-width + .5em !default;
$form-switch-bg-image:            str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-switch-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-switch-border-radius:       $form-switch-width !default;
$form-switch-transition:          .2s ease-in-out !default;
$form-switch-transition-property: background-position, background-color !default;

$form-switch-focus-color:         hsla(211, 100%, 75%, 1) !default;
$form-switch-focus-bg-image:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-switch-focus-color}'/%3e%3c/svg%3e"), "#", "%23") !default;

$form-switch-checked-color:       $component-active-color !default;
$form-switch-checked-bg-image:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-switch-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-switch-checked-bg-position:  right center !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
561 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
562
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
563 
$form-check-inline-margin-right:        1rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
564
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
565 
$form-check-input-margin-x:             .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
566
Jacob Müller's avatar
Make form grid gutter width configurable (#27766)    
Jacob Müller committed
567 
$form-grid-gutter-width:                10px !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
568
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
569
570
571 
$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
572
Martijn Cuppens's avatar
Custom forms transition    
Martijn Cuppens committed
573
574 
$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
575
576
577
578
579
580
581
582
583
584
585
586
587
588 
$form-select-padding-y:           $input-padding-y !default;
$form-select-padding-x:           $input-padding-x !default;
$form-select-font-family:         $input-font-family !default;
$form-select-font-size:           $input-font-size !default;
$form-select-height:              $input-height !default;
$form-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
$form-select-font-weight:         $input-font-weight !default;
$form-select-line-height:         $input-line-height !default;
$form-select-color:               $input-color !default;
$form-select-disabled-color:      $gray-600 !default;
$form-select-bg:                  $input-bg !default;
$form-select-disabled-bg:         $gray-200 !default;
$form-select-bg-size:             16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color:     $gray-800 !default;
Martijn Cuppens's avatar
Remove redundant fill-rule    
Martijn Cuppens committed
589 
$form-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='#{$form-select-indicator-color}' stroke-width='2px' d='M2 5l6 6 6-6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
590
591
592
593
594
595
596
597
598
599 

$form-select-background:          $form-select-indicator no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)

$form-select-feedback-icon-padding-right: calc((1em + #{2 * $form-select-padding-y}) * 3 / 4 + #{$form-select-padding-x + $form-select-indicator-padding}) !default;
$form-select-feedback-icon-position:      center right ($form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;

$form-select-border-width:        $input-border-width !default;
$form-select-border-color:        $input-border-color !default;
$form-select-border-radius:       $border-radius !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
600 
$form-select-box-shadow:          $box-shadow-inset !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620 

$form-select-focus-border-color:  $input-focus-border-color !default;
$form-select-focus-width:         $input-focus-width !default;
$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;

$form-select-padding-y-sm:        $input-padding-y-sm !default;
$form-select-padding-x-sm:        $input-padding-x-sm !default;
$form-select-font-size-sm:        $input-font-size-sm !default;
$form-select-height-sm:           $input-height-sm !default;

$form-select-padding-y-lg:        $input-padding-y-lg !default;
$form-select-padding-x-lg:        $input-padding-x-lg !default;
$form-select-font-size-lg:        $input-font-size-lg !default;
$form-select-height-lg:           $input-height-lg !default;

$form-range-track-width:          100% !default;
$form-range-track-height:         .5rem !default;
$form-range-track-cursor:         pointer !default;
$form-range-track-bg:             $gray-300 !default;
$form-range-track-border-radius:  1rem !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
621 
$form-range-track-box-shadow:     $box-shadow-inset !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651 

$form-range-thumb-width:                   1rem !default;
$form-range-thumb-height:                  $form-range-thumb-width !default;
$form-range-thumb-bg:                      $component-active-bg !default;
$form-range-thumb-border:                  0 !default;
$form-range-thumb-border-radius:           1rem !default;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
$form-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
$form-range-thumb-disabled-bg:             $gray-500 !default;

$form-file-height:                $input-height !default;
$form-file-focus-border-color:    $input-focus-border-color !default;
$form-file-focus-box-shadow:      $input-focus-box-shadow !default;
$form-file-disabled-bg:           $input-disabled-bg !default;

$form-file-padding-y:             $input-padding-y !default;
$form-file-padding-x:             $input-padding-x !default;
$form-file-line-height:           $input-line-height !default;
$form-file-font-family:           $input-font-family !default;
$form-file-font-weight:           $input-font-weight !default;
$form-file-color:                 $input-color !default;
$form-file-bg:                    $input-bg !default;
$form-file-border-width:          $input-border-width !default;
$form-file-border-color:          $input-border-color !default;
$form-file-border-radius:         $input-border-radius !default;
$form-file-box-shadow:            $input-box-shadow !default;
$form-file-button-color:          $form-file-color !default;
$form-file-button-bg:             $input-group-addon-bg !default;
markau's avatar
Fixes #17918: Add styles for disabled custom checkboxes and radios    
markau committed
652
653
Mark Otto's avatar
remove icons for now    
Mark Otto committed
654 
// Form validation
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
655
Andres Galante's avatar
Adds variables for form validation messages (#24767)    
Andres Galante committed
656
657 
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
Martijn Cuppens's avatar
Use theme-color function for colors (#27848)    
Martijn Cuppens committed
658
659 
$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
660
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
661 
$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
midzer's avatar
optimize data URIs (#27284)    
midzer committed
662 
$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%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;
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
663 
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
XhmikosR's avatar
Move xmlns after `svg` for consistency.    
XhmikosR committed
664 
$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' stroke='#{$form-feedback-icon-invalid-color}' fill='none'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='M5.8 3.6h.4L6 6.5z' stroke-linejoin='round'/%3e%3ccircle cx='6' cy='8.2' r='.1'/%3e%3c/svg%3e"), "#", "%23") !default;
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
665
Mark Otto's avatar
Add form-validation-states Sass map (#27999)    
Mark Otto committed
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680 
$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);
Mark Otto's avatar
convert to scss  
Mark Otto committed
681
Mark Otto's avatar
rip numbers    
Mark Otto committed
682 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
683
684
685
686 
//
// 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
687
688
689
690
691
692
693 
$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
694
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
695
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
696
697 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
698
699
700 
$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
701
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
702 
$nav-tabs-border-color:             $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
703
704 
$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
705 
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
706
707 
$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
708 
$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
709
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
710
711
712 
$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
713
Jacob Müller's avatar
Replace "loose" HEX values with their respective variables (#25672)    
Jacob Müller committed
714 
$nav-divider-color:                 $gray-200 !default;
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
715 
$nav-divider-margin-y:              $spacer / 2 !default;
Mark Otto's avatar
make it a var    
Mark Otto committed
716
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
717
Mark Otto's avatar
rip numbers    
Mark Otto committed
718 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
719
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
720 
$navbar-padding-y:                  $spacer / 2 !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
721 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
722
Andres Galante's avatar
removes hardcoded value for nav-link padding    
Andres Galante committed
723
724 
$navbar-nav-link-padding-x:         .5rem !default;
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
725 
$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
726 
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
727 
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
Dylan Seago's avatar
Rename navbar height variables to reflect their value (#24161)    
Dylan Seago committed
728
729 
$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
730
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
731
732
733
734 
$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
735
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
736
737 
$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
738 
$navbar-dark-active-color:          $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
739 
$navbar-dark-disabled-color:        rgba($white, .25) !default;
XhmikosR's avatar
Move xmlns after `svg` for consistency.    
XhmikosR committed
740 
$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%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
741 
$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
742
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
743
744
745
746 
$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
Move xmlns after `svg` for consistency.    
XhmikosR committed
747 
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%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
748 
$navbar-light-toggler-border-color: rgba($black, .1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
749
Andres Galante's avatar
creates variables for navbar brand colors #27187    
Andres Galante committed
750
751
752
753
754 
$navbar-light-brand-color:                $navbar-light-active-color !default;
$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
755
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
756
757
758
759
760
761
762 
// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-min-width:                10rem !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
Martijn Cuppens's avatar
Sync dropdown font size to base font size    
Martijn Cuppens committed
763 
$dropdown-font-size:                $font-size-base !default;
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
764 
$dropdown-color:                    $body-color !default;
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
765
766
767
768
769
770
771 
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black, .15) !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg:               $gray-200 !default;
$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
772 
$dropdown-box-shadow:               $box-shadow !default;
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788 

$dropdown-link-color:               $gray-900 !default;
$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
$dropdown-link-hover-bg:            $gray-100 !default;

$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;

$dropdown-link-disabled-color:      $gray-600 !default;

$dropdown-item-padding-y:           .25rem !default;
$dropdown-item-padding-x:           1.5rem !default;

$dropdown-header-color:             $gray-600 !default;
Mark Otto's avatar
rip numbers    
Mark Otto committed
789 
// Pagination
Mark Otto's avatar
convert to scss  
Mark Otto committed
790
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
791
792
793
794
795
796
797 
$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
798
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
799
800
801 
$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
802 
$pagination-border-color:           $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
803
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
804 
$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
805 
$pagination-focus-outline:          0 !default;
Mark Otto's avatar
Update pagination focus styles    
Mark Otto committed
806
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
807
808 
$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
809 
$pagination-hover-border-color:     $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
810
Patrick Yeo's avatar
$component-active-bg and $component-active-color are partially useful (#24710)    
Patrick Yeo committed
811
812
813 
$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
814
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
815
816 
$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
817 
$pagination-disabled-border-color:  $gray-300 !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
818
819
Mark Otto's avatar
rip numbers    
Mark Otto committed
820 
// Cards
Quy's avatar
Rename Tags to Badges in comments    
Quy committed
821
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
822
823
824
825 
$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
826 
$card-border-color:                 rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
827
828 
$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg:                       rgba($black, .03) !default;
Martijn Cuppens's avatar
Prevent rendering of color property by default    
Martijn Cuppens committed
829 
$card-cap-color:                    null !default;
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
830 
$card-color:                        null !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
831 
$card-bg:                           $white !default;
Kevin Kirsche's avatar
Card variables should be in _variables.scss    
Kevin Kirsche committed
832
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
833 
$card-img-overlay-padding:          1.25rem !default;
Chris Rebert's avatar
Add $card-img-overlay-padding variable    
Chris Rebert committed
834
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
835 
$card-group-margin:                 $grid-gutter-width / 2 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
836 
$card-deck-margin:                  $card-group-margin !default;
Chris Rebert's avatar
Introduce $card-deck-margin variable    
Chris Rebert committed
837
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
838
839
840 
$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
841
Andrey's avatar
Add variable for card-link hover state    
Andrey committed
842
Mark Otto's avatar
rip numbers    
Mark Otto committed
843 
// Tooltips
Mark Otto's avatar
convert to scss  
Mark Otto committed
844
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
845
846
847
848
849
850
851
852
853 
$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
854
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
855
856
857 
$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
858
Mark Otto's avatar
Add new variables for form feedback tooltips (#26959)    
Mark Otto committed
859
860
861
862
863
864
865
866 
// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
$form-feedback-tooltip-line-height:   $line-height-base !default;
$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
867
Mark Otto's avatar
rip numbers    
Mark Otto committed
868 
// Popovers
Mark Otto's avatar
convert to scss  
Mark Otto committed
869
Patrick Yeo's avatar
Allow customizing Popover and Tooltip `font-size` outside of `$font-size-sm`    
Patrick Yeo committed
870 
$popover-font-size:                 $font-size-sm !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
871
872
873 
$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
874 
$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
875 
$popover-border-radius:             $border-radius-lg !default;
Shohei Yoshida's avatar
Fix incorrect variable for popover border radius (#28733)    
Shohei Yoshida committed
876 
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
877 
$popover-box-shadow:                $box-shadow !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
878
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
879
880 
$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
881
882 
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Mark Otto's avatar
Rename popover classes    
Mark Otto committed
883
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
884 
$popover-body-color:                $body-color !default;
Andres Galante's avatar
changes popovers from px to rem    
Andres Galante committed
885
886 
$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
887
Mark Otto's avatar
smaller popover arrows for more reasonable visuals and more ideal pixel rounding    
Mark Otto committed
888
889 
$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
890 
$popover-arrow-color:               $popover-bg !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
891
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
892 
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
893
894
Mark Otto's avatar
Add new toasts component    
Mark Otto committed
895 
// Toasts
Martijn Cuppens's avatar
Align toast variables (#28041)    
Martijn Cuppens committed
896
897
898
899
900 

$toast-max-width:                   350px !default;
$toast-padding-x:                   .75rem !default;
$toast-padding-y:                   .25rem !default;
$toast-font-size:                   .875rem !default;
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
901 
$toast-color:                       null !default;
Martijn Cuppens's avatar
Align toast variables (#28041)    
Martijn Cuppens committed
902
903
904 
$toast-background-color:            rgba($white, .85) !default;
$toast-border-width:                1px !default;
$toast-border-color:                rgba(0, 0, 0, .1) !default;
Ted Kesgar's avatar
Change toast border radius to use `$border-radius` (#28621)    
Ted Kesgar committed
905 
$toast-border-radius:               $border-radius !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
906 
$toast-box-shadow:                  $box-shadow !default;
Martijn Cuppens's avatar
Align toast variables (#28041)    
Martijn Cuppens committed
907
908
909
910 

$toast-header-color:                $gray-600 !default;
$toast-header-background-color:     rgba($white, .85) !default;
$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
Mark Otto's avatar
Add new toasts component    
Mark Otto committed
911
912
Mark Otto's avatar
rip numbers    
Mark Otto committed
913 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
914
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
915
916 
$badge-font-size:                   75% !default;
$badge-font-weight:                 $font-weight-bold !default;
Mark Otto's avatar
v5: Update badges (#28458)    
Mark Otto committed
917 
$badge-color:                       $white !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
918 
$badge-padding-y:                   .25em !default;
Mark Otto's avatar
v5: Update badges (#28458)    
Mark Otto committed
919 
$badge-padding-x:                   .5em !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
920 
$badge-border-radius:               $border-radius !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
921
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
922
Mark Otto's avatar
rip numbers    
Mark Otto committed
923 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
924
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
925 
// Padding applied to the modal body
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
926 
$modal-inner-padding:               1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
927
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
928
929 
$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
930
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
931 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
932
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
933 
$modal-content-color:               null !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
934
935
936
937 
$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;
Shohei Yoshida's avatar
Calc modal header/footer border radius according to the border width (#28775)    
Shohei Yoshida committed
938 
$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
939
940 
$modal-content-box-shadow-xs:       $box-shadow-sm !default;
$modal-content-box-shadow-sm-up:    $box-shadow !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
941
942
943 

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;
Martijn Cuppens's avatar
Sync modal header & footer border colors with $border-color    
Martijn Cuppens committed
944 
$modal-header-border-color:         $border-color !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
945
946
947 
$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;
Martijn Cuppens's avatar
Allow multiple ways of padding declaration for modal header (#26976)    
Martijn Cuppens committed
948
949
950 
$modal-header-padding-y:            1rem !default;
$modal-header-padding-x:            1rem !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
Mark Otto's avatar
convert to scss  
Mark Otto committed
951
Mark Otto's avatar
Merge branch 'v4-dev' of https://github.com/malkomich/bootstrap into malkomich-v4-dev    
Mark Otto committed
952 
$modal-xl:                          1140px !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
953
954
955 
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
956
Martijn Cuppens's avatar
Tweak modal transform (#27005)    
Martijn Cuppens committed
957
958 
$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
959 
$modal-transition:                  transform .3s ease-out !default;
Tom Lutzenberger's avatar
Add variables for transitions (#21345)    
Tom Lutzenberger committed
960
Mark Otto's avatar
convert to scss  
Mark Otto committed
961
Mark Otto's avatar
rip numbers    
Mark Otto committed
962 
// Alerts
Mark Otto's avatar
convert to scss  
Mark Otto committed
963 
//
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
964 
// Define alert colors, border radius, and padding.
Mark Otto's avatar
convert to scss  
Mark Otto committed
965
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
966
967
968
969
970
971 
$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
972
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
973
974 
$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
Mark Otto's avatar
linting    
Mark Otto committed
975 
$alert-color-level:                 6 !default;
Mark Otto's avatar
Move alert theme-color() levels to variables    
Mark Otto committed
976
Mark Otto's avatar
convert to scss  
Mark Otto committed
977
Mark Otto's avatar
rip numbers    
Mark Otto committed
978 
// Progress bars
Mark Otto's avatar
convert to scss  
Mark Otto committed
979
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
980 
$progress-height:                   1rem !default;
Florian Lacreuse's avatar
Remove unnecessary brackets for consistency (#27966)    
Florian Lacreuse committed
981 
$progress-font-size:                $font-size-base * .75 !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
982
983 
$progress-bg:                       $gray-200 !default;
$progress-border-radius:            $border-radius !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
984 
$progress-box-shadow:               $box-shadow-inset !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
985 
$progress-bar-color:                $white !default;
Martijn Cuppens's avatar
Use theme-color function for colors (#27848)    
Martijn Cuppens committed
986 
$progress-bar-bg:                   theme-color("primary") !default;
XhmikosR's avatar
Reindent _variables.scss. (#24428)    
XhmikosR committed
987
988 
$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
989
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
990
Mark Otto's avatar
rip numbers    
Mark Otto committed
991 
// List group
Mark Otto's avatar
convert to scss  
Mark Otto committed
992
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
993 
$list-group-color:                  null !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
994 
$list-group-bg:                     $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
995 
$list-group-border-color:           rgba($black, .125) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
996
997 
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
998
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
999
1000 
$list-group-item-padding-y:         .75rem !default;
$list-group-item-padding-x:         1.25rem !default;
For faster browsing, not all history is shown. View entire blame