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


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

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

$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
532
533 
$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
534
535
536
537
538
539
540 

$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
541 
$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
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558 

$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
559 
$form-text-margin-top:                  .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
560
Mark Otto's avatar
v5: Forms update (#28450)    
Mark Otto committed
561 
$form-check-inline-margin-right:        1rem !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-input-margin-x:             .25rem !default;
Mark Otto's avatar
add some vars    
Mark Otto committed
564
Jacob Müller's avatar
Make form grid gutter width configurable (#27766)    
Jacob Müller committed
565 
$form-grid-gutter-width:                10px !default;
Mark Otto's avatar
fix validation, run grunt dist    
Mark Otto committed
566
XhmikosR's avatar
Reindent _variables.scss.    
XhmikosR committed
567
568
569 
$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
570
Martijn Cuppens's avatar
Custom forms transition    
Martijn Cuppens committed
571
572 
$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
573
574
575
576
577
578
579
580
581
582
583
584
585
586 
$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
587 
$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
588
589
590
591
592
593
594
595
596
597 

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

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

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

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

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

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

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