bootstrap-scss 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -151
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1639
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -70
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -150
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
package/_variables.scss CHANGED
@@ -1,1639 +1,1633 @@
1
- // Variables
2
- //
3
- // Variables should follow the `$component-state-property-size` formula for
4
- // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
5
-
6
- // Color system
7
-
8
- // scss-docs-start gray-color-variables
9
- $white: #fff !default;
10
- $gray-100: #f8f9fa !default;
11
- $gray-200: #e9ecef !default;
12
- $gray-300: #dee2e6 !default;
13
- $gray-400: #ced4da !default;
14
- $gray-500: #adb5bd !default;
15
- $gray-600: #6c757d !default;
16
- $gray-700: #495057 !default;
17
- $gray-800: #343a40 !default;
18
- $gray-900: #212529 !default;
19
- $black: #000 !default;
20
- // scss-docs-end gray-color-variables
21
-
22
- // fusv-disable
23
- // scss-docs-start gray-colors-map
24
- $grays: (
25
- "100": $gray-100,
26
- "200": $gray-200,
27
- "300": $gray-300,
28
- "400": $gray-400,
29
- "500": $gray-500,
30
- "600": $gray-600,
31
- "700": $gray-700,
32
- "800": $gray-800,
33
- "900": $gray-900
34
- ) !default;
35
- // scss-docs-end gray-colors-map
36
- // fusv-enable
37
-
38
- // scss-docs-start color-variables
39
- $blue: #0d6efd !default;
40
- $indigo: #6610f2 !default;
41
- $purple: #6f42c1 !default;
42
- $pink: #d63384 !default;
43
- $red: #dc3545 !default;
44
- $orange: #fd7e14 !default;
45
- $yellow: #ffc107 !default;
46
- $green: #198754 !default;
47
- $teal: #20c997 !default;
48
- $cyan: #0dcaf0 !default;
49
- // scss-docs-end color-variables
50
-
51
- // scss-docs-start colors-map
52
- $colors: (
53
- "blue": $blue,
54
- "indigo": $indigo,
55
- "purple": $purple,
56
- "pink": $pink,
57
- "red": $red,
58
- "orange": $orange,
59
- "yellow": $yellow,
60
- "green": $green,
61
- "teal": $teal,
62
- "cyan": $cyan,
63
- "white": $white,
64
- "gray": $gray-600,
65
- "gray-dark": $gray-800
66
- ) !default;
67
- // scss-docs-end colors-map
68
-
69
- // scss-docs-start theme-color-variables
70
- $primary: $blue !default;
71
- $secondary: $gray-600 !default;
72
- $success: $green !default;
73
- $info: $cyan !default;
74
- $warning: $yellow !default;
75
- $danger: $red !default;
76
- $light: $gray-100 !default;
77
- $dark: $gray-900 !default;
78
- // scss-docs-end theme-color-variables
79
-
80
- // scss-docs-start theme-colors-map
81
- $theme-colors: (
82
- "primary": $primary,
83
- "secondary": $secondary,
84
- "success": $success,
85
- "info": $info,
86
- "warning": $warning,
87
- "danger": $danger,
88
- "light": $light,
89
- "dark": $dark
90
- ) !default;
91
- // scss-docs-end theme-colors-map
92
-
93
- // scss-docs-start theme-colors-rgb
94
- $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
95
- // scss-docs-end theme-colors-rgb
96
-
97
- // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
98
- // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
99
- $min-contrast-ratio: 4.5 !default;
100
-
101
- // Customize the light and dark text colors for use in our color contrast function.
102
- $color-contrast-dark: $black !default;
103
- $color-contrast-light: $white !default;
104
-
105
- // fusv-disable
106
- $blue-100: tint-color($blue, 80%) !default;
107
- $blue-200: tint-color($blue, 60%) !default;
108
- $blue-300: tint-color($blue, 40%) !default;
109
- $blue-400: tint-color($blue, 20%) !default;
110
- $blue-500: $blue !default;
111
- $blue-600: shade-color($blue, 20%) !default;
112
- $blue-700: shade-color($blue, 40%) !default;
113
- $blue-800: shade-color($blue, 60%) !default;
114
- $blue-900: shade-color($blue, 80%) !default;
115
-
116
- $indigo-100: tint-color($indigo, 80%) !default;
117
- $indigo-200: tint-color($indigo, 60%) !default;
118
- $indigo-300: tint-color($indigo, 40%) !default;
119
- $indigo-400: tint-color($indigo, 20%) !default;
120
- $indigo-500: $indigo !default;
121
- $indigo-600: shade-color($indigo, 20%) !default;
122
- $indigo-700: shade-color($indigo, 40%) !default;
123
- $indigo-800: shade-color($indigo, 60%) !default;
124
- $indigo-900: shade-color($indigo, 80%) !default;
125
-
126
- $purple-100: tint-color($purple, 80%) !default;
127
- $purple-200: tint-color($purple, 60%) !default;
128
- $purple-300: tint-color($purple, 40%) !default;
129
- $purple-400: tint-color($purple, 20%) !default;
130
- $purple-500: $purple !default;
131
- $purple-600: shade-color($purple, 20%) !default;
132
- $purple-700: shade-color($purple, 40%) !default;
133
- $purple-800: shade-color($purple, 60%) !default;
134
- $purple-900: shade-color($purple, 80%) !default;
135
-
136
- $pink-100: tint-color($pink, 80%) !default;
137
- $pink-200: tint-color($pink, 60%) !default;
138
- $pink-300: tint-color($pink, 40%) !default;
139
- $pink-400: tint-color($pink, 20%) !default;
140
- $pink-500: $pink !default;
141
- $pink-600: shade-color($pink, 20%) !default;
142
- $pink-700: shade-color($pink, 40%) !default;
143
- $pink-800: shade-color($pink, 60%) !default;
144
- $pink-900: shade-color($pink, 80%) !default;
145
-
146
- $red-100: tint-color($red, 80%) !default;
147
- $red-200: tint-color($red, 60%) !default;
148
- $red-300: tint-color($red, 40%) !default;
149
- $red-400: tint-color($red, 20%) !default;
150
- $red-500: $red !default;
151
- $red-600: shade-color($red, 20%) !default;
152
- $red-700: shade-color($red, 40%) !default;
153
- $red-800: shade-color($red, 60%) !default;
154
- $red-900: shade-color($red, 80%) !default;
155
-
156
- $orange-100: tint-color($orange, 80%) !default;
157
- $orange-200: tint-color($orange, 60%) !default;
158
- $orange-300: tint-color($orange, 40%) !default;
159
- $orange-400: tint-color($orange, 20%) !default;
160
- $orange-500: $orange !default;
161
- $orange-600: shade-color($orange, 20%) !default;
162
- $orange-700: shade-color($orange, 40%) !default;
163
- $orange-800: shade-color($orange, 60%) !default;
164
- $orange-900: shade-color($orange, 80%) !default;
165
-
166
- $yellow-100: tint-color($yellow, 80%) !default;
167
- $yellow-200: tint-color($yellow, 60%) !default;
168
- $yellow-300: tint-color($yellow, 40%) !default;
169
- $yellow-400: tint-color($yellow, 20%) !default;
170
- $yellow-500: $yellow !default;
171
- $yellow-600: shade-color($yellow, 20%) !default;
172
- $yellow-700: shade-color($yellow, 40%) !default;
173
- $yellow-800: shade-color($yellow, 60%) !default;
174
- $yellow-900: shade-color($yellow, 80%) !default;
175
-
176
- $green-100: tint-color($green, 80%) !default;
177
- $green-200: tint-color($green, 60%) !default;
178
- $green-300: tint-color($green, 40%) !default;
179
- $green-400: tint-color($green, 20%) !default;
180
- $green-500: $green !default;
181
- $green-600: shade-color($green, 20%) !default;
182
- $green-700: shade-color($green, 40%) !default;
183
- $green-800: shade-color($green, 60%) !default;
184
- $green-900: shade-color($green, 80%) !default;
185
-
186
- $teal-100: tint-color($teal, 80%) !default;
187
- $teal-200: tint-color($teal, 60%) !default;
188
- $teal-300: tint-color($teal, 40%) !default;
189
- $teal-400: tint-color($teal, 20%) !default;
190
- $teal-500: $teal !default;
191
- $teal-600: shade-color($teal, 20%) !default;
192
- $teal-700: shade-color($teal, 40%) !default;
193
- $teal-800: shade-color($teal, 60%) !default;
194
- $teal-900: shade-color($teal, 80%) !default;
195
-
196
- $cyan-100: tint-color($cyan, 80%) !default;
197
- $cyan-200: tint-color($cyan, 60%) !default;
198
- $cyan-300: tint-color($cyan, 40%) !default;
199
- $cyan-400: tint-color($cyan, 20%) !default;
200
- $cyan-500: $cyan !default;
201
- $cyan-600: shade-color($cyan, 20%) !default;
202
- $cyan-700: shade-color($cyan, 40%) !default;
203
- $cyan-800: shade-color($cyan, 60%) !default;
204
- $cyan-900: shade-color($cyan, 80%) !default;
205
-
206
- $blues: (
207
- "blue-100": $blue-100,
208
- "blue-200": $blue-200,
209
- "blue-300": $blue-300,
210
- "blue-400": $blue-400,
211
- "blue-500": $blue-500,
212
- "blue-600": $blue-600,
213
- "blue-700": $blue-700,
214
- "blue-800": $blue-800,
215
- "blue-900": $blue-900
216
- ) !default;
217
-
218
- $indigos: (
219
- "indigo-100": $indigo-100,
220
- "indigo-200": $indigo-200,
221
- "indigo-300": $indigo-300,
222
- "indigo-400": $indigo-400,
223
- "indigo-500": $indigo-500,
224
- "indigo-600": $indigo-600,
225
- "indigo-700": $indigo-700,
226
- "indigo-800": $indigo-800,
227
- "indigo-900": $indigo-900
228
- ) !default;
229
-
230
- $purples: (
231
- "purple-100": $purple-200,
232
- "purple-200": $purple-100,
233
- "purple-300": $purple-300,
234
- "purple-400": $purple-400,
235
- "purple-500": $purple-500,
236
- "purple-600": $purple-600,
237
- "purple-700": $purple-700,
238
- "purple-800": $purple-800,
239
- "purple-900": $purple-900
240
- ) !default;
241
-
242
- $pinks: (
243
- "pink-100": $pink-100,
244
- "pink-200": $pink-200,
245
- "pink-300": $pink-300,
246
- "pink-400": $pink-400,
247
- "pink-500": $pink-500,
248
- "pink-600": $pink-600,
249
- "pink-700": $pink-700,
250
- "pink-800": $pink-800,
251
- "pink-900": $pink-900
252
- ) !default;
253
-
254
- $reds: (
255
- "red-100": $red-100,
256
- "red-200": $red-200,
257
- "red-300": $red-300,
258
- "red-400": $red-400,
259
- "red-500": $red-500,
260
- "red-600": $red-600,
261
- "red-700": $red-700,
262
- "red-800": $red-800,
263
- "red-900": $red-900
264
- ) !default;
265
-
266
- $oranges: (
267
- "orange-100": $orange-100,
268
- "orange-200": $orange-200,
269
- "orange-300": $orange-300,
270
- "orange-400": $orange-400,
271
- "orange-500": $orange-500,
272
- "orange-600": $orange-600,
273
- "orange-700": $orange-700,
274
- "orange-800": $orange-800,
275
- "orange-900": $orange-900
276
- ) !default;
277
-
278
- $yellows: (
279
- "yellow-100": $yellow-100,
280
- "yellow-200": $yellow-200,
281
- "yellow-300": $yellow-300,
282
- "yellow-400": $yellow-400,
283
- "yellow-500": $yellow-500,
284
- "yellow-600": $yellow-600,
285
- "yellow-700": $yellow-700,
286
- "yellow-800": $yellow-800,
287
- "yellow-900": $yellow-900
288
- ) !default;
289
-
290
- $greens: (
291
- "green-100": $green-100,
292
- "green-200": $green-200,
293
- "green-300": $green-300,
294
- "green-400": $green-400,
295
- "green-500": $green-500,
296
- "green-600": $green-600,
297
- "green-700": $green-700,
298
- "green-800": $green-800,
299
- "green-900": $green-900
300
- ) !default;
301
-
302
- $teals: (
303
- "teal-100": $teal-100,
304
- "teal-200": $teal-200,
305
- "teal-300": $teal-300,
306
- "teal-400": $teal-400,
307
- "teal-500": $teal-500,
308
- "teal-600": $teal-600,
309
- "teal-700": $teal-700,
310
- "teal-800": $teal-800,
311
- "teal-900": $teal-900
312
- ) !default;
313
-
314
- $cyans: (
315
- "cyan-100": $cyan-100,
316
- "cyan-200": $cyan-200,
317
- "cyan-300": $cyan-300,
318
- "cyan-400": $cyan-400,
319
- "cyan-500": $cyan-500,
320
- "cyan-600": $cyan-600,
321
- "cyan-700": $cyan-700,
322
- "cyan-800": $cyan-800,
323
- "cyan-900": $cyan-900
324
- ) !default;
325
- // fusv-enable
326
-
327
- // Characters which are escaped by the escape-svg function
328
- $escaped-characters: (
329
- ("<", "%3c"),
330
- (">", "%3e"),
331
- ("#", "%23"),
332
- ("(", "%28"),
333
- (")", "%29"),
334
- ) !default;
335
-
336
- // Options
337
- //
338
- // Quickly modify global styling by enabling or disabling optional features.
339
-
340
- $enable-caret: true !default;
341
- $enable-rounded: true !default;
342
- $enable-shadows: false !default;
343
- $enable-gradients: false !default;
344
- $enable-transitions: true !default;
345
- $enable-reduced-motion: true !default;
346
- $enable-smooth-scroll: true !default;
347
- $enable-grid-classes: true !default;
348
- $enable-cssgrid: false !default;
349
- $enable-button-pointers: true !default;
350
- $enable-rfs: true !default;
351
- $enable-validation-icons: true !default;
352
- $enable-negative-margins: false !default;
353
- $enable-deprecation-messages: true !default;
354
- $enable-important-utilities: true !default;
355
-
356
- // Prefix for :root CSS variables
357
-
358
- $variable-prefix: bs- !default;
359
-
360
- // Gradient
361
- //
362
- // The gradient which is added to components if `$enable-gradients` is `true`
363
- // This gradient is also added to elements with `.bg-gradient`
364
- // scss-docs-start variable-gradient
365
- $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
366
- // scss-docs-end variable-gradient
367
-
368
- // Spacing
369
- //
370
- // Control the default styling of most Bootstrap elements by modifying these
371
- // variables. Mostly focused on spacing.
372
- // You can add more entries to the $spacers map, should you need more variation.
373
-
374
- // scss-docs-start spacer-variables-maps
375
- $spacer: 1rem !default;
376
- $spacers: (
377
- 0: 0,
378
- 1: $spacer * .25,
379
- 2: $spacer * .5,
380
- 3: $spacer,
381
- 4: $spacer * 1.5,
382
- 5: $spacer * 3,
383
- ) !default;
384
-
385
- $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
386
- // scss-docs-end spacer-variables-maps
387
-
388
- // Position
389
- //
390
- // Define the edge positioning anchors of the position utilities.
391
-
392
- // scss-docs-start position-map
393
- $position-values: (
394
- 0: 0,
395
- 50: 50%,
396
- 100: 100%
397
- ) !default;
398
- // scss-docs-end position-map
399
-
400
- // Body
401
- //
402
- // Settings for the `<body>` element.
403
-
404
- $body-bg: $white !default;
405
- $body-color: $gray-900 !default;
406
- $body-text-align: null !default;
407
-
408
- // Utilities maps
409
- //
410
- // Extends the default `$theme-colors` maps to help create our utilities.
411
-
412
- // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
413
- // scss-docs-start utilities-colors
414
- $utilities-colors: $theme-colors-rgb !default;
415
- // scss-docs-end utilities-colors
416
-
417
- // scss-docs-start utilities-text-colors
418
- $utilities-text: map-merge(
419
- $utilities-colors,
420
- (
421
- "black": to-rgb($black),
422
- "white": to-rgb($white),
423
- "body": to-rgb($body-color)
424
- )
425
- ) !default;
426
- $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
427
- // scss-docs-end utilities-text-colors
428
-
429
- // scss-docs-start utilities-bg-colors
430
- $utilities-bg: map-merge(
431
- $utilities-colors,
432
- (
433
- "black": to-rgb($black),
434
- "white": to-rgb($white),
435
- "body": to-rgb($body-bg)
436
- )
437
- ) !default;
438
- $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
439
- // scss-docs-end utilities-bg-colors
440
-
441
- // Links
442
- //
443
- // Style anchor elements.
444
-
445
- $link-color: $primary !default;
446
- $link-decoration: underline !default;
447
- $link-shade-percentage: 20% !default;
448
- $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
449
- $link-hover-decoration: null !default;
450
-
451
- $stretched-link-pseudo-element: after !default;
452
- $stretched-link-z-index: 1 !default;
453
-
454
- // Paragraphs
455
- //
456
- // Style p element.
457
-
458
- $paragraph-margin-bottom: 1rem !default;
459
-
460
-
461
- // Grid breakpoints
462
- //
463
- // Define the minimum dimensions at which your layout will change,
464
- // adapting to different screen sizes, for use in media queries.
465
-
466
- // scss-docs-start grid-breakpoints
467
- $grid-breakpoints: (
468
- xs: 0,
469
- sm: 576px,
470
- md: 768px,
471
- lg: 992px,
472
- xl: 1200px,
473
- xxl: 1400px
474
- ) !default;
475
- // scss-docs-end grid-breakpoints
476
-
477
- @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
478
- @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
479
-
480
-
481
- // Grid containers
482
- //
483
- // Define the maximum width of `.container` for different screen sizes.
484
-
485
- // scss-docs-start container-max-widths
486
- $container-max-widths: (
487
- sm: 540px,
488
- md: 720px,
489
- lg: 960px,
490
- xl: 1140px,
491
- xxl: 1320px
492
- ) !default;
493
- // scss-docs-end container-max-widths
494
-
495
- @include _assert-ascending($container-max-widths, "$container-max-widths");
496
-
497
-
498
- // Grid columns
499
- //
500
- // Set the number of columns and specify the width of the gutters.
501
-
502
- $grid-columns: 12 !default;
503
- $grid-gutter-width: 1.5rem !default;
504
- $grid-row-columns: 6 !default;
505
-
506
- $gutters: $spacers !default;
507
-
508
- // Container padding
509
-
510
- $container-padding-x: $grid-gutter-width * .5 !default;
511
-
512
-
513
- // Components
514
- //
515
- // Define common padding and border radius sizes and more.
516
-
517
- // scss-docs-start border-variables
518
- $border-width: 1px !default;
519
- $border-widths: (
520
- 1: 1px,
521
- 2: 2px,
522
- 3: 3px,
523
- 4: 4px,
524
- 5: 5px
525
- ) !default;
526
-
527
- $border-color: $gray-300 !default;
528
- // scss-docs-end border-variables
529
-
530
- // scss-docs-start border-radius-variables
531
- $border-radius: .25rem !default;
532
- $border-radius-sm: .2rem !default;
533
- $border-radius-lg: .3rem !default;
534
- $border-radius-pill: 50rem !default;
535
- // scss-docs-end border-radius-variables
536
-
537
- // scss-docs-start box-shadow-variables
538
- $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
539
- $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
540
- $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
541
- $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
542
- // scss-docs-end box-shadow-variables
543
-
544
- $component-active-color: $white !default;
545
- $component-active-bg: $primary !default;
546
-
547
- // scss-docs-start caret-variables
548
- $caret-width: .3em !default;
549
- $caret-vertical-align: $caret-width * .85 !default;
550
- $caret-spacing: $caret-width * .85 !default;
551
- // scss-docs-end caret-variables
552
-
553
- $transition-base: all .2s ease-in-out !default;
554
- $transition-fade: opacity .15s linear !default;
555
- // scss-docs-start collapse-transition
556
- $transition-collapse: height .35s ease !default;
557
- $transition-collapse-width: width .35s ease !default;
558
- // scss-docs-end collapse-transition
559
-
560
- // stylelint-disable function-disallowed-list
561
- // scss-docs-start aspect-ratios
562
- $aspect-ratios: (
563
- "1x1": 100%,
564
- "4x3": calc(3 / 4 * 100%),
565
- "16x9": calc(9 / 16 * 100%),
566
- "21x9": calc(9 / 21 * 100%)
567
- ) !default;
568
- // scss-docs-end aspect-ratios
569
- // stylelint-enable function-disallowed-list
570
-
571
- // Typography
572
- //
573
- // Font, line-height, and color for body text, headings, and more.
574
-
575
- // scss-docs-start font-variables
576
- // stylelint-disable value-keyword-case
577
- $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
578
- $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
579
- // stylelint-enable value-keyword-case
580
- $font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
581
- $font-family-code: var(--#{$variable-prefix}font-monospace) !default;
582
-
583
- // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
584
- // $font-size-base affects the font size of the body text
585
- $font-size-root: null !default;
586
- $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
587
- $font-size-sm: $font-size-base * .875 !default;
588
- $font-size-lg: $font-size-base * 1.25 !default;
589
-
590
- $font-weight-lighter: lighter !default;
591
- $font-weight-light: 300 !default;
592
- $font-weight-normal: 400 !default;
593
- $font-weight-bold: 700 !default;
594
- $font-weight-bolder: bolder !default;
595
-
596
- $font-weight-base: $font-weight-normal !default;
597
-
598
- $line-height-base: 1.5 !default;
599
- $line-height-sm: 1.25 !default;
600
- $line-height-lg: 2 !default;
601
-
602
- $h1-font-size: $font-size-base * 2.5 !default;
603
- $h2-font-size: $font-size-base * 2 !default;
604
- $h3-font-size: $font-size-base * 1.75 !default;
605
- $h4-font-size: $font-size-base * 1.5 !default;
606
- $h5-font-size: $font-size-base * 1.25 !default;
607
- $h6-font-size: $font-size-base !default;
608
- // scss-docs-end font-variables
609
-
610
- // scss-docs-start font-sizes
611
- $font-sizes: (
612
- 1: $h1-font-size,
613
- 2: $h2-font-size,
614
- 3: $h3-font-size,
615
- 4: $h4-font-size,
616
- 5: $h5-font-size,
617
- 6: $h6-font-size
618
- ) !default;
619
- // scss-docs-end font-sizes
620
-
621
- // scss-docs-start headings-variables
622
- $headings-margin-bottom: $spacer * .5 !default;
623
- $headings-font-family: null !default;
624
- $headings-font-style: null !default;
625
- $headings-font-weight: 500 !default;
626
- $headings-line-height: 1.2 !default;
627
- $headings-color: null !default;
628
- // scss-docs-end headings-variables
629
-
630
- // scss-docs-start display-headings
631
- $display-font-sizes: (
632
- 1: 5rem,
633
- 2: 4.5rem,
634
- 3: 4rem,
635
- 4: 3.5rem,
636
- 5: 3rem,
637
- 6: 2.5rem
638
- ) !default;
639
-
640
- $display-font-weight: 300 !default;
641
- $display-line-height: $headings-line-height !default;
642
- // scss-docs-end display-headings
643
-
644
- // scss-docs-start type-variables
645
- $lead-font-size: $font-size-base * 1.25 !default;
646
- $lead-font-weight: 300 !default;
647
-
648
- $small-font-size: .875em !default;
649
-
650
- $sub-sup-font-size: .75em !default;
651
-
652
- $text-muted: $gray-600 !default;
653
-
654
- $initialism-font-size: $small-font-size !default;
655
-
656
- $blockquote-margin-y: $spacer !default;
657
- $blockquote-font-size: $font-size-base * 1.25 !default;
658
- $blockquote-footer-color: $gray-600 !default;
659
- $blockquote-footer-font-size: $small-font-size !default;
660
-
661
- $hr-margin-y: $spacer !default;
662
- $hr-color: inherit !default;
663
- $hr-height: $border-width !default;
664
- $hr-opacity: .25 !default;
665
-
666
- $legend-margin-bottom: .5rem !default;
667
- $legend-font-size: 1.5rem !default;
668
- $legend-font-weight: null !default;
669
-
670
- $mark-padding: .2em !default;
671
-
672
- $dt-font-weight: $font-weight-bold !default;
673
-
674
- $nested-kbd-font-weight: $font-weight-bold !default;
675
-
676
- $list-inline-padding: .5rem !default;
677
-
678
- $mark-bg: #fcf8e3 !default;
679
- // scss-docs-end type-variables
680
-
681
-
682
- // Tables
683
- //
684
- // Customizes the `.table` component with basic values, each used across all table variations.
685
-
686
- // scss-docs-start table-variables
687
- $table-cell-padding-y: .5rem !default;
688
- $table-cell-padding-x: .5rem !default;
689
- $table-cell-padding-y-sm: .25rem !default;
690
- $table-cell-padding-x-sm: .25rem !default;
691
-
692
- $table-cell-vertical-align: top !default;
693
-
694
- $table-color: $body-color !default;
695
- $table-bg: transparent !default;
696
- $table-accent-bg: transparent !default;
697
-
698
- $table-th-font-weight: null !default;
699
-
700
- $table-striped-color: $table-color !default;
701
- $table-striped-bg-factor: .05 !default;
702
- $table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
703
-
704
- $table-active-color: $table-color !default;
705
- $table-active-bg-factor: .1 !default;
706
- $table-active-bg: rgba($black, $table-active-bg-factor) !default;
707
-
708
- $table-hover-color: $table-color !default;
709
- $table-hover-bg-factor: .075 !default;
710
- $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
711
-
712
- $table-border-factor: .1 !default;
713
- $table-border-width: $border-width !default;
714
- $table-border-color: $border-color !default;
715
-
716
- $table-striped-order: odd !default;
717
-
718
- $table-group-separator-color: currentColor !default;
719
-
720
- $table-caption-color: $text-muted !default;
721
-
722
- $table-bg-scale: -80% !default;
723
- // scss-docs-end table-variables
724
-
725
- // scss-docs-start table-loop
726
- $table-variants: (
727
- "primary": shift-color($primary, $table-bg-scale),
728
- "secondary": shift-color($secondary, $table-bg-scale),
729
- "success": shift-color($success, $table-bg-scale),
730
- "info": shift-color($info, $table-bg-scale),
731
- "warning": shift-color($warning, $table-bg-scale),
732
- "danger": shift-color($danger, $table-bg-scale),
733
- "light": $light,
734
- "dark": $dark,
735
- ) !default;
736
- // scss-docs-end table-loop
737
-
738
-
739
- // Buttons + Forms
740
- //
741
- // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
742
-
743
- // scss-docs-start input-btn-variables
744
- $input-btn-padding-y: .375rem !default;
745
- $input-btn-padding-x: .75rem !default;
746
- $input-btn-font-family: null !default;
747
- $input-btn-font-size: $font-size-base !default;
748
- $input-btn-line-height: $line-height-base !default;
749
-
750
- $input-btn-focus-width: .25rem !default;
751
- $input-btn-focus-color-opacity: .25 !default;
752
- $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
753
- $input-btn-focus-blur: 0 !default;
754
- $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
755
-
756
- $input-btn-padding-y-sm: .25rem !default;
757
- $input-btn-padding-x-sm: .5rem !default;
758
- $input-btn-font-size-sm: $font-size-sm !default;
759
-
760
- $input-btn-padding-y-lg: .5rem !default;
761
- $input-btn-padding-x-lg: 1rem !default;
762
- $input-btn-font-size-lg: $font-size-lg !default;
763
-
764
- $input-btn-border-width: $border-width !default;
765
- // scss-docs-end input-btn-variables
766
-
767
-
768
- // Buttons
769
- //
770
- // For each of Bootstrap's buttons, define text, background, and border color.
771
-
772
- // scss-docs-start btn-variables
773
- $btn-padding-y: $input-btn-padding-y !default;
774
- $btn-padding-x: $input-btn-padding-x !default;
775
- $btn-font-family: $input-btn-font-family !default;
776
- $btn-font-size: $input-btn-font-size !default;
777
- $btn-line-height: $input-btn-line-height !default;
778
- $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
779
-
780
- $btn-padding-y-sm: $input-btn-padding-y-sm !default;
781
- $btn-padding-x-sm: $input-btn-padding-x-sm !default;
782
- $btn-font-size-sm: $input-btn-font-size-sm !default;
783
-
784
- $btn-padding-y-lg: $input-btn-padding-y-lg !default;
785
- $btn-padding-x-lg: $input-btn-padding-x-lg !default;
786
- $btn-font-size-lg: $input-btn-font-size-lg !default;
787
-
788
- $btn-border-width: $input-btn-border-width !default;
789
-
790
- $btn-font-weight: $font-weight-normal !default;
791
- $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
792
- $btn-focus-width: $input-btn-focus-width !default;
793
- $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
794
- $btn-disabled-opacity: .65 !default;
795
- $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
796
-
797
- $btn-link-color: $link-color !default;
798
- $btn-link-hover-color: $link-hover-color !default;
799
- $btn-link-disabled-color: $gray-600 !default;
800
-
801
- // Allows for customizing button radius independently from global border radius
802
- $btn-border-radius: $border-radius !default;
803
- $btn-border-radius-sm: $border-radius-sm !default;
804
- $btn-border-radius-lg: $border-radius-lg !default;
805
-
806
- $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;
807
-
808
- $btn-hover-bg-shade-amount: 15% !default;
809
- $btn-hover-bg-tint-amount: 15% !default;
810
- $btn-hover-border-shade-amount: 20% !default;
811
- $btn-hover-border-tint-amount: 10% !default;
812
- $btn-active-bg-shade-amount: 20% !default;
813
- $btn-active-bg-tint-amount: 20% !default;
814
- $btn-active-border-shade-amount: 25% !default;
815
- $btn-active-border-tint-amount: 10% !default;
816
- // scss-docs-end btn-variables
817
-
818
-
819
- // Forms
820
-
821
- // scss-docs-start form-text-variables
822
- $form-text-margin-top: .25rem !default;
823
- $form-text-font-size: $small-font-size !default;
824
- $form-text-font-style: null !default;
825
- $form-text-font-weight: null !default;
826
- $form-text-color: $text-muted !default;
827
- // scss-docs-end form-text-variables
828
-
829
- // scss-docs-start form-label-variables
830
- $form-label-margin-bottom: .5rem !default;
831
- $form-label-font-size: null !default;
832
- $form-label-font-style: null !default;
833
- $form-label-font-weight: null !default;
834
- $form-label-color: null !default;
835
- // scss-docs-end form-label-variables
836
-
837
- // scss-docs-start form-input-variables
838
- $input-padding-y: $input-btn-padding-y !default;
839
- $input-padding-x: $input-btn-padding-x !default;
840
- $input-font-family: $input-btn-font-family !default;
841
- $input-font-size: $input-btn-font-size !default;
842
- $input-font-weight: $font-weight-base !default;
843
- $input-line-height: $input-btn-line-height !default;
844
-
845
- $input-padding-y-sm: $input-btn-padding-y-sm !default;
846
- $input-padding-x-sm: $input-btn-padding-x-sm !default;
847
- $input-font-size-sm: $input-btn-font-size-sm !default;
848
-
849
- $input-padding-y-lg: $input-btn-padding-y-lg !default;
850
- $input-padding-x-lg: $input-btn-padding-x-lg !default;
851
- $input-font-size-lg: $input-btn-font-size-lg !default;
852
-
853
- $input-bg: $body-bg !default;
854
- $input-disabled-bg: $gray-200 !default;
855
- $input-disabled-border-color: null !default;
856
-
857
- $input-color: $body-color !default;
858
- $input-border-color: $gray-400 !default;
859
- $input-border-width: $input-btn-border-width !default;
860
- $input-box-shadow: $box-shadow-inset !default;
861
-
862
- $input-border-radius: $border-radius !default;
863
- $input-border-radius-sm: $border-radius-sm !default;
864
- $input-border-radius-lg: $border-radius-lg !default;
865
-
866
- $input-focus-bg: $input-bg !default;
867
- $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
868
- $input-focus-color: $input-color !default;
869
- $input-focus-width: $input-btn-focus-width !default;
870
- $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
871
-
872
- $input-placeholder-color: $gray-600 !default;
873
- $input-plaintext-color: $body-color !default;
874
-
875
- $input-height-border: $input-border-width * 2 !default;
876
-
877
- $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
878
- $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
879
- $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
880
-
881
- $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
882
- $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
883
- $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
884
-
885
- $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
886
-
887
- $form-color-width: 3rem !default;
888
- // scss-docs-end form-input-variables
889
-
890
- // scss-docs-start form-check-variables
891
- $form-check-input-width: 1em !default;
892
- $form-check-min-height: $font-size-base * $line-height-base !default;
893
- $form-check-padding-start: $form-check-input-width + .5em !default;
894
- $form-check-margin-bottom: .125rem !default;
895
- $form-check-label-color: null !default;
896
- $form-check-label-cursor: null !default;
897
- $form-check-transition: null !default;
898
-
899
- $form-check-input-active-filter: brightness(90%) !default;
900
-
901
- $form-check-input-bg: $input-bg !default;
902
- $form-check-input-border: 1px solid rgba($black, .25) !default;
903
- $form-check-input-border-radius: .25em !default;
904
- $form-check-radio-border-radius: 50% !default;
905
- $form-check-input-focus-border: $input-focus-border-color !default;
906
- $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
907
-
908
- $form-check-input-checked-color: $component-active-color !default;
909
- $form-check-input-checked-bg-color: $component-active-bg !default;
910
- $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
911
- $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
912
- $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
913
-
914
- $form-check-input-indeterminate-color: $component-active-color !default;
915
- $form-check-input-indeterminate-bg-color: $component-active-bg !default;
916
- $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
917
- $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
918
-
919
- $form-check-input-disabled-opacity: .5 !default;
920
- $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
921
- $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
922
-
923
- $form-check-inline-margin-end: 1rem !default;
924
- // scss-docs-end form-check-variables
925
-
926
- // scss-docs-start form-switch-variables
927
- $form-switch-color: rgba(0, 0, 0, .25) !default;
928
- $form-switch-width: 2em !default;
929
- $form-switch-padding-start: $form-switch-width + .5em !default;
930
- $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
931
- $form-switch-border-radius: $form-switch-width !default;
932
- $form-switch-transition: background-position .15s ease-in-out !default;
933
-
934
- $form-switch-focus-color: $input-focus-border-color !default;
935
- $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
936
-
937
- $form-switch-checked-color: $component-active-color !default;
938
- $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
939
- $form-switch-checked-bg-position: right center !default;
940
- // scss-docs-end form-switch-variables
941
-
942
- // scss-docs-start input-group-variables
943
- $input-group-addon-padding-y: $input-padding-y !default;
944
- $input-group-addon-padding-x: $input-padding-x !default;
945
- $input-group-addon-font-weight: $input-font-weight !default;
946
- $input-group-addon-color: $input-color !default;
947
- $input-group-addon-bg: $gray-200 !default;
948
- $input-group-addon-border-color: $input-border-color !default;
949
- // scss-docs-end input-group-variables
950
-
951
- // scss-docs-start form-select-variables
952
- $form-select-padding-y: $input-padding-y !default;
953
- $form-select-padding-x: $input-padding-x !default;
954
- $form-select-font-family: $input-font-family !default;
955
- $form-select-font-size: $input-font-size !default;
956
- $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
957
- $form-select-font-weight: $input-font-weight !default;
958
- $form-select-line-height: $input-line-height !default;
959
- $form-select-color: $input-color !default;
960
- $form-select-bg: $input-bg !default;
961
- $form-select-disabled-color: null !default;
962
- $form-select-disabled-bg: $gray-200 !default;
963
- $form-select-disabled-border-color: $input-disabled-border-color !default;
964
- $form-select-bg-position: right $form-select-padding-x center !default;
965
- $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
966
- $form-select-indicator-color: $gray-800 !default;
967
- $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
968
-
969
- $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
970
- $form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
971
- $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
972
-
973
- $form-select-border-width: $input-border-width !default;
974
- $form-select-border-color: $input-border-color !default;
975
- $form-select-border-radius: $border-radius !default;
976
- $form-select-box-shadow: $box-shadow-inset !default;
977
-
978
- $form-select-focus-border-color: $input-focus-border-color !default;
979
- $form-select-focus-width: $input-focus-width !default;
980
- $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
981
-
982
- $form-select-padding-y-sm: $input-padding-y-sm !default;
983
- $form-select-padding-x-sm: $input-padding-x-sm !default;
984
- $form-select-font-size-sm: $input-font-size-sm !default;
985
-
986
- $form-select-padding-y-lg: $input-padding-y-lg !default;
987
- $form-select-padding-x-lg: $input-padding-x-lg !default;
988
- $form-select-font-size-lg: $input-font-size-lg !default;
989
-
990
- $form-select-transition: $input-transition !default;
991
- // scss-docs-end form-select-variables
992
-
993
- // scss-docs-start form-range-variables
994
- $form-range-track-width: 100% !default;
995
- $form-range-track-height: .5rem !default;
996
- $form-range-track-cursor: pointer !default;
997
- $form-range-track-bg: $gray-300 !default;
998
- $form-range-track-border-radius: 1rem !default;
999
- $form-range-track-box-shadow: $box-shadow-inset !default;
1000
-
1001
- $form-range-thumb-width: 1rem !default;
1002
- $form-range-thumb-height: $form-range-thumb-width !default;
1003
- $form-range-thumb-bg: $component-active-bg !default;
1004
- $form-range-thumb-border: 0 !default;
1005
- $form-range-thumb-border-radius: 1rem !default;
1006
- $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
1007
- $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
1008
- $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
1009
- $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
1010
- $form-range-thumb-disabled-bg: $gray-500 !default;
1011
- $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
1012
- // scss-docs-end form-range-variables
1013
-
1014
- // scss-docs-start form-file-variables
1015
- $form-file-button-color: $input-color !default;
1016
- $form-file-button-bg: $input-group-addon-bg !default;
1017
- $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
1018
- // scss-docs-end form-file-variables
1019
-
1020
- // scss-docs-start form-floating-variables
1021
- $form-floating-height: add(3.5rem, $input-height-border) !default;
1022
- $form-floating-line-height: 1.25 !default;
1023
- $form-floating-padding-x: $input-padding-x !default;
1024
- $form-floating-padding-y: 1rem !default;
1025
- $form-floating-input-padding-t: 1.625rem !default;
1026
- $form-floating-input-padding-b: .625rem !default;
1027
- $form-floating-label-opacity: .65 !default;
1028
- $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1029
- $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1030
- // scss-docs-end form-floating-variables
1031
-
1032
- // Form validation
1033
-
1034
- // scss-docs-start form-feedback-variables
1035
- $form-feedback-margin-top: $form-text-margin-top !default;
1036
- $form-feedback-font-size: $form-text-font-size !default;
1037
- $form-feedback-font-style: $form-text-font-style !default;
1038
- $form-feedback-valid-color: $success !default;
1039
- $form-feedback-invalid-color: $danger !default;
1040
-
1041
- $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1042
- $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path 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'/></svg>") !default;
1043
- $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1044
- $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1045
- // scss-docs-end form-feedback-variables
1046
-
1047
- // scss-docs-start form-validation-states
1048
- $form-validation-states: (
1049
- "valid": (
1050
- "color": $form-feedback-valid-color,
1051
- "icon": $form-feedback-icon-valid
1052
- ),
1053
- "invalid": (
1054
- "color": $form-feedback-invalid-color,
1055
- "icon": $form-feedback-icon-invalid
1056
- )
1057
- ) !default;
1058
- // scss-docs-end form-validation-states
1059
-
1060
- // Z-index master list
1061
- //
1062
- // Warning: Avoid customizing these values. They're used for a bird's eye view
1063
- // of components dependent on the z-axis and are designed to all work together.
1064
-
1065
- // scss-docs-start zindex-stack
1066
- $zindex-dropdown: 1000 !default;
1067
- $zindex-sticky: 1020 !default;
1068
- $zindex-fixed: 1030 !default;
1069
- $zindex-offcanvas-backdrop: 1040 !default;
1070
- $zindex-offcanvas: 1045 !default;
1071
- $zindex-modal-backdrop: 1050 !default;
1072
- $zindex-modal: 1055 !default;
1073
- $zindex-popover: 1070 !default;
1074
- $zindex-tooltip: 1080 !default;
1075
- // scss-docs-end zindex-stack
1076
-
1077
-
1078
- // Navs
1079
-
1080
- // scss-docs-start nav-variables
1081
- $nav-link-padding-y: .5rem !default;
1082
- $nav-link-padding-x: 1rem !default;
1083
- $nav-link-font-size: null !default;
1084
- $nav-link-font-weight: null !default;
1085
- $nav-link-color: $link-color !default;
1086
- $nav-link-hover-color: $link-hover-color !default;
1087
- $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1088
- $nav-link-disabled-color: $gray-600 !default;
1089
-
1090
- $nav-tabs-border-color: $gray-300 !default;
1091
- $nav-tabs-border-width: $border-width !default;
1092
- $nav-tabs-border-radius: $border-radius !default;
1093
- $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
1094
- $nav-tabs-link-active-color: $gray-700 !default;
1095
- $nav-tabs-link-active-bg: $body-bg !default;
1096
- $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
1097
-
1098
- $nav-pills-border-radius: $border-radius !default;
1099
- $nav-pills-link-active-color: $component-active-color !default;
1100
- $nav-pills-link-active-bg: $component-active-bg !default;
1101
- // scss-docs-end nav-variables
1102
-
1103
-
1104
- // Navbar
1105
-
1106
- // scss-docs-start navbar-variables
1107
- $navbar-padding-y: $spacer * .5 !default;
1108
- $navbar-padding-x: null !default;
1109
-
1110
- $navbar-nav-link-padding-x: .5rem !default;
1111
-
1112
- $navbar-brand-font-size: $font-size-lg !default;
1113
- // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
1114
- $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
1115
- $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
1116
- $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
1117
- $navbar-brand-margin-end: 1rem !default;
1118
-
1119
- $navbar-toggler-padding-y: .25rem !default;
1120
- $navbar-toggler-padding-x: .75rem !default;
1121
- $navbar-toggler-font-size: $font-size-lg !default;
1122
- $navbar-toggler-border-radius: $btn-border-radius !default;
1123
- $navbar-toggler-focus-width: $btn-focus-width !default;
1124
- $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1125
- // scss-docs-end navbar-variables
1126
-
1127
- // scss-docs-start navbar-theme-variables
1128
- $navbar-dark-color: rgba($white, .55) !default;
1129
- $navbar-dark-hover-color: rgba($white, .75) !default;
1130
- $navbar-dark-active-color: $white !default;
1131
- $navbar-dark-disabled-color: rgba($white, .25) !default;
1132
- $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1133
- $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1134
-
1135
- $navbar-light-color: rgba($black, .55) !default;
1136
- $navbar-light-hover-color: rgba($black, .7) !default;
1137
- $navbar-light-active-color: rgba($black, .9) !default;
1138
- $navbar-light-disabled-color: rgba($black, .3) !default;
1139
- $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1140
- $navbar-light-toggler-border-color: rgba($black, .1) !default;
1141
-
1142
- $navbar-light-brand-color: $navbar-light-active-color !default;
1143
- $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1144
- $navbar-dark-brand-color: $navbar-dark-active-color !default;
1145
- $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1146
- // scss-docs-end navbar-theme-variables
1147
-
1148
-
1149
- // Dropdowns
1150
- //
1151
- // Dropdown menu container and contents.
1152
-
1153
- // scss-docs-start dropdown-variables
1154
- $dropdown-min-width: 10rem !default;
1155
- $dropdown-padding-x: 0 !default;
1156
- $dropdown-padding-y: .5rem !default;
1157
- $dropdown-spacer: .125rem !default;
1158
- $dropdown-font-size: $font-size-base !default;
1159
- $dropdown-color: $body-color !default;
1160
- $dropdown-bg: $white !default;
1161
- $dropdown-border-color: rgba($black, .15) !default;
1162
- $dropdown-border-radius: $border-radius !default;
1163
- $dropdown-border-width: $border-width !default;
1164
- $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1165
- $dropdown-divider-bg: $dropdown-border-color !default;
1166
- $dropdown-divider-margin-y: $spacer * .5 !default;
1167
- $dropdown-box-shadow: $box-shadow !default;
1168
-
1169
- $dropdown-link-color: $gray-900 !default;
1170
- $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1171
- $dropdown-link-hover-bg: $gray-200 !default;
1172
-
1173
- $dropdown-link-active-color: $component-active-color !default;
1174
- $dropdown-link-active-bg: $component-active-bg !default;
1175
-
1176
- $dropdown-link-disabled-color: $gray-500 !default;
1177
-
1178
- $dropdown-item-padding-y: $spacer * .25 !default;
1179
- $dropdown-item-padding-x: $spacer !default;
1180
-
1181
- $dropdown-header-color: $gray-600 !default;
1182
- $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
1183
- // scss-docs-end dropdown-variables
1184
-
1185
- // scss-docs-start dropdown-dark-variables
1186
- $dropdown-dark-color: $gray-300 !default;
1187
- $dropdown-dark-bg: $gray-800 !default;
1188
- $dropdown-dark-border-color: $dropdown-border-color !default;
1189
- $dropdown-dark-divider-bg: $dropdown-divider-bg !default;
1190
- $dropdown-dark-box-shadow: null !default;
1191
- $dropdown-dark-link-color: $dropdown-dark-color !default;
1192
- $dropdown-dark-link-hover-color: $white !default;
1193
- $dropdown-dark-link-hover-bg: rgba($white, .15) !default;
1194
- $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
1195
- $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
1196
- $dropdown-dark-link-disabled-color: $gray-500 !default;
1197
- $dropdown-dark-header-color: $gray-500 !default;
1198
- // scss-docs-end dropdown-dark-variables
1199
-
1200
-
1201
- // Pagination
1202
-
1203
- // scss-docs-start pagination-variables
1204
- $pagination-padding-y: .375rem !default;
1205
- $pagination-padding-x: .75rem !default;
1206
- $pagination-padding-y-sm: .25rem !default;
1207
- $pagination-padding-x-sm: .5rem !default;
1208
- $pagination-padding-y-lg: .75rem !default;
1209
- $pagination-padding-x-lg: 1.5rem !default;
1210
-
1211
- $pagination-color: $link-color !default;
1212
- $pagination-bg: $white !default;
1213
- $pagination-border-width: $border-width !default;
1214
- $pagination-border-radius: $border-radius !default;
1215
- $pagination-margin-start: -$pagination-border-width !default;
1216
- $pagination-border-color: $gray-300 !default;
1217
-
1218
- $pagination-focus-color: $link-hover-color !default;
1219
- $pagination-focus-bg: $gray-200 !default;
1220
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1221
- $pagination-focus-outline: 0 !default;
1222
-
1223
- $pagination-hover-color: $link-hover-color !default;
1224
- $pagination-hover-bg: $gray-200 !default;
1225
- $pagination-hover-border-color: $gray-300 !default;
1226
-
1227
- $pagination-active-color: $component-active-color !default;
1228
- $pagination-active-bg: $component-active-bg !default;
1229
- $pagination-active-border-color: $pagination-active-bg !default;
1230
-
1231
- $pagination-disabled-color: $gray-600 !default;
1232
- $pagination-disabled-bg: $white !default;
1233
- $pagination-disabled-border-color: $gray-300 !default;
1234
-
1235
- $pagination-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;
1236
-
1237
- $pagination-border-radius-sm: $border-radius-sm !default;
1238
- $pagination-border-radius-lg: $border-radius-lg !default;
1239
- // scss-docs-end pagination-variables
1240
-
1241
-
1242
- // Placeholders
1243
-
1244
- // scss-docs-start placeholders
1245
- $placeholder-opacity-max: .5 !default;
1246
- $placeholder-opacity-min: .2 !default;
1247
- // scss-docs-end placeholders
1248
-
1249
- // Cards
1250
-
1251
- // scss-docs-start card-variables
1252
- $card-spacer-y: $spacer !default;
1253
- $card-spacer-x: $spacer !default;
1254
- $card-title-spacer-y: $spacer * .5 !default;
1255
- $card-border-width: $border-width !default;
1256
- $card-border-color: rgba($black, .125) !default;
1257
- $card-border-radius: $border-radius !default;
1258
- $card-box-shadow: null !default;
1259
- $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1260
- $card-cap-padding-y: $card-spacer-y * .5 !default;
1261
- $card-cap-padding-x: $card-spacer-x !default;
1262
- $card-cap-bg: rgba($black, .03) !default;
1263
- $card-cap-color: null !default;
1264
- $card-height: null !default;
1265
- $card-color: null !default;
1266
- $card-bg: $white !default;
1267
- $card-img-overlay-padding: $spacer !default;
1268
- $card-group-margin: $grid-gutter-width * .5 !default;
1269
- // scss-docs-end card-variables
1270
-
1271
- // Accordion
1272
-
1273
- // scss-docs-start accordion-variables
1274
- $accordion-padding-y: 1rem !default;
1275
- $accordion-padding-x: 1.25rem !default;
1276
- $accordion-color: $body-color !default;
1277
- $accordion-bg: $body-bg !default;
1278
- $accordion-border-width: $border-width !default;
1279
- $accordion-border-color: rgba($black, .125) !default;
1280
- $accordion-border-radius: $border-radius !default;
1281
- $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1282
-
1283
- $accordion-body-padding-y: $accordion-padding-y !default;
1284
- $accordion-body-padding-x: $accordion-padding-x !default;
1285
-
1286
- $accordion-button-padding-y: $accordion-padding-y !default;
1287
- $accordion-button-padding-x: $accordion-padding-x !default;
1288
- $accordion-button-color: $accordion-color !default;
1289
- $accordion-button-bg: $accordion-bg !default;
1290
- $accordion-transition: $btn-transition, border-radius .15s ease !default;
1291
- $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1292
- $accordion-button-active-color: shade-color($primary, 10%) !default;
1293
-
1294
- $accordion-button-focus-border-color: $input-focus-border-color !default;
1295
- $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1296
-
1297
- $accordion-icon-width: 1.25rem !default;
1298
- $accordion-icon-color: $accordion-button-color !default;
1299
- $accordion-icon-active-color: $accordion-button-active-color !default;
1300
- $accordion-icon-transition: transform .2s ease-in-out !default;
1301
- $accordion-icon-transform: rotate(-180deg) !default;
1302
-
1303
- $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1304
- $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1305
- // scss-docs-end accordion-variables
1306
-
1307
- // Tooltips
1308
-
1309
- // scss-docs-start tooltip-variables
1310
- $tooltip-font-size: $font-size-sm !default;
1311
- $tooltip-max-width: 200px !default;
1312
- $tooltip-color: $white !default;
1313
- $tooltip-bg: $black !default;
1314
- $tooltip-border-radius: $border-radius !default;
1315
- $tooltip-opacity: .9 !default;
1316
- $tooltip-padding-y: $spacer * .25 !default;
1317
- $tooltip-padding-x: $spacer * .5 !default;
1318
- $tooltip-margin: 0 !default;
1319
-
1320
- $tooltip-arrow-width: .8rem !default;
1321
- $tooltip-arrow-height: .4rem !default;
1322
- $tooltip-arrow-color: $tooltip-bg !default;
1323
- // scss-docs-end tooltip-variables
1324
-
1325
- // Form tooltips must come after regular tooltips
1326
- // scss-docs-start tooltip-feedback-variables
1327
- $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1328
- $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1329
- $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1330
- $form-feedback-tooltip-line-height: null !default;
1331
- $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1332
- $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1333
- // scss-docs-end tooltip-feedback-variables
1334
-
1335
-
1336
- // Popovers
1337
-
1338
- // scss-docs-start popover-variables
1339
- $popover-font-size: $font-size-sm !default;
1340
- $popover-bg: $white !default;
1341
- $popover-max-width: 276px !default;
1342
- $popover-border-width: $border-width !default;
1343
- $popover-border-color: rgba($black, .2) !default;
1344
- $popover-border-radius: $border-radius-lg !default;
1345
- $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
1346
- $popover-box-shadow: $box-shadow !default;
1347
-
1348
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1349
- $popover-header-color: $headings-color !default;
1350
- $popover-header-padding-y: .5rem !default;
1351
- $popover-header-padding-x: $spacer !default;
1352
-
1353
- $popover-body-color: $body-color !default;
1354
- $popover-body-padding-y: $spacer !default;
1355
- $popover-body-padding-x: $spacer !default;
1356
-
1357
- $popover-arrow-width: 1rem !default;
1358
- $popover-arrow-height: .5rem !default;
1359
- $popover-arrow-color: $popover-bg !default;
1360
-
1361
- $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
1362
- // scss-docs-end popover-variables
1363
-
1364
-
1365
- // Toasts
1366
-
1367
- // scss-docs-start toast-variables
1368
- $toast-max-width: 350px !default;
1369
- $toast-padding-x: .75rem !default;
1370
- $toast-padding-y: .5rem !default;
1371
- $toast-font-size: .875rem !default;
1372
- $toast-color: null !default;
1373
- $toast-background-color: rgba($white, .85) !default;
1374
- $toast-border-width: 1px !default;
1375
- $toast-border-color: rgba(0, 0, 0, .1) !default;
1376
- $toast-border-radius: $border-radius !default;
1377
- $toast-box-shadow: $box-shadow !default;
1378
- $toast-spacing: $container-padding-x !default;
1379
-
1380
- $toast-header-color: $gray-600 !default;
1381
- $toast-header-background-color: rgba($white, .85) !default;
1382
- $toast-header-border-color: rgba(0, 0, 0, .05) !default;
1383
- // scss-docs-end toast-variables
1384
-
1385
-
1386
- // Badges
1387
-
1388
- // scss-docs-start badge-variables
1389
- $badge-font-size: .75em !default;
1390
- $badge-font-weight: $font-weight-bold !default;
1391
- $badge-color: $white !default;
1392
- $badge-padding-y: .35em !default;
1393
- $badge-padding-x: .65em !default;
1394
- $badge-border-radius: $border-radius !default;
1395
- // scss-docs-end badge-variables
1396
-
1397
-
1398
- // Modals
1399
-
1400
- // scss-docs-start modal-variables
1401
- $modal-inner-padding: $spacer !default;
1402
-
1403
- $modal-footer-margin-between: .5rem !default;
1404
-
1405
- $modal-dialog-margin: .5rem !default;
1406
- $modal-dialog-margin-y-sm-up: 1.75rem !default;
1407
-
1408
- $modal-title-line-height: $line-height-base !default;
1409
-
1410
- $modal-content-color: null !default;
1411
- $modal-content-bg: $white !default;
1412
- $modal-content-border-color: rgba($black, .2) !default;
1413
- $modal-content-border-width: $border-width !default;
1414
- $modal-content-border-radius: $border-radius-lg !default;
1415
- $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1416
- $modal-content-box-shadow-xs: $box-shadow-sm !default;
1417
- $modal-content-box-shadow-sm-up: $box-shadow !default;
1418
-
1419
- $modal-backdrop-bg: $black !default;
1420
- $modal-backdrop-opacity: .5 !default;
1421
- $modal-header-border-color: $border-color !default;
1422
- $modal-footer-border-color: $modal-header-border-color !default;
1423
- $modal-header-border-width: $modal-content-border-width !default;
1424
- $modal-footer-border-width: $modal-header-border-width !default;
1425
- $modal-header-padding-y: $modal-inner-padding !default;
1426
- $modal-header-padding-x: $modal-inner-padding !default;
1427
- $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1428
-
1429
- $modal-sm: 300px !default;
1430
- $modal-md: 500px !default;
1431
- $modal-lg: 800px !default;
1432
- $modal-xl: 1140px !default;
1433
-
1434
- $modal-fade-transform: translate(0, -50px) !default;
1435
- $modal-show-transform: none !default;
1436
- $modal-transition: transform .3s ease-out !default;
1437
- $modal-scale-transform: scale(1.02) !default;
1438
- // scss-docs-end modal-variables
1439
-
1440
-
1441
- // Alerts
1442
- //
1443
- // Define alert colors, border radius, and padding.
1444
-
1445
- // scss-docs-start alert-variables
1446
- $alert-padding-y: $spacer !default;
1447
- $alert-padding-x: $spacer !default;
1448
- $alert-margin-bottom: 1rem !default;
1449
- $alert-border-radius: $border-radius !default;
1450
- $alert-link-font-weight: $font-weight-bold !default;
1451
- $alert-border-width: $border-width !default;
1452
- $alert-bg-scale: -80% !default;
1453
- $alert-border-scale: -70% !default;
1454
- $alert-color-scale: 40% !default;
1455
- $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1456
- // scss-docs-end alert-variables
1457
-
1458
-
1459
- // Progress bars
1460
-
1461
- // scss-docs-start progress-variables
1462
- $progress-height: 1rem !default;
1463
- $progress-font-size: $font-size-base * .75 !default;
1464
- $progress-bg: $gray-200 !default;
1465
- $progress-border-radius: $border-radius !default;
1466
- $progress-box-shadow: $box-shadow-inset !default;
1467
- $progress-bar-color: $white !default;
1468
- $progress-bar-bg: $primary !default;
1469
- $progress-bar-animation-timing: 1s linear infinite !default;
1470
- $progress-bar-transition: width .6s ease !default;
1471
- // scss-docs-end progress-variables
1472
-
1473
-
1474
- // List group
1475
-
1476
- // scss-docs-start list-group-variables
1477
- $list-group-color: $gray-900 !default;
1478
- $list-group-bg: $white !default;
1479
- $list-group-border-color: rgba($black, .125) !default;
1480
- $list-group-border-width: $border-width !default;
1481
- $list-group-border-radius: $border-radius !default;
1482
-
1483
- $list-group-item-padding-y: $spacer * .5 !default;
1484
- $list-group-item-padding-x: $spacer !default;
1485
- $list-group-item-bg-scale: -80% !default;
1486
- $list-group-item-color-scale: 40% !default;
1487
-
1488
- $list-group-hover-bg: $gray-100 !default;
1489
- $list-group-active-color: $component-active-color !default;
1490
- $list-group-active-bg: $component-active-bg !default;
1491
- $list-group-active-border-color: $list-group-active-bg !default;
1492
-
1493
- $list-group-disabled-color: $gray-600 !default;
1494
- $list-group-disabled-bg: $list-group-bg !default;
1495
-
1496
- $list-group-action-color: $gray-700 !default;
1497
- $list-group-action-hover-color: $list-group-action-color !default;
1498
-
1499
- $list-group-action-active-color: $body-color !default;
1500
- $list-group-action-active-bg: $gray-200 !default;
1501
- // scss-docs-end list-group-variables
1502
-
1503
-
1504
- // Image thumbnails
1505
-
1506
- // scss-docs-start thumbnail-variables
1507
- $thumbnail-padding: .25rem !default;
1508
- $thumbnail-bg: $body-bg !default;
1509
- $thumbnail-border-width: $border-width !default;
1510
- $thumbnail-border-color: $gray-300 !default;
1511
- $thumbnail-border-radius: $border-radius !default;
1512
- $thumbnail-box-shadow: $box-shadow-sm !default;
1513
- // scss-docs-end thumbnail-variables
1514
-
1515
-
1516
- // Figures
1517
-
1518
- // scss-docs-start figure-variables
1519
- $figure-caption-font-size: $small-font-size !default;
1520
- $figure-caption-color: $gray-600 !default;
1521
- // scss-docs-end figure-variables
1522
-
1523
-
1524
- // Breadcrumbs
1525
-
1526
- // scss-docs-start breadcrumb-variables
1527
- $breadcrumb-font-size: null !default;
1528
- $breadcrumb-padding-y: 0 !default;
1529
- $breadcrumb-padding-x: 0 !default;
1530
- $breadcrumb-item-padding-x: .5rem !default;
1531
- $breadcrumb-margin-bottom: 1rem !default;
1532
- $breadcrumb-bg: null !default;
1533
- $breadcrumb-divider-color: $gray-600 !default;
1534
- $breadcrumb-active-color: $gray-600 !default;
1535
- $breadcrumb-divider: quote("/") !default;
1536
- $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1537
- $breadcrumb-border-radius: null !default;
1538
- // scss-docs-end breadcrumb-variables
1539
-
1540
- // Carousel
1541
-
1542
- // scss-docs-start carousel-variables
1543
- $carousel-control-color: $white !default;
1544
- $carousel-control-width: 15% !default;
1545
- $carousel-control-opacity: .5 !default;
1546
- $carousel-control-hover-opacity: .9 !default;
1547
- $carousel-control-transition: opacity .15s ease !default;
1548
-
1549
- $carousel-indicator-width: 30px !default;
1550
- $carousel-indicator-height: 3px !default;
1551
- $carousel-indicator-hit-area-height: 10px !default;
1552
- $carousel-indicator-spacer: 3px !default;
1553
- $carousel-indicator-opacity: .5 !default;
1554
- $carousel-indicator-active-bg: $white !default;
1555
- $carousel-indicator-active-opacity: 1 !default;
1556
- $carousel-indicator-transition: opacity .6s ease !default;
1557
-
1558
- $carousel-caption-width: 70% !default;
1559
- $carousel-caption-color: $white !default;
1560
- $carousel-caption-padding-y: 1.25rem !default;
1561
- $carousel-caption-spacer: 1.25rem !default;
1562
-
1563
- $carousel-control-icon-width: 2rem !default;
1564
-
1565
- $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
1566
- $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
1567
-
1568
- $carousel-transition-duration: .6s !default;
1569
- $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1570
-
1571
- $carousel-dark-indicator-active-bg: $black !default;
1572
- $carousel-dark-caption-color: $black !default;
1573
- $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1574
- // scss-docs-end carousel-variables
1575
-
1576
-
1577
- // Spinners
1578
-
1579
- // scss-docs-start spinner-variables
1580
- $spinner-width: 2rem !default;
1581
- $spinner-height: $spinner-width !default;
1582
- $spinner-vertical-align: -.125em !default;
1583
- $spinner-border-width: .25em !default;
1584
- $spinner-animation-speed: .75s !default;
1585
-
1586
- $spinner-width-sm: 1rem !default;
1587
- $spinner-height-sm: $spinner-width-sm !default;
1588
- $spinner-border-width-sm: .2em !default;
1589
- // scss-docs-end spinner-variables
1590
-
1591
-
1592
- // Close
1593
-
1594
- // scss-docs-start close-variables
1595
- $btn-close-width: 1em !default;
1596
- $btn-close-height: $btn-close-width !default;
1597
- $btn-close-padding-x: .25em !default;
1598
- $btn-close-padding-y: $btn-close-padding-x !default;
1599
- $btn-close-color: $black !default;
1600
- $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
1601
- $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1602
- $btn-close-opacity: .5 !default;
1603
- $btn-close-hover-opacity: .75 !default;
1604
- $btn-close-focus-opacity: 1 !default;
1605
- $btn-close-disabled-opacity: .25 !default;
1606
- $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1607
- // scss-docs-end close-variables
1608
-
1609
-
1610
- // Offcanvas
1611
-
1612
- // scss-docs-start offcanvas-variables
1613
- $offcanvas-padding-y: $modal-inner-padding !default;
1614
- $offcanvas-padding-x: $modal-inner-padding !default;
1615
- $offcanvas-horizontal-width: 400px !default;
1616
- $offcanvas-vertical-height: 30vh !default;
1617
- $offcanvas-transition-duration: .3s !default;
1618
- $offcanvas-border-color: $modal-content-border-color !default;
1619
- $offcanvas-border-width: $modal-content-border-width !default;
1620
- $offcanvas-title-line-height: $modal-title-line-height !default;
1621
- $offcanvas-bg-color: $modal-content-bg !default;
1622
- $offcanvas-color: $modal-content-color !default;
1623
- $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1624
- $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1625
- $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1626
- // scss-docs-end offcanvas-variables
1627
-
1628
- // Code
1629
-
1630
- $code-font-size: $small-font-size !default;
1631
- $code-color: $pink !default;
1632
-
1633
- $kbd-padding-y: .2rem !default;
1634
- $kbd-padding-x: .4rem !default;
1635
- $kbd-font-size: $code-font-size !default;
1636
- $kbd-color: $white !default;
1637
- $kbd-bg: $gray-900 !default;
1638
-
1639
- $pre-color: null !default;
1
+ // Variables
2
+ //
3
+ // Variables should follow the `$component-state-property-size` formula for
4
+ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
5
+
6
+ // Color system
7
+
8
+ // scss-docs-start gray-color-variables
9
+ $white: #fff !default;
10
+ $gray-100: #f8f9fa !default;
11
+ $gray-200: #e9ecef !default;
12
+ $gray-300: #dee2e6 !default;
13
+ $gray-400: #ced4da !default;
14
+ $gray-500: #adb5bd !default;
15
+ $gray-600: #6c757d !default;
16
+ $gray-700: #495057 !default;
17
+ $gray-800: #343a40 !default;
18
+ $gray-900: #212529 !default;
19
+ $black: #000 !default;
20
+ // scss-docs-end gray-color-variables
21
+
22
+ // fusv-disable
23
+ // scss-docs-start gray-colors-map
24
+ $grays: (
25
+ "100": $gray-100,
26
+ "200": $gray-200,
27
+ "300": $gray-300,
28
+ "400": $gray-400,
29
+ "500": $gray-500,
30
+ "600": $gray-600,
31
+ "700": $gray-700,
32
+ "800": $gray-800,
33
+ "900": $gray-900
34
+ ) !default;
35
+ // scss-docs-end gray-colors-map
36
+ // fusv-enable
37
+
38
+ // scss-docs-start color-variables
39
+ $blue: #0d6efd !default;
40
+ $indigo: #6610f2 !default;
41
+ $purple: #6f42c1 !default;
42
+ $pink: #d63384 !default;
43
+ $red: #dc3545 !default;
44
+ $orange: #fd7e14 !default;
45
+ $yellow: #ffc107 !default;
46
+ $green: #198754 !default;
47
+ $teal: #20c997 !default;
48
+ $cyan: #0dcaf0 !default;
49
+ // scss-docs-end color-variables
50
+
51
+ // scss-docs-start colors-map
52
+ $colors: (
53
+ "blue": $blue,
54
+ "indigo": $indigo,
55
+ "purple": $purple,
56
+ "pink": $pink,
57
+ "red": $red,
58
+ "orange": $orange,
59
+ "yellow": $yellow,
60
+ "green": $green,
61
+ "teal": $teal,
62
+ "cyan": $cyan,
63
+ "black": $black,
64
+ "white": $white,
65
+ "gray": $gray-600,
66
+ "gray-dark": $gray-800
67
+ ) !default;
68
+ // scss-docs-end colors-map
69
+
70
+ // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
71
+ // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
72
+ $min-contrast-ratio: 4.5 !default;
73
+
74
+ // Customize the light and dark text colors for use in our color contrast function.
75
+ $color-contrast-dark: $black !default;
76
+ $color-contrast-light: $white !default;
77
+
78
+ // fusv-disable
79
+ $blue-100: tint-color($blue, 80%) !default;
80
+ $blue-200: tint-color($blue, 60%) !default;
81
+ $blue-300: tint-color($blue, 40%) !default;
82
+ $blue-400: tint-color($blue, 20%) !default;
83
+ $blue-500: $blue !default;
84
+ $blue-600: shade-color($blue, 20%) !default;
85
+ $blue-700: shade-color($blue, 40%) !default;
86
+ $blue-800: shade-color($blue, 60%) !default;
87
+ $blue-900: shade-color($blue, 80%) !default;
88
+
89
+ $indigo-100: tint-color($indigo, 80%) !default;
90
+ $indigo-200: tint-color($indigo, 60%) !default;
91
+ $indigo-300: tint-color($indigo, 40%) !default;
92
+ $indigo-400: tint-color($indigo, 20%) !default;
93
+ $indigo-500: $indigo !default;
94
+ $indigo-600: shade-color($indigo, 20%) !default;
95
+ $indigo-700: shade-color($indigo, 40%) !default;
96
+ $indigo-800: shade-color($indigo, 60%) !default;
97
+ $indigo-900: shade-color($indigo, 80%) !default;
98
+
99
+ $purple-100: tint-color($purple, 80%) !default;
100
+ $purple-200: tint-color($purple, 60%) !default;
101
+ $purple-300: tint-color($purple, 40%) !default;
102
+ $purple-400: tint-color($purple, 20%) !default;
103
+ $purple-500: $purple !default;
104
+ $purple-600: shade-color($purple, 20%) !default;
105
+ $purple-700: shade-color($purple, 40%) !default;
106
+ $purple-800: shade-color($purple, 60%) !default;
107
+ $purple-900: shade-color($purple, 80%) !default;
108
+
109
+ $pink-100: tint-color($pink, 80%) !default;
110
+ $pink-200: tint-color($pink, 60%) !default;
111
+ $pink-300: tint-color($pink, 40%) !default;
112
+ $pink-400: tint-color($pink, 20%) !default;
113
+ $pink-500: $pink !default;
114
+ $pink-600: shade-color($pink, 20%) !default;
115
+ $pink-700: shade-color($pink, 40%) !default;
116
+ $pink-800: shade-color($pink, 60%) !default;
117
+ $pink-900: shade-color($pink, 80%) !default;
118
+
119
+ $red-100: tint-color($red, 80%) !default;
120
+ $red-200: tint-color($red, 60%) !default;
121
+ $red-300: tint-color($red, 40%) !default;
122
+ $red-400: tint-color($red, 20%) !default;
123
+ $red-500: $red !default;
124
+ $red-600: shade-color($red, 20%) !default;
125
+ $red-700: shade-color($red, 40%) !default;
126
+ $red-800: shade-color($red, 60%) !default;
127
+ $red-900: shade-color($red, 80%) !default;
128
+
129
+ $orange-100: tint-color($orange, 80%) !default;
130
+ $orange-200: tint-color($orange, 60%) !default;
131
+ $orange-300: tint-color($orange, 40%) !default;
132
+ $orange-400: tint-color($orange, 20%) !default;
133
+ $orange-500: $orange !default;
134
+ $orange-600: shade-color($orange, 20%) !default;
135
+ $orange-700: shade-color($orange, 40%) !default;
136
+ $orange-800: shade-color($orange, 60%) !default;
137
+ $orange-900: shade-color($orange, 80%) !default;
138
+
139
+ $yellow-100: tint-color($yellow, 80%) !default;
140
+ $yellow-200: tint-color($yellow, 60%) !default;
141
+ $yellow-300: tint-color($yellow, 40%) !default;
142
+ $yellow-400: tint-color($yellow, 20%) !default;
143
+ $yellow-500: $yellow !default;
144
+ $yellow-600: shade-color($yellow, 20%) !default;
145
+ $yellow-700: shade-color($yellow, 40%) !default;
146
+ $yellow-800: shade-color($yellow, 60%) !default;
147
+ $yellow-900: shade-color($yellow, 80%) !default;
148
+
149
+ $green-100: tint-color($green, 80%) !default;
150
+ $green-200: tint-color($green, 60%) !default;
151
+ $green-300: tint-color($green, 40%) !default;
152
+ $green-400: tint-color($green, 20%) !default;
153
+ $green-500: $green !default;
154
+ $green-600: shade-color($green, 20%) !default;
155
+ $green-700: shade-color($green, 40%) !default;
156
+ $green-800: shade-color($green, 60%) !default;
157
+ $green-900: shade-color($green, 80%) !default;
158
+
159
+ $teal-100: tint-color($teal, 80%) !default;
160
+ $teal-200: tint-color($teal, 60%) !default;
161
+ $teal-300: tint-color($teal, 40%) !default;
162
+ $teal-400: tint-color($teal, 20%) !default;
163
+ $teal-500: $teal !default;
164
+ $teal-600: shade-color($teal, 20%) !default;
165
+ $teal-700: shade-color($teal, 40%) !default;
166
+ $teal-800: shade-color($teal, 60%) !default;
167
+ $teal-900: shade-color($teal, 80%) !default;
168
+
169
+ $cyan-100: tint-color($cyan, 80%) !default;
170
+ $cyan-200: tint-color($cyan, 60%) !default;
171
+ $cyan-300: tint-color($cyan, 40%) !default;
172
+ $cyan-400: tint-color($cyan, 20%) !default;
173
+ $cyan-500: $cyan !default;
174
+ $cyan-600: shade-color($cyan, 20%) !default;
175
+ $cyan-700: shade-color($cyan, 40%) !default;
176
+ $cyan-800: shade-color($cyan, 60%) !default;
177
+ $cyan-900: shade-color($cyan, 80%) !default;
178
+
179
+ $blues: (
180
+ "blue-100": $blue-100,
181
+ "blue-200": $blue-200,
182
+ "blue-300": $blue-300,
183
+ "blue-400": $blue-400,
184
+ "blue-500": $blue-500,
185
+ "blue-600": $blue-600,
186
+ "blue-700": $blue-700,
187
+ "blue-800": $blue-800,
188
+ "blue-900": $blue-900
189
+ ) !default;
190
+
191
+ $indigos: (
192
+ "indigo-100": $indigo-100,
193
+ "indigo-200": $indigo-200,
194
+ "indigo-300": $indigo-300,
195
+ "indigo-400": $indigo-400,
196
+ "indigo-500": $indigo-500,
197
+ "indigo-600": $indigo-600,
198
+ "indigo-700": $indigo-700,
199
+ "indigo-800": $indigo-800,
200
+ "indigo-900": $indigo-900
201
+ ) !default;
202
+
203
+ $purples: (
204
+ "purple-100": $purple-100,
205
+ "purple-200": $purple-200,
206
+ "purple-300": $purple-300,
207
+ "purple-400": $purple-400,
208
+ "purple-500": $purple-500,
209
+ "purple-600": $purple-600,
210
+ "purple-700": $purple-700,
211
+ "purple-800": $purple-800,
212
+ "purple-900": $purple-900
213
+ ) !default;
214
+
215
+ $pinks: (
216
+ "pink-100": $pink-100,
217
+ "pink-200": $pink-200,
218
+ "pink-300": $pink-300,
219
+ "pink-400": $pink-400,
220
+ "pink-500": $pink-500,
221
+ "pink-600": $pink-600,
222
+ "pink-700": $pink-700,
223
+ "pink-800": $pink-800,
224
+ "pink-900": $pink-900
225
+ ) !default;
226
+
227
+ $reds: (
228
+ "red-100": $red-100,
229
+ "red-200": $red-200,
230
+ "red-300": $red-300,
231
+ "red-400": $red-400,
232
+ "red-500": $red-500,
233
+ "red-600": $red-600,
234
+ "red-700": $red-700,
235
+ "red-800": $red-800,
236
+ "red-900": $red-900
237
+ ) !default;
238
+
239
+ $oranges: (
240
+ "orange-100": $orange-100,
241
+ "orange-200": $orange-200,
242
+ "orange-300": $orange-300,
243
+ "orange-400": $orange-400,
244
+ "orange-500": $orange-500,
245
+ "orange-600": $orange-600,
246
+ "orange-700": $orange-700,
247
+ "orange-800": $orange-800,
248
+ "orange-900": $orange-900
249
+ ) !default;
250
+
251
+ $yellows: (
252
+ "yellow-100": $yellow-100,
253
+ "yellow-200": $yellow-200,
254
+ "yellow-300": $yellow-300,
255
+ "yellow-400": $yellow-400,
256
+ "yellow-500": $yellow-500,
257
+ "yellow-600": $yellow-600,
258
+ "yellow-700": $yellow-700,
259
+ "yellow-800": $yellow-800,
260
+ "yellow-900": $yellow-900
261
+ ) !default;
262
+
263
+ $greens: (
264
+ "green-100": $green-100,
265
+ "green-200": $green-200,
266
+ "green-300": $green-300,
267
+ "green-400": $green-400,
268
+ "green-500": $green-500,
269
+ "green-600": $green-600,
270
+ "green-700": $green-700,
271
+ "green-800": $green-800,
272
+ "green-900": $green-900
273
+ ) !default;
274
+
275
+ $teals: (
276
+ "teal-100": $teal-100,
277
+ "teal-200": $teal-200,
278
+ "teal-300": $teal-300,
279
+ "teal-400": $teal-400,
280
+ "teal-500": $teal-500,
281
+ "teal-600": $teal-600,
282
+ "teal-700": $teal-700,
283
+ "teal-800": $teal-800,
284
+ "teal-900": $teal-900
285
+ ) !default;
286
+
287
+ $cyans: (
288
+ "cyan-100": $cyan-100,
289
+ "cyan-200": $cyan-200,
290
+ "cyan-300": $cyan-300,
291
+ "cyan-400": $cyan-400,
292
+ "cyan-500": $cyan-500,
293
+ "cyan-600": $cyan-600,
294
+ "cyan-700": $cyan-700,
295
+ "cyan-800": $cyan-800,
296
+ "cyan-900": $cyan-900
297
+ ) !default;
298
+ // fusv-enable
299
+
300
+ // scss-docs-start theme-color-variables
301
+ $primary: $blue !default;
302
+ $secondary: $gray-600 !default;
303
+ $success: $green !default;
304
+ $info: $cyan !default;
305
+ $warning: $yellow !default;
306
+ $danger: $red !default;
307
+ $light: $gray-100 !default;
308
+ $dark: $gray-900 !default;
309
+ // scss-docs-end theme-color-variables
310
+
311
+ // scss-docs-start theme-colors-map
312
+ $theme-colors: (
313
+ "primary": $primary,
314
+ "secondary": $secondary,
315
+ "success": $success,
316
+ "info": $info,
317
+ "warning": $warning,
318
+ "danger": $danger,
319
+ "light": $light,
320
+ "dark": $dark
321
+ ) !default;
322
+ // scss-docs-end theme-colors-map
323
+
324
+ // Characters which are escaped by the escape-svg function
325
+ $escaped-characters: (
326
+ ("<", "%3c"),
327
+ (">", "%3e"),
328
+ ("#", "%23"),
329
+ ("(", "%28"),
330
+ (")", "%29"),
331
+ ) !default;
332
+
333
+ // Options
334
+ //
335
+ // Quickly modify global styling by enabling or disabling optional features.
336
+
337
+ $enable-caret: true !default;
338
+ $enable-rounded: true !default;
339
+ $enable-shadows: false !default;
340
+ $enable-gradients: false !default;
341
+ $enable-transitions: true !default;
342
+ $enable-reduced-motion: true !default;
343
+ $enable-smooth-scroll: true !default;
344
+ $enable-grid-classes: true !default;
345
+ $enable-container-classes: true !default;
346
+ $enable-cssgrid: false !default;
347
+ $enable-button-pointers: true !default;
348
+ $enable-rfs: true !default;
349
+ $enable-validation-icons: true !default;
350
+ $enable-negative-margins: false !default;
351
+ $enable-deprecation-messages: true !default;
352
+ $enable-important-utilities: true !default;
353
+
354
+ // Prefix for :root CSS variables
355
+
356
+ $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
357
+ $prefix: $variable-prefix !default;
358
+
359
+ // Gradient
360
+ //
361
+ // The gradient which is added to components if `$enable-gradients` is `true`
362
+ // This gradient is also added to elements with `.bg-gradient`
363
+ // scss-docs-start variable-gradient
364
+ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
365
+ // scss-docs-end variable-gradient
366
+
367
+ // Spacing
368
+ //
369
+ // Control the default styling of most Bootstrap elements by modifying these
370
+ // variables. Mostly focused on spacing.
371
+ // You can add more entries to the $spacers map, should you need more variation.
372
+
373
+ // scss-docs-start spacer-variables-maps
374
+ $spacer: 1rem !default;
375
+ $spacers: (
376
+ 0: 0,
377
+ 1: $spacer * .25,
378
+ 2: $spacer * .5,
379
+ 3: $spacer,
380
+ 4: $spacer * 1.5,
381
+ 5: $spacer * 3,
382
+ ) !default;
383
+ // scss-docs-end spacer-variables-maps
384
+
385
+ // Position
386
+ //
387
+ // Define the edge positioning anchors of the position utilities.
388
+
389
+ // scss-docs-start position-map
390
+ $position-values: (
391
+ 0: 0,
392
+ 50: 50%,
393
+ 100: 100%
394
+ ) !default;
395
+ // scss-docs-end position-map
396
+
397
+ // Body
398
+ //
399
+ // Settings for the `<body>` element.
400
+
401
+ $body-bg: $white !default;
402
+ $body-color: $gray-900 !default;
403
+ $body-text-align: null !default;
404
+
405
+ // Links
406
+ //
407
+ // Style anchor elements.
408
+
409
+ $link-color: $primary !default;
410
+ $link-decoration: underline !default;
411
+ $link-shade-percentage: 20% !default;
412
+ $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
413
+ $link-hover-decoration: null !default;
414
+
415
+ $stretched-link-pseudo-element: after !default;
416
+ $stretched-link-z-index: 1 !default;
417
+
418
+ // Paragraphs
419
+ //
420
+ // Style p element.
421
+
422
+ $paragraph-margin-bottom: 1rem !default;
423
+
424
+
425
+ // Grid breakpoints
426
+ //
427
+ // Define the minimum dimensions at which your layout will change,
428
+ // adapting to different screen sizes, for use in media queries.
429
+
430
+ // scss-docs-start grid-breakpoints
431
+ $grid-breakpoints: (
432
+ xs: 0,
433
+ sm: 576px,
434
+ md: 768px,
435
+ lg: 992px,
436
+ xl: 1200px,
437
+ xxl: 1400px
438
+ ) !default;
439
+ // scss-docs-end grid-breakpoints
440
+
441
+ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
442
+ @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
443
+
444
+
445
+ // Grid containers
446
+ //
447
+ // Define the maximum width of `.container` for different screen sizes.
448
+
449
+ // scss-docs-start container-max-widths
450
+ $container-max-widths: (
451
+ sm: 540px,
452
+ md: 720px,
453
+ lg: 960px,
454
+ xl: 1140px,
455
+ xxl: 1320px
456
+ ) !default;
457
+ // scss-docs-end container-max-widths
458
+
459
+ @include _assert-ascending($container-max-widths, "$container-max-widths");
460
+
461
+
462
+ // Grid columns
463
+ //
464
+ // Set the number of columns and specify the width of the gutters.
465
+
466
+ $grid-columns: 12 !default;
467
+ $grid-gutter-width: 1.5rem !default;
468
+ $grid-row-columns: 6 !default;
469
+
470
+ // Container padding
471
+
472
+ $container-padding-x: $grid-gutter-width !default;
473
+
474
+
475
+ // Components
476
+ //
477
+ // Define common padding and border radius sizes and more.
478
+
479
+ // scss-docs-start border-variables
480
+ $border-width: 1px !default;
481
+ $border-widths: (
482
+ 1: 1px,
483
+ 2: 2px,
484
+ 3: 3px,
485
+ 4: 4px,
486
+ 5: 5px
487
+ ) !default;
488
+
489
+ $border-style: solid !default;
490
+ $border-color: $gray-300 !default;
491
+ $border-color-translucent: rgba($black, .175) !default;
492
+ // scss-docs-end border-variables
493
+
494
+ // scss-docs-start border-radius-variables
495
+ $border-radius: .375rem !default;
496
+ $border-radius-sm: .25rem !default;
497
+ $border-radius-lg: .5rem !default;
498
+ $border-radius-xl: 1rem !default;
499
+ $border-radius-2xl: 2rem !default;
500
+ $border-radius-pill: 50rem !default;
501
+ // scss-docs-end border-radius-variables
502
+
503
+ // scss-docs-start box-shadow-variables
504
+ $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
505
+ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
506
+ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
507
+ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
508
+ // scss-docs-end box-shadow-variables
509
+
510
+ $component-active-color: $white !default;
511
+ $component-active-bg: $primary !default;
512
+
513
+ // scss-docs-start caret-variables
514
+ $caret-width: .3em !default;
515
+ $caret-vertical-align: $caret-width * .85 !default;
516
+ $caret-spacing: $caret-width * .85 !default;
517
+ // scss-docs-end caret-variables
518
+
519
+ $transition-base: all .2s ease-in-out !default;
520
+ $transition-fade: opacity .15s linear !default;
521
+ // scss-docs-start collapse-transition
522
+ $transition-collapse: height .35s ease !default;
523
+ $transition-collapse-width: width .35s ease !default;
524
+ // scss-docs-end collapse-transition
525
+
526
+ // stylelint-disable function-disallowed-list
527
+ // scss-docs-start aspect-ratios
528
+ $aspect-ratios: (
529
+ "1x1": 100%,
530
+ "4x3": calc(3 / 4 * 100%),
531
+ "16x9": calc(9 / 16 * 100%),
532
+ "21x9": calc(9 / 21 * 100%)
533
+ ) !default;
534
+ // scss-docs-end aspect-ratios
535
+ // stylelint-enable function-disallowed-list
536
+
537
+ // Typography
538
+ //
539
+ // Font, line-height, and color for body text, headings, and more.
540
+
541
+ // scss-docs-start font-variables
542
+ // stylelint-disable value-keyword-case
543
+ $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
544
+ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
545
+ // stylelint-enable value-keyword-case
546
+ $font-family-base: var(--#{$prefix}font-sans-serif) !default;
547
+ $font-family-code: var(--#{$prefix}font-monospace) !default;
548
+
549
+ // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
550
+ // $font-size-base affects the font size of the body text
551
+ $font-size-root: null !default;
552
+ $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
553
+ $font-size-sm: $font-size-base * .875 !default;
554
+ $font-size-lg: $font-size-base * 1.25 !default;
555
+
556
+ $font-weight-lighter: lighter !default;
557
+ $font-weight-light: 300 !default;
558
+ $font-weight-normal: 400 !default;
559
+ $font-weight-semibold: 600 !default;
560
+ $font-weight-bold: 700 !default;
561
+ $font-weight-bolder: bolder !default;
562
+
563
+ $font-weight-base: $font-weight-normal !default;
564
+
565
+ $line-height-base: 1.5 !default;
566
+ $line-height-sm: 1.25 !default;
567
+ $line-height-lg: 2 !default;
568
+
569
+ $h1-font-size: $font-size-base * 2.5 !default;
570
+ $h2-font-size: $font-size-base * 2 !default;
571
+ $h3-font-size: $font-size-base * 1.75 !default;
572
+ $h4-font-size: $font-size-base * 1.5 !default;
573
+ $h5-font-size: $font-size-base * 1.25 !default;
574
+ $h6-font-size: $font-size-base !default;
575
+ // scss-docs-end font-variables
576
+
577
+ // scss-docs-start font-sizes
578
+ $font-sizes: (
579
+ 1: $h1-font-size,
580
+ 2: $h2-font-size,
581
+ 3: $h3-font-size,
582
+ 4: $h4-font-size,
583
+ 5: $h5-font-size,
584
+ 6: $h6-font-size
585
+ ) !default;
586
+ // scss-docs-end font-sizes
587
+
588
+ // scss-docs-start headings-variables
589
+ $headings-margin-bottom: $spacer * .5 !default;
590
+ $headings-font-family: null !default;
591
+ $headings-font-style: null !default;
592
+ $headings-font-weight: 500 !default;
593
+ $headings-line-height: 1.2 !default;
594
+ $headings-color: null !default;
595
+ // scss-docs-end headings-variables
596
+
597
+ // scss-docs-start display-headings
598
+ $display-font-sizes: (
599
+ 1: 5rem,
600
+ 2: 4.5rem,
601
+ 3: 4rem,
602
+ 4: 3.5rem,
603
+ 5: 3rem,
604
+ 6: 2.5rem
605
+ ) !default;
606
+
607
+ $display-font-family: null !default;
608
+ $display-font-style: null !default;
609
+ $display-font-weight: 300 !default;
610
+ $display-line-height: $headings-line-height !default;
611
+ // scss-docs-end display-headings
612
+
613
+ // scss-docs-start type-variables
614
+ $lead-font-size: $font-size-base * 1.25 !default;
615
+ $lead-font-weight: 300 !default;
616
+
617
+ $small-font-size: .875em !default;
618
+
619
+ $sub-sup-font-size: .75em !default;
620
+
621
+ $text-muted: $gray-600 !default;
622
+
623
+ $initialism-font-size: $small-font-size !default;
624
+
625
+ $blockquote-margin-y: $spacer !default;
626
+ $blockquote-font-size: $font-size-base * 1.25 !default;
627
+ $blockquote-footer-color: $gray-600 !default;
628
+ $blockquote-footer-font-size: $small-font-size !default;
629
+
630
+ $hr-margin-y: $spacer !default;
631
+ $hr-color: inherit !default;
632
+
633
+ // fusv-disable
634
+ $hr-bg-color: null !default; // Deprecated in v5.2.0
635
+ $hr-height: null !default; // Deprecated in v5.2.0
636
+ // fusv-enable
637
+
638
+ $hr-border-color: null !default; // Allows for inherited colors
639
+ $hr-border-width: $border-width !default;
640
+ $hr-opacity: .25 !default;
641
+
642
+ $legend-margin-bottom: .5rem !default;
643
+ $legend-font-size: 1.5rem !default;
644
+ $legend-font-weight: null !default;
645
+
646
+ $dt-font-weight: $font-weight-bold !default;
647
+
648
+ $list-inline-padding: .5rem !default;
649
+
650
+ $mark-padding: .1875em !default;
651
+ $mark-bg: $yellow-100 !default;
652
+ // scss-docs-end type-variables
653
+
654
+
655
+ // Tables
656
+ //
657
+ // Customizes the `.table` component with basic values, each used across all table variations.
658
+
659
+ // scss-docs-start table-variables
660
+ $table-cell-padding-y: .5rem !default;
661
+ $table-cell-padding-x: .5rem !default;
662
+ $table-cell-padding-y-sm: .25rem !default;
663
+ $table-cell-padding-x-sm: .25rem !default;
664
+
665
+ $table-cell-vertical-align: top !default;
666
+
667
+ $table-color: var(--#{$prefix}body-color) !default;
668
+ $table-bg: transparent !default;
669
+ $table-accent-bg: transparent !default;
670
+
671
+ $table-th-font-weight: null !default;
672
+
673
+ $table-striped-color: $table-color !default;
674
+ $table-striped-bg-factor: .05 !default;
675
+ $table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
676
+
677
+ $table-active-color: $table-color !default;
678
+ $table-active-bg-factor: .1 !default;
679
+ $table-active-bg: rgba($black, $table-active-bg-factor) !default;
680
+
681
+ $table-hover-color: $table-color !default;
682
+ $table-hover-bg-factor: .075 !default;
683
+ $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
684
+
685
+ $table-border-factor: .1 !default;
686
+ $table-border-width: $border-width !default;
687
+ $table-border-color: var(--#{$prefix}border-color) !default;
688
+
689
+ $table-striped-order: odd !default;
690
+ $table-striped-columns-order: even !default;
691
+
692
+ $table-group-separator-color: currentcolor !default;
693
+
694
+ $table-caption-color: $text-muted !default;
695
+
696
+ $table-bg-scale: -80% !default;
697
+ // scss-docs-end table-variables
698
+
699
+ // scss-docs-start table-loop
700
+ $table-variants: (
701
+ "primary": shift-color($primary, $table-bg-scale),
702
+ "secondary": shift-color($secondary, $table-bg-scale),
703
+ "success": shift-color($success, $table-bg-scale),
704
+ "info": shift-color($info, $table-bg-scale),
705
+ "warning": shift-color($warning, $table-bg-scale),
706
+ "danger": shift-color($danger, $table-bg-scale),
707
+ "light": $light,
708
+ "dark": $dark,
709
+ ) !default;
710
+ // scss-docs-end table-loop
711
+
712
+
713
+ // Buttons + Forms
714
+ //
715
+ // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
716
+
717
+ // scss-docs-start input-btn-variables
718
+ $input-btn-padding-y: .375rem !default;
719
+ $input-btn-padding-x: .75rem !default;
720
+ $input-btn-font-family: null !default;
721
+ $input-btn-font-size: $font-size-base !default;
722
+ $input-btn-line-height: $line-height-base !default;
723
+
724
+ $input-btn-focus-width: .25rem !default;
725
+ $input-btn-focus-color-opacity: .25 !default;
726
+ $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
727
+ $input-btn-focus-blur: 0 !default;
728
+ $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
729
+
730
+ $input-btn-padding-y-sm: .25rem !default;
731
+ $input-btn-padding-x-sm: .5rem !default;
732
+ $input-btn-font-size-sm: $font-size-sm !default;
733
+
734
+ $input-btn-padding-y-lg: .5rem !default;
735
+ $input-btn-padding-x-lg: 1rem !default;
736
+ $input-btn-font-size-lg: $font-size-lg !default;
737
+
738
+ $input-btn-border-width: $border-width !default;
739
+ // scss-docs-end input-btn-variables
740
+
741
+
742
+ // Buttons
743
+ //
744
+ // For each of Bootstrap's buttons, define text, background, and border color.
745
+
746
+ // scss-docs-start btn-variables
747
+ $btn-padding-y: $input-btn-padding-y !default;
748
+ $btn-padding-x: $input-btn-padding-x !default;
749
+ $btn-font-family: $input-btn-font-family !default;
750
+ $btn-font-size: $input-btn-font-size !default;
751
+ $btn-line-height: $input-btn-line-height !default;
752
+ $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
753
+
754
+ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
755
+ $btn-padding-x-sm: $input-btn-padding-x-sm !default;
756
+ $btn-font-size-sm: $input-btn-font-size-sm !default;
757
+
758
+ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
759
+ $btn-padding-x-lg: $input-btn-padding-x-lg !default;
760
+ $btn-font-size-lg: $input-btn-font-size-lg !default;
761
+
762
+ $btn-border-width: $input-btn-border-width !default;
763
+
764
+ $btn-font-weight: $font-weight-normal !default;
765
+ $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
766
+ $btn-focus-width: $input-btn-focus-width !default;
767
+ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
768
+ $btn-disabled-opacity: .65 !default;
769
+ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
770
+
771
+ $btn-link-color: var(--#{$prefix}link-color) !default;
772
+ $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
773
+ $btn-link-disabled-color: $gray-600 !default;
774
+
775
+ // Allows for customizing button radius independently from global border radius
776
+ $btn-border-radius: $border-radius !default;
777
+ $btn-border-radius-sm: $border-radius-sm !default;
778
+ $btn-border-radius-lg: $border-radius-lg !default;
779
+
780
+ $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;
781
+
782
+ $btn-hover-bg-shade-amount: 15% !default;
783
+ $btn-hover-bg-tint-amount: 15% !default;
784
+ $btn-hover-border-shade-amount: 20% !default;
785
+ $btn-hover-border-tint-amount: 10% !default;
786
+ $btn-active-bg-shade-amount: 20% !default;
787
+ $btn-active-bg-tint-amount: 20% !default;
788
+ $btn-active-border-shade-amount: 25% !default;
789
+ $btn-active-border-tint-amount: 10% !default;
790
+ // scss-docs-end btn-variables
791
+
792
+
793
+ // Forms
794
+
795
+ // scss-docs-start form-text-variables
796
+ $form-text-margin-top: .25rem !default;
797
+ $form-text-font-size: $small-font-size !default;
798
+ $form-text-font-style: null !default;
799
+ $form-text-font-weight: null !default;
800
+ $form-text-color: $text-muted !default;
801
+ // scss-docs-end form-text-variables
802
+
803
+ // scss-docs-start form-label-variables
804
+ $form-label-margin-bottom: .5rem !default;
805
+ $form-label-font-size: null !default;
806
+ $form-label-font-style: null !default;
807
+ $form-label-font-weight: null !default;
808
+ $form-label-color: null !default;
809
+ // scss-docs-end form-label-variables
810
+
811
+ // scss-docs-start form-input-variables
812
+ $input-padding-y: $input-btn-padding-y !default;
813
+ $input-padding-x: $input-btn-padding-x !default;
814
+ $input-font-family: $input-btn-font-family !default;
815
+ $input-font-size: $input-btn-font-size !default;
816
+ $input-font-weight: $font-weight-base !default;
817
+ $input-line-height: $input-btn-line-height !default;
818
+
819
+ $input-padding-y-sm: $input-btn-padding-y-sm !default;
820
+ $input-padding-x-sm: $input-btn-padding-x-sm !default;
821
+ $input-font-size-sm: $input-btn-font-size-sm !default;
822
+
823
+ $input-padding-y-lg: $input-btn-padding-y-lg !default;
824
+ $input-padding-x-lg: $input-btn-padding-x-lg !default;
825
+ $input-font-size-lg: $input-btn-font-size-lg !default;
826
+
827
+ $input-bg: $body-bg !default;
828
+ $input-disabled-color: null !default;
829
+ $input-disabled-bg: $gray-200 !default;
830
+ $input-disabled-border-color: null !default;
831
+
832
+ $input-color: $body-color !default;
833
+ $input-border-color: $gray-400 !default;
834
+ $input-border-width: $input-btn-border-width !default;
835
+ $input-box-shadow: $box-shadow-inset !default;
836
+
837
+ $input-border-radius: $border-radius !default;
838
+ $input-border-radius-sm: $border-radius-sm !default;
839
+ $input-border-radius-lg: $border-radius-lg !default;
840
+
841
+ $input-focus-bg: $input-bg !default;
842
+ $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
843
+ $input-focus-color: $input-color !default;
844
+ $input-focus-width: $input-btn-focus-width !default;
845
+ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
846
+
847
+ $input-placeholder-color: $gray-600 !default;
848
+ $input-plaintext-color: $body-color !default;
849
+
850
+ $input-height-border: $input-border-width * 2 !default;
851
+
852
+ $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
853
+ $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
854
+ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
855
+
856
+ $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
857
+ $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
858
+ $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
859
+
860
+ $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
861
+
862
+ $form-color-width: 3rem !default;
863
+ // scss-docs-end form-input-variables
864
+
865
+ // scss-docs-start form-check-variables
866
+ $form-check-input-width: 1em !default;
867
+ $form-check-min-height: $font-size-base * $line-height-base !default;
868
+ $form-check-padding-start: $form-check-input-width + .5em !default;
869
+ $form-check-margin-bottom: .125rem !default;
870
+ $form-check-label-color: null !default;
871
+ $form-check-label-cursor: null !default;
872
+ $form-check-transition: null !default;
873
+
874
+ $form-check-input-active-filter: brightness(90%) !default;
875
+
876
+ $form-check-input-bg: $input-bg !default;
877
+ $form-check-input-border: 1px solid rgba($black, .25) !default;
878
+ $form-check-input-border-radius: .25em !default;
879
+ $form-check-radio-border-radius: 50% !default;
880
+ $form-check-input-focus-border: $input-focus-border-color !default;
881
+ $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
882
+
883
+ $form-check-input-checked-color: $component-active-color !default;
884
+ $form-check-input-checked-bg-color: $component-active-bg !default;
885
+ $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
886
+ $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
887
+ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
888
+
889
+ $form-check-input-indeterminate-color: $component-active-color !default;
890
+ $form-check-input-indeterminate-bg-color: $component-active-bg !default;
891
+ $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
892
+ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
893
+
894
+ $form-check-input-disabled-opacity: .5 !default;
895
+ $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
896
+ $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
897
+
898
+ $form-check-inline-margin-end: 1rem !default;
899
+ // scss-docs-end form-check-variables
900
+
901
+ // scss-docs-start form-switch-variables
902
+ $form-switch-color: rgba($black, .25) !default;
903
+ $form-switch-width: 2em !default;
904
+ $form-switch-padding-start: $form-switch-width + .5em !default;
905
+ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
906
+ $form-switch-border-radius: $form-switch-width !default;
907
+ $form-switch-transition: background-position .15s ease-in-out !default;
908
+
909
+ $form-switch-focus-color: $input-focus-border-color !default;
910
+ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
911
+
912
+ $form-switch-checked-color: $component-active-color !default;
913
+ $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
914
+ $form-switch-checked-bg-position: right center !default;
915
+ // scss-docs-end form-switch-variables
916
+
917
+ // scss-docs-start input-group-variables
918
+ $input-group-addon-padding-y: $input-padding-y !default;
919
+ $input-group-addon-padding-x: $input-padding-x !default;
920
+ $input-group-addon-font-weight: $input-font-weight !default;
921
+ $input-group-addon-color: $input-color !default;
922
+ $input-group-addon-bg: $gray-200 !default;
923
+ $input-group-addon-border-color: $input-border-color !default;
924
+ // scss-docs-end input-group-variables
925
+
926
+ // scss-docs-start form-select-variables
927
+ $form-select-padding-y: $input-padding-y !default;
928
+ $form-select-padding-x: $input-padding-x !default;
929
+ $form-select-font-family: $input-font-family !default;
930
+ $form-select-font-size: $input-font-size !default;
931
+ $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
932
+ $form-select-font-weight: $input-font-weight !default;
933
+ $form-select-line-height: $input-line-height !default;
934
+ $form-select-color: $input-color !default;
935
+ $form-select-bg: $input-bg !default;
936
+ $form-select-disabled-color: null !default;
937
+ $form-select-disabled-bg: $gray-200 !default;
938
+ $form-select-disabled-border-color: $input-disabled-border-color !default;
939
+ $form-select-bg-position: right $form-select-padding-x center !default;
940
+ $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
941
+ $form-select-indicator-color: $gray-800 !default;
942
+ $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
943
+
944
+ $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
945
+ $form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
946
+ $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
947
+
948
+ $form-select-border-width: $input-border-width !default;
949
+ $form-select-border-color: $input-border-color !default;
950
+ $form-select-border-radius: $input-border-radius !default;
951
+ $form-select-box-shadow: $box-shadow-inset !default;
952
+
953
+ $form-select-focus-border-color: $input-focus-border-color !default;
954
+ $form-select-focus-width: $input-focus-width !default;
955
+ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
956
+
957
+ $form-select-padding-y-sm: $input-padding-y-sm !default;
958
+ $form-select-padding-x-sm: $input-padding-x-sm !default;
959
+ $form-select-font-size-sm: $input-font-size-sm !default;
960
+ $form-select-border-radius-sm: $input-border-radius-sm !default;
961
+
962
+ $form-select-padding-y-lg: $input-padding-y-lg !default;
963
+ $form-select-padding-x-lg: $input-padding-x-lg !default;
964
+ $form-select-font-size-lg: $input-font-size-lg !default;
965
+ $form-select-border-radius-lg: $input-border-radius-lg !default;
966
+
967
+ $form-select-transition: $input-transition !default;
968
+ // scss-docs-end form-select-variables
969
+
970
+ // scss-docs-start form-range-variables
971
+ $form-range-track-width: 100% !default;
972
+ $form-range-track-height: .5rem !default;
973
+ $form-range-track-cursor: pointer !default;
974
+ $form-range-track-bg: $gray-300 !default;
975
+ $form-range-track-border-radius: 1rem !default;
976
+ $form-range-track-box-shadow: $box-shadow-inset !default;
977
+
978
+ $form-range-thumb-width: 1rem !default;
979
+ $form-range-thumb-height: $form-range-thumb-width !default;
980
+ $form-range-thumb-bg: $component-active-bg !default;
981
+ $form-range-thumb-border: 0 !default;
982
+ $form-range-thumb-border-radius: 1rem !default;
983
+ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
984
+ $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
985
+ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
986
+ $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
987
+ $form-range-thumb-disabled-bg: $gray-500 !default;
988
+ $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
989
+ // scss-docs-end form-range-variables
990
+
991
+ // scss-docs-start form-file-variables
992
+ $form-file-button-color: $input-color !default;
993
+ $form-file-button-bg: $input-group-addon-bg !default;
994
+ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
995
+ // scss-docs-end form-file-variables
996
+
997
+ // scss-docs-start form-floating-variables
998
+ $form-floating-height: add(3.5rem, $input-height-border) !default;
999
+ $form-floating-line-height: 1.25 !default;
1000
+ $form-floating-padding-x: $input-padding-x !default;
1001
+ $form-floating-padding-y: 1rem !default;
1002
+ $form-floating-input-padding-t: 1.625rem !default;
1003
+ $form-floating-input-padding-b: .625rem !default;
1004
+ $form-floating-label-opacity: .65 !default;
1005
+ $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1006
+ $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1007
+ // scss-docs-end form-floating-variables
1008
+
1009
+ // Form validation
1010
+
1011
+ // scss-docs-start form-feedback-variables
1012
+ $form-feedback-margin-top: $form-text-margin-top !default;
1013
+ $form-feedback-font-size: $form-text-font-size !default;
1014
+ $form-feedback-font-style: $form-text-font-style !default;
1015
+ $form-feedback-valid-color: $success !default;
1016
+ $form-feedback-invalid-color: $danger !default;
1017
+
1018
+ $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1019
+ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.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'/></svg>") !default;
1020
+ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1021
+ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1022
+ // scss-docs-end form-feedback-variables
1023
+
1024
+ // scss-docs-start form-validation-states
1025
+ $form-validation-states: (
1026
+ "valid": (
1027
+ "color": $form-feedback-valid-color,
1028
+ "icon": $form-feedback-icon-valid
1029
+ ),
1030
+ "invalid": (
1031
+ "color": $form-feedback-invalid-color,
1032
+ "icon": $form-feedback-icon-invalid
1033
+ )
1034
+ ) !default;
1035
+ // scss-docs-end form-validation-states
1036
+
1037
+ // Z-index master list
1038
+ //
1039
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
1040
+ // of components dependent on the z-axis and are designed to all work together.
1041
+
1042
+ // scss-docs-start zindex-stack
1043
+ $zindex-dropdown: 1000 !default;
1044
+ $zindex-sticky: 1020 !default;
1045
+ $zindex-fixed: 1030 !default;
1046
+ $zindex-offcanvas-backdrop: 1040 !default;
1047
+ $zindex-offcanvas: 1045 !default;
1048
+ $zindex-modal-backdrop: 1050 !default;
1049
+ $zindex-modal: 1055 !default;
1050
+ $zindex-popover: 1070 !default;
1051
+ $zindex-tooltip: 1080 !default;
1052
+ $zindex-toast: 1090 !default;
1053
+ // scss-docs-end zindex-stack
1054
+
1055
+
1056
+ // Navs
1057
+
1058
+ // scss-docs-start nav-variables
1059
+ $nav-link-padding-y: .5rem !default;
1060
+ $nav-link-padding-x: 1rem !default;
1061
+ $nav-link-font-size: null !default;
1062
+ $nav-link-font-weight: null !default;
1063
+ $nav-link-color: var(--#{$prefix}link-color) !default;
1064
+ $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1065
+ $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1066
+ $nav-link-disabled-color: $gray-600 !default;
1067
+
1068
+ $nav-tabs-border-color: $gray-300 !default;
1069
+ $nav-tabs-border-width: $border-width !default;
1070
+ $nav-tabs-border-radius: $border-radius !default;
1071
+ $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
1072
+ $nav-tabs-link-active-color: $gray-700 !default;
1073
+ $nav-tabs-link-active-bg: $body-bg !default;
1074
+ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
1075
+
1076
+ $nav-pills-border-radius: $border-radius !default;
1077
+ $nav-pills-link-active-color: $component-active-color !default;
1078
+ $nav-pills-link-active-bg: $component-active-bg !default;
1079
+ // scss-docs-end nav-variables
1080
+
1081
+
1082
+ // Navbar
1083
+
1084
+ // scss-docs-start navbar-variables
1085
+ $navbar-padding-y: $spacer * .5 !default;
1086
+ $navbar-padding-x: null !default;
1087
+
1088
+ $navbar-nav-link-padding-x: .5rem !default;
1089
+
1090
+ $navbar-brand-font-size: $font-size-lg !default;
1091
+ // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
1092
+ $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
1093
+ $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
1094
+ $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
1095
+ $navbar-brand-margin-end: 1rem !default;
1096
+
1097
+ $navbar-toggler-padding-y: .25rem !default;
1098
+ $navbar-toggler-padding-x: .75rem !default;
1099
+ $navbar-toggler-font-size: $font-size-lg !default;
1100
+ $navbar-toggler-border-radius: $btn-border-radius !default;
1101
+ $navbar-toggler-focus-width: $btn-focus-width !default;
1102
+ $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1103
+ // scss-docs-end navbar-variables
1104
+
1105
+ // scss-docs-start navbar-theme-variables
1106
+ $navbar-dark-color: rgba($white, .55) !default;
1107
+ $navbar-dark-hover-color: rgba($white, .75) !default;
1108
+ $navbar-dark-active-color: $white !default;
1109
+ $navbar-dark-disabled-color: rgba($white, .25) !default;
1110
+ $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1111
+ $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1112
+
1113
+ $navbar-light-color: rgba($black, .55) !default;
1114
+ $navbar-light-hover-color: rgba($black, .7) !default;
1115
+ $navbar-light-active-color: rgba($black, .9) !default;
1116
+ $navbar-light-disabled-color: rgba($black, .3) !default;
1117
+ $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1118
+ $navbar-light-toggler-border-color: rgba($black, .1) !default;
1119
+
1120
+ $navbar-light-brand-color: $navbar-light-active-color !default;
1121
+ $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1122
+ $navbar-dark-brand-color: $navbar-dark-active-color !default;
1123
+ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1124
+ // scss-docs-end navbar-theme-variables
1125
+
1126
+
1127
+ // Dropdowns
1128
+ //
1129
+ // Dropdown menu container and contents.
1130
+
1131
+ // scss-docs-start dropdown-variables
1132
+ $dropdown-min-width: 10rem !default;
1133
+ $dropdown-padding-x: 0 !default;
1134
+ $dropdown-padding-y: .5rem !default;
1135
+ $dropdown-spacer: .125rem !default;
1136
+ $dropdown-font-size: $font-size-base !default;
1137
+ $dropdown-color: $body-color !default;
1138
+ $dropdown-bg: $white !default;
1139
+ $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1140
+ $dropdown-border-radius: $border-radius !default;
1141
+ $dropdown-border-width: $border-width !default;
1142
+ $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1143
+ $dropdown-divider-bg: $dropdown-border-color !default;
1144
+ $dropdown-divider-margin-y: $spacer * .5 !default;
1145
+ $dropdown-box-shadow: $box-shadow !default;
1146
+
1147
+ $dropdown-link-color: $gray-900 !default;
1148
+ $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1149
+ $dropdown-link-hover-bg: $gray-200 !default;
1150
+
1151
+ $dropdown-link-active-color: $component-active-color !default;
1152
+ $dropdown-link-active-bg: $component-active-bg !default;
1153
+
1154
+ $dropdown-link-disabled-color: $gray-500 !default;
1155
+
1156
+ $dropdown-item-padding-y: $spacer * .25 !default;
1157
+ $dropdown-item-padding-x: $spacer !default;
1158
+
1159
+ $dropdown-header-color: $gray-600 !default;
1160
+ $dropdown-header-padding-x: $dropdown-item-padding-x !default;
1161
+ $dropdown-header-padding-y: $dropdown-padding-y !default;
1162
+ // fusv-disable
1163
+ $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
1164
+ // fusv-enable
1165
+ // scss-docs-end dropdown-variables
1166
+
1167
+ // scss-docs-start dropdown-dark-variables
1168
+ $dropdown-dark-color: $gray-300 !default;
1169
+ $dropdown-dark-bg: $gray-800 !default;
1170
+ $dropdown-dark-border-color: $dropdown-border-color !default;
1171
+ $dropdown-dark-divider-bg: $dropdown-divider-bg !default;
1172
+ $dropdown-dark-box-shadow: null !default;
1173
+ $dropdown-dark-link-color: $dropdown-dark-color !default;
1174
+ $dropdown-dark-link-hover-color: $white !default;
1175
+ $dropdown-dark-link-hover-bg: rgba($white, .15) !default;
1176
+ $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
1177
+ $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
1178
+ $dropdown-dark-link-disabled-color: $gray-500 !default;
1179
+ $dropdown-dark-header-color: $gray-500 !default;
1180
+ // scss-docs-end dropdown-dark-variables
1181
+
1182
+
1183
+ // Pagination
1184
+
1185
+ // scss-docs-start pagination-variables
1186
+ $pagination-padding-y: .375rem !default;
1187
+ $pagination-padding-x: .75rem !default;
1188
+ $pagination-padding-y-sm: .25rem !default;
1189
+ $pagination-padding-x-sm: .5rem !default;
1190
+ $pagination-padding-y-lg: .75rem !default;
1191
+ $pagination-padding-x-lg: 1.5rem !default;
1192
+
1193
+ $pagination-font-size: $font-size-base !default;
1194
+
1195
+ $pagination-color: var(--#{$prefix}link-color) !default;
1196
+ $pagination-bg: $white !default;
1197
+ $pagination-border-radius: $border-radius !default;
1198
+ $pagination-border-width: $border-width !default;
1199
+ $pagination-margin-start: ($pagination-border-width * -1) !default;
1200
+ $pagination-border-color: $gray-300 !default;
1201
+
1202
+ $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1203
+ $pagination-focus-bg: $gray-200 !default;
1204
+ $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1205
+ $pagination-focus-outline: 0 !default;
1206
+
1207
+ $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1208
+ $pagination-hover-bg: $gray-200 !default;
1209
+ $pagination-hover-border-color: $gray-300 !default;
1210
+
1211
+ $pagination-active-color: $component-active-color !default;
1212
+ $pagination-active-bg: $component-active-bg !default;
1213
+ $pagination-active-border-color: $pagination-active-bg !default;
1214
+
1215
+ $pagination-disabled-color: $gray-600 !default;
1216
+ $pagination-disabled-bg: $white !default;
1217
+ $pagination-disabled-border-color: $gray-300 !default;
1218
+
1219
+ $pagination-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;
1220
+
1221
+ $pagination-border-radius-sm: $border-radius-sm !default;
1222
+ $pagination-border-radius-lg: $border-radius-lg !default;
1223
+ // scss-docs-end pagination-variables
1224
+
1225
+
1226
+ // Placeholders
1227
+
1228
+ // scss-docs-start placeholders
1229
+ $placeholder-opacity-max: .5 !default;
1230
+ $placeholder-opacity-min: .2 !default;
1231
+ // scss-docs-end placeholders
1232
+
1233
+ // Cards
1234
+
1235
+ // scss-docs-start card-variables
1236
+ $card-spacer-y: $spacer !default;
1237
+ $card-spacer-x: $spacer !default;
1238
+ $card-title-spacer-y: $spacer * .5 !default;
1239
+ $card-border-width: $border-width !default;
1240
+ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1241
+ $card-border-radius: $border-radius !default;
1242
+ $card-box-shadow: null !default;
1243
+ $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1244
+ $card-cap-padding-y: $card-spacer-y * .5 !default;
1245
+ $card-cap-padding-x: $card-spacer-x !default;
1246
+ $card-cap-bg: rgba($black, .03) !default;
1247
+ $card-cap-color: null !default;
1248
+ $card-height: null !default;
1249
+ $card-color: null !default;
1250
+ $card-bg: $white !default;
1251
+ $card-img-overlay-padding: $spacer !default;
1252
+ $card-group-margin: $grid-gutter-width * .5 !default;
1253
+ // scss-docs-end card-variables
1254
+
1255
+ // Accordion
1256
+
1257
+ // scss-docs-start accordion-variables
1258
+ $accordion-padding-y: 1rem !default;
1259
+ $accordion-padding-x: 1.25rem !default;
1260
+ $accordion-color: var(--#{$prefix}body-color) !default;
1261
+ $accordion-bg: $body-bg !default;
1262
+ $accordion-border-width: $border-width !default;
1263
+ $accordion-border-color: var(--#{$prefix}border-color) !default;
1264
+ $accordion-border-radius: $border-radius !default;
1265
+ $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1266
+
1267
+ $accordion-body-padding-y: $accordion-padding-y !default;
1268
+ $accordion-body-padding-x: $accordion-padding-x !default;
1269
+
1270
+ $accordion-button-padding-y: $accordion-padding-y !default;
1271
+ $accordion-button-padding-x: $accordion-padding-x !default;
1272
+ $accordion-button-color: $accordion-color !default;
1273
+ $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1274
+ $accordion-transition: $btn-transition, border-radius .15s ease !default;
1275
+ $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1276
+ $accordion-button-active-color: shade-color($primary, 10%) !default;
1277
+
1278
+ $accordion-button-focus-border-color: $input-focus-border-color !default;
1279
+ $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1280
+
1281
+ $accordion-icon-width: 1.25rem !default;
1282
+ $accordion-icon-color: $accordion-button-color !default;
1283
+ $accordion-icon-active-color: $accordion-button-active-color !default;
1284
+ $accordion-icon-transition: transform .2s ease-in-out !default;
1285
+ $accordion-icon-transform: rotate(-180deg) !default;
1286
+
1287
+ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1288
+ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1289
+ // scss-docs-end accordion-variables
1290
+
1291
+ // Tooltips
1292
+
1293
+ // scss-docs-start tooltip-variables
1294
+ $tooltip-font-size: $font-size-sm !default;
1295
+ $tooltip-max-width: 200px !default;
1296
+ $tooltip-color: $white !default;
1297
+ $tooltip-bg: $black !default;
1298
+ $tooltip-border-radius: $border-radius !default;
1299
+ $tooltip-opacity: .9 !default;
1300
+ $tooltip-padding-y: $spacer * .25 !default;
1301
+ $tooltip-padding-x: $spacer * .5 !default;
1302
+ $tooltip-margin: null !default; // TODO: remove this in v6
1303
+
1304
+ $tooltip-arrow-width: .8rem !default;
1305
+ $tooltip-arrow-height: .4rem !default;
1306
+ // fusv-disable
1307
+ $tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
1308
+ // fusv-enable
1309
+ // scss-docs-end tooltip-variables
1310
+
1311
+ // Form tooltips must come after regular tooltips
1312
+ // scss-docs-start tooltip-feedback-variables
1313
+ $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1314
+ $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1315
+ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1316
+ $form-feedback-tooltip-line-height: null !default;
1317
+ $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1318
+ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1319
+ // scss-docs-end tooltip-feedback-variables
1320
+
1321
+
1322
+ // Popovers
1323
+
1324
+ // scss-docs-start popover-variables
1325
+ $popover-font-size: $font-size-sm !default;
1326
+ $popover-bg: $white !default;
1327
+ $popover-max-width: 276px !default;
1328
+ $popover-border-width: $border-width !default;
1329
+ $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1330
+ $popover-border-radius: $border-radius-lg !default;
1331
+ $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
1332
+ $popover-box-shadow: $box-shadow !default;
1333
+
1334
+ $popover-header-font-size: $font-size-base !default;
1335
+ $popover-header-bg: shade-color($popover-bg, 6%) !default;
1336
+ $popover-header-color: var(--#{$prefix}heading-color) !default;
1337
+ $popover-header-padding-y: .5rem !default;
1338
+ $popover-header-padding-x: $spacer !default;
1339
+
1340
+ $popover-body-color: $body-color !default;
1341
+ $popover-body-padding-y: $spacer !default;
1342
+ $popover-body-padding-x: $spacer !default;
1343
+
1344
+ $popover-arrow-width: 1rem !default;
1345
+ $popover-arrow-height: .5rem !default;
1346
+ // scss-docs-end popover-variables
1347
+
1348
+ // fusv-disable
1349
+ // Deprecated in Bootstrap 5.2.0 for CSS variables
1350
+ $popover-arrow-color: $popover-bg !default;
1351
+ $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1352
+ // fusv-enable
1353
+
1354
+
1355
+ // Toasts
1356
+
1357
+ // scss-docs-start toast-variables
1358
+ $toast-max-width: 350px !default;
1359
+ $toast-padding-x: .75rem !default;
1360
+ $toast-padding-y: .5rem !default;
1361
+ $toast-font-size: .875rem !default;
1362
+ $toast-color: null !default;
1363
+ $toast-background-color: rgba($white, .85) !default;
1364
+ $toast-border-width: $border-width !default;
1365
+ $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1366
+ $toast-border-radius: $border-radius !default;
1367
+ $toast-box-shadow: $box-shadow !default;
1368
+ $toast-spacing: $container-padding-x !default;
1369
+
1370
+ $toast-header-color: $gray-600 !default;
1371
+ $toast-header-background-color: rgba($white, .85) !default;
1372
+ $toast-header-border-color: rgba($black, .05) !default;
1373
+ // scss-docs-end toast-variables
1374
+
1375
+
1376
+ // Badges
1377
+
1378
+ // scss-docs-start badge-variables
1379
+ $badge-font-size: .75em !default;
1380
+ $badge-font-weight: $font-weight-bold !default;
1381
+ $badge-color: $white !default;
1382
+ $badge-padding-y: .35em !default;
1383
+ $badge-padding-x: .65em !default;
1384
+ $badge-border-radius: $border-radius !default;
1385
+ // scss-docs-end badge-variables
1386
+
1387
+
1388
+ // Modals
1389
+
1390
+ // scss-docs-start modal-variables
1391
+ $modal-inner-padding: $spacer !default;
1392
+
1393
+ $modal-footer-margin-between: .5rem !default;
1394
+
1395
+ $modal-dialog-margin: .5rem !default;
1396
+ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1397
+
1398
+ $modal-title-line-height: $line-height-base !default;
1399
+
1400
+ $modal-content-color: null !default;
1401
+ $modal-content-bg: $white !default;
1402
+ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1403
+ $modal-content-border-width: $border-width !default;
1404
+ $modal-content-border-radius: $border-radius-lg !default;
1405
+ $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1406
+ $modal-content-box-shadow-xs: $box-shadow-sm !default;
1407
+ $modal-content-box-shadow-sm-up: $box-shadow !default;
1408
+
1409
+ $modal-backdrop-bg: $black !default;
1410
+ $modal-backdrop-opacity: .5 !default;
1411
+
1412
+ $modal-header-border-color: var(--#{$prefix}border-color) !default;
1413
+ $modal-header-border-width: $modal-content-border-width !default;
1414
+ $modal-header-padding-y: $modal-inner-padding !default;
1415
+ $modal-header-padding-x: $modal-inner-padding !default;
1416
+ $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1417
+
1418
+ $modal-footer-bg: null !default;
1419
+ $modal-footer-border-color: $modal-header-border-color !default;
1420
+ $modal-footer-border-width: $modal-header-border-width !default;
1421
+
1422
+ $modal-sm: 300px !default;
1423
+ $modal-md: 500px !default;
1424
+ $modal-lg: 800px !default;
1425
+ $modal-xl: 1140px !default;
1426
+
1427
+ $modal-fade-transform: translate(0, -50px) !default;
1428
+ $modal-show-transform: none !default;
1429
+ $modal-transition: transform .3s ease-out !default;
1430
+ $modal-scale-transform: scale(1.02) !default;
1431
+ // scss-docs-end modal-variables
1432
+
1433
+
1434
+ // Alerts
1435
+ //
1436
+ // Define alert colors, border radius, and padding.
1437
+
1438
+ // scss-docs-start alert-variables
1439
+ $alert-padding-y: $spacer !default;
1440
+ $alert-padding-x: $spacer !default;
1441
+ $alert-margin-bottom: 1rem !default;
1442
+ $alert-border-radius: $border-radius !default;
1443
+ $alert-link-font-weight: $font-weight-bold !default;
1444
+ $alert-border-width: $border-width !default;
1445
+ $alert-bg-scale: -80% !default;
1446
+ $alert-border-scale: -70% !default;
1447
+ $alert-color-scale: 40% !default;
1448
+ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1449
+ // scss-docs-end alert-variables
1450
+
1451
+
1452
+ // Progress bars
1453
+
1454
+ // scss-docs-start progress-variables
1455
+ $progress-height: 1rem !default;
1456
+ $progress-font-size: $font-size-base * .75 !default;
1457
+ $progress-bg: $gray-200 !default;
1458
+ $progress-border-radius: $border-radius !default;
1459
+ $progress-box-shadow: $box-shadow-inset !default;
1460
+ $progress-bar-color: $white !default;
1461
+ $progress-bar-bg: $primary !default;
1462
+ $progress-bar-animation-timing: 1s linear infinite !default;
1463
+ $progress-bar-transition: width .6s ease !default;
1464
+ // scss-docs-end progress-variables
1465
+
1466
+
1467
+ // List group
1468
+
1469
+ // scss-docs-start list-group-variables
1470
+ $list-group-color: $gray-900 !default;
1471
+ $list-group-bg: $white !default;
1472
+ $list-group-border-color: rgba($black, .125) !default;
1473
+ $list-group-border-width: $border-width !default;
1474
+ $list-group-border-radius: $border-radius !default;
1475
+
1476
+ $list-group-item-padding-y: $spacer * .5 !default;
1477
+ $list-group-item-padding-x: $spacer !default;
1478
+ $list-group-item-bg-scale: -80% !default;
1479
+ $list-group-item-color-scale: 40% !default;
1480
+
1481
+ $list-group-hover-bg: $gray-100 !default;
1482
+ $list-group-active-color: $component-active-color !default;
1483
+ $list-group-active-bg: $component-active-bg !default;
1484
+ $list-group-active-border-color: $list-group-active-bg !default;
1485
+
1486
+ $list-group-disabled-color: $gray-600 !default;
1487
+ $list-group-disabled-bg: $list-group-bg !default;
1488
+
1489
+ $list-group-action-color: $gray-700 !default;
1490
+ $list-group-action-hover-color: $list-group-action-color !default;
1491
+
1492
+ $list-group-action-active-color: $body-color !default;
1493
+ $list-group-action-active-bg: $gray-200 !default;
1494
+ // scss-docs-end list-group-variables
1495
+
1496
+
1497
+ // Image thumbnails
1498
+
1499
+ // scss-docs-start thumbnail-variables
1500
+ $thumbnail-padding: .25rem !default;
1501
+ $thumbnail-bg: $body-bg !default;
1502
+ $thumbnail-border-width: $border-width !default;
1503
+ $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1504
+ $thumbnail-border-radius: $border-radius !default;
1505
+ $thumbnail-box-shadow: $box-shadow-sm !default;
1506
+ // scss-docs-end thumbnail-variables
1507
+
1508
+
1509
+ // Figures
1510
+
1511
+ // scss-docs-start figure-variables
1512
+ $figure-caption-font-size: $small-font-size !default;
1513
+ $figure-caption-color: $gray-600 !default;
1514
+ // scss-docs-end figure-variables
1515
+
1516
+
1517
+ // Breadcrumbs
1518
+
1519
+ // scss-docs-start breadcrumb-variables
1520
+ $breadcrumb-font-size: null !default;
1521
+ $breadcrumb-padding-y: 0 !default;
1522
+ $breadcrumb-padding-x: 0 !default;
1523
+ $breadcrumb-item-padding-x: .5rem !default;
1524
+ $breadcrumb-margin-bottom: 1rem !default;
1525
+ $breadcrumb-bg: null !default;
1526
+ $breadcrumb-divider-color: $gray-600 !default;
1527
+ $breadcrumb-active-color: $gray-600 !default;
1528
+ $breadcrumb-divider: quote("/") !default;
1529
+ $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1530
+ $breadcrumb-border-radius: null !default;
1531
+ // scss-docs-end breadcrumb-variables
1532
+
1533
+ // Carousel
1534
+
1535
+ // scss-docs-start carousel-variables
1536
+ $carousel-control-color: $white !default;
1537
+ $carousel-control-width: 15% !default;
1538
+ $carousel-control-opacity: .5 !default;
1539
+ $carousel-control-hover-opacity: .9 !default;
1540
+ $carousel-control-transition: opacity .15s ease !default;
1541
+
1542
+ $carousel-indicator-width: 30px !default;
1543
+ $carousel-indicator-height: 3px !default;
1544
+ $carousel-indicator-hit-area-height: 10px !default;
1545
+ $carousel-indicator-spacer: 3px !default;
1546
+ $carousel-indicator-opacity: .5 !default;
1547
+ $carousel-indicator-active-bg: $white !default;
1548
+ $carousel-indicator-active-opacity: 1 !default;
1549
+ $carousel-indicator-transition: opacity .6s ease !default;
1550
+
1551
+ $carousel-caption-width: 70% !default;
1552
+ $carousel-caption-color: $white !default;
1553
+ $carousel-caption-padding-y: 1.25rem !default;
1554
+ $carousel-caption-spacer: 1.25rem !default;
1555
+
1556
+ $carousel-control-icon-width: 2rem !default;
1557
+
1558
+ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
1559
+ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
1560
+
1561
+ $carousel-transition-duration: .6s !default;
1562
+ $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1563
+
1564
+ $carousel-dark-indicator-active-bg: $black !default;
1565
+ $carousel-dark-caption-color: $black !default;
1566
+ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1567
+ // scss-docs-end carousel-variables
1568
+
1569
+
1570
+ // Spinners
1571
+
1572
+ // scss-docs-start spinner-variables
1573
+ $spinner-width: 2rem !default;
1574
+ $spinner-height: $spinner-width !default;
1575
+ $spinner-vertical-align: -.125em !default;
1576
+ $spinner-border-width: .25em !default;
1577
+ $spinner-animation-speed: .75s !default;
1578
+
1579
+ $spinner-width-sm: 1rem !default;
1580
+ $spinner-height-sm: $spinner-width-sm !default;
1581
+ $spinner-border-width-sm: .2em !default;
1582
+ // scss-docs-end spinner-variables
1583
+
1584
+
1585
+ // Close
1586
+
1587
+ // scss-docs-start close-variables
1588
+ $btn-close-width: 1em !default;
1589
+ $btn-close-height: $btn-close-width !default;
1590
+ $btn-close-padding-x: .25em !default;
1591
+ $btn-close-padding-y: $btn-close-padding-x !default;
1592
+ $btn-close-color: $black !default;
1593
+ $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
1594
+ $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1595
+ $btn-close-opacity: .5 !default;
1596
+ $btn-close-hover-opacity: .75 !default;
1597
+ $btn-close-focus-opacity: 1 !default;
1598
+ $btn-close-disabled-opacity: .25 !default;
1599
+ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1600
+ // scss-docs-end close-variables
1601
+
1602
+
1603
+ // Offcanvas
1604
+
1605
+ // scss-docs-start offcanvas-variables
1606
+ $offcanvas-padding-y: $modal-inner-padding !default;
1607
+ $offcanvas-padding-x: $modal-inner-padding !default;
1608
+ $offcanvas-horizontal-width: 400px !default;
1609
+ $offcanvas-vertical-height: 30vh !default;
1610
+ $offcanvas-transition-duration: .3s !default;
1611
+ $offcanvas-border-color: $modal-content-border-color !default;
1612
+ $offcanvas-border-width: $modal-content-border-width !default;
1613
+ $offcanvas-title-line-height: $modal-title-line-height !default;
1614
+ $offcanvas-bg-color: $modal-content-bg !default;
1615
+ $offcanvas-color: $modal-content-color !default;
1616
+ $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1617
+ $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1618
+ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1619
+ // scss-docs-end offcanvas-variables
1620
+
1621
+ // Code
1622
+
1623
+ $code-font-size: $small-font-size !default;
1624
+ $code-color: $pink !default;
1625
+
1626
+ $kbd-padding-y: .1875rem !default;
1627
+ $kbd-padding-x: .375rem !default;
1628
+ $kbd-font-size: $code-font-size !default;
1629
+ $kbd-color: var(--#{$prefix}body-bg) !default;
1630
+ $kbd-bg: var(--#{$prefix}body-color) !default;
1631
+ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1632
+
1633
+ $pre-color: null !default;