bootstrap-scss 5.2.1 → 5.2.3

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.
package/_variables.scss CHANGED
@@ -1,1634 +1,1634 @@
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
-
1104
- $navbar-light-color: rgba($black, .55) !default;
1105
- $navbar-light-hover-color: rgba($black, .7) !default;
1106
- $navbar-light-active-color: rgba($black, .9) !default;
1107
- $navbar-light-disabled-color: rgba($black, .3) !default;
1108
- $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;
1109
- $navbar-light-toggler-border-color: rgba($black, .1) !default;
1110
- $navbar-light-brand-color: $navbar-light-active-color !default;
1111
- $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1112
- // scss-docs-end navbar-variables
1113
-
1114
- // scss-docs-start navbar-dark-variables
1115
- $navbar-dark-color: rgba($white, .55) !default;
1116
- $navbar-dark-hover-color: rgba($white, .75) !default;
1117
- $navbar-dark-active-color: $white !default;
1118
- $navbar-dark-disabled-color: rgba($white, .25) !default;
1119
- $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;
1120
- $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1121
- $navbar-dark-brand-color: $navbar-dark-active-color !default;
1122
- $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1123
- // scss-docs-end navbar-dark-variables
1124
-
1125
-
1126
- // Dropdowns
1127
- //
1128
- // Dropdown menu container and contents.
1129
-
1130
- // scss-docs-start dropdown-variables
1131
- $dropdown-min-width: 10rem !default;
1132
- $dropdown-padding-x: 0 !default;
1133
- $dropdown-padding-y: .5rem !default;
1134
- $dropdown-spacer: .125rem !default;
1135
- $dropdown-font-size: $font-size-base !default;
1136
- $dropdown-color: $body-color !default;
1137
- $dropdown-bg: $white !default;
1138
- $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1139
- $dropdown-border-radius: $border-radius !default;
1140
- $dropdown-border-width: $border-width !default;
1141
- $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1142
- $dropdown-divider-bg: $dropdown-border-color !default;
1143
- $dropdown-divider-margin-y: $spacer * .5 !default;
1144
- $dropdown-box-shadow: $box-shadow !default;
1145
-
1146
- $dropdown-link-color: $gray-900 !default;
1147
- $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1148
- $dropdown-link-hover-bg: $gray-200 !default;
1149
-
1150
- $dropdown-link-active-color: $component-active-color !default;
1151
- $dropdown-link-active-bg: $component-active-bg !default;
1152
-
1153
- $dropdown-link-disabled-color: $gray-500 !default;
1154
-
1155
- $dropdown-item-padding-y: $spacer * .25 !default;
1156
- $dropdown-item-padding-x: $spacer !default;
1157
-
1158
- $dropdown-header-color: $gray-600 !default;
1159
- $dropdown-header-padding-x: $dropdown-item-padding-x !default;
1160
- $dropdown-header-padding-y: $dropdown-padding-y !default;
1161
- // fusv-disable
1162
- $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
1163
- // fusv-enable
1164
- // scss-docs-end dropdown-variables
1165
-
1166
- // scss-docs-start dropdown-dark-variables
1167
- $dropdown-dark-color: $gray-300 !default;
1168
- $dropdown-dark-bg: $gray-800 !default;
1169
- $dropdown-dark-border-color: $dropdown-border-color !default;
1170
- $dropdown-dark-divider-bg: $dropdown-divider-bg !default;
1171
- $dropdown-dark-box-shadow: null !default;
1172
- $dropdown-dark-link-color: $dropdown-dark-color !default;
1173
- $dropdown-dark-link-hover-color: $white !default;
1174
- $dropdown-dark-link-hover-bg: rgba($white, .15) !default;
1175
- $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
1176
- $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
1177
- $dropdown-dark-link-disabled-color: $gray-500 !default;
1178
- $dropdown-dark-header-color: $gray-500 !default;
1179
- // scss-docs-end dropdown-dark-variables
1180
-
1181
-
1182
- // Pagination
1183
-
1184
- // scss-docs-start pagination-variables
1185
- $pagination-padding-y: .375rem !default;
1186
- $pagination-padding-x: .75rem !default;
1187
- $pagination-padding-y-sm: .25rem !default;
1188
- $pagination-padding-x-sm: .5rem !default;
1189
- $pagination-padding-y-lg: .75rem !default;
1190
- $pagination-padding-x-lg: 1.5rem !default;
1191
-
1192
- $pagination-font-size: $font-size-base !default;
1193
-
1194
- $pagination-color: var(--#{$prefix}link-color) !default;
1195
- $pagination-bg: $white !default;
1196
- $pagination-border-radius: $border-radius !default;
1197
- $pagination-border-width: $border-width !default;
1198
- $pagination-margin-start: ($pagination-border-width * -1) !default;
1199
- $pagination-border-color: $gray-300 !default;
1200
-
1201
- $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1202
- $pagination-focus-bg: $gray-200 !default;
1203
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1204
- $pagination-focus-outline: 0 !default;
1205
-
1206
- $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1207
- $pagination-hover-bg: $gray-200 !default;
1208
- $pagination-hover-border-color: $gray-300 !default;
1209
-
1210
- $pagination-active-color: $component-active-color !default;
1211
- $pagination-active-bg: $component-active-bg !default;
1212
- $pagination-active-border-color: $pagination-active-bg !default;
1213
-
1214
- $pagination-disabled-color: $gray-600 !default;
1215
- $pagination-disabled-bg: $white !default;
1216
- $pagination-disabled-border-color: $gray-300 !default;
1217
-
1218
- $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;
1219
-
1220
- $pagination-border-radius-sm: $border-radius-sm !default;
1221
- $pagination-border-radius-lg: $border-radius-lg !default;
1222
- // scss-docs-end pagination-variables
1223
-
1224
-
1225
- // Placeholders
1226
-
1227
- // scss-docs-start placeholders
1228
- $placeholder-opacity-max: .5 !default;
1229
- $placeholder-opacity-min: .2 !default;
1230
- // scss-docs-end placeholders
1231
-
1232
- // Cards
1233
-
1234
- // scss-docs-start card-variables
1235
- $card-spacer-y: $spacer !default;
1236
- $card-spacer-x: $spacer !default;
1237
- $card-title-spacer-y: $spacer * .5 !default;
1238
- $card-border-width: $border-width !default;
1239
- $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1240
- $card-border-radius: $border-radius !default;
1241
- $card-box-shadow: null !default;
1242
- $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1243
- $card-cap-padding-y: $card-spacer-y * .5 !default;
1244
- $card-cap-padding-x: $card-spacer-x !default;
1245
- $card-cap-bg: rgba($black, .03) !default;
1246
- $card-cap-color: null !default;
1247
- $card-height: null !default;
1248
- $card-color: null !default;
1249
- $card-bg: $white !default;
1250
- $card-img-overlay-padding: $spacer !default;
1251
- $card-group-margin: $grid-gutter-width * .5 !default;
1252
- // scss-docs-end card-variables
1253
-
1254
- // Accordion
1255
-
1256
- // scss-docs-start accordion-variables
1257
- $accordion-padding-y: 1rem !default;
1258
- $accordion-padding-x: 1.25rem !default;
1259
- $accordion-color: var(--#{$prefix}body-color) !default;
1260
- $accordion-bg: $body-bg !default;
1261
- $accordion-border-width: $border-width !default;
1262
- $accordion-border-color: var(--#{$prefix}border-color) !default;
1263
- $accordion-border-radius: $border-radius !default;
1264
- $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1265
-
1266
- $accordion-body-padding-y: $accordion-padding-y !default;
1267
- $accordion-body-padding-x: $accordion-padding-x !default;
1268
-
1269
- $accordion-button-padding-y: $accordion-padding-y !default;
1270
- $accordion-button-padding-x: $accordion-padding-x !default;
1271
- $accordion-button-color: $accordion-color !default;
1272
- $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1273
- $accordion-transition: $btn-transition, border-radius .15s ease !default;
1274
- $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1275
- $accordion-button-active-color: shade-color($primary, 10%) !default;
1276
-
1277
- $accordion-button-focus-border-color: $input-focus-border-color !default;
1278
- $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
-
1280
- $accordion-icon-width: 1.25rem !default;
1281
- $accordion-icon-color: $accordion-button-color !default;
1282
- $accordion-icon-active-color: $accordion-button-active-color !default;
1283
- $accordion-icon-transition: transform .2s ease-in-out !default;
1284
- $accordion-icon-transform: rotate(-180deg) !default;
1285
-
1286
- $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;
1287
- $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;
1288
- // scss-docs-end accordion-variables
1289
-
1290
- // Tooltips
1291
-
1292
- // scss-docs-start tooltip-variables
1293
- $tooltip-font-size: $font-size-sm !default;
1294
- $tooltip-max-width: 200px !default;
1295
- $tooltip-color: $white !default;
1296
- $tooltip-bg: $black !default;
1297
- $tooltip-border-radius: $border-radius !default;
1298
- $tooltip-opacity: .9 !default;
1299
- $tooltip-padding-y: $spacer * .25 !default;
1300
- $tooltip-padding-x: $spacer * .5 !default;
1301
- $tooltip-margin: null !default; // TODO: remove this in v6
1302
-
1303
- $tooltip-arrow-width: .8rem !default;
1304
- $tooltip-arrow-height: .4rem !default;
1305
- // fusv-disable
1306
- $tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
1307
- // fusv-enable
1308
- // scss-docs-end tooltip-variables
1309
-
1310
- // Form tooltips must come after regular tooltips
1311
- // scss-docs-start tooltip-feedback-variables
1312
- $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1313
- $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1314
- $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1315
- $form-feedback-tooltip-line-height: null !default;
1316
- $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1317
- $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1318
- // scss-docs-end tooltip-feedback-variables
1319
-
1320
-
1321
- // Popovers
1322
-
1323
- // scss-docs-start popover-variables
1324
- $popover-font-size: $font-size-sm !default;
1325
- $popover-bg: $white !default;
1326
- $popover-max-width: 276px !default;
1327
- $popover-border-width: $border-width !default;
1328
- $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1329
- $popover-border-radius: $border-radius-lg !default;
1330
- $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
1331
- $popover-box-shadow: $box-shadow !default;
1332
-
1333
- $popover-header-font-size: $font-size-base !default;
1334
- $popover-header-bg: shade-color($popover-bg, 6%) !default;
1335
- $popover-header-color: $headings-color !default;
1336
- $popover-header-padding-y: .5rem !default;
1337
- $popover-header-padding-x: $spacer !default;
1338
-
1339
- $popover-body-color: $body-color !default;
1340
- $popover-body-padding-y: $spacer !default;
1341
- $popover-body-padding-x: $spacer !default;
1342
-
1343
- $popover-arrow-width: 1rem !default;
1344
- $popover-arrow-height: .5rem !default;
1345
- // scss-docs-end popover-variables
1346
-
1347
- // fusv-disable
1348
- // Deprecated in Bootstrap 5.2.0 for CSS variables
1349
- $popover-arrow-color: $popover-bg !default;
1350
- $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1351
- // fusv-enable
1352
-
1353
-
1354
- // Toasts
1355
-
1356
- // scss-docs-start toast-variables
1357
- $toast-max-width: 350px !default;
1358
- $toast-padding-x: .75rem !default;
1359
- $toast-padding-y: .5rem !default;
1360
- $toast-font-size: .875rem !default;
1361
- $toast-color: null !default;
1362
- $toast-background-color: rgba($white, .85) !default;
1363
- $toast-border-width: $border-width !default;
1364
- $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
- $toast-border-radius: $border-radius !default;
1366
- $toast-box-shadow: $box-shadow !default;
1367
- $toast-spacing: $container-padding-x !default;
1368
-
1369
- $toast-header-color: $gray-600 !default;
1370
- $toast-header-background-color: rgba($white, .85) !default;
1371
- $toast-header-border-color: rgba($black, .05) !default;
1372
- // scss-docs-end toast-variables
1373
-
1374
-
1375
- // Badges
1376
-
1377
- // scss-docs-start badge-variables
1378
- $badge-font-size: .75em !default;
1379
- $badge-font-weight: $font-weight-bold !default;
1380
- $badge-color: $white !default;
1381
- $badge-padding-y: .35em !default;
1382
- $badge-padding-x: .65em !default;
1383
- $badge-border-radius: $border-radius !default;
1384
- // scss-docs-end badge-variables
1385
-
1386
-
1387
- // Modals
1388
-
1389
- // scss-docs-start modal-variables
1390
- $modal-inner-padding: $spacer !default;
1391
-
1392
- $modal-footer-margin-between: .5rem !default;
1393
-
1394
- $modal-dialog-margin: .5rem !default;
1395
- $modal-dialog-margin-y-sm-up: 1.75rem !default;
1396
-
1397
- $modal-title-line-height: $line-height-base !default;
1398
-
1399
- $modal-content-color: null !default;
1400
- $modal-content-bg: $white !default;
1401
- $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1402
- $modal-content-border-width: $border-width !default;
1403
- $modal-content-border-radius: $border-radius-lg !default;
1404
- $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1405
- $modal-content-box-shadow-xs: $box-shadow-sm !default;
1406
- $modal-content-box-shadow-sm-up: $box-shadow !default;
1407
-
1408
- $modal-backdrop-bg: $black !default;
1409
- $modal-backdrop-opacity: .5 !default;
1410
-
1411
- $modal-header-border-color: var(--#{$prefix}border-color) !default;
1412
- $modal-header-border-width: $modal-content-border-width !default;
1413
- $modal-header-padding-y: $modal-inner-padding !default;
1414
- $modal-header-padding-x: $modal-inner-padding !default;
1415
- $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1416
-
1417
- $modal-footer-bg: null !default;
1418
- $modal-footer-border-color: $modal-header-border-color !default;
1419
- $modal-footer-border-width: $modal-header-border-width !default;
1420
-
1421
- $modal-sm: 300px !default;
1422
- $modal-md: 500px !default;
1423
- $modal-lg: 800px !default;
1424
- $modal-xl: 1140px !default;
1425
-
1426
- $modal-fade-transform: translate(0, -50px) !default;
1427
- $modal-show-transform: none !default;
1428
- $modal-transition: transform .3s ease-out !default;
1429
- $modal-scale-transform: scale(1.02) !default;
1430
- // scss-docs-end modal-variables
1431
-
1432
-
1433
- // Alerts
1434
- //
1435
- // Define alert colors, border radius, and padding.
1436
-
1437
- // scss-docs-start alert-variables
1438
- $alert-padding-y: $spacer !default;
1439
- $alert-padding-x: $spacer !default;
1440
- $alert-margin-bottom: 1rem !default;
1441
- $alert-border-radius: $border-radius !default;
1442
- $alert-link-font-weight: $font-weight-bold !default;
1443
- $alert-border-width: $border-width !default;
1444
- $alert-bg-scale: -80% !default;
1445
- $alert-border-scale: -70% !default;
1446
- $alert-color-scale: 40% !default;
1447
- $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
- // scss-docs-end alert-variables
1449
-
1450
-
1451
- // Progress bars
1452
-
1453
- // scss-docs-start progress-variables
1454
- $progress-height: 1rem !default;
1455
- $progress-font-size: $font-size-base * .75 !default;
1456
- $progress-bg: $gray-200 !default;
1457
- $progress-border-radius: $border-radius !default;
1458
- $progress-box-shadow: $box-shadow-inset !default;
1459
- $progress-bar-color: $white !default;
1460
- $progress-bar-bg: $primary !default;
1461
- $progress-bar-animation-timing: 1s linear infinite !default;
1462
- $progress-bar-transition: width .6s ease !default;
1463
- // scss-docs-end progress-variables
1464
-
1465
-
1466
- // List group
1467
-
1468
- // scss-docs-start list-group-variables
1469
- $list-group-color: $gray-900 !default;
1470
- $list-group-bg: $white !default;
1471
- $list-group-border-color: rgba($black, .125) !default;
1472
- $list-group-border-width: $border-width !default;
1473
- $list-group-border-radius: $border-radius !default;
1474
-
1475
- $list-group-item-padding-y: $spacer * .5 !default;
1476
- $list-group-item-padding-x: $spacer !default;
1477
- $list-group-item-bg-scale: -80% !default;
1478
- $list-group-item-color-scale: 40% !default;
1479
-
1480
- $list-group-hover-bg: $gray-100 !default;
1481
- $list-group-active-color: $component-active-color !default;
1482
- $list-group-active-bg: $component-active-bg !default;
1483
- $list-group-active-border-color: $list-group-active-bg !default;
1484
-
1485
- $list-group-disabled-color: $gray-600 !default;
1486
- $list-group-disabled-bg: $list-group-bg !default;
1487
-
1488
- $list-group-action-color: $gray-700 !default;
1489
- $list-group-action-hover-color: $list-group-action-color !default;
1490
-
1491
- $list-group-action-active-color: $body-color !default;
1492
- $list-group-action-active-bg: $gray-200 !default;
1493
- // scss-docs-end list-group-variables
1494
-
1495
-
1496
- // Image thumbnails
1497
-
1498
- // scss-docs-start thumbnail-variables
1499
- $thumbnail-padding: .25rem !default;
1500
- $thumbnail-bg: $body-bg !default;
1501
- $thumbnail-border-width: $border-width !default;
1502
- $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
- $thumbnail-border-radius: $border-radius !default;
1504
- $thumbnail-box-shadow: $box-shadow-sm !default;
1505
- // scss-docs-end thumbnail-variables
1506
-
1507
-
1508
- // Figures
1509
-
1510
- // scss-docs-start figure-variables
1511
- $figure-caption-font-size: $small-font-size !default;
1512
- $figure-caption-color: $gray-600 !default;
1513
- // scss-docs-end figure-variables
1514
-
1515
-
1516
- // Breadcrumbs
1517
-
1518
- // scss-docs-start breadcrumb-variables
1519
- $breadcrumb-font-size: null !default;
1520
- $breadcrumb-padding-y: 0 !default;
1521
- $breadcrumb-padding-x: 0 !default;
1522
- $breadcrumb-item-padding-x: .5rem !default;
1523
- $breadcrumb-margin-bottom: 1rem !default;
1524
- $breadcrumb-bg: null !default;
1525
- $breadcrumb-divider-color: $gray-600 !default;
1526
- $breadcrumb-active-color: $gray-600 !default;
1527
- $breadcrumb-divider: quote("/") !default;
1528
- $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
- $breadcrumb-border-radius: null !default;
1530
- // scss-docs-end breadcrumb-variables
1531
-
1532
- // Carousel
1533
-
1534
- // scss-docs-start carousel-variables
1535
- $carousel-control-color: $white !default;
1536
- $carousel-control-width: 15% !default;
1537
- $carousel-control-opacity: .5 !default;
1538
- $carousel-control-hover-opacity: .9 !default;
1539
- $carousel-control-transition: opacity .15s ease !default;
1540
-
1541
- $carousel-indicator-width: 30px !default;
1542
- $carousel-indicator-height: 3px !default;
1543
- $carousel-indicator-hit-area-height: 10px !default;
1544
- $carousel-indicator-spacer: 3px !default;
1545
- $carousel-indicator-opacity: .5 !default;
1546
- $carousel-indicator-active-bg: $white !default;
1547
- $carousel-indicator-active-opacity: 1 !default;
1548
- $carousel-indicator-transition: opacity .6s ease !default;
1549
-
1550
- $carousel-caption-width: 70% !default;
1551
- $carousel-caption-color: $white !default;
1552
- $carousel-caption-padding-y: 1.25rem !default;
1553
- $carousel-caption-spacer: 1.25rem !default;
1554
-
1555
- $carousel-control-icon-width: 2rem !default;
1556
-
1557
- $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;
1558
- $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;
1559
-
1560
- $carousel-transition-duration: .6s !default;
1561
- $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`)
1562
- // scss-docs-end carousel-variables
1563
-
1564
- // scss-docs-start carousel-dark-variables
1565
- $carousel-dark-indicator-active-bg: $black !default;
1566
- $carousel-dark-caption-color: $black !default;
1567
- $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1568
- // scss-docs-end carousel-dark-variables
1569
-
1570
-
1571
- // Spinners
1572
-
1573
- // scss-docs-start spinner-variables
1574
- $spinner-width: 2rem !default;
1575
- $spinner-height: $spinner-width !default;
1576
- $spinner-vertical-align: -.125em !default;
1577
- $spinner-border-width: .25em !default;
1578
- $spinner-animation-speed: .75s !default;
1579
-
1580
- $spinner-width-sm: 1rem !default;
1581
- $spinner-height-sm: $spinner-width-sm !default;
1582
- $spinner-border-width-sm: .2em !default;
1583
- // scss-docs-end spinner-variables
1584
-
1585
-
1586
- // Close
1587
-
1588
- // scss-docs-start close-variables
1589
- $btn-close-width: 1em !default;
1590
- $btn-close-height: $btn-close-width !default;
1591
- $btn-close-padding-x: .25em !default;
1592
- $btn-close-padding-y: $btn-close-padding-x !default;
1593
- $btn-close-color: $black !default;
1594
- $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;
1595
- $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1596
- $btn-close-opacity: .5 !default;
1597
- $btn-close-hover-opacity: .75 !default;
1598
- $btn-close-focus-opacity: 1 !default;
1599
- $btn-close-disabled-opacity: .25 !default;
1600
- $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1601
- // scss-docs-end close-variables
1602
-
1603
-
1604
- // Offcanvas
1605
-
1606
- // scss-docs-start offcanvas-variables
1607
- $offcanvas-padding-y: $modal-inner-padding !default;
1608
- $offcanvas-padding-x: $modal-inner-padding !default;
1609
- $offcanvas-horizontal-width: 400px !default;
1610
- $offcanvas-vertical-height: 30vh !default;
1611
- $offcanvas-transition-duration: .3s !default;
1612
- $offcanvas-border-color: $modal-content-border-color !default;
1613
- $offcanvas-border-width: $modal-content-border-width !default;
1614
- $offcanvas-title-line-height: $modal-title-line-height !default;
1615
- $offcanvas-bg-color: $modal-content-bg !default;
1616
- $offcanvas-color: $modal-content-color !default;
1617
- $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
- $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
- $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1620
- // scss-docs-end offcanvas-variables
1621
-
1622
- // Code
1623
-
1624
- $code-font-size: $small-font-size !default;
1625
- $code-color: $pink !default;
1626
-
1627
- $kbd-padding-y: .1875rem !default;
1628
- $kbd-padding-x: .375rem !default;
1629
- $kbd-font-size: $code-font-size !default;
1630
- $kbd-color: var(--#{$prefix}body-bg) !default;
1631
- $kbd-bg: var(--#{$prefix}body-color) !default;
1632
- $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1633
-
1634
- $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
+
1104
+ $navbar-light-color: rgba($black, .55) !default;
1105
+ $navbar-light-hover-color: rgba($black, .7) !default;
1106
+ $navbar-light-active-color: rgba($black, .9) !default;
1107
+ $navbar-light-disabled-color: rgba($black, .3) !default;
1108
+ $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;
1109
+ $navbar-light-toggler-border-color: rgba($black, .1) !default;
1110
+ $navbar-light-brand-color: $navbar-light-active-color !default;
1111
+ $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1112
+ // scss-docs-end navbar-variables
1113
+
1114
+ // scss-docs-start navbar-dark-variables
1115
+ $navbar-dark-color: rgba($white, .55) !default;
1116
+ $navbar-dark-hover-color: rgba($white, .75) !default;
1117
+ $navbar-dark-active-color: $white !default;
1118
+ $navbar-dark-disabled-color: rgba($white, .25) !default;
1119
+ $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;
1120
+ $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1121
+ $navbar-dark-brand-color: $navbar-dark-active-color !default;
1122
+ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1123
+ // scss-docs-end navbar-dark-variables
1124
+
1125
+
1126
+ // Dropdowns
1127
+ //
1128
+ // Dropdown menu container and contents.
1129
+
1130
+ // scss-docs-start dropdown-variables
1131
+ $dropdown-min-width: 10rem !default;
1132
+ $dropdown-padding-x: 0 !default;
1133
+ $dropdown-padding-y: .5rem !default;
1134
+ $dropdown-spacer: .125rem !default;
1135
+ $dropdown-font-size: $font-size-base !default;
1136
+ $dropdown-color: $body-color !default;
1137
+ $dropdown-bg: $white !default;
1138
+ $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1139
+ $dropdown-border-radius: $border-radius !default;
1140
+ $dropdown-border-width: $border-width !default;
1141
+ $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1142
+ $dropdown-divider-bg: $dropdown-border-color !default;
1143
+ $dropdown-divider-margin-y: $spacer * .5 !default;
1144
+ $dropdown-box-shadow: $box-shadow !default;
1145
+
1146
+ $dropdown-link-color: $gray-900 !default;
1147
+ $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1148
+ $dropdown-link-hover-bg: $gray-200 !default;
1149
+
1150
+ $dropdown-link-active-color: $component-active-color !default;
1151
+ $dropdown-link-active-bg: $component-active-bg !default;
1152
+
1153
+ $dropdown-link-disabled-color: $gray-500 !default;
1154
+
1155
+ $dropdown-item-padding-y: $spacer * .25 !default;
1156
+ $dropdown-item-padding-x: $spacer !default;
1157
+
1158
+ $dropdown-header-color: $gray-600 !default;
1159
+ $dropdown-header-padding-x: $dropdown-item-padding-x !default;
1160
+ $dropdown-header-padding-y: $dropdown-padding-y !default;
1161
+ // fusv-disable
1162
+ $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
1163
+ // fusv-enable
1164
+ // scss-docs-end dropdown-variables
1165
+
1166
+ // scss-docs-start dropdown-dark-variables
1167
+ $dropdown-dark-color: $gray-300 !default;
1168
+ $dropdown-dark-bg: $gray-800 !default;
1169
+ $dropdown-dark-border-color: $dropdown-border-color !default;
1170
+ $dropdown-dark-divider-bg: $dropdown-divider-bg !default;
1171
+ $dropdown-dark-box-shadow: null !default;
1172
+ $dropdown-dark-link-color: $dropdown-dark-color !default;
1173
+ $dropdown-dark-link-hover-color: $white !default;
1174
+ $dropdown-dark-link-hover-bg: rgba($white, .15) !default;
1175
+ $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
1176
+ $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
1177
+ $dropdown-dark-link-disabled-color: $gray-500 !default;
1178
+ $dropdown-dark-header-color: $gray-500 !default;
1179
+ // scss-docs-end dropdown-dark-variables
1180
+
1181
+
1182
+ // Pagination
1183
+
1184
+ // scss-docs-start pagination-variables
1185
+ $pagination-padding-y: .375rem !default;
1186
+ $pagination-padding-x: .75rem !default;
1187
+ $pagination-padding-y-sm: .25rem !default;
1188
+ $pagination-padding-x-sm: .5rem !default;
1189
+ $pagination-padding-y-lg: .75rem !default;
1190
+ $pagination-padding-x-lg: 1.5rem !default;
1191
+
1192
+ $pagination-font-size: $font-size-base !default;
1193
+
1194
+ $pagination-color: var(--#{$prefix}link-color) !default;
1195
+ $pagination-bg: $white !default;
1196
+ $pagination-border-radius: $border-radius !default;
1197
+ $pagination-border-width: $border-width !default;
1198
+ $pagination-margin-start: ($pagination-border-width * -1) !default;
1199
+ $pagination-border-color: $gray-300 !default;
1200
+
1201
+ $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1202
+ $pagination-focus-bg: $gray-200 !default;
1203
+ $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1204
+ $pagination-focus-outline: 0 !default;
1205
+
1206
+ $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1207
+ $pagination-hover-bg: $gray-200 !default;
1208
+ $pagination-hover-border-color: $gray-300 !default;
1209
+
1210
+ $pagination-active-color: $component-active-color !default;
1211
+ $pagination-active-bg: $component-active-bg !default;
1212
+ $pagination-active-border-color: $pagination-active-bg !default;
1213
+
1214
+ $pagination-disabled-color: $gray-600 !default;
1215
+ $pagination-disabled-bg: $white !default;
1216
+ $pagination-disabled-border-color: $gray-300 !default;
1217
+
1218
+ $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;
1219
+
1220
+ $pagination-border-radius-sm: $border-radius-sm !default;
1221
+ $pagination-border-radius-lg: $border-radius-lg !default;
1222
+ // scss-docs-end pagination-variables
1223
+
1224
+
1225
+ // Placeholders
1226
+
1227
+ // scss-docs-start placeholders
1228
+ $placeholder-opacity-max: .5 !default;
1229
+ $placeholder-opacity-min: .2 !default;
1230
+ // scss-docs-end placeholders
1231
+
1232
+ // Cards
1233
+
1234
+ // scss-docs-start card-variables
1235
+ $card-spacer-y: $spacer !default;
1236
+ $card-spacer-x: $spacer !default;
1237
+ $card-title-spacer-y: $spacer * .5 !default;
1238
+ $card-border-width: $border-width !default;
1239
+ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1240
+ $card-border-radius: $border-radius !default;
1241
+ $card-box-shadow: null !default;
1242
+ $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1243
+ $card-cap-padding-y: $card-spacer-y * .5 !default;
1244
+ $card-cap-padding-x: $card-spacer-x !default;
1245
+ $card-cap-bg: rgba($black, .03) !default;
1246
+ $card-cap-color: null !default;
1247
+ $card-height: null !default;
1248
+ $card-color: null !default;
1249
+ $card-bg: $white !default;
1250
+ $card-img-overlay-padding: $spacer !default;
1251
+ $card-group-margin: $grid-gutter-width * .5 !default;
1252
+ // scss-docs-end card-variables
1253
+
1254
+ // Accordion
1255
+
1256
+ // scss-docs-start accordion-variables
1257
+ $accordion-padding-y: 1rem !default;
1258
+ $accordion-padding-x: 1.25rem !default;
1259
+ $accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
1260
+ $accordion-bg: $body-bg !default;
1261
+ $accordion-border-width: $border-width !default;
1262
+ $accordion-border-color: var(--#{$prefix}border-color) !default;
1263
+ $accordion-border-radius: $border-radius !default;
1264
+ $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1265
+
1266
+ $accordion-body-padding-y: $accordion-padding-y !default;
1267
+ $accordion-body-padding-x: $accordion-padding-x !default;
1268
+
1269
+ $accordion-button-padding-y: $accordion-padding-y !default;
1270
+ $accordion-button-padding-x: $accordion-padding-x !default;
1271
+ $accordion-button-color: $accordion-color !default;
1272
+ $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1273
+ $accordion-transition: $btn-transition, border-radius .15s ease !default;
1274
+ $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1275
+ $accordion-button-active-color: shade-color($primary, 10%) !default;
1276
+
1277
+ $accordion-button-focus-border-color: $input-focus-border-color !default;
1278
+ $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1279
+
1280
+ $accordion-icon-width: 1.25rem !default;
1281
+ $accordion-icon-color: $accordion-button-color !default;
1282
+ $accordion-icon-active-color: $accordion-button-active-color !default;
1283
+ $accordion-icon-transition: transform .2s ease-in-out !default;
1284
+ $accordion-icon-transform: rotate(-180deg) !default;
1285
+
1286
+ $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;
1287
+ $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;
1288
+ // scss-docs-end accordion-variables
1289
+
1290
+ // Tooltips
1291
+
1292
+ // scss-docs-start tooltip-variables
1293
+ $tooltip-font-size: $font-size-sm !default;
1294
+ $tooltip-max-width: 200px !default;
1295
+ $tooltip-color: $white !default;
1296
+ $tooltip-bg: $black !default;
1297
+ $tooltip-border-radius: $border-radius !default;
1298
+ $tooltip-opacity: .9 !default;
1299
+ $tooltip-padding-y: $spacer * .25 !default;
1300
+ $tooltip-padding-x: $spacer * .5 !default;
1301
+ $tooltip-margin: null !default; // TODO: remove this in v6
1302
+
1303
+ $tooltip-arrow-width: .8rem !default;
1304
+ $tooltip-arrow-height: .4rem !default;
1305
+ // fusv-disable
1306
+ $tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
1307
+ // fusv-enable
1308
+ // scss-docs-end tooltip-variables
1309
+
1310
+ // Form tooltips must come after regular tooltips
1311
+ // scss-docs-start tooltip-feedback-variables
1312
+ $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1313
+ $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1314
+ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1315
+ $form-feedback-tooltip-line-height: null !default;
1316
+ $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1317
+ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1318
+ // scss-docs-end tooltip-feedback-variables
1319
+
1320
+
1321
+ // Popovers
1322
+
1323
+ // scss-docs-start popover-variables
1324
+ $popover-font-size: $font-size-sm !default;
1325
+ $popover-bg: $white !default;
1326
+ $popover-max-width: 276px !default;
1327
+ $popover-border-width: $border-width !default;
1328
+ $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1329
+ $popover-border-radius: $border-radius-lg !default;
1330
+ $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
1331
+ $popover-box-shadow: $box-shadow !default;
1332
+
1333
+ $popover-header-font-size: $font-size-base !default;
1334
+ $popover-header-bg: shade-color($popover-bg, 6%) !default;
1335
+ $popover-header-color: $headings-color !default;
1336
+ $popover-header-padding-y: .5rem !default;
1337
+ $popover-header-padding-x: $spacer !default;
1338
+
1339
+ $popover-body-color: $body-color !default;
1340
+ $popover-body-padding-y: $spacer !default;
1341
+ $popover-body-padding-x: $spacer !default;
1342
+
1343
+ $popover-arrow-width: 1rem !default;
1344
+ $popover-arrow-height: .5rem !default;
1345
+ // scss-docs-end popover-variables
1346
+
1347
+ // fusv-disable
1348
+ // Deprecated in Bootstrap 5.2.0 for CSS variables
1349
+ $popover-arrow-color: $popover-bg !default;
1350
+ $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1351
+ // fusv-enable
1352
+
1353
+
1354
+ // Toasts
1355
+
1356
+ // scss-docs-start toast-variables
1357
+ $toast-max-width: 350px !default;
1358
+ $toast-padding-x: .75rem !default;
1359
+ $toast-padding-y: .5rem !default;
1360
+ $toast-font-size: .875rem !default;
1361
+ $toast-color: null !default;
1362
+ $toast-background-color: rgba($white, .85) !default;
1363
+ $toast-border-width: $border-width !default;
1364
+ $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1365
+ $toast-border-radius: $border-radius !default;
1366
+ $toast-box-shadow: $box-shadow !default;
1367
+ $toast-spacing: $container-padding-x !default;
1368
+
1369
+ $toast-header-color: $gray-600 !default;
1370
+ $toast-header-background-color: rgba($white, .85) !default;
1371
+ $toast-header-border-color: rgba($black, .05) !default;
1372
+ // scss-docs-end toast-variables
1373
+
1374
+
1375
+ // Badges
1376
+
1377
+ // scss-docs-start badge-variables
1378
+ $badge-font-size: .75em !default;
1379
+ $badge-font-weight: $font-weight-bold !default;
1380
+ $badge-color: $white !default;
1381
+ $badge-padding-y: .35em !default;
1382
+ $badge-padding-x: .65em !default;
1383
+ $badge-border-radius: $border-radius !default;
1384
+ // scss-docs-end badge-variables
1385
+
1386
+
1387
+ // Modals
1388
+
1389
+ // scss-docs-start modal-variables
1390
+ $modal-inner-padding: $spacer !default;
1391
+
1392
+ $modal-footer-margin-between: .5rem !default;
1393
+
1394
+ $modal-dialog-margin: .5rem !default;
1395
+ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1396
+
1397
+ $modal-title-line-height: $line-height-base !default;
1398
+
1399
+ $modal-content-color: null !default;
1400
+ $modal-content-bg: $white !default;
1401
+ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1402
+ $modal-content-border-width: $border-width !default;
1403
+ $modal-content-border-radius: $border-radius-lg !default;
1404
+ $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1405
+ $modal-content-box-shadow-xs: $box-shadow-sm !default;
1406
+ $modal-content-box-shadow-sm-up: $box-shadow !default;
1407
+
1408
+ $modal-backdrop-bg: $black !default;
1409
+ $modal-backdrop-opacity: .5 !default;
1410
+
1411
+ $modal-header-border-color: var(--#{$prefix}border-color) !default;
1412
+ $modal-header-border-width: $modal-content-border-width !default;
1413
+ $modal-header-padding-y: $modal-inner-padding !default;
1414
+ $modal-header-padding-x: $modal-inner-padding !default;
1415
+ $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1416
+
1417
+ $modal-footer-bg: null !default;
1418
+ $modal-footer-border-color: $modal-header-border-color !default;
1419
+ $modal-footer-border-width: $modal-header-border-width !default;
1420
+
1421
+ $modal-sm: 300px !default;
1422
+ $modal-md: 500px !default;
1423
+ $modal-lg: 800px !default;
1424
+ $modal-xl: 1140px !default;
1425
+
1426
+ $modal-fade-transform: translate(0, -50px) !default;
1427
+ $modal-show-transform: none !default;
1428
+ $modal-transition: transform .3s ease-out !default;
1429
+ $modal-scale-transform: scale(1.02) !default;
1430
+ // scss-docs-end modal-variables
1431
+
1432
+
1433
+ // Alerts
1434
+ //
1435
+ // Define alert colors, border radius, and padding.
1436
+
1437
+ // scss-docs-start alert-variables
1438
+ $alert-padding-y: $spacer !default;
1439
+ $alert-padding-x: $spacer !default;
1440
+ $alert-margin-bottom: 1rem !default;
1441
+ $alert-border-radius: $border-radius !default;
1442
+ $alert-link-font-weight: $font-weight-bold !default;
1443
+ $alert-border-width: $border-width !default;
1444
+ $alert-bg-scale: -80% !default;
1445
+ $alert-border-scale: -70% !default;
1446
+ $alert-color-scale: 40% !default;
1447
+ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1448
+ // scss-docs-end alert-variables
1449
+
1450
+
1451
+ // Progress bars
1452
+
1453
+ // scss-docs-start progress-variables
1454
+ $progress-height: 1rem !default;
1455
+ $progress-font-size: $font-size-base * .75 !default;
1456
+ $progress-bg: $gray-200 !default;
1457
+ $progress-border-radius: $border-radius !default;
1458
+ $progress-box-shadow: $box-shadow-inset !default;
1459
+ $progress-bar-color: $white !default;
1460
+ $progress-bar-bg: $primary !default;
1461
+ $progress-bar-animation-timing: 1s linear infinite !default;
1462
+ $progress-bar-transition: width .6s ease !default;
1463
+ // scss-docs-end progress-variables
1464
+
1465
+
1466
+ // List group
1467
+
1468
+ // scss-docs-start list-group-variables
1469
+ $list-group-color: $gray-900 !default;
1470
+ $list-group-bg: $white !default;
1471
+ $list-group-border-color: rgba($black, .125) !default;
1472
+ $list-group-border-width: $border-width !default;
1473
+ $list-group-border-radius: $border-radius !default;
1474
+
1475
+ $list-group-item-padding-y: $spacer * .5 !default;
1476
+ $list-group-item-padding-x: $spacer !default;
1477
+ $list-group-item-bg-scale: -80% !default;
1478
+ $list-group-item-color-scale: 40% !default;
1479
+
1480
+ $list-group-hover-bg: $gray-100 !default;
1481
+ $list-group-active-color: $component-active-color !default;
1482
+ $list-group-active-bg: $component-active-bg !default;
1483
+ $list-group-active-border-color: $list-group-active-bg !default;
1484
+
1485
+ $list-group-disabled-color: $gray-600 !default;
1486
+ $list-group-disabled-bg: $list-group-bg !default;
1487
+
1488
+ $list-group-action-color: $gray-700 !default;
1489
+ $list-group-action-hover-color: $list-group-action-color !default;
1490
+
1491
+ $list-group-action-active-color: $body-color !default;
1492
+ $list-group-action-active-bg: $gray-200 !default;
1493
+ // scss-docs-end list-group-variables
1494
+
1495
+
1496
+ // Image thumbnails
1497
+
1498
+ // scss-docs-start thumbnail-variables
1499
+ $thumbnail-padding: .25rem !default;
1500
+ $thumbnail-bg: $body-bg !default;
1501
+ $thumbnail-border-width: $border-width !default;
1502
+ $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1503
+ $thumbnail-border-radius: $border-radius !default;
1504
+ $thumbnail-box-shadow: $box-shadow-sm !default;
1505
+ // scss-docs-end thumbnail-variables
1506
+
1507
+
1508
+ // Figures
1509
+
1510
+ // scss-docs-start figure-variables
1511
+ $figure-caption-font-size: $small-font-size !default;
1512
+ $figure-caption-color: $gray-600 !default;
1513
+ // scss-docs-end figure-variables
1514
+
1515
+
1516
+ // Breadcrumbs
1517
+
1518
+ // scss-docs-start breadcrumb-variables
1519
+ $breadcrumb-font-size: null !default;
1520
+ $breadcrumb-padding-y: 0 !default;
1521
+ $breadcrumb-padding-x: 0 !default;
1522
+ $breadcrumb-item-padding-x: .5rem !default;
1523
+ $breadcrumb-margin-bottom: 1rem !default;
1524
+ $breadcrumb-bg: null !default;
1525
+ $breadcrumb-divider-color: $gray-600 !default;
1526
+ $breadcrumb-active-color: $gray-600 !default;
1527
+ $breadcrumb-divider: quote("/") !default;
1528
+ $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1529
+ $breadcrumb-border-radius: null !default;
1530
+ // scss-docs-end breadcrumb-variables
1531
+
1532
+ // Carousel
1533
+
1534
+ // scss-docs-start carousel-variables
1535
+ $carousel-control-color: $white !default;
1536
+ $carousel-control-width: 15% !default;
1537
+ $carousel-control-opacity: .5 !default;
1538
+ $carousel-control-hover-opacity: .9 !default;
1539
+ $carousel-control-transition: opacity .15s ease !default;
1540
+
1541
+ $carousel-indicator-width: 30px !default;
1542
+ $carousel-indicator-height: 3px !default;
1543
+ $carousel-indicator-hit-area-height: 10px !default;
1544
+ $carousel-indicator-spacer: 3px !default;
1545
+ $carousel-indicator-opacity: .5 !default;
1546
+ $carousel-indicator-active-bg: $white !default;
1547
+ $carousel-indicator-active-opacity: 1 !default;
1548
+ $carousel-indicator-transition: opacity .6s ease !default;
1549
+
1550
+ $carousel-caption-width: 70% !default;
1551
+ $carousel-caption-color: $white !default;
1552
+ $carousel-caption-padding-y: 1.25rem !default;
1553
+ $carousel-caption-spacer: 1.25rem !default;
1554
+
1555
+ $carousel-control-icon-width: 2rem !default;
1556
+
1557
+ $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;
1558
+ $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;
1559
+
1560
+ $carousel-transition-duration: .6s !default;
1561
+ $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`)
1562
+ // scss-docs-end carousel-variables
1563
+
1564
+ // scss-docs-start carousel-dark-variables
1565
+ $carousel-dark-indicator-active-bg: $black !default;
1566
+ $carousel-dark-caption-color: $black !default;
1567
+ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1568
+ // scss-docs-end carousel-dark-variables
1569
+
1570
+
1571
+ // Spinners
1572
+
1573
+ // scss-docs-start spinner-variables
1574
+ $spinner-width: 2rem !default;
1575
+ $spinner-height: $spinner-width !default;
1576
+ $spinner-vertical-align: -.125em !default;
1577
+ $spinner-border-width: .25em !default;
1578
+ $spinner-animation-speed: .75s !default;
1579
+
1580
+ $spinner-width-sm: 1rem !default;
1581
+ $spinner-height-sm: $spinner-width-sm !default;
1582
+ $spinner-border-width-sm: .2em !default;
1583
+ // scss-docs-end spinner-variables
1584
+
1585
+
1586
+ // Close
1587
+
1588
+ // scss-docs-start close-variables
1589
+ $btn-close-width: 1em !default;
1590
+ $btn-close-height: $btn-close-width !default;
1591
+ $btn-close-padding-x: .25em !default;
1592
+ $btn-close-padding-y: $btn-close-padding-x !default;
1593
+ $btn-close-color: $black !default;
1594
+ $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;
1595
+ $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1596
+ $btn-close-opacity: .5 !default;
1597
+ $btn-close-hover-opacity: .75 !default;
1598
+ $btn-close-focus-opacity: 1 !default;
1599
+ $btn-close-disabled-opacity: .25 !default;
1600
+ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1601
+ // scss-docs-end close-variables
1602
+
1603
+
1604
+ // Offcanvas
1605
+
1606
+ // scss-docs-start offcanvas-variables
1607
+ $offcanvas-padding-y: $modal-inner-padding !default;
1608
+ $offcanvas-padding-x: $modal-inner-padding !default;
1609
+ $offcanvas-horizontal-width: 400px !default;
1610
+ $offcanvas-vertical-height: 30vh !default;
1611
+ $offcanvas-transition-duration: .3s !default;
1612
+ $offcanvas-border-color: $modal-content-border-color !default;
1613
+ $offcanvas-border-width: $modal-content-border-width !default;
1614
+ $offcanvas-title-line-height: $modal-title-line-height !default;
1615
+ $offcanvas-bg-color: $modal-content-bg !default;
1616
+ $offcanvas-color: $modal-content-color !default;
1617
+ $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1618
+ $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1619
+ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1620
+ // scss-docs-end offcanvas-variables
1621
+
1622
+ // Code
1623
+
1624
+ $code-font-size: $small-font-size !default;
1625
+ $code-color: $pink !default;
1626
+
1627
+ $kbd-padding-y: .1875rem !default;
1628
+ $kbd-padding-x: .375rem !default;
1629
+ $kbd-font-size: $code-font-size !default;
1630
+ $kbd-color: var(--#{$prefix}body-bg) !default;
1631
+ $kbd-bg: var(--#{$prefix}body-color) !default;
1632
+ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1633
+
1634
+ $pre-color: null !default;