bootstrap 5.0.0.beta2 → 5.0.0.beta3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap-sprockets.js +1 -0
  4. data/assets/javascripts/bootstrap.js +2051 -2009
  5. data/assets/javascripts/bootstrap.min.js +2 -2
  6. data/assets/javascripts/bootstrap/alert.js +75 -118
  7. data/assets/javascripts/bootstrap/base-component.js +23 -37
  8. data/assets/javascripts/bootstrap/button.js +39 -78
  9. data/assets/javascripts/bootstrap/carousel.js +284 -364
  10. data/assets/javascripts/bootstrap/collapse.js +178 -247
  11. data/assets/javascripts/bootstrap/dom/data.js +34 -47
  12. data/assets/javascripts/bootstrap/dom/event-handler.js +71 -77
  13. data/assets/javascripts/bootstrap/dom/manipulator.js +23 -21
  14. data/assets/javascripts/bootstrap/dom/selector-engine.js +20 -28
  15. data/assets/javascripts/bootstrap/dropdown.js +195 -265
  16. data/assets/javascripts/bootstrap/modal.js +256 -344
  17. data/assets/javascripts/bootstrap/offcanvas.js +508 -0
  18. data/assets/javascripts/bootstrap/popover.js +88 -157
  19. data/assets/javascripts/bootstrap/scrollspy.js +134 -212
  20. data/assets/javascripts/bootstrap/tab.js +108 -142
  21. data/assets/javascripts/bootstrap/toast.js +113 -183
  22. data/assets/javascripts/bootstrap/tooltip.js +297 -392
  23. data/assets/stylesheets/_bootstrap-grid.scss +1 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
  25. data/assets/stylesheets/_bootstrap.scss +2 -1
  26. data/assets/stylesheets/bootstrap/_accordion.scss +22 -32
  27. data/assets/stylesheets/bootstrap/_buttons.scss +2 -0
  28. data/assets/stylesheets/bootstrap/_card.scss +1 -1
  29. data/assets/stylesheets/bootstrap/_dropdown.scss +3 -6
  30. data/assets/stylesheets/bootstrap/_list-group.scss +11 -0
  31. data/assets/stylesheets/bootstrap/_modal.scss +2 -0
  32. data/assets/stylesheets/bootstrap/_nav.scss +7 -0
  33. data/assets/stylesheets/bootstrap/_navbar.scss +2 -0
  34. data/assets/stylesheets/bootstrap/_offcanvas.scss +77 -0
  35. data/assets/stylesheets/bootstrap/_progress.scss +3 -0
  36. data/assets/stylesheets/bootstrap/_reboot.scss +7 -21
  37. data/assets/stylesheets/bootstrap/_spinners.scss +4 -0
  38. data/assets/stylesheets/bootstrap/_transitions.scss +2 -0
  39. data/assets/stylesheets/bootstrap/_utilities.scss +65 -37
  40. data/assets/stylesheets/bootstrap/_variables.scss +138 -30
  41. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  42. data/assets/stylesheets/bootstrap/forms/_form-control.scss +0 -4
  43. data/assets/stylesheets/bootstrap/mixins/_alert.scss +2 -0
  44. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +2 -0
  45. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +6 -1
  46. data/assets/stylesheets/bootstrap/mixins/_caret.scss +2 -0
  47. data/assets/stylesheets/bootstrap/mixins/_forms.scss +11 -1
  48. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  49. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +2 -0
  50. data/bootstrap.gemspec +1 -1
  51. data/lib/bootstrap/version.rb +2 -2
  52. data/tasks/updater/js.rb +1 -1
  53. data/tasks/updater/network.rb +7 -1
  54. metadata +6 -4
@@ -1,14 +1,19 @@
1
+ // stylelint-disable indentation
2
+
1
3
  // Utilities
2
4
 
3
5
  $utilities: () !default;
4
6
  // stylelint-disable-next-line scss/dollar-variable-default
5
7
  $utilities: map-merge(
6
8
  (
9
+ // scss-docs-start utils-vertical-align
7
10
  "align": (
8
11
  property: vertical-align,
9
12
  class: align,
10
13
  values: baseline top middle bottom text-bottom text-top
11
14
  ),
15
+ // scss-docs-end utils-vertical-align
16
+ // scss-docs-start utils-float
12
17
  "float": (
13
18
  responsive: true,
14
19
  property: float,
@@ -18,10 +23,13 @@ $utilities: map-merge(
18
23
  none: none,
19
24
  )
20
25
  ),
26
+ // scss-docs-end utils-float
27
+ // scss-docs-start utils-overflow
21
28
  "overflow": (
22
29
  property: overflow,
23
30
  values: auto hidden visible scroll,
24
31
  ),
32
+ // scss-docs-end utils-overflow
25
33
  // scss-docs-start utils-display
26
34
  "display": (
27
35
  responsive: true,
@@ -31,6 +39,7 @@ $utilities: map-merge(
31
39
  values: inline inline-block block grid table table-row table-cell flex inline-flex none
32
40
  ),
33
41
  // scss-docs-end utils-display
42
+ // scss-docs-start utils-shadow
34
43
  "shadow": (
35
44
  property: box-shadow,
36
45
  class: shadow,
@@ -41,6 +50,8 @@ $utilities: map-merge(
41
50
  none: none,
42
51
  )
43
52
  ),
53
+ // scss-docs-end utils-shadow
54
+ // scss-docs-start utils-position
44
55
  "position": (
45
56
  property: position,
46
57
  values: static relative absolute fixed sticky
@@ -72,6 +83,8 @@ $utilities: map-merge(
72
83
  y: translateY(-50%),
73
84
  )
74
85
  ),
86
+ // scss-docs-end utils-position
87
+ // scss-docs-start utils-borders
75
88
  "border": (
76
89
  property: border,
77
90
  values: (
@@ -119,7 +132,9 @@ $utilities: map-merge(
119
132
  class: border,
120
133
  values: $border-widths
121
134
  ),
135
+ // scss-docs-end utils-borders
122
136
  // Sizing utilities
137
+ // scss-docs-start utils-sizing
123
138
  "width": (
124
139
  property: width,
125
140
  class: w,
@@ -172,7 +187,9 @@ $utilities: map-merge(
172
187
  class: min-vh,
173
188
  values: (100: 100vh)
174
189
  ),
190
+ // scss-docs-end utils-sizing
175
191
  // Flex utilities
192
+ // scss-docs-start utils-flex
176
193
  "flex": (
177
194
  responsive: true,
178
195
  property: flex,
@@ -275,7 +292,9 @@ $utilities: map-merge(
275
292
  last: 6,
276
293
  ),
277
294
  ),
295
+ // scss-docs-end utils-flex
278
296
  // Margin utilities
297
+ // scss-docs-start utils-spacing
279
298
  "margin": (
280
299
  responsive: true,
281
300
  property: margin,
@@ -404,7 +423,14 @@ $utilities: map-merge(
404
423
  class: ps,
405
424
  values: $spacers
406
425
  ),
426
+ // scss-docs-end utils-spacing
407
427
  // Text
428
+ // scss-docs-start utils-text
429
+ "font-family": (
430
+ property: font-family,
431
+ class: font,
432
+ values: (monospace: var(--#{$variable-prefix}font-monospace))
433
+ ),
408
434
  "font-size": (
409
435
  rfs: true,
410
436
  property: font-size,
@@ -427,10 +453,15 @@ $utilities: map-merge(
427
453
  bolder: $font-weight-bolder
428
454
  )
429
455
  ),
430
- "text-transform": (
431
- property: text-transform,
432
- class: text,
433
- values: lowercase uppercase capitalize
456
+ "line-height": (
457
+ property: line-height,
458
+ class: lh,
459
+ values: (
460
+ 1: 1,
461
+ sm: $line-height-sm,
462
+ base: $line-height-base,
463
+ lg: $line-height-lg,
464
+ )
434
465
  ),
435
466
  "text-align": (
436
467
  responsive: true,
@@ -442,6 +473,30 @@ $utilities: map-merge(
442
473
  center: center,
443
474
  )
444
475
  ),
476
+ "text-decoration": (
477
+ property: text-decoration,
478
+ values: none underline line-through
479
+ ),
480
+ "text-transform": (
481
+ property: text-transform,
482
+ class: text,
483
+ values: lowercase uppercase capitalize
484
+ ),
485
+ "white-space": (
486
+ property: white-space,
487
+ class: text,
488
+ values: (
489
+ wrap: normal,
490
+ nowrap: nowrap,
491
+ )
492
+ ),
493
+ "word-wrap": (
494
+ property: word-wrap word-break,
495
+ class: text,
496
+ values: (break: break-word),
497
+ rtl: false
498
+ ),
499
+ // scss-docs-end utils-text
445
500
  // scss-docs-start utils-color
446
501
  "color": (
447
502
  property: color,
@@ -459,16 +514,6 @@ $utilities: map-merge(
459
514
  )
460
515
  ),
461
516
  // scss-docs-end utils-color
462
- "line-height": (
463
- property: line-height,
464
- class: lh,
465
- values: (
466
- 1: 1,
467
- sm: $line-height-sm,
468
- base: $line-height-base,
469
- lg: $line-height-lg,
470
- )
471
- ),
472
517
  // scss-docs-start utils-bg-color
473
518
  "background-color": (
474
519
  property: background-color,
@@ -488,29 +533,7 @@ $utilities: map-merge(
488
533
  class: bg,
489
534
  values: (gradient: var(--#{$variable-prefix}gradient))
490
535
  ),
491
- "white-space": (
492
- property: white-space,
493
- class: text,
494
- values: (
495
- wrap: normal,
496
- nowrap: nowrap,
497
- )
498
- ),
499
- "text-decoration": (
500
- property: text-decoration,
501
- values: none underline line-through
502
- ),
503
- "word-wrap": (
504
- property: word-wrap word-break,
505
- class: text,
506
- values: (break: break-word),
507
- rtl: false
508
- ),
509
- "font-family": (
510
- property: font-family,
511
- class: font,
512
- values: (monospace: var(--#{$variable-prefix}font-monospace))
513
- ),
536
+ // scss-docs-start utils-interaction
514
537
  "user-select": (
515
538
  property: user-select,
516
539
  values: all auto none
@@ -520,6 +543,8 @@ $utilities: map-merge(
520
543
  class: pe,
521
544
  values: none auto,
522
545
  ),
546
+ // scss-docs-end utils-interaction
547
+ // scss-docs-start utils-border-radius
523
548
  "rounded": (
524
549
  property: border-radius,
525
550
  class: rounded,
@@ -553,6 +578,8 @@ $utilities: map-merge(
553
578
  class: rounded-start,
554
579
  values: (null: $border-radius)
555
580
  ),
581
+ // scss-docs-end utils-border-radius
582
+ // scss-docs-start utils-visibility
556
583
  "visibility": (
557
584
  property: visibility,
558
585
  class: null,
@@ -561,6 +588,7 @@ $utilities: map-merge(
561
588
  invisible: hidden,
562
589
  )
563
590
  )
591
+ // scss-docs-end utils-visibility
564
592
  ),
565
593
  $utilities
566
594
  );
@@ -246,6 +246,7 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
246
246
  // variables. Mostly focused on spacing.
247
247
  // You can add more entries to the $spacers map, should you need more variation.
248
248
 
249
+ // scss-docs-start spacer-variables-maps
249
250
  $spacer: 1rem !default;
250
251
  $spacers: (
251
252
  0: 0,
@@ -257,17 +258,19 @@ $spacers: (
257
258
  ) !default;
258
259
 
259
260
  $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
261
+ // scss-docs-end spacer-variables-maps
260
262
 
261
263
  // Position
262
264
  //
263
265
  // Define the edge positioning anchors of the position utilities.
264
266
 
267
+ // scss-docs-start position-map
265
268
  $position-values: (
266
269
  0: 0,
267
270
  50: 50%,
268
271
  100: 100%
269
272
  ) !default;
270
-
273
+ // scss-docs-end position-map
271
274
 
272
275
  // Body
273
276
  //
@@ -354,9 +357,9 @@ $container-padding-x: $grid-gutter-width / 2 !default;
354
357
  //
355
358
  // Define common padding and border radius sizes and more.
356
359
 
360
+ // scss-docs-start border-variables
357
361
  $border-width: 1px !default;
358
362
  $border-widths: (
359
- 0: 0,
360
363
  1: 1px,
361
364
  2: 2px,
362
365
  3: 3px,
@@ -365,27 +368,36 @@ $border-widths: (
365
368
  ) !default;
366
369
 
367
370
  $border-color: $gray-300 !default;
371
+ // scss-docs-end border-variables
368
372
 
373
+ // scss-docs-start border-radius-variables
369
374
  $border-radius: .25rem !default;
370
375
  $border-radius-sm: .2rem !default;
371
376
  $border-radius-lg: .3rem !default;
372
377
  $border-radius-pill: 50rem !default;
378
+ // scss-docs-end border-radius-variables
373
379
 
380
+ // scss-docs-start box-shadow-variables
374
381
  $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
375
382
  $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
376
383
  $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
377
384
  $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
385
+ // scss-docs-end box-shadow-variables
378
386
 
379
387
  $component-active-color: $white !default;
380
388
  $component-active-bg: $primary !default;
381
389
 
390
+ // scss-docs-start caret-variables
382
391
  $caret-width: .3em !default;
383
392
  $caret-vertical-align: $caret-width * .85 !default;
384
393
  $caret-spacing: $caret-width * .85 !default;
394
+ // scss-docs-end caret-variables
385
395
 
386
396
  $transition-base: all .2s ease-in-out !default;
387
397
  $transition-fade: opacity .15s linear !default;
398
+ // scss-docs-start collapse-transition
388
399
  $transition-collapse: height .35s ease !default;
400
+ // scss-docs-end collapse-transition
389
401
 
390
402
  // stylelint-disable function-disallowed-list
391
403
  // scss-docs-start aspect-ratios
@@ -402,6 +414,7 @@ $aspect-ratios: (
402
414
  //
403
415
  // Font, line-height, and color for body text, headings, and more.
404
416
 
417
+ // scss-docs-start font-variables
405
418
  // stylelint-disable value-keyword-case
406
419
  $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
407
420
  $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
@@ -434,6 +447,7 @@ $h3-font-size: $font-size-base * 1.75 !default;
434
447
  $h4-font-size: $font-size-base * 1.5 !default;
435
448
  $h5-font-size: $font-size-base * 1.25 !default;
436
449
  $h6-font-size: $font-size-base !default;
450
+ // scss-docs-end font-variables
437
451
 
438
452
  // scss-docs-start font-sizes
439
453
  $font-sizes: (
@@ -446,12 +460,14 @@ $font-sizes: (
446
460
  ) !default;
447
461
  // scss-docs-end font-sizes
448
462
 
463
+ // scss-docs-start headings-variables
449
464
  $headings-margin-bottom: $spacer / 2 !default;
450
465
  $headings-font-family: null !default;
451
466
  $headings-font-style: null !default;
452
467
  $headings-font-weight: 500 !default;
453
468
  $headings-line-height: 1.2 !default;
454
469
  $headings-color: null !default;
470
+ // scss-docs-end headings-variables
455
471
 
456
472
  // scss-docs-start display-headings
457
473
  $display-font-sizes: (
@@ -467,6 +483,7 @@ $display-font-weight: 300 !default;
467
483
  $display-line-height: $headings-line-height !default;
468
484
  // scss-docs-end display-headings
469
485
 
486
+ // scss-docs-start type-variables
470
487
  $lead-font-size: $font-size-base * 1.25 !default;
471
488
  $lead-font-weight: 300 !default;
472
489
 
@@ -501,6 +518,7 @@ $nested-kbd-font-weight: $font-weight-bold !default;
501
518
  $list-inline-padding: .5rem !default;
502
519
 
503
520
  $mark-bg: #fcf8e3 !default;
521
+ // scss-docs-end type-variables
504
522
 
505
523
 
506
524
  // Tables
@@ -543,7 +561,9 @@ $table-group-separator-color: currentColor !default;
543
561
  $table-caption-color: $text-muted !default;
544
562
 
545
563
  $table-bg-scale: -80% !default;
564
+ // scss-docs-end table-variables
546
565
 
566
+ // scss-docs-start table-loop
547
567
  $table-variants: (
548
568
  "primary": shift-color($primary, $table-bg-scale),
549
569
  "secondary": shift-color($secondary, $table-bg-scale),
@@ -554,13 +574,14 @@ $table-variants: (
554
574
  "light": $light,
555
575
  "dark": $dark,
556
576
  ) !default;
557
- // scss-docs-end table-variables
577
+ // scss-docs-end table-loop
558
578
 
559
579
 
560
580
  // Buttons + Forms
561
581
  //
562
582
  // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
563
583
 
584
+ // scss-docs-start input-btn-variables
564
585
  $input-btn-padding-y: .375rem !default;
565
586
  $input-btn-padding-x: .75rem !default;
566
587
  $input-btn-font-family: null !default;
@@ -570,7 +591,8 @@ $input-btn-line-height: $line-height-base !default;
570
591
  $input-btn-focus-width: .25rem !default;
571
592
  $input-btn-focus-color-opacity: .25 !default;
572
593
  $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
573
- $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
594
+ $input-btn-focus-blur: 0 !default;
595
+ $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
574
596
 
575
597
  $input-btn-padding-y-sm: .25rem !default;
576
598
  $input-btn-padding-x-sm: .5rem !default;
@@ -581,12 +603,14 @@ $input-btn-padding-x-lg: 1rem !default;
581
603
  $input-btn-font-size-lg: $font-size-lg !default;
582
604
 
583
605
  $input-btn-border-width: $border-width !default;
606
+ // scss-docs-end input-btn-variables
584
607
 
585
608
 
586
609
  // Buttons
587
610
  //
588
611
  // For each of Bootstrap's buttons, define text, background, and border color.
589
612
 
613
+ // scss-docs-start btn-variables
590
614
  $btn-padding-y: $input-btn-padding-y !default;
591
615
  $btn-padding-x: $input-btn-padding-x !default;
592
616
  $btn-font-family: $input-btn-font-family !default;
@@ -630,22 +654,28 @@ $btn-active-bg-shade-amount: 20% !default;
630
654
  $btn-active-bg-tint-amount: 20% !default;
631
655
  $btn-active-border-shade-amount: 25% !default;
632
656
  $btn-active-border-tint-amount: 10% !default;
657
+ // scss-docs-end btn-variables
633
658
 
634
659
 
635
660
  // Forms
636
661
 
662
+ // scss-docs-start form-text-variables
637
663
  $form-text-margin-top: .25rem !default;
638
664
  $form-text-font-size: $small-font-size !default;
639
665
  $form-text-font-style: null !default;
640
666
  $form-text-font-weight: null !default;
641
667
  $form-text-color: $text-muted !default;
668
+ // scss-docs-end form-text-variables
642
669
 
670
+ // scss-docs-start form-label-variables
643
671
  $form-label-margin-bottom: .5rem !default;
644
672
  $form-label-font-size: null !default;
645
673
  $form-label-font-style: null !default;
646
674
  $form-label-font-weight: null !default;
647
675
  $form-label-color: null !default;
676
+ // scss-docs-end form-label-variables
648
677
 
678
+ // scss-docs-start form-input-variables
649
679
  $input-padding-y: $input-btn-padding-y !default;
650
680
  $input-padding-x: $input-btn-padding-x !default;
651
681
  $input-font-family: $input-btn-font-family !default;
@@ -694,8 +724,9 @@ $input-height-sm: add($input-line-height * 1em, add($input
694
724
  $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
695
725
 
696
726
  $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
727
+ // scss-docs-end form-input-variables
697
728
 
698
-
729
+ // scss-docs-start form-check-variables
699
730
  $form-check-input-width: 1em !default;
700
731
  $form-check-min-height: $font-size-base * $line-height-base !default;
701
732
  $form-check-padding-start: $form-check-input-width + .5em !default;
@@ -728,6 +759,10 @@ $form-check-input-disabled-opacity: .5 !default;
728
759
  $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
729
760
  $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
730
761
 
762
+ $form-check-inline-margin-end: 1rem !default;
763
+ // scss-docs-end form-check-variables
764
+
765
+ // scss-docs-start form-switch-variables
731
766
  $form-switch-color: rgba(0, 0, 0, .25) !default;
732
767
  $form-switch-width: 2em !default;
733
768
  $form-switch-padding-start: $form-switch-width + .5em !default;
@@ -741,16 +776,18 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www
741
776
  $form-switch-checked-color: $component-active-color !default;
742
777
  $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;
743
778
  $form-switch-checked-bg-position: right center !default;
779
+ // scss-docs-end form-switch-variables
744
780
 
745
- $form-check-inline-margin-end: 1rem !default;
746
-
781
+ // scss-docs-start input-group-variables
747
782
  $input-group-addon-padding-y: $input-padding-y !default;
748
783
  $input-group-addon-padding-x: $input-padding-x !default;
749
784
  $input-group-addon-font-weight: $input-font-weight !default;
750
785
  $input-group-addon-color: $input-color !default;
751
786
  $input-group-addon-bg: $gray-200 !default;
752
787
  $input-group-addon-border-color: $input-border-color !default;
788
+ // scss-docs-end input-group-variables
753
789
 
790
+ // scss-docs-start form-select-variables
754
791
  $form-select-padding-y: $input-padding-y !default;
755
792
  $form-select-padding-x: $input-padding-x !default;
756
793
  $form-select-font-family: $input-font-family !default;
@@ -759,8 +796,8 @@ $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extr
759
796
  $form-select-font-weight: $input-font-weight !default;
760
797
  $form-select-line-height: $input-line-height !default;
761
798
  $form-select-color: $input-color !default;
762
- $form-select-disabled-color: $gray-600 !default;
763
799
  $form-select-bg: $input-bg !default;
800
+ $form-select-disabled-color: null !default;
764
801
  $form-select-disabled-bg: $gray-200 !default;
765
802
  $form-select-disabled-border-color: $input-disabled-border-color !default;
766
803
  $form-select-bg-position: right $form-select-padding-x center !default;
@@ -788,7 +825,9 @@ $form-select-font-size-sm: $input-font-size-sm !default;
788
825
  $form-select-padding-y-lg: $input-padding-y-lg !default;
789
826
  $form-select-padding-x-lg: $input-padding-x-lg !default;
790
827
  $form-select-font-size-lg: $input-font-size-lg !default;
828
+ // scss-docs-end form-select-variables
791
829
 
830
+ // scss-docs-start form-range-variables
792
831
  $form-range-track-width: 100% !default;
793
832
  $form-range-track-height: .5rem !default;
794
833
  $form-range-track-cursor: pointer !default;
@@ -807,11 +846,15 @@ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For f
807
846
  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
808
847
  $form-range-thumb-disabled-bg: $gray-500 !default;
809
848
  $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
849
+ // scss-docs-end form-range-variables
810
850
 
851
+ // scss-docs-start form-file-variables
811
852
  $form-file-button-color: $input-color !default;
812
853
  $form-file-button-bg: $input-group-addon-bg !default;
813
854
  $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
855
+ // scss-docs-end form-file-variables
814
856
 
857
+ // scss-docs-start form-floating-variables
815
858
  $form-floating-height: add(3.5rem, $input-height-border) !default;
816
859
  $form-floating-padding-x: $input-padding-x !default;
817
860
  $form-floating-padding-y: 1rem !default;
@@ -820,9 +863,11 @@ $form-floating-input-padding-b: .625rem !default;
820
863
  $form-floating-label-opacity: .65 !default;
821
864
  $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
822
865
  $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
866
+ // scss-docs-end form-floating-variables
823
867
 
824
868
  // Form validation
825
869
 
870
+ // scss-docs-start form-feedback-variables
826
871
  $form-feedback-margin-top: $form-text-margin-top !default;
827
872
  $form-feedback-font-size: $form-text-font-size !default;
828
873
  $form-feedback-font-style: $form-text-font-style !default;
@@ -833,6 +878,7 @@ $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
833
878
  $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
834
879
  $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
835
880
  $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;
881
+ // scss-docs-end form-feedback-variables
836
882
 
837
883
  // scss-docs-start form-validation-states
838
884
  $form-validation-states: (
@@ -856,15 +902,17 @@ $form-validation-states: (
856
902
  $zindex-dropdown: 1000 !default;
857
903
  $zindex-sticky: 1020 !default;
858
904
  $zindex-fixed: 1030 !default;
859
- $zindex-modal-backdrop: 1040 !default;
860
- $zindex-modal: 1050 !default;
861
- $zindex-popover: 1060 !default;
862
- $zindex-tooltip: 1070 !default;
905
+ $zindex-offcanvas: 1040 !default;
906
+ $zindex-modal-backdrop: 1050 !default;
907
+ $zindex-modal: 1060 !default;
908
+ $zindex-popover: 1070 !default;
909
+ $zindex-tooltip: 1080 !default;
863
910
  // scss-docs-end zindex-stack
864
911
 
865
912
 
866
913
  // Navs
867
914
 
915
+ // scss-docs-start nav-variables
868
916
  $nav-link-padding-y: .5rem !default;
869
917
  $nav-link-padding-x: 1rem !default;
870
918
  $nav-link-font-size: null !default;
@@ -885,10 +933,12 @@ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg
885
933
  $nav-pills-border-radius: $border-radius !default;
886
934
  $nav-pills-link-active-color: $component-active-color !default;
887
935
  $nav-pills-link-active-bg: $component-active-bg !default;
936
+ // scss-docs-end nav-variables
888
937
 
889
938
 
890
939
  // Navbar
891
940
 
941
+ // scss-docs-start navbar-variables
892
942
  $navbar-padding-y: $spacer / 2 !default;
893
943
  $navbar-padding-x: null !default;
894
944
 
@@ -907,7 +957,9 @@ $navbar-toggler-font-size: $font-size-lg !default;
907
957
  $navbar-toggler-border-radius: $btn-border-radius !default;
908
958
  $navbar-toggler-focus-width: $btn-focus-width !default;
909
959
  $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
960
+ // scss-docs-end navbar-variables
910
961
 
962
+ // scss-docs-start navbar-theme-variables
911
963
  $navbar-dark-color: rgba($white, .55) !default;
912
964
  $navbar-dark-hover-color: rgba($white, .75) !default;
913
965
  $navbar-dark-active-color: $white !default;
@@ -926,12 +978,14 @@ $navbar-light-brand-color: $navbar-light-active-color !default;
926
978
  $navbar-light-brand-hover-color: $navbar-light-active-color !default;
927
979
  $navbar-dark-brand-color: $navbar-dark-active-color !default;
928
980
  $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
981
+ // scss-docs-end navbar-theme-variables
929
982
 
930
983
 
931
984
  // Dropdowns
932
985
  //
933
986
  // Dropdown menu container and contents.
934
987
 
988
+ // scss-docs-start dropdown-variables
935
989
  $dropdown-min-width: 10rem !default;
936
990
  $dropdown-padding-x: 0 !default;
937
991
  $dropdown-padding-y: .5rem !default;
@@ -961,7 +1015,9 @@ $dropdown-item-padding-x: $spacer !default;
961
1015
 
962
1016
  $dropdown-header-color: $gray-600 !default;
963
1017
  $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
1018
+ // scss-docs-end dropdown-variables
964
1019
 
1020
+ // scss-docs-start dropdown-dark-variables
965
1021
  $dropdown-dark-color: $gray-300 !default;
966
1022
  $dropdown-dark-bg: $gray-800 !default;
967
1023
  $dropdown-dark-border-color: $dropdown-border-color !default;
@@ -974,10 +1030,12 @@ $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
974
1030
  $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
975
1031
  $dropdown-dark-link-disabled-color: $gray-500 !default;
976
1032
  $dropdown-dark-header-color: $gray-500 !default;
1033
+ // scss-docs-end dropdown-dark-variables
977
1034
 
978
1035
 
979
1036
  // Pagination
980
1037
 
1038
+ // scss-docs-start pagination-variables
981
1039
  $pagination-padding-y: .375rem !default;
982
1040
  $pagination-padding-x: .75rem !default;
983
1041
  $pagination-padding-y-sm: .25rem !default;
@@ -1013,9 +1071,12 @@ $pagination-transition: color .15s ease-in-out, background-color .1
1013
1071
 
1014
1072
  $pagination-border-radius-sm: $border-radius-sm !default;
1015
1073
  $pagination-border-radius-lg: $border-radius-lg !default;
1074
+ // scss-docs-end pagination-variables
1075
+
1016
1076
 
1017
1077
  // Cards
1018
1078
 
1079
+ // scss-docs-start card-variables
1019
1080
  $card-spacer-y: $spacer !default;
1020
1081
  $card-spacer-x: $spacer !default;
1021
1082
  $card-title-spacer-y: $spacer / 2 !default;
@@ -1030,19 +1091,21 @@ $card-cap-color: null !default;
1030
1091
  $card-height: null !default;
1031
1092
  $card-color: null !default;
1032
1093
  $card-bg: $white !default;
1033
-
1034
1094
  $card-img-overlay-padding: $spacer !default;
1035
-
1036
1095
  $card-group-margin: $grid-gutter-width / 2 !default;
1096
+ // scss-docs-end card-variables
1037
1097
 
1038
1098
  // Accordion
1099
+
1100
+ // scss-docs-start accordion-variables
1039
1101
  $accordion-padding-y: 1rem !default;
1040
1102
  $accordion-padding-x: 1.25rem !default;
1041
1103
  $accordion-color: $body-color !default;
1042
- $accordion-bg: transparent !default;
1104
+ $accordion-bg: $body-bg !default;
1043
1105
  $accordion-border-width: $border-width !default;
1044
1106
  $accordion-border-color: rgba($black, .125) !default;
1045
1107
  $accordion-border-radius: $border-radius !default;
1108
+ $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1046
1109
 
1047
1110
  $accordion-body-padding-y: $accordion-padding-y !default;
1048
1111
  $accordion-body-padding-x: $accordion-padding-x !default;
@@ -1066,9 +1129,11 @@ $accordion-icon-transform: rotate(180deg) !default;
1066
1129
 
1067
1130
  $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;
1068
1131
  $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;
1132
+ // scss-docs-end accordion-variables
1069
1133
 
1070
1134
  // Tooltips
1071
1135
 
1136
+ // scss-docs-start tooltip-variables
1072
1137
  $tooltip-font-size: $font-size-sm !default;
1073
1138
  $tooltip-max-width: 200px !default;
1074
1139
  $tooltip-color: $white !default;
@@ -1082,18 +1147,22 @@ $tooltip-margin: 0 !default;
1082
1147
  $tooltip-arrow-width: .8rem !default;
1083
1148
  $tooltip-arrow-height: .4rem !default;
1084
1149
  $tooltip-arrow-color: $tooltip-bg !default;
1150
+ // scss-docs-end tooltip-variables
1085
1151
 
1086
1152
  // Form tooltips must come after regular tooltips
1153
+ // scss-docs-start tooltip-feedback-variables
1087
1154
  $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1088
1155
  $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1089
1156
  $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1090
1157
  $form-feedback-tooltip-line-height: null !default;
1091
1158
  $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1092
1159
  $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1160
+ // scss-docs-start tooltip-feedback-variables
1093
1161
 
1094
1162
 
1095
1163
  // Popovers
1096
1164
 
1165
+ // scss-docs-start popover-variables
1097
1166
  $popover-font-size: $font-size-sm !default;
1098
1167
  $popover-bg: $white !default;
1099
1168
  $popover-max-width: 276px !default;
@@ -1117,10 +1186,12 @@ $popover-arrow-height: .5rem !default;
1117
1186
  $popover-arrow-color: $popover-bg !default;
1118
1187
 
1119
1188
  $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
1189
+ // scss-docs-end popover-variables
1120
1190
 
1121
1191
 
1122
1192
  // Toasts
1123
1193
 
1194
+ // scss-docs-start toast-variables
1124
1195
  $toast-max-width: 350px !default;
1125
1196
  $toast-padding-x: .75rem !default;
1126
1197
  $toast-padding-y: .5rem !default;
@@ -1136,24 +1207,26 @@ $toast-spacing: $container-padding-x !default;
1136
1207
  $toast-header-color: $gray-600 !default;
1137
1208
  $toast-header-background-color: rgba($white, .85) !default;
1138
1209
  $toast-header-border-color: rgba(0, 0, 0, .05) !default;
1210
+ // scss-docs-end toast-variables
1139
1211
 
1140
1212
 
1141
1213
  // Badges
1142
1214
 
1215
+ // scss-docs-start badge-variables
1143
1216
  $badge-font-size: .75em !default;
1144
1217
  $badge-font-weight: $font-weight-bold !default;
1145
1218
  $badge-color: $white !default;
1146
1219
  $badge-padding-y: .35em !default;
1147
1220
  $badge-padding-x: .65em !default;
1148
1221
  $badge-border-radius: $border-radius !default;
1222
+ // scss-docs-end badge-variables
1149
1223
 
1150
1224
 
1151
1225
  // Modals
1152
1226
 
1153
- // Padding applied to the modal body
1227
+ // scss-docs-start modal-variables
1154
1228
  $modal-inner-padding: $spacer !default;
1155
1229
 
1156
- // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
1157
1230
  $modal-footer-margin-between: .5rem !default;
1158
1231
 
1159
1232
  $modal-dialog-margin: .5rem !default;
@@ -1189,28 +1262,30 @@ $modal-fade-transform: translate(0, -50px) !default;
1189
1262
  $modal-show-transform: none !default;
1190
1263
  $modal-transition: transform .3s ease-out !default;
1191
1264
  $modal-scale-transform: scale(1.02) !default;
1265
+ // scss-docs-end modal-variables
1192
1266
 
1193
1267
 
1194
1268
  // Alerts
1195
1269
  //
1196
1270
  // Define alert colors, border radius, and padding.
1197
1271
 
1198
- $alert-padding-y: $spacer !default;
1199
- $alert-padding-x: $spacer !default;
1200
- $alert-margin-bottom: 1rem !default;
1201
- $alert-border-radius: $border-radius !default;
1202
- $alert-link-font-weight: $font-weight-bold !default;
1203
- $alert-border-width: $border-width !default;
1204
-
1205
- $alert-bg-scale: -80% !default;
1206
- $alert-border-scale: -70% !default;
1207
- $alert-color-scale: 40% !default;
1208
-
1209
- $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1272
+ // scss-docs-start alert-variables
1273
+ $alert-padding-y: $spacer !default;
1274
+ $alert-padding-x: $spacer !default;
1275
+ $alert-margin-bottom: 1rem !default;
1276
+ $alert-border-radius: $border-radius !default;
1277
+ $alert-link-font-weight: $font-weight-bold !default;
1278
+ $alert-border-width: $border-width !default;
1279
+ $alert-bg-scale: -80% !default;
1280
+ $alert-border-scale: -70% !default;
1281
+ $alert-color-scale: 40% !default;
1282
+ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1283
+ // scss-docs-end alert-variables
1210
1284
 
1211
1285
 
1212
1286
  // Progress bars
1213
1287
 
1288
+ // scss-docs-start progress-variables
1214
1289
  $progress-height: 1rem !default;
1215
1290
  $progress-font-size: $font-size-base * .75 !default;
1216
1291
  $progress-bg: $gray-200 !default;
@@ -1220,11 +1295,13 @@ $progress-bar-color: $white !default;
1220
1295
  $progress-bar-bg: $primary !default;
1221
1296
  $progress-bar-animation-timing: 1s linear infinite !default;
1222
1297
  $progress-bar-transition: width .6s ease !default;
1298
+ // scss-docs-end progress-variables
1223
1299
 
1224
1300
 
1225
1301
  // List group
1226
1302
 
1227
- $list-group-color: null !default;
1303
+ // scss-docs-start list-group-variables
1304
+ $list-group-color: $gray-900 !default;
1228
1305
  $list-group-bg: $white !default;
1229
1306
  $list-group-border-color: rgba($black, .125) !default;
1230
1307
  $list-group-border-width: $border-width !default;
@@ -1248,26 +1325,32 @@ $list-group-action-hover-color: $list-group-action-color !default;
1248
1325
 
1249
1326
  $list-group-action-active-color: $body-color !default;
1250
1327
  $list-group-action-active-bg: $gray-200 !default;
1328
+ // scss-docs-end list-group-variables
1251
1329
 
1252
1330
 
1253
1331
  // Image thumbnails
1254
1332
 
1333
+ // scss-docs-start thumbnail-variables
1255
1334
  $thumbnail-padding: .25rem !default;
1256
1335
  $thumbnail-bg: $body-bg !default;
1257
1336
  $thumbnail-border-width: $border-width !default;
1258
1337
  $thumbnail-border-color: $gray-300 !default;
1259
1338
  $thumbnail-border-radius: $border-radius !default;
1260
1339
  $thumbnail-box-shadow: $box-shadow-sm !default;
1340
+ // scss-docs-end thumbnail-variables
1261
1341
 
1262
1342
 
1263
1343
  // Figures
1264
1344
 
1345
+ // scss-docs-start figure-variables
1265
1346
  $figure-caption-font-size: $small-font-size !default;
1266
1347
  $figure-caption-color: $gray-600 !default;
1348
+ // scss-docs-end figure-variables
1267
1349
 
1268
1350
 
1269
1351
  // Breadcrumbs
1270
1352
 
1353
+ // scss-docs-start breadcrumb-variables
1271
1354
  $breadcrumb-font-size: null !default;
1272
1355
  $breadcrumb-padding-y: 0 !default;
1273
1356
  $breadcrumb-padding-x: 0 !default;
@@ -1279,9 +1362,11 @@ $breadcrumb-active-color: $gray-600 !default;
1279
1362
  $breadcrumb-divider: quote("/") !default;
1280
1363
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1281
1364
  $breadcrumb-border-radius: null !default;
1365
+ // scss-docs-end breadcrumb-variables
1282
1366
 
1283
1367
  // Carousel
1284
1368
 
1369
+ // scss-docs-start carousel-variables
1285
1370
  $carousel-control-color: $white !default;
1286
1371
  $carousel-control-width: 15% !default;
1287
1372
  $carousel-control-opacity: .5 !default;
@@ -1313,10 +1398,12 @@ $carousel-transition: transform $carousel-transition-duration eas
1313
1398
  $carousel-dark-indicator-active-bg: $black !default;
1314
1399
  $carousel-dark-caption-color: $black !default;
1315
1400
  $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1401
+ // scss-docs-end carousel-variables
1316
1402
 
1317
1403
 
1318
1404
  // Spinners
1319
1405
 
1406
+ // scss-docs-start spinner-variables
1320
1407
  $spinner-width: 2rem !default;
1321
1408
  $spinner-height: $spinner-width !default;
1322
1409
  $spinner-border-width: .25em !default;
@@ -1325,10 +1412,12 @@ $spinner-animation-speed: .75s !default;
1325
1412
  $spinner-width-sm: 1rem !default;
1326
1413
  $spinner-height-sm: $spinner-width-sm !default;
1327
1414
  $spinner-border-width-sm: .2em !default;
1415
+ // scss-docs-end spinner-variables
1328
1416
 
1329
1417
 
1330
1418
  // Close
1331
1419
 
1420
+ // scss-docs-start close-variables
1332
1421
  $btn-close-width: 1em !default;
1333
1422
  $btn-close-height: $btn-close-width !default;
1334
1423
  $btn-close-padding-x: .25em !default;
@@ -1341,6 +1430,25 @@ $btn-close-hover-opacity: .75 !default;
1341
1430
  $btn-close-focus-opacity: 1 !default;
1342
1431
  $btn-close-disabled-opacity: .25 !default;
1343
1432
  $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1433
+ // scss-docs-end close-variables
1434
+
1435
+
1436
+ // Offcanvas
1437
+
1438
+ // scss-docs-start offcanvas-variables
1439
+ $offcanvas-padding-y: $modal-inner-padding !default;
1440
+ $offcanvas-padding-x: $modal-inner-padding !default;
1441
+ $offcanvas-horizontal-width: 400px !default;
1442
+ $offcanvas-vertical-height: 30vh !default;
1443
+ $offcanvas-transition-duration: .3s !default;
1444
+ $offcanvas-border-color: $modal-content-border-color !default;
1445
+ $offcanvas-border-width: $modal-content-border-width !default;
1446
+ $offcanvas-title-line-height: $modal-title-line-height !default;
1447
+ $offcanvas-bg-color: $modal-content-bg !default;
1448
+ $offcanvas-color: $modal-content-color !default;
1449
+ $offcanvas-body-backdrop-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default;
1450
+ $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1451
+ // scss-docs-end offcanvas-variables
1344
1452
 
1345
1453
  // Code
1346
1454