bootstrap 5.2.0 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.github/workflows/ci.yml +55 -0
- data/README.md +25 -5
- data/assets/javascripts/bootstrap/alert.js +22 -32
- data/assets/javascripts/bootstrap/base-component.js +22 -38
- data/assets/javascripts/bootstrap/button.js +19 -22
- data/assets/javascripts/bootstrap/carousel.js +52 -135
- data/assets/javascripts/bootstrap/collapse.js +40 -102
- data/assets/javascripts/bootstrap/dom/data.js +8 -12
- data/assets/javascripts/bootstrap/dom/event-handler.js +19 -66
- data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
- data/assets/javascripts/bootstrap/dom/selector-engine.js +42 -24
- data/assets/javascripts/bootstrap/dropdown.js +74 -143
- data/assets/javascripts/bootstrap/modal.js +66 -143
- data/assets/javascripts/bootstrap/offcanvas.js +50 -102
- data/assets/javascripts/bootstrap/popover.js +23 -29
- data/assets/javascripts/bootstrap/scrollspy.js +64 -97
- data/assets/javascripts/bootstrap/tab.js +55 -112
- data/assets/javascripts/bootstrap/toast.js +39 -77
- data/assets/javascripts/bootstrap/tooltip.js +99 -216
- data/assets/javascripts/bootstrap/util/backdrop.js +28 -54
- data/assets/javascripts/bootstrap/util/component-functions.js +13 -18
- data/assets/javascripts/bootstrap/util/config.js +15 -27
- data/assets/javascripts/bootstrap/util/focustrap.js +20 -36
- data/assets/javascripts/bootstrap/util/index.js +42 -111
- data/assets/javascripts/bootstrap/util/sanitizer.js +30 -42
- data/assets/javascripts/bootstrap/util/scrollbar.js +24 -50
- data/assets/javascripts/bootstrap/util/swipe.js +27 -48
- data/assets/javascripts/bootstrap/util/template-factory.js +25 -52
- data/assets/javascripts/bootstrap-sprockets.js +12 -12
- data/assets/javascripts/bootstrap.js +764 -1529
- data/assets/javascripts/bootstrap.min.js +3 -3
- data/assets/stylesheets/_bootstrap-grid.scss +1 -3
- data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
- data/assets/stylesheets/_bootstrap.scss +1 -0
- data/assets/stylesheets/bootstrap/_accordion.scss +16 -4
- data/assets/stylesheets/bootstrap/_alert.scss +8 -11
- data/assets/stylesheets/bootstrap/_button-group.scss +3 -3
- data/assets/stylesheets/bootstrap/_buttons.scss +31 -10
- data/assets/stylesheets/bootstrap/_card.scss +5 -0
- data/assets/stylesheets/bootstrap/_carousel.scss +20 -5
- data/assets/stylesheets/bootstrap/_close.scss +32 -9
- data/assets/stylesheets/bootstrap/_dropdown.scss +3 -1
- data/assets/stylesheets/bootstrap/_functions.scss +3 -3
- data/assets/stylesheets/bootstrap/_grid.scss +6 -0
- data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
- data/assets/stylesheets/bootstrap/_list-group.scss +18 -12
- data/assets/stylesheets/bootstrap/_maps.scss +120 -0
- data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
- data/assets/stylesheets/bootstrap/_modal.scss +1 -1
- data/assets/stylesheets/bootstrap/_nav.scss +42 -5
- data/assets/stylesheets/bootstrap/_navbar.scss +17 -4
- data/assets/stylesheets/bootstrap/_offcanvas.scss +9 -6
- data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
- data/assets/stylesheets/bootstrap/_popover.scss +5 -5
- data/assets/stylesheets/bootstrap/_progress.scss +10 -1
- data/assets/stylesheets/bootstrap/_reboot.scss +3 -3
- data/assets/stylesheets/bootstrap/_root.scss +121 -10
- data/assets/stylesheets/bootstrap/_tables.scss +18 -11
- data/assets/stylesheets/bootstrap/_toasts.scss +5 -2
- data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
- data/assets/stylesheets/bootstrap/_utilities.scss +172 -13
- data/assets/stylesheets/bootstrap/_variables-dark.scss +85 -0
- data/assets/stylesheets/bootstrap/_variables.scss +272 -162
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +4 -0
- data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +23 -3
- data/assets/stylesheets/bootstrap/forms/_form-check.scss +24 -11
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +23 -3
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +11 -2
- data/assets/stylesheets/bootstrap/forms/_input-group.scss +7 -4
- data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +0 -2
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +20 -2
- data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
- data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
- data/assets/stylesheets/bootstrap/mixins/_banner.scss +3 -5
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
- data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +18 -17
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +2 -2
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +2 -2
- data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
- data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +2 -2
- data/tasks/updater/network.rb +2 -2
- data/tasks/updater/scss.rb +1 -1
- data/tasks/updater.rb +2 -2
- data/test/gemfiles/rails_5_2.gemfile +8 -0
- data/test/gemfiles/rails_7_0.gemfile +7 -0
- data/test/test_helper.rb +3 -2
- metadata +17 -9
- data/.travis.yml +0 -32
|
@@ -321,6 +321,39 @@ $theme-colors: (
|
|
|
321
321
|
) !default;
|
|
322
322
|
// scss-docs-end theme-colors-map
|
|
323
323
|
|
|
324
|
+
// scss-docs-start theme-text-variables
|
|
325
|
+
$primary-text-emphasis: shade-color($primary, 60%) !default;
|
|
326
|
+
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
|
|
327
|
+
$success-text-emphasis: shade-color($success, 60%) !default;
|
|
328
|
+
$info-text-emphasis: shade-color($info, 60%) !default;
|
|
329
|
+
$warning-text-emphasis: shade-color($warning, 60%) !default;
|
|
330
|
+
$danger-text-emphasis: shade-color($danger, 60%) !default;
|
|
331
|
+
$light-text-emphasis: $gray-700 !default;
|
|
332
|
+
$dark-text-emphasis: $gray-700 !default;
|
|
333
|
+
// scss-docs-end theme-text-variables
|
|
334
|
+
|
|
335
|
+
// scss-docs-start theme-bg-subtle-variables
|
|
336
|
+
$primary-bg-subtle: tint-color($primary, 80%) !default;
|
|
337
|
+
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
|
|
338
|
+
$success-bg-subtle: tint-color($success, 80%) !default;
|
|
339
|
+
$info-bg-subtle: tint-color($info, 80%) !default;
|
|
340
|
+
$warning-bg-subtle: tint-color($warning, 80%) !default;
|
|
341
|
+
$danger-bg-subtle: tint-color($danger, 80%) !default;
|
|
342
|
+
$light-bg-subtle: mix($gray-100, $white) !default;
|
|
343
|
+
$dark-bg-subtle: $gray-400 !default;
|
|
344
|
+
// scss-docs-end theme-bg-subtle-variables
|
|
345
|
+
|
|
346
|
+
// scss-docs-start theme-border-subtle-variables
|
|
347
|
+
$primary-border-subtle: tint-color($primary, 60%) !default;
|
|
348
|
+
$secondary-border-subtle: tint-color($secondary, 60%) !default;
|
|
349
|
+
$success-border-subtle: tint-color($success, 60%) !default;
|
|
350
|
+
$info-border-subtle: tint-color($info, 60%) !default;
|
|
351
|
+
$warning-border-subtle: tint-color($warning, 60%) !default;
|
|
352
|
+
$danger-border-subtle: tint-color($danger, 60%) !default;
|
|
353
|
+
$light-border-subtle: $gray-200 !default;
|
|
354
|
+
$dark-border-subtle: $gray-500 !default;
|
|
355
|
+
// scss-docs-end theme-border-subtle-variables
|
|
356
|
+
|
|
324
357
|
// Characters which are escaped by the escape-svg function
|
|
325
358
|
$escaped-characters: (
|
|
326
359
|
("<", "%3c"),
|
|
@@ -351,6 +384,9 @@ $enable-negative-margins: false !default;
|
|
|
351
384
|
$enable-deprecation-messages: true !default;
|
|
352
385
|
$enable-important-utilities: true !default;
|
|
353
386
|
|
|
387
|
+
$enable-dark-mode: true !default;
|
|
388
|
+
$color-mode-type: data !default; // `data` or `media-query`
|
|
389
|
+
|
|
354
390
|
// Prefix for :root CSS variables
|
|
355
391
|
|
|
356
392
|
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
|
|
@@ -398,9 +434,17 @@ $position-values: (
|
|
|
398
434
|
//
|
|
399
435
|
// Settings for the `<body>` element.
|
|
400
436
|
|
|
401
|
-
$body-bg: $white !default;
|
|
402
|
-
$body-color: $gray-900 !default;
|
|
403
437
|
$body-text-align: null !default;
|
|
438
|
+
$body-color: $gray-900 !default;
|
|
439
|
+
$body-bg: $white !default;
|
|
440
|
+
|
|
441
|
+
$body-secondary-color: rgba($body-color, .75) !default;
|
|
442
|
+
$body-secondary-bg: $gray-200 !default;
|
|
443
|
+
|
|
444
|
+
$body-tertiary-color: rgba($body-color, .5) !default;
|
|
445
|
+
$body-tertiary-bg: $gray-100 !default;
|
|
446
|
+
|
|
447
|
+
$body-emphasis-color: $black !default;
|
|
404
448
|
|
|
405
449
|
// Links
|
|
406
450
|
//
|
|
@@ -415,6 +459,15 @@ $link-hover-decoration: null !default;
|
|
|
415
459
|
$stretched-link-pseudo-element: after !default;
|
|
416
460
|
$stretched-link-z-index: 1 !default;
|
|
417
461
|
|
|
462
|
+
// Icon links
|
|
463
|
+
// scss-docs-start icon-link-variables
|
|
464
|
+
$icon-link-gap: .375rem !default;
|
|
465
|
+
$icon-link-underline-offset: .25em !default;
|
|
466
|
+
$icon-link-icon-size: 1em !default;
|
|
467
|
+
$icon-link-icon-transition: .2s ease-in-out transform !default;
|
|
468
|
+
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
|
469
|
+
// scss-docs-end icon-link-variables
|
|
470
|
+
|
|
418
471
|
// Paragraphs
|
|
419
472
|
//
|
|
420
473
|
// Style p element.
|
|
@@ -485,7 +538,6 @@ $border-widths: (
|
|
|
485
538
|
4: 4px,
|
|
486
539
|
5: 5px
|
|
487
540
|
) !default;
|
|
488
|
-
|
|
489
541
|
$border-style: solid !default;
|
|
490
542
|
$border-color: $gray-300 !default;
|
|
491
543
|
$border-color-translucent: rgba($black, .175) !default;
|
|
@@ -496,9 +548,12 @@ $border-radius: .375rem !default;
|
|
|
496
548
|
$border-radius-sm: .25rem !default;
|
|
497
549
|
$border-radius-lg: .5rem !default;
|
|
498
550
|
$border-radius-xl: 1rem !default;
|
|
499
|
-
$border-radius-
|
|
551
|
+
$border-radius-xxl: 2rem !default;
|
|
500
552
|
$border-radius-pill: 50rem !default;
|
|
501
553
|
// scss-docs-end border-radius-variables
|
|
554
|
+
// fusv-disable
|
|
555
|
+
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
|
|
556
|
+
// fusv-enable
|
|
502
557
|
|
|
503
558
|
// scss-docs-start box-shadow-variables
|
|
504
559
|
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
|
|
@@ -510,6 +565,14 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
|
|
|
510
565
|
$component-active-color: $white !default;
|
|
511
566
|
$component-active-bg: $primary !default;
|
|
512
567
|
|
|
568
|
+
// scss-docs-start focus-ring-variables
|
|
569
|
+
$focus-ring-width: .25rem !default;
|
|
570
|
+
$focus-ring-opacity: .25 !default;
|
|
571
|
+
$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
|
|
572
|
+
$focus-ring-blur: 0 !default;
|
|
573
|
+
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
|
|
574
|
+
// scss-docs-end focus-ring-variables
|
|
575
|
+
|
|
513
576
|
// scss-docs-start caret-variables
|
|
514
577
|
$caret-width: .3em !default;
|
|
515
578
|
$caret-vertical-align: $caret-width * .85 !default;
|
|
@@ -556,6 +619,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
|
|
|
556
619
|
$font-weight-lighter: lighter !default;
|
|
557
620
|
$font-weight-light: 300 !default;
|
|
558
621
|
$font-weight-normal: 400 !default;
|
|
622
|
+
$font-weight-medium: 500 !default;
|
|
559
623
|
$font-weight-semibold: 600 !default;
|
|
560
624
|
$font-weight-bold: 700 !default;
|
|
561
625
|
$font-weight-bolder: bolder !default;
|
|
@@ -591,7 +655,7 @@ $headings-font-family: null !default;
|
|
|
591
655
|
$headings-font-style: null !default;
|
|
592
656
|
$headings-font-weight: 500 !default;
|
|
593
657
|
$headings-line-height: 1.2 !default;
|
|
594
|
-
$headings-color:
|
|
658
|
+
$headings-color: inherit !default;
|
|
595
659
|
// scss-docs-end headings-variables
|
|
596
660
|
|
|
597
661
|
// scss-docs-start display-headings
|
|
@@ -618,7 +682,9 @@ $small-font-size: .875em !default;
|
|
|
618
682
|
|
|
619
683
|
$sub-sup-font-size: .75em !default;
|
|
620
684
|
|
|
621
|
-
|
|
685
|
+
// fusv-disable
|
|
686
|
+
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
|
|
687
|
+
// fusv-enable
|
|
622
688
|
|
|
623
689
|
$initialism-font-size: $small-font-size !default;
|
|
624
690
|
|
|
@@ -636,7 +702,7 @@ $hr-height: null !default; // Deprecated in v5.2.0
|
|
|
636
702
|
// fusv-enable
|
|
637
703
|
|
|
638
704
|
$hr-border-color: null !default; // Allows for inherited colors
|
|
639
|
-
$hr-border-width: $border-width !default;
|
|
705
|
+
$hr-border-width: var(--#{$prefix}border-width) !default;
|
|
640
706
|
$hr-opacity: .25 !default;
|
|
641
707
|
|
|
642
708
|
$legend-margin-bottom: .5rem !default;
|
|
@@ -665,7 +731,7 @@ $table-cell-padding-x-sm: .25rem !default;
|
|
|
665
731
|
$table-cell-vertical-align: top !default;
|
|
666
732
|
|
|
667
733
|
$table-color: var(--#{$prefix}body-color) !default;
|
|
668
|
-
$table-bg:
|
|
734
|
+
$table-bg: var(--#{$prefix}body-bg) !default;
|
|
669
735
|
$table-accent-bg: transparent !default;
|
|
670
736
|
|
|
671
737
|
$table-th-font-weight: null !default;
|
|
@@ -683,7 +749,7 @@ $table-hover-bg-factor: .075 !default;
|
|
|
683
749
|
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
|
|
684
750
|
|
|
685
751
|
$table-border-factor: .1 !default;
|
|
686
|
-
$table-border-width: $border-width !default;
|
|
752
|
+
$table-border-width: var(--#{$prefix}border-width) !default;
|
|
687
753
|
$table-border-color: var(--#{$prefix}border-color) !default;
|
|
688
754
|
|
|
689
755
|
$table-striped-order: odd !default;
|
|
@@ -691,7 +757,7 @@ $table-striped-columns-order: even !default;
|
|
|
691
757
|
|
|
692
758
|
$table-group-separator-color: currentcolor !default;
|
|
693
759
|
|
|
694
|
-
$table-caption-color: $
|
|
760
|
+
$table-caption-color: var(--#{$prefix}secondary-color) !default;
|
|
695
761
|
|
|
696
762
|
$table-bg-scale: -80% !default;
|
|
697
763
|
// scss-docs-end table-variables
|
|
@@ -721,11 +787,11 @@ $input-btn-font-family: null !default;
|
|
|
721
787
|
$input-btn-font-size: $font-size-base !default;
|
|
722
788
|
$input-btn-line-height: $line-height-base !default;
|
|
723
789
|
|
|
724
|
-
$input-btn-focus-width:
|
|
725
|
-
$input-btn-focus-color-opacity:
|
|
726
|
-
$input-btn-focus-color:
|
|
727
|
-
$input-btn-focus-blur:
|
|
728
|
-
$input-btn-focus-box-shadow:
|
|
790
|
+
$input-btn-focus-width: $focus-ring-width !default;
|
|
791
|
+
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
|
792
|
+
$input-btn-focus-color: $focus-ring-color !default;
|
|
793
|
+
$input-btn-focus-blur: $focus-ring-blur !default;
|
|
794
|
+
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
729
795
|
|
|
730
796
|
$input-btn-padding-y-sm: .25rem !default;
|
|
731
797
|
$input-btn-padding-x-sm: .5rem !default;
|
|
@@ -735,7 +801,7 @@ $input-btn-padding-y-lg: .5rem !default;
|
|
|
735
801
|
$input-btn-padding-x-lg: 1rem !default;
|
|
736
802
|
$input-btn-font-size-lg: $font-size-lg !default;
|
|
737
803
|
|
|
738
|
-
$input-btn-border-width: $border-width !default;
|
|
804
|
+
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
|
739
805
|
// scss-docs-end input-btn-variables
|
|
740
806
|
|
|
741
807
|
|
|
@@ -744,6 +810,7 @@ $input-btn-border-width: $border-width !default;
|
|
|
744
810
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
745
811
|
|
|
746
812
|
// scss-docs-start btn-variables
|
|
813
|
+
$btn-color: var(--#{$prefix}body-color) !default;
|
|
747
814
|
$btn-padding-y: $input-btn-padding-y !default;
|
|
748
815
|
$btn-padding-x: $input-btn-padding-x !default;
|
|
749
816
|
$btn-font-family: $input-btn-font-family !default;
|
|
@@ -773,9 +840,9 @@ $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
|
773
840
|
$btn-link-disabled-color: $gray-600 !default;
|
|
774
841
|
|
|
775
842
|
// 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;
|
|
843
|
+
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
|
844
|
+
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
845
|
+
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
779
846
|
|
|
780
847
|
$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
848
|
|
|
@@ -797,7 +864,7 @@ $form-text-margin-top: .25rem !default;
|
|
|
797
864
|
$form-text-font-size: $small-font-size !default;
|
|
798
865
|
$form-text-font-style: null !default;
|
|
799
866
|
$form-text-font-weight: null !default;
|
|
800
|
-
$form-text-color: $
|
|
867
|
+
$form-text-color: var(--#{$prefix}secondary-color) !default;
|
|
801
868
|
// scss-docs-end form-text-variables
|
|
802
869
|
|
|
803
870
|
// scss-docs-start form-label-variables
|
|
@@ -824,19 +891,19 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
|
|
|
824
891
|
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
|
825
892
|
$input-font-size-lg: $input-btn-font-size-lg !default;
|
|
826
893
|
|
|
827
|
-
$input-bg: $body-bg !default;
|
|
894
|
+
$input-bg: var(--#{$prefix}body-bg) !default;
|
|
828
895
|
$input-disabled-color: null !default;
|
|
829
|
-
$input-disabled-bg: $
|
|
896
|
+
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
|
830
897
|
$input-disabled-border-color: null !default;
|
|
831
898
|
|
|
832
|
-
$input-color: $body-color !default;
|
|
833
|
-
$input-border-color: $
|
|
899
|
+
$input-color: var(--#{$prefix}body-color) !default;
|
|
900
|
+
$input-border-color: var(--#{$prefix}border-color) !default;
|
|
834
901
|
$input-border-width: $input-btn-border-width !default;
|
|
835
902
|
$input-box-shadow: $box-shadow-inset !default;
|
|
836
903
|
|
|
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;
|
|
904
|
+
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
|
905
|
+
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
906
|
+
$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
840
907
|
|
|
841
908
|
$input-focus-bg: $input-bg !default;
|
|
842
909
|
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
|
|
@@ -844,10 +911,10 @@ $input-focus-color: $input-color !default;
|
|
|
844
911
|
$input-focus-width: $input-btn-focus-width !default;
|
|
845
912
|
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
|
846
913
|
|
|
847
|
-
$input-placeholder-color: $
|
|
848
|
-
$input-plaintext-color: $body-color !default;
|
|
914
|
+
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
|
|
915
|
+
$input-plaintext-color: var(--#{$prefix}body-color) !default;
|
|
849
916
|
|
|
850
|
-
$input-height-border: $input-border-width * 2 !default;
|
|
917
|
+
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
|
|
851
918
|
|
|
852
919
|
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
|
853
920
|
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
|
@@ -874,11 +941,11 @@ $form-check-transition: null !default;
|
|
|
874
941
|
$form-check-input-active-filter: brightness(90%) !default;
|
|
875
942
|
|
|
876
943
|
$form-check-input-bg: $input-bg !default;
|
|
877
|
-
$form-check-input-border:
|
|
944
|
+
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
|
|
878
945
|
$form-check-input-border-radius: .25em !default;
|
|
879
946
|
$form-check-radio-border-radius: 50% !default;
|
|
880
947
|
$form-check-input-focus-border: $input-focus-border-color !default;
|
|
881
|
-
$form-check-input-focus-box-shadow: $
|
|
948
|
+
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
882
949
|
|
|
883
950
|
$form-check-input-checked-color: $component-active-color !default;
|
|
884
951
|
$form-check-input-checked-bg-color: $component-active-bg !default;
|
|
@@ -919,7 +986,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
|
|
|
919
986
|
$input-group-addon-padding-x: $input-padding-x !default;
|
|
920
987
|
$input-group-addon-font-weight: $input-font-weight !default;
|
|
921
988
|
$input-group-addon-color: $input-color !default;
|
|
922
|
-
$input-group-addon-bg: $
|
|
989
|
+
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
923
990
|
$input-group-addon-border-color: $input-border-color !default;
|
|
924
991
|
// scss-docs-end input-group-variables
|
|
925
992
|
|
|
@@ -934,7 +1001,7 @@ $form-select-line-height: $input-line-height !default;
|
|
|
934
1001
|
$form-select-color: $input-color !default;
|
|
935
1002
|
$form-select-bg: $input-bg !default;
|
|
936
1003
|
$form-select-disabled-color: null !default;
|
|
937
|
-
$form-select-disabled-bg: $
|
|
1004
|
+
$form-select-disabled-bg: $input-disabled-bg !default;
|
|
938
1005
|
$form-select-disabled-border-color: $input-disabled-border-color !default;
|
|
939
1006
|
$form-select-bg-position: right $form-select-padding-x center !default;
|
|
940
1007
|
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
|
|
@@ -971,7 +1038,7 @@ $form-select-transition: $input-transition !default;
|
|
|
971
1038
|
$form-range-track-width: 100% !default;
|
|
972
1039
|
$form-range-track-height: .5rem !default;
|
|
973
1040
|
$form-range-track-cursor: pointer !default;
|
|
974
|
-
$form-range-track-bg: $
|
|
1041
|
+
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
975
1042
|
$form-range-track-border-radius: 1rem !default;
|
|
976
1043
|
$form-range-track-box-shadow: $box-shadow-inset !default;
|
|
977
1044
|
|
|
@@ -984,26 +1051,28 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
|
|
|
984
1051
|
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
|
|
985
1052
|
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
|
|
986
1053
|
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
|
|
987
|
-
$form-range-thumb-disabled-bg: $
|
|
1054
|
+
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
|
|
988
1055
|
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
|
989
1056
|
// scss-docs-end form-range-variables
|
|
990
1057
|
|
|
991
1058
|
// scss-docs-start form-file-variables
|
|
992
1059
|
$form-file-button-color: $input-color !default;
|
|
993
|
-
$form-file-button-bg: $
|
|
994
|
-
$form-file-button-hover-bg:
|
|
1060
|
+
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1061
|
+
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
|
|
995
1062
|
// scss-docs-end form-file-variables
|
|
996
1063
|
|
|
997
1064
|
// scss-docs-start form-floating-variables
|
|
998
|
-
$form-floating-height:
|
|
999
|
-
$form-floating-line-height:
|
|
1000
|
-
$form-floating-padding-x:
|
|
1001
|
-
$form-floating-padding-y:
|
|
1002
|
-
$form-floating-input-padding-t:
|
|
1003
|
-
$form-floating-input-padding-b:
|
|
1004
|
-
$form-floating-label-
|
|
1005
|
-
$form-floating-label-
|
|
1006
|
-
$form-floating-
|
|
1065
|
+
$form-floating-height: add(3.5rem, $input-height-border) !default;
|
|
1066
|
+
$form-floating-line-height: 1.25 !default;
|
|
1067
|
+
$form-floating-padding-x: $input-padding-x !default;
|
|
1068
|
+
$form-floating-padding-y: 1rem !default;
|
|
1069
|
+
$form-floating-input-padding-t: 1.625rem !default;
|
|
1070
|
+
$form-floating-input-padding-b: .625rem !default;
|
|
1071
|
+
$form-floating-label-height: 1.5em !default;
|
|
1072
|
+
$form-floating-label-opacity: .65 !default;
|
|
1073
|
+
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
|
|
1074
|
+
$form-floating-label-disabled-color: $gray-600 !default;
|
|
1075
|
+
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
|
|
1007
1076
|
// scss-docs-end form-floating-variables
|
|
1008
1077
|
|
|
1009
1078
|
// Form validation
|
|
@@ -1021,15 +1090,30 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
|
|
1021
1090
|
$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
1091
|
// scss-docs-end form-feedback-variables
|
|
1023
1092
|
|
|
1093
|
+
// scss-docs-start form-validation-colors
|
|
1094
|
+
$form-valid-color: $form-feedback-valid-color !default;
|
|
1095
|
+
$form-valid-border-color: $form-feedback-valid-color !default;
|
|
1096
|
+
$form-invalid-color: $form-feedback-invalid-color !default;
|
|
1097
|
+
$form-invalid-border-color: $form-feedback-invalid-color !default;
|
|
1098
|
+
// scss-docs-end form-validation-colors
|
|
1099
|
+
|
|
1024
1100
|
// scss-docs-start form-validation-states
|
|
1025
1101
|
$form-validation-states: (
|
|
1026
1102
|
"valid": (
|
|
1027
|
-
"color": $form-
|
|
1028
|
-
"icon": $form-feedback-icon-valid
|
|
1103
|
+
"color": var(--#{$prefix}form-valid-color),
|
|
1104
|
+
"icon": $form-feedback-icon-valid,
|
|
1105
|
+
"tooltip-color": #fff,
|
|
1106
|
+
"tooltip-bg-color": var(--#{$prefix}success),
|
|
1107
|
+
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
|
|
1108
|
+
"border-color": var(--#{$prefix}form-valid-border-color),
|
|
1029
1109
|
),
|
|
1030
1110
|
"invalid": (
|
|
1031
|
-
"color": $form-
|
|
1032
|
-
"icon": $form-feedback-icon-invalid
|
|
1111
|
+
"color": var(--#{$prefix}form-invalid-color),
|
|
1112
|
+
"icon": $form-feedback-icon-invalid,
|
|
1113
|
+
"tooltip-color": #fff,
|
|
1114
|
+
"tooltip-bg-color": var(--#{$prefix}danger),
|
|
1115
|
+
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
|
|
1116
|
+
"border-color": var(--#{$prefix}form-invalid-border-color),
|
|
1033
1117
|
)
|
|
1034
1118
|
) !default;
|
|
1035
1119
|
// scss-docs-end form-validation-states
|
|
@@ -1052,6 +1136,16 @@ $zindex-tooltip: 1080 !default;
|
|
|
1052
1136
|
$zindex-toast: 1090 !default;
|
|
1053
1137
|
// scss-docs-end zindex-stack
|
|
1054
1138
|
|
|
1139
|
+
// scss-docs-start zindex-levels-map
|
|
1140
|
+
$zindex-levels: (
|
|
1141
|
+
n1: -1,
|
|
1142
|
+
0: 0,
|
|
1143
|
+
1: 1,
|
|
1144
|
+
2: 2,
|
|
1145
|
+
3: 3
|
|
1146
|
+
) !default;
|
|
1147
|
+
// scss-docs-end zindex-levels-map
|
|
1148
|
+
|
|
1055
1149
|
|
|
1056
1150
|
// Navs
|
|
1057
1151
|
|
|
@@ -1063,19 +1157,24 @@ $nav-link-font-weight: null !default;
|
|
|
1063
1157
|
$nav-link-color: var(--#{$prefix}link-color) !default;
|
|
1064
1158
|
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
1065
1159
|
$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: $
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
$nav-tabs-border-
|
|
1070
|
-
$nav-tabs-border-
|
|
1071
|
-
$nav-tabs-
|
|
1072
|
-
$nav-tabs-link-
|
|
1073
|
-
$nav-tabs-link-active-
|
|
1074
|
-
$nav-tabs-link-active-
|
|
1075
|
-
|
|
1076
|
-
|
|
1160
|
+
$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
|
|
1161
|
+
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
1162
|
+
|
|
1163
|
+
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
|
|
1164
|
+
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
|
|
1165
|
+
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1166
|
+
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
|
|
1167
|
+
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
|
|
1168
|
+
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
|
|
1169
|
+
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
|
|
1170
|
+
|
|
1171
|
+
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1077
1172
|
$nav-pills-link-active-color: $component-active-color !default;
|
|
1078
1173
|
$nav-pills-link-active-bg: $component-active-bg !default;
|
|
1174
|
+
|
|
1175
|
+
$nav-underline-gap: 1rem !default;
|
|
1176
|
+
$nav-underline-border-width: .125rem !default;
|
|
1177
|
+
$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
|
|
1079
1178
|
// scss-docs-end nav-variables
|
|
1080
1179
|
|
|
1081
1180
|
|
|
@@ -1100,28 +1199,28 @@ $navbar-toggler-font-size: $font-size-lg !default;
|
|
|
1100
1199
|
$navbar-toggler-border-radius: $btn-border-radius !default;
|
|
1101
1200
|
$navbar-toggler-focus-width: $btn-focus-width !default;
|
|
1102
1201
|
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
|
1202
|
+
|
|
1203
|
+
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
|
|
1204
|
+
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
|
|
1205
|
+
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
|
|
1206
|
+
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
|
|
1207
|
+
$navbar-light-icon-color: rgba($body-color, .75) !default;
|
|
1208
|
+
$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
1209
|
+
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
|
|
1210
|
+
$navbar-light-brand-color: $navbar-light-active-color !default;
|
|
1211
|
+
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
|
1103
1212
|
// scss-docs-end navbar-variables
|
|
1104
1213
|
|
|
1105
|
-
// scss-docs-start navbar-
|
|
1214
|
+
// scss-docs-start navbar-dark-variables
|
|
1106
1215
|
$navbar-dark-color: rgba($white, .55) !default;
|
|
1107
1216
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
|
1108
1217
|
$navbar-dark-active-color: $white !default;
|
|
1109
1218
|
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
|
1110
1219
|
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
1111
1220
|
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
|
1112
|
-
|
|
1113
|
-
$navbar-
|
|
1114
|
-
|
|
1115
|
-
$navbar-light-active-color: rgba($black, .9) !default;
|
|
1116
|
-
$navbar-light-disabled-color: rgba($black, .3) !default;
|
|
1117
|
-
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
1118
|
-
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
|
1119
|
-
|
|
1120
|
-
$navbar-light-brand-color: $navbar-light-active-color !default;
|
|
1121
|
-
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
|
1122
|
-
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
|
1123
|
-
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
|
1124
|
-
// scss-docs-end navbar-theme-variables
|
|
1221
|
+
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
|
1222
|
+
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
|
1223
|
+
// scss-docs-end navbar-dark-variables
|
|
1125
1224
|
|
|
1126
1225
|
|
|
1127
1226
|
// Dropdowns
|
|
@@ -1134,24 +1233,24 @@ $dropdown-padding-x: 0 !default;
|
|
|
1134
1233
|
$dropdown-padding-y: .5rem !default;
|
|
1135
1234
|
$dropdown-spacer: .125rem !default;
|
|
1136
1235
|
$dropdown-font-size: $font-size-base !default;
|
|
1137
|
-
$dropdown-color: $body-color !default;
|
|
1138
|
-
$dropdown-bg: $
|
|
1236
|
+
$dropdown-color: var(--#{$prefix}body-color) !default;
|
|
1237
|
+
$dropdown-bg: var(--#{$prefix}body-bg) !default;
|
|
1139
1238
|
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1140
|
-
$dropdown-border-radius: $border-radius !default;
|
|
1141
|
-
$dropdown-border-width: $border-width !default;
|
|
1142
|
-
$dropdown-inner-border-radius:
|
|
1239
|
+
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1240
|
+
$dropdown-border-width: var(--#{$prefix}border-width) !default;
|
|
1241
|
+
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
|
1143
1242
|
$dropdown-divider-bg: $dropdown-border-color !default;
|
|
1144
1243
|
$dropdown-divider-margin-y: $spacer * .5 !default;
|
|
1145
1244
|
$dropdown-box-shadow: $box-shadow !default;
|
|
1146
1245
|
|
|
1147
|
-
$dropdown-link-color: $
|
|
1148
|
-
$dropdown-link-hover-color:
|
|
1149
|
-
$dropdown-link-hover-bg: $
|
|
1246
|
+
$dropdown-link-color: var(--#{$prefix}body-color) !default;
|
|
1247
|
+
$dropdown-link-hover-color: $dropdown-link-color !default;
|
|
1248
|
+
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1150
1249
|
|
|
1151
1250
|
$dropdown-link-active-color: $component-active-color !default;
|
|
1152
1251
|
$dropdown-link-active-bg: $component-active-bg !default;
|
|
1153
1252
|
|
|
1154
|
-
$dropdown-link-disabled-color: $
|
|
1253
|
+
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
|
|
1155
1254
|
|
|
1156
1255
|
$dropdown-item-padding-y: $spacer * .25 !default;
|
|
1157
1256
|
$dropdown-item-padding-x: $spacer !default;
|
|
@@ -1193,33 +1292,33 @@ $pagination-padding-x-lg: 1.5rem !default;
|
|
|
1193
1292
|
$pagination-font-size: $font-size-base !default;
|
|
1194
1293
|
|
|
1195
1294
|
$pagination-color: var(--#{$prefix}link-color) !default;
|
|
1196
|
-
$pagination-bg: $
|
|
1197
|
-
$pagination-border-radius: $border-radius !default;
|
|
1198
|
-
$pagination-border-width: $border-width !default;
|
|
1199
|
-
$pagination-margin-start: ($pagination-border-width * -1) !default;
|
|
1200
|
-
$pagination-border-color: $
|
|
1295
|
+
$pagination-bg: var(--#{$prefix}body-bg) !default;
|
|
1296
|
+
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1297
|
+
$pagination-border-width: var(--#{$prefix}border-width) !default;
|
|
1298
|
+
$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
|
|
1299
|
+
$pagination-border-color: var(--#{$prefix}border-color) !default;
|
|
1201
1300
|
|
|
1202
1301
|
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
|
1203
|
-
$pagination-focus-bg: $
|
|
1204
|
-
$pagination-focus-box-shadow: $
|
|
1302
|
+
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1303
|
+
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
1205
1304
|
$pagination-focus-outline: 0 !default;
|
|
1206
1305
|
|
|
1207
1306
|
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
1208
|
-
$pagination-hover-bg: $
|
|
1209
|
-
$pagination-hover-border-color: $
|
|
1307
|
+
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1308
|
+
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
|
|
1210
1309
|
|
|
1211
1310
|
$pagination-active-color: $component-active-color !default;
|
|
1212
1311
|
$pagination-active-bg: $component-active-bg !default;
|
|
1213
|
-
$pagination-active-border-color: $
|
|
1312
|
+
$pagination-active-border-color: $component-active-bg !default;
|
|
1214
1313
|
|
|
1215
|
-
$pagination-disabled-color: $
|
|
1216
|
-
$pagination-disabled-bg: $
|
|
1217
|
-
$pagination-disabled-border-color: $
|
|
1314
|
+
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
|
|
1315
|
+
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1316
|
+
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
|
|
1218
1317
|
|
|
1219
1318
|
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
|
1220
1319
|
|
|
1221
|
-
$pagination-border-radius-sm: $border-radius-sm !default;
|
|
1222
|
-
$pagination-border-radius-lg: $border-radius-lg !default;
|
|
1320
|
+
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
1321
|
+
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
1223
1322
|
// scss-docs-end pagination-variables
|
|
1224
1323
|
|
|
1225
1324
|
|
|
@@ -1236,18 +1335,20 @@ $placeholder-opacity-min: .2 !default;
|
|
|
1236
1335
|
$card-spacer-y: $spacer !default;
|
|
1237
1336
|
$card-spacer-x: $spacer !default;
|
|
1238
1337
|
$card-title-spacer-y: $spacer * .5 !default;
|
|
1239
|
-
$card-
|
|
1338
|
+
$card-title-color: null !default;
|
|
1339
|
+
$card-subtitle-color: null !default;
|
|
1340
|
+
$card-border-width: var(--#{$prefix}border-width) !default;
|
|
1240
1341
|
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1241
|
-
$card-border-radius: $border-radius !default;
|
|
1342
|
+
$card-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1242
1343
|
$card-box-shadow: null !default;
|
|
1243
1344
|
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
|
1244
1345
|
$card-cap-padding-y: $card-spacer-y * .5 !default;
|
|
1245
1346
|
$card-cap-padding-x: $card-spacer-x !default;
|
|
1246
|
-
$card-cap-bg: rgba($
|
|
1347
|
+
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
|
1247
1348
|
$card-cap-color: null !default;
|
|
1248
1349
|
$card-height: null !default;
|
|
1249
1350
|
$card-color: null !default;
|
|
1250
|
-
$card-bg: $
|
|
1351
|
+
$card-bg: var(--#{$prefix}body-bg) !default;
|
|
1251
1352
|
$card-img-overlay-padding: $spacer !default;
|
|
1252
1353
|
$card-group-margin: $grid-gutter-width * .5 !default;
|
|
1253
1354
|
// scss-docs-end card-variables
|
|
@@ -1258,10 +1359,10 @@ $card-group-margin: $grid-gutter-width * .5 !default;
|
|
|
1258
1359
|
$accordion-padding-y: 1rem !default;
|
|
1259
1360
|
$accordion-padding-x: 1.25rem !default;
|
|
1260
1361
|
$accordion-color: var(--#{$prefix}body-color) !default;
|
|
1261
|
-
$accordion-bg: $body-bg !default;
|
|
1262
|
-
$accordion-border-width: $border-width !default;
|
|
1362
|
+
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
|
1363
|
+
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
|
1263
1364
|
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
|
1264
|
-
$accordion-border-radius: $border-radius !default;
|
|
1365
|
+
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1265
1366
|
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
|
|
1266
1367
|
|
|
1267
1368
|
$accordion-body-padding-y: $accordion-padding-y !default;
|
|
@@ -1269,18 +1370,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
|
|
|
1269
1370
|
|
|
1270
1371
|
$accordion-button-padding-y: $accordion-padding-y !default;
|
|
1271
1372
|
$accordion-button-padding-x: $accordion-padding-x !default;
|
|
1272
|
-
$accordion-button-color: $
|
|
1373
|
+
$accordion-button-color: var(--#{$prefix}body-color) !default;
|
|
1273
1374
|
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
|
1274
1375
|
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
|
1275
|
-
$accordion-button-active-bg:
|
|
1276
|
-
$accordion-button-active-color:
|
|
1376
|
+
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
|
|
1377
|
+
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
|
|
1277
1378
|
|
|
1278
1379
|
$accordion-button-focus-border-color: $input-focus-border-color !default;
|
|
1279
1380
|
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
|
1280
1381
|
|
|
1281
1382
|
$accordion-icon-width: 1.25rem !default;
|
|
1282
|
-
$accordion-icon-color: $
|
|
1283
|
-
$accordion-icon-active-color: $
|
|
1383
|
+
$accordion-icon-color: $body-color !default;
|
|
1384
|
+
$accordion-icon-active-color: $primary-text-emphasis !default;
|
|
1284
1385
|
$accordion-icon-transition: transform .2s ease-in-out !default;
|
|
1285
1386
|
$accordion-icon-transform: rotate(-180deg) !default;
|
|
1286
1387
|
|
|
@@ -1293,9 +1394,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
|
|
|
1293
1394
|
// scss-docs-start tooltip-variables
|
|
1294
1395
|
$tooltip-font-size: $font-size-sm !default;
|
|
1295
1396
|
$tooltip-max-width: 200px !default;
|
|
1296
|
-
$tooltip-color: $
|
|
1297
|
-
$tooltip-bg: $
|
|
1298
|
-
$tooltip-border-radius: $border-radius !default;
|
|
1397
|
+
$tooltip-color: var(--#{$prefix}body-bg) !default;
|
|
1398
|
+
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
|
|
1399
|
+
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1299
1400
|
$tooltip-opacity: .9 !default;
|
|
1300
1401
|
$tooltip-padding-y: $spacer * .25 !default;
|
|
1301
1402
|
$tooltip-padding-x: $spacer * .5 !default;
|
|
@@ -1323,21 +1424,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
|
|
1323
1424
|
|
|
1324
1425
|
// scss-docs-start popover-variables
|
|
1325
1426
|
$popover-font-size: $font-size-sm !default;
|
|
1326
|
-
$popover-bg: $
|
|
1427
|
+
$popover-bg: var(--#{$prefix}body-bg) !default;
|
|
1327
1428
|
$popover-max-width: 276px !default;
|
|
1328
|
-
$popover-border-width: $border-width !default;
|
|
1429
|
+
$popover-border-width: var(--#{$prefix}border-width) !default;
|
|
1329
1430
|
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1330
|
-
$popover-border-radius: $border-radius-lg !default;
|
|
1331
|
-
$popover-inner-border-radius:
|
|
1431
|
+
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
|
1432
|
+
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
|
1332
1433
|
$popover-box-shadow: $box-shadow !default;
|
|
1333
1434
|
|
|
1334
1435
|
$popover-header-font-size: $font-size-base !default;
|
|
1335
|
-
$popover-header-bg:
|
|
1336
|
-
$popover-header-color:
|
|
1436
|
+
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1437
|
+
$popover-header-color: $headings-color !default;
|
|
1337
1438
|
$popover-header-padding-y: .5rem !default;
|
|
1338
1439
|
$popover-header-padding-x: $spacer !default;
|
|
1339
1440
|
|
|
1340
|
-
$popover-body-color: $body-color !default;
|
|
1441
|
+
$popover-body-color: var(--#{$prefix}body-color) !default;
|
|
1341
1442
|
$popover-body-padding-y: $spacer !default;
|
|
1342
1443
|
$popover-body-padding-x: $spacer !default;
|
|
1343
1444
|
|
|
@@ -1360,16 +1461,16 @@ $toast-padding-x: .75rem !default;
|
|
|
1360
1461
|
$toast-padding-y: .5rem !default;
|
|
1361
1462
|
$toast-font-size: .875rem !default;
|
|
1362
1463
|
$toast-color: null !default;
|
|
1363
|
-
$toast-background-color: rgba($
|
|
1364
|
-
$toast-border-width: $border-width !default;
|
|
1464
|
+
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
|
1465
|
+
$toast-border-width: var(--#{$prefix}border-width) !default;
|
|
1365
1466
|
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1366
|
-
$toast-border-radius: $border-radius !default;
|
|
1367
|
-
$toast-box-shadow: $box-shadow !default;
|
|
1467
|
+
$toast-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1468
|
+
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
|
|
1368
1469
|
$toast-spacing: $container-padding-x !default;
|
|
1369
1470
|
|
|
1370
|
-
$toast-header-color: $
|
|
1371
|
-
$toast-header-background-color: rgba($
|
|
1372
|
-
$toast-header-border-color:
|
|
1471
|
+
$toast-header-color: var(--#{$prefix}secondary-color) !default;
|
|
1472
|
+
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
|
1473
|
+
$toast-header-border-color: $toast-border-color !default;
|
|
1373
1474
|
// scss-docs-end toast-variables
|
|
1374
1475
|
|
|
1375
1476
|
|
|
@@ -1381,7 +1482,7 @@ $badge-font-weight: $font-weight-bold !default;
|
|
|
1381
1482
|
$badge-color: $white !default;
|
|
1382
1483
|
$badge-padding-y: .35em !default;
|
|
1383
1484
|
$badge-padding-x: .65em !default;
|
|
1384
|
-
$badge-border-radius: $border-radius !default;
|
|
1485
|
+
$badge-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1385
1486
|
// scss-docs-end badge-variables
|
|
1386
1487
|
|
|
1387
1488
|
|
|
@@ -1398,10 +1499,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
|
|
|
1398
1499
|
$modal-title-line-height: $line-height-base !default;
|
|
1399
1500
|
|
|
1400
1501
|
$modal-content-color: null !default;
|
|
1401
|
-
$modal-content-bg: $
|
|
1502
|
+
$modal-content-bg: var(--#{$prefix}body-bg) !default;
|
|
1402
1503
|
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1403
|
-
$modal-content-border-width: $border-width !default;
|
|
1404
|
-
$modal-content-border-radius: $border-radius-lg !default;
|
|
1504
|
+
$modal-content-border-width: var(--#{$prefix}border-width) !default;
|
|
1505
|
+
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
|
1405
1506
|
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
|
1406
1507
|
$modal-content-box-shadow-xs: $box-shadow-sm !default;
|
|
1407
1508
|
$modal-content-box-shadow-sm-up: $box-shadow !default;
|
|
@@ -1439,24 +1540,29 @@ $modal-scale-transform: scale(1.02) !default;
|
|
|
1439
1540
|
$alert-padding-y: $spacer !default;
|
|
1440
1541
|
$alert-padding-x: $spacer !default;
|
|
1441
1542
|
$alert-margin-bottom: 1rem !default;
|
|
1442
|
-
$alert-border-radius: $border-radius !default;
|
|
1543
|
+
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1443
1544
|
$alert-link-font-weight: $font-weight-bold !default;
|
|
1444
|
-
$alert-border-width: $border-width !default;
|
|
1545
|
+
$alert-border-width: var(--#{$prefix}border-width) !default;
|
|
1445
1546
|
$alert-bg-scale: -80% !default;
|
|
1446
1547
|
$alert-border-scale: -70% !default;
|
|
1447
1548
|
$alert-color-scale: 40% !default;
|
|
1448
1549
|
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
|
1449
1550
|
// scss-docs-end alert-variables
|
|
1450
1551
|
|
|
1552
|
+
// fusv-disable
|
|
1553
|
+
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
1554
|
+
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
1555
|
+
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
1556
|
+
// fusv-enable
|
|
1451
1557
|
|
|
1452
1558
|
// Progress bars
|
|
1453
1559
|
|
|
1454
1560
|
// scss-docs-start progress-variables
|
|
1455
1561
|
$progress-height: 1rem !default;
|
|
1456
1562
|
$progress-font-size: $font-size-base * .75 !default;
|
|
1457
|
-
$progress-bg: $
|
|
1458
|
-
$progress-border-radius: $border-radius !default;
|
|
1459
|
-
$progress-box-shadow: $box-shadow-inset !default;
|
|
1563
|
+
$progress-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1564
|
+
$progress-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1565
|
+
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
|
1460
1566
|
$progress-bar-color: $white !default;
|
|
1461
1567
|
$progress-bar-bg: $primary !default;
|
|
1462
1568
|
$progress-bar-animation-timing: 1s linear infinite !default;
|
|
@@ -1467,30 +1573,32 @@ $progress-bar-transition: width .6s ease !default;
|
|
|
1467
1573
|
// List group
|
|
1468
1574
|
|
|
1469
1575
|
// scss-docs-start list-group-variables
|
|
1470
|
-
$list-group-color: $
|
|
1471
|
-
$list-group-bg: $
|
|
1472
|
-
$list-group-border-color:
|
|
1473
|
-
$list-group-border-width: $border-width !default;
|
|
1474
|
-
$list-group-border-radius: $border-radius !default;
|
|
1576
|
+
$list-group-color: var(--#{$prefix}body-color) !default;
|
|
1577
|
+
$list-group-bg: var(--#{$prefix}body-bg) !default;
|
|
1578
|
+
$list-group-border-color: var(--#{$prefix}border-color) !default;
|
|
1579
|
+
$list-group-border-width: var(--#{$prefix}border-width) !default;
|
|
1580
|
+
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1475
1581
|
|
|
1476
1582
|
$list-group-item-padding-y: $spacer * .5 !default;
|
|
1477
1583
|
$list-group-item-padding-x: $spacer !default;
|
|
1478
|
-
|
|
1479
|
-
$list-group-item-
|
|
1584
|
+
// fusv-disable
|
|
1585
|
+
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
|
|
1586
|
+
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
|
|
1587
|
+
// fusv-enable
|
|
1480
1588
|
|
|
1481
|
-
$list-group-hover-bg: $
|
|
1589
|
+
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1482
1590
|
$list-group-active-color: $component-active-color !default;
|
|
1483
1591
|
$list-group-active-bg: $component-active-bg !default;
|
|
1484
1592
|
$list-group-active-border-color: $list-group-active-bg !default;
|
|
1485
1593
|
|
|
1486
|
-
$list-group-disabled-color: $
|
|
1594
|
+
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
|
|
1487
1595
|
$list-group-disabled-bg: $list-group-bg !default;
|
|
1488
1596
|
|
|
1489
|
-
$list-group-action-color: $
|
|
1490
|
-
$list-group-action-hover-color: $
|
|
1597
|
+
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
|
|
1598
|
+
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
|
|
1491
1599
|
|
|
1492
|
-
$list-group-action-active-color: $body-color !default;
|
|
1493
|
-
$list-group-action-active-bg: $
|
|
1600
|
+
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
|
|
1601
|
+
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1494
1602
|
// scss-docs-end list-group-variables
|
|
1495
1603
|
|
|
1496
1604
|
|
|
@@ -1498,11 +1606,11 @@ $list-group-action-active-bg: $gray-200 !default;
|
|
|
1498
1606
|
|
|
1499
1607
|
// scss-docs-start thumbnail-variables
|
|
1500
1608
|
$thumbnail-padding: .25rem !default;
|
|
1501
|
-
$thumbnail-bg: $body-bg !default;
|
|
1502
|
-
$thumbnail-border-width: $border-width !default;
|
|
1609
|
+
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
|
|
1610
|
+
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
|
|
1503
1611
|
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
|
|
1504
|
-
$thumbnail-border-radius: $border-radius !default;
|
|
1505
|
-
$thumbnail-box-shadow: $box-shadow-sm !default;
|
|
1612
|
+
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1613
|
+
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
|
1506
1614
|
// scss-docs-end thumbnail-variables
|
|
1507
1615
|
|
|
1508
1616
|
|
|
@@ -1510,7 +1618,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
|
|
|
1510
1618
|
|
|
1511
1619
|
// scss-docs-start figure-variables
|
|
1512
1620
|
$figure-caption-font-size: $small-font-size !default;
|
|
1513
|
-
$figure-caption-color: $
|
|
1621
|
+
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
|
|
1514
1622
|
// scss-docs-end figure-variables
|
|
1515
1623
|
|
|
1516
1624
|
|
|
@@ -1523,8 +1631,8 @@ $breadcrumb-padding-x: 0 !default;
|
|
|
1523
1631
|
$breadcrumb-item-padding-x: .5rem !default;
|
|
1524
1632
|
$breadcrumb-margin-bottom: 1rem !default;
|
|
1525
1633
|
$breadcrumb-bg: null !default;
|
|
1526
|
-
$breadcrumb-divider-color: $
|
|
1527
|
-
$breadcrumb-active-color: $
|
|
1634
|
+
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
|
1635
|
+
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
|
1528
1636
|
$breadcrumb-divider: quote("/") !default;
|
|
1529
1637
|
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
|
1530
1638
|
$breadcrumb-border-radius: null !default;
|
|
@@ -1560,11 +1668,13 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://
|
|
|
1560
1668
|
|
|
1561
1669
|
$carousel-transition-duration: .6s !default;
|
|
1562
1670
|
$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`)
|
|
1671
|
+
// scss-docs-end carousel-variables
|
|
1563
1672
|
|
|
1673
|
+
// scss-docs-start carousel-dark-variables
|
|
1564
1674
|
$carousel-dark-indicator-active-bg: $black !default;
|
|
1565
1675
|
$carousel-dark-caption-color: $black !default;
|
|
1566
1676
|
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
|
|
1567
|
-
// scss-docs-end carousel-variables
|
|
1677
|
+
// scss-docs-end carousel-dark-variables
|
|
1568
1678
|
|
|
1569
1679
|
|
|
1570
1680
|
// Spinners
|
|
@@ -1591,7 +1701,7 @@ $btn-close-padding-x: .25em !default;
|
|
|
1591
1701
|
$btn-close-padding-y: $btn-close-padding-x !default;
|
|
1592
1702
|
$btn-close-color: $black !default;
|
|
1593
1703
|
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
|
|
1594
|
-
$btn-close-focus-shadow: $
|
|
1704
|
+
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
|
|
1595
1705
|
$btn-close-opacity: .5 !default;
|
|
1596
1706
|
$btn-close-hover-opacity: .75 !default;
|
|
1597
1707
|
$btn-close-focus-opacity: 1 !default;
|
|
@@ -1611,8 +1721,8 @@ $offcanvas-transition-duration: .3s !default;
|
|
|
1611
1721
|
$offcanvas-border-color: $modal-content-border-color !default;
|
|
1612
1722
|
$offcanvas-border-width: $modal-content-border-width !default;
|
|
1613
1723
|
$offcanvas-title-line-height: $modal-title-line-height !default;
|
|
1614
|
-
$offcanvas-bg-color: $
|
|
1615
|
-
$offcanvas-color: $
|
|
1724
|
+
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
|
|
1725
|
+
$offcanvas-color: var(--#{$prefix}body-color) !default;
|
|
1616
1726
|
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
|
|
1617
1727
|
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
|
|
1618
1728
|
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
|