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;
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
151
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
152
Mark Otto's avatar
rip numbers    
Mark Otto committed
153 
// Links
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
154
155 
//
// Style anchor elements.
Mark Otto's avatar
convert to scss  
Mark Otto committed
156
Martijn Cuppens's avatar
Use theme-color function for colors (#27848)    
Martijn Cuppens committed
157 
$link-color:                              theme-color("primary") !default;
Martijn Cuppens's avatar
Variable darken percentage for emphasized links    
Martijn Cuppens committed
158
159
160
161
162 
$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
163
Martijn Cuppens's avatar
Stretched link updates (#28958)    
Martijn Cuppens committed
164
165
166 
$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
167
168
169
170 
// Paragraphs
//
// Style p element.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
171 
$paragraph-margin-bottom:   1rem !default;
Prateek Goel's avatar
Add margin variable for paragraphs (#23140)    
Prateek Goel committed
172
Mark Otto's avatar
convert to scss  
Mark Otto committed
173
Mark Otto's avatar
rip numbers    
Mark Otto committed
174 
// Grid breakpoints
Mark Otto's avatar
convert to scss  
Mark Otto committed
175 
//
Chris Rebert's avatar
Change comment to clarify that $grid-breakpoints are minimum widths for each breakpoint    
Chris Rebert committed
176 
// Define the minimum dimensions at which your layout will change,
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
177 
// adapting to different screen sizes, for use in media queries.
Mark Otto's avatar
convert to scss  
Mark Otto committed
178
Martijn Cuppens's avatar
Remove map-merge (#28033)    
Martijn Cuppens committed
179
180
181
182
183
184
185 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
186
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
187 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
Zachary Welch's avatar
Add map-name param to _assert-starts-at-zero (#24986)    
Zachary Welch committed
188 
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
Mark Otto's avatar
convert to scss  
Mark Otto committed
189
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
190
Mark Otto's avatar
rip numbers    
Mark Otto committed
191 
// Grid containers
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
192 
//
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
193 
// Define the maximum width of `.container` for different screen sizes.
Mark Otto's avatar
clean up vars file a smidge    
Mark Otto committed
194
Martijn Cuppens's avatar
Remove map-merge (#28033)    
Martijn Cuppens committed
195
196
197
198
199
200 
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
201
Chris Rebert's avatar
Assert that $grid-breakpoints and $container-max-widths are in ascending order; fixes #18549    
Chris Rebert committed
202 
@include _assert-ascending($container-max-widths, "$container-max-widths");
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
203
204
Mark Otto's avatar
rip numbers    
Mark Otto committed
205 
// Grid columns
Mark Otto's avatar
reorder variables, rename -color to -color    
Mark Otto committed
206
207
208 
//
// Set the number of columns and specify the width of the gutters.
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
209
210 
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
211
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
212
Martijn Cuppens's avatar
Configurable container padding (#28554)    
Martijn Cuppens committed
213
214
215
216
217 
// Container padding

$container-padding-x: $grid-gutter-width / 2 !default;
Mark Otto's avatar
Update spacer utilities (#22123)    
Mark Otto committed
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;
sts-ryan-holton's avatar
Add new `.rounded-pill` utility (#27339)    
sts-ryan-holton committed
231
232 

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

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


// Buttons
//
Mark Otto's avatar
edit code comments    
Mark Otto committed
415 
// 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
416
417
418 

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

$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;
$form-check-input-checked-bg-image:       str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="#{$form-check-input-checked-color}" stroke-width="3" d="M4 8.5L6.5 11l6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%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;

$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;
$form-check-input-indeterminate-bg-image:       str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h6" stroke="#{$form-check-input-indeterminate-color}" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;

$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
558 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
559
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
560 
$form-check-inline-margin-right:        1rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
561
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
562 
$form-check-input-margin-x:             .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
563
Jacob Müller's avatar
Make form grid gutter width configurable (#27766)    
Jacob Müller committed
564 
$form-grid-gutter-width:                10px !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
565
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
566
567
568 
$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
569
Martijn Cuppens's avatar
Custom forms transition    
Martijn Cuppens committed
570
571 
$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
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596 
$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;
$form-select-indicator:           str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="#{$form-select-indicator-color}" stroke-width="2px" d="M2 5l6 6 6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;

$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
597 
$form-select-box-shadow:          $box-shadow-inset !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617 

$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
618 
$form-range-track-box-shadow:     $box-shadow-inset !default;
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
619
620
621
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 

$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
649
650
Mark Otto's avatar
remove icons for now    
Mark Otto committed
651 
// Form validation
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
652
Andres Galante's avatar
Adds variables for form validation messages (#24767)    
Andres Galante committed
653
654 
$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
655
656 
$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
657
Mark Otto's avatar
Restore feedback icons on validated form fields    
Mark Otto committed
658 
$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
midzer's avatar
optimize data URIs (#27284)    
midzer committed
659 
$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
660 
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
Martijn Cuppens's avatar
Change invalid icon from cross to exclamation mark (#28944)    
Martijn Cuppens committed
661 
$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' 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
662
Mark Otto's avatar
Add form-validation-states Sass map (#27999)    
Mark Otto committed
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677 
$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
678
Mark Otto's avatar
rip numbers    
Mark Otto committed
679 
// Z-index master list
Mark Otto's avatar
convert to scss  
Mark Otto committed
680
681
682
683 
//
// 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
684
685
686
687
688
689
690 
$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
691
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
692
Pierre-Denis Vanduynslager's avatar
Harmonize navbar-brand, navbar-text and nav-link height    
Pierre-Denis Vanduynslager committed
693
694 
// Navs
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
695
696
697 
$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
698
Andres Galante's avatar
changes colors references on variables.scss from hardcoded to variables on the theme    
Andres Galante committed
699 
$nav-tabs-border-color:             $gray-300 !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
700
701 
$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
702 
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
703
704 
$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
705 
$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
706
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
707
708
709 
$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
710
Jacob Müller's avatar
Replace "loose" HEX values with their respective variables (#25672)    
Jacob Müller committed
711 
$nav-divider-color:                 $gray-200 !default;
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
712 
$nav-divider-margin-y:              $spacer / 2 !default;
Mark Otto's avatar
make it a var    
Mark Otto committed
713
Catalin Zalog's avatar
_variables.scss comments/spacing consistency (#27247)    
Catalin Zalog committed
714
Mark Otto's avatar
rip numbers    
Mark Otto committed
715 
// Navbar
Mark Otto's avatar
convert to scss  
Mark Otto committed
716
Martijn Cuppens's avatar
Remove redundant brackets (#27768)    
Martijn Cuppens committed
717 
$navbar-padding-y:                  $spacer / 2 !default;
Catalin Zalog's avatar
css: just some ordering    
Catalin Zalog committed
718 
$navbar-padding-x:                  $spacer !default;
Mark Otto's avatar
more navbar variables    
Mark Otto committed
719
Andres Galante's avatar
removes hardcoded value for nav-link padding    
Andres Galante committed
720
721 
$navbar-nav-link-padding-x:         .5rem !default;
Pierre-Denis Vanduynslager's avatar
Allow to customize navbar-brand font-size    
Pierre-Denis Vanduynslager committed
722 
$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
723 
// 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
724 
$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
725
726 
$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
727
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
728
729
730
731 
$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
732
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
733
734 
$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
735 
$navbar-dark-active-color:          $white !default;
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
736 
$navbar-dark-disabled-color:        rgba($white, .25) !default;
midzer's avatar
optimize data URIs (#27284)    
midzer committed
737 
$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%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
738 
$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
739
XhmikosR's avatar
Enable stylelint's `function-comma-space-after`. (#24501)    
XhmikosR committed
740
741
742
743 
$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;
midzer's avatar
optimize data URIs (#27284)    
midzer committed
744 
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%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
745 
$navbar-light-toggler-border-color: rgba($black, .1) !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
746
Andres Galante's avatar
creates variables for navbar brand colors #27187    
Andres Galante committed
747
748
749
750
751 
$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
752
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
753
754
755
756
757
758
759 
// 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
760 
$dropdown-font-size:                $font-size-base !default;
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
761 
$dropdown-color:                    $body-color !default;
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
762
763
764
765
766
767
768 
$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
769 
$dropdown-box-shadow:               $box-shadow !default;
Mark Otto's avatar
Add variable for dropdown-divider-margin-y (#27857)    
Mark Otto committed
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785 

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

$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
898 
$toast-color:                       null !default;
Martijn Cuppens's avatar
Align toast variables (#28041)    
Martijn Cuppens committed
899
900
901 
$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
902 
$toast-border-radius:               $border-radius !default;
Mark Otto's avatar
v5: Reuse box-shadow variables (#29023)    
Mark Otto committed
903 
$toast-box-shadow:                  $box-shadow !default;
Martijn Cuppens's avatar
Align toast variables (#28041)    
Martijn Cuppens committed
904
905
906
907 

$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
908
909
Mark Otto's avatar
rip numbers    
Mark Otto committed
910 
// Badges
Mark Otto's avatar
convert to scss  
Mark Otto committed
911
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
912
913 
$badge-font-size:                   75% !default;
$badge-font-weight:                 $font-weight-bold !default;
Mark Otto's avatar
v5: Update badges (#28458)    
Mark Otto committed
914 
$badge-color:                       $white !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
915 
$badge-padding-y:                   .25em !default;
Mark Otto's avatar
v5: Update badges (#28458)    
Mark Otto committed
916 
$badge-padding-x:                   .5em !default;
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
917 
$badge-border-radius:               $border-radius !default;
Mark Otto's avatar
Rename .tag to .badge to avoid conflicting with WordPress    
Mark Otto committed
918
JPeer264's avatar
updated sass variables table of contents    
JPeer264 committed
919
Mark Otto's avatar
rip numbers    
Mark Otto committed
920 
// Modals
Mark Otto's avatar
convert to scss  
Mark Otto committed
921
Mark Otto's avatar
remove all customizer comments from variables file    
Mark Otto committed
922 
// Padding applied to the modal body
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
923 
$modal-inner-padding:               1rem !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
924
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
925
926 
$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
927
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
928 
$modal-title-line-height:           $line-height-base !default;
Mark Otto's avatar
convert to scss  
Mark Otto committed
929
Martijn Cuppens's avatar
Make component colors configurable (#28035)    
Martijn Cuppens committed
930 
$modal-content-color:               null !default;
Catalin Zalog's avatar
style: align some vars (#25785)    
Catalin Zalog committed
931
932
933
934 
$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
935 
$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
936
937 
$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
938
939
940 

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