bootstrap 5.2.3 → 5.3.0.alpha3
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/README.md +1 -1
- data/assets/javascripts/bootstrap/alert.js +21 -32
- data/assets/javascripts/bootstrap/base-component.js +21 -38
- data/assets/javascripts/bootstrap/button.js +18 -22
- data/assets/javascripts/bootstrap/carousel.js +51 -135
- data/assets/javascripts/bootstrap/collapse.js +39 -102
- data/assets/javascripts/bootstrap/dom/data.js +8 -12
- data/assets/javascripts/bootstrap/dom/event-handler.js +18 -66
- data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
- data/assets/javascripts/bootstrap/dom/selector-engine.js +41 -24
- data/assets/javascripts/bootstrap/dropdown.js +73 -145
- data/assets/javascripts/bootstrap/modal.js +52 -133
- data/assets/javascripts/bootstrap/offcanvas.js +49 -102
- data/assets/javascripts/bootstrap/popover.js +22 -29
- data/assets/javascripts/bootstrap/scrollspy.js +51 -89
- data/assets/javascripts/bootstrap/tab.js +51 -109
- data/assets/javascripts/bootstrap/toast.js +30 -73
- data/assets/javascripts/bootstrap/tooltip.js +74 -177
- data/assets/javascripts/bootstrap/util/backdrop.js +27 -54
- data/assets/javascripts/bootstrap/util/component-functions.js +13 -19
- data/assets/javascripts/bootstrap/util/config.js +14 -27
- data/assets/javascripts/bootstrap/util/focustrap.js +19 -36
- data/assets/javascripts/bootstrap/util/index.js +42 -111
- data/assets/javascripts/bootstrap/util/sanitizer.js +13 -19
- data/assets/javascripts/bootstrap/util/scrollbar.js +23 -50
- data/assets/javascripts/bootstrap/util/swipe.js +26 -48
- data/assets/javascripts/bootstrap/util/template-factory.js +24 -52
- data/assets/javascripts/bootstrap-sprockets.js +1 -1
- data/assets/javascripts/bootstrap.js +626 -1406
- 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 +9 -0
- data/assets/stylesheets/bootstrap/_alert.scss +8 -11
- data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
- data/assets/stylesheets/bootstrap/_buttons.scss +3 -3
- data/assets/stylesheets/bootstrap/_card.scss +5 -0
- data/assets/stylesheets/bootstrap/_carousel.scss +20 -2
- data/assets/stylesheets/bootstrap/_close.scss +32 -9
- data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
- data/assets/stylesheets/bootstrap/_functions.scss +1 -1
- data/assets/stylesheets/bootstrap/_grid.scss +6 -0
- data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
- data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
- data/assets/stylesheets/bootstrap/_maps.scss +120 -0
- data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
- data/assets/stylesheets/bootstrap/_nav.scss +40 -3
- data/assets/stylesheets/bootstrap/_navbar.scss +13 -3
- data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
- data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
- data/assets/stylesheets/bootstrap/_progress.scss +10 -1
- data/assets/stylesheets/bootstrap/_reboot.scss +3 -3
- data/assets/stylesheets/bootstrap/_root.scss +125 -10
- data/assets/stylesheets/bootstrap/_tables.scss +1 -1
- 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 +260 -151
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -0
- data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +21 -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 +1 -1
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +22 -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 +2 -4
- 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 +8 -7
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
- 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 +1 -1
- data/tasks/updater/scss.rb +1 -1
- metadata +10 -6
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -1101,12 +1200,13 @@ $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;
|
|
1103
1202
|
|
|
1104
|
-
$navbar-light-color: rgba($
|
|
1105
|
-
$navbar-light-hover-color: rgba($
|
|
1106
|
-
$navbar-light-active-color: rgba($
|
|
1107
|
-
$navbar-light-disabled-color: rgba($
|
|
1108
|
-
$navbar-light-
|
|
1109
|
-
$navbar-light-toggler-
|
|
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;
|
|
1110
1210
|
$navbar-light-brand-color: $navbar-light-active-color !default;
|
|
1111
1211
|
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
|
1112
1212
|
// scss-docs-end navbar-variables
|
|
@@ -1133,24 +1233,24 @@ $dropdown-padding-x: 0 !default;
|
|
|
1133
1233
|
$dropdown-padding-y: .5rem !default;
|
|
1134
1234
|
$dropdown-spacer: .125rem !default;
|
|
1135
1235
|
$dropdown-font-size: $font-size-base !default;
|
|
1136
|
-
$dropdown-color: $body-color !default;
|
|
1137
|
-
$dropdown-bg: $
|
|
1236
|
+
$dropdown-color: var(--#{$prefix}body-color) !default;
|
|
1237
|
+
$dropdown-bg: var(--#{$prefix}body-bg) !default;
|
|
1138
1238
|
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1139
|
-
$dropdown-border-radius: $border-radius !default;
|
|
1140
|
-
$dropdown-border-width: $border-width !default;
|
|
1141
|
-
$dropdown-inner-border-radius:
|
|
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
|
|
1142
1242
|
$dropdown-divider-bg: $dropdown-border-color !default;
|
|
1143
1243
|
$dropdown-divider-margin-y: $spacer * .5 !default;
|
|
1144
1244
|
$dropdown-box-shadow: $box-shadow !default;
|
|
1145
1245
|
|
|
1146
|
-
$dropdown-link-color: $
|
|
1147
|
-
$dropdown-link-hover-color:
|
|
1148
|
-
$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;
|
|
1149
1249
|
|
|
1150
1250
|
$dropdown-link-active-color: $component-active-color !default;
|
|
1151
1251
|
$dropdown-link-active-bg: $component-active-bg !default;
|
|
1152
1252
|
|
|
1153
|
-
$dropdown-link-disabled-color: $
|
|
1253
|
+
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
|
|
1154
1254
|
|
|
1155
1255
|
$dropdown-item-padding-y: $spacer * .25 !default;
|
|
1156
1256
|
$dropdown-item-padding-x: $spacer !default;
|
|
@@ -1192,33 +1292,33 @@ $pagination-padding-x-lg: 1.5rem !default;
|
|
|
1192
1292
|
$pagination-font-size: $font-size-base !default;
|
|
1193
1293
|
|
|
1194
1294
|
$pagination-color: var(--#{$prefix}link-color) !default;
|
|
1195
|
-
$pagination-bg: $
|
|
1196
|
-
$pagination-border-radius: $border-radius !default;
|
|
1197
|
-
$pagination-border-width: $border-width !default;
|
|
1198
|
-
$pagination-margin-start: ($pagination-border-width * -1) !default;
|
|
1199
|
-
$pagination-border-color: $
|
|
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;
|
|
1200
1300
|
|
|
1201
1301
|
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
|
1202
|
-
$pagination-focus-bg: $
|
|
1203
|
-
$pagination-focus-box-shadow: $
|
|
1302
|
+
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1303
|
+
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
1204
1304
|
$pagination-focus-outline: 0 !default;
|
|
1205
1305
|
|
|
1206
1306
|
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
1207
|
-
$pagination-hover-bg: $
|
|
1208
|
-
$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?
|
|
1209
1309
|
|
|
1210
1310
|
$pagination-active-color: $component-active-color !default;
|
|
1211
1311
|
$pagination-active-bg: $component-active-bg !default;
|
|
1212
|
-
$pagination-active-border-color: $
|
|
1312
|
+
$pagination-active-border-color: $component-active-bg !default;
|
|
1213
1313
|
|
|
1214
|
-
$pagination-disabled-color: $
|
|
1215
|
-
$pagination-disabled-bg: $
|
|
1216
|
-
$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;
|
|
1217
1317
|
|
|
1218
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;
|
|
1219
1319
|
|
|
1220
|
-
$pagination-border-radius-sm: $border-radius-sm !default;
|
|
1221
|
-
$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;
|
|
1222
1322
|
// scss-docs-end pagination-variables
|
|
1223
1323
|
|
|
1224
1324
|
|
|
@@ -1235,18 +1335,20 @@ $placeholder-opacity-min: .2 !default;
|
|
|
1235
1335
|
$card-spacer-y: $spacer !default;
|
|
1236
1336
|
$card-spacer-x: $spacer !default;
|
|
1237
1337
|
$card-title-spacer-y: $spacer * .5 !default;
|
|
1238
|
-
$card-
|
|
1338
|
+
$card-title-color: null !default;
|
|
1339
|
+
$card-subtitle-color: null !default;
|
|
1340
|
+
$card-border-width: var(--#{$prefix}border-width) !default;
|
|
1239
1341
|
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1240
|
-
$card-border-radius: $border-radius !default;
|
|
1342
|
+
$card-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1241
1343
|
$card-box-shadow: null !default;
|
|
1242
1344
|
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
|
1243
1345
|
$card-cap-padding-y: $card-spacer-y * .5 !default;
|
|
1244
1346
|
$card-cap-padding-x: $card-spacer-x !default;
|
|
1245
|
-
$card-cap-bg: rgba($
|
|
1347
|
+
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
|
1246
1348
|
$card-cap-color: null !default;
|
|
1247
1349
|
$card-height: null !default;
|
|
1248
1350
|
$card-color: null !default;
|
|
1249
|
-
$card-bg: $
|
|
1351
|
+
$card-bg: var(--#{$prefix}body-bg) !default;
|
|
1250
1352
|
$card-img-overlay-padding: $spacer !default;
|
|
1251
1353
|
$card-group-margin: $grid-gutter-width * .5 !default;
|
|
1252
1354
|
// scss-docs-end card-variables
|
|
@@ -1256,11 +1358,11 @@ $card-group-margin: $grid-gutter-width * .5 !default;
|
|
|
1256
1358
|
// scss-docs-start accordion-variables
|
|
1257
1359
|
$accordion-padding-y: 1rem !default;
|
|
1258
1360
|
$accordion-padding-x: 1.25rem !default;
|
|
1259
|
-
$accordion-color: $body-color !default;
|
|
1260
|
-
$accordion-bg: $body-bg !default;
|
|
1261
|
-
$accordion-border-width: $border-width !default;
|
|
1361
|
+
$accordion-color: var(--#{$prefix}body-color) !default;
|
|
1362
|
+
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
|
1363
|
+
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
|
1262
1364
|
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
|
1263
|
-
$accordion-border-radius: $border-radius !default;
|
|
1365
|
+
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1264
1366
|
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
|
|
1265
1367
|
|
|
1266
1368
|
$accordion-body-padding-y: $accordion-padding-y !default;
|
|
@@ -1268,18 +1370,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
|
|
|
1268
1370
|
|
|
1269
1371
|
$accordion-button-padding-y: $accordion-padding-y !default;
|
|
1270
1372
|
$accordion-button-padding-x: $accordion-padding-x !default;
|
|
1271
|
-
$accordion-button-color: $
|
|
1373
|
+
$accordion-button-color: var(--#{$prefix}body-color) !default;
|
|
1272
1374
|
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
|
1273
1375
|
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
|
1274
|
-
$accordion-button-active-bg:
|
|
1275
|
-
$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;
|
|
1276
1378
|
|
|
1277
1379
|
$accordion-button-focus-border-color: $input-focus-border-color !default;
|
|
1278
1380
|
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
|
1279
1381
|
|
|
1280
1382
|
$accordion-icon-width: 1.25rem !default;
|
|
1281
|
-
$accordion-icon-color: $
|
|
1282
|
-
$accordion-icon-active-color: $
|
|
1383
|
+
$accordion-icon-color: $body-color !default;
|
|
1384
|
+
$accordion-icon-active-color: $primary-text-emphasis !default;
|
|
1283
1385
|
$accordion-icon-transition: transform .2s ease-in-out !default;
|
|
1284
1386
|
$accordion-icon-transform: rotate(-180deg) !default;
|
|
1285
1387
|
|
|
@@ -1292,9 +1394,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
|
|
|
1292
1394
|
// scss-docs-start tooltip-variables
|
|
1293
1395
|
$tooltip-font-size: $font-size-sm !default;
|
|
1294
1396
|
$tooltip-max-width: 200px !default;
|
|
1295
|
-
$tooltip-color: $
|
|
1296
|
-
$tooltip-bg: $
|
|
1297
|
-
$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;
|
|
1298
1400
|
$tooltip-opacity: .9 !default;
|
|
1299
1401
|
$tooltip-padding-y: $spacer * .25 !default;
|
|
1300
1402
|
$tooltip-padding-x: $spacer * .5 !default;
|
|
@@ -1322,21 +1424,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
|
|
1322
1424
|
|
|
1323
1425
|
// scss-docs-start popover-variables
|
|
1324
1426
|
$popover-font-size: $font-size-sm !default;
|
|
1325
|
-
$popover-bg: $
|
|
1427
|
+
$popover-bg: var(--#{$prefix}body-bg) !default;
|
|
1326
1428
|
$popover-max-width: 276px !default;
|
|
1327
|
-
$popover-border-width: $border-width !default;
|
|
1429
|
+
$popover-border-width: var(--#{$prefix}border-width) !default;
|
|
1328
1430
|
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1329
|
-
$popover-border-radius: $border-radius-lg !default;
|
|
1330
|
-
$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
|
|
1331
1433
|
$popover-box-shadow: $box-shadow !default;
|
|
1332
1434
|
|
|
1333
1435
|
$popover-header-font-size: $font-size-base !default;
|
|
1334
|
-
$popover-header-bg:
|
|
1436
|
+
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
|
|
1335
1437
|
$popover-header-color: $headings-color !default;
|
|
1336
1438
|
$popover-header-padding-y: .5rem !default;
|
|
1337
1439
|
$popover-header-padding-x: $spacer !default;
|
|
1338
1440
|
|
|
1339
|
-
$popover-body-color: $body-color !default;
|
|
1441
|
+
$popover-body-color: var(--#{$prefix}body-color) !default;
|
|
1340
1442
|
$popover-body-padding-y: $spacer !default;
|
|
1341
1443
|
$popover-body-padding-x: $spacer !default;
|
|
1342
1444
|
|
|
@@ -1359,16 +1461,16 @@ $toast-padding-x: .75rem !default;
|
|
|
1359
1461
|
$toast-padding-y: .5rem !default;
|
|
1360
1462
|
$toast-font-size: .875rem !default;
|
|
1361
1463
|
$toast-color: null !default;
|
|
1362
|
-
$toast-background-color: rgba($
|
|
1363
|
-
$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;
|
|
1364
1466
|
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1365
|
-
$toast-border-radius: $border-radius !default;
|
|
1366
|
-
$toast-box-shadow: $box-shadow !default;
|
|
1467
|
+
$toast-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1468
|
+
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
|
|
1367
1469
|
$toast-spacing: $container-padding-x !default;
|
|
1368
1470
|
|
|
1369
|
-
$toast-header-color: $
|
|
1370
|
-
$toast-header-background-color: rgba($
|
|
1371
|
-
$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;
|
|
1372
1474
|
// scss-docs-end toast-variables
|
|
1373
1475
|
|
|
1374
1476
|
|
|
@@ -1380,7 +1482,7 @@ $badge-font-weight: $font-weight-bold !default;
|
|
|
1380
1482
|
$badge-color: $white !default;
|
|
1381
1483
|
$badge-padding-y: .35em !default;
|
|
1382
1484
|
$badge-padding-x: .65em !default;
|
|
1383
|
-
$badge-border-radius: $border-radius !default;
|
|
1485
|
+
$badge-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1384
1486
|
// scss-docs-end badge-variables
|
|
1385
1487
|
|
|
1386
1488
|
|
|
@@ -1397,10 +1499,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
|
|
|
1397
1499
|
$modal-title-line-height: $line-height-base !default;
|
|
1398
1500
|
|
|
1399
1501
|
$modal-content-color: null !default;
|
|
1400
|
-
$modal-content-bg: $
|
|
1502
|
+
$modal-content-bg: var(--#{$prefix}body-bg) !default;
|
|
1401
1503
|
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
1402
|
-
$modal-content-border-width: $border-width !default;
|
|
1403
|
-
$modal-content-border-radius: $border-radius-lg !default;
|
|
1504
|
+
$modal-content-border-width: var(--#{$prefix}border-width) !default;
|
|
1505
|
+
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
|
1404
1506
|
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
|
1405
1507
|
$modal-content-box-shadow-xs: $box-shadow-sm !default;
|
|
1406
1508
|
$modal-content-box-shadow-sm-up: $box-shadow !default;
|
|
@@ -1438,24 +1540,29 @@ $modal-scale-transform: scale(1.02) !default;
|
|
|
1438
1540
|
$alert-padding-y: $spacer !default;
|
|
1439
1541
|
$alert-padding-x: $spacer !default;
|
|
1440
1542
|
$alert-margin-bottom: 1rem !default;
|
|
1441
|
-
$alert-border-radius: $border-radius !default;
|
|
1543
|
+
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1442
1544
|
$alert-link-font-weight: $font-weight-bold !default;
|
|
1443
|
-
$alert-border-width: $border-width !default;
|
|
1545
|
+
$alert-border-width: var(--#{$prefix}border-width) !default;
|
|
1444
1546
|
$alert-bg-scale: -80% !default;
|
|
1445
1547
|
$alert-border-scale: -70% !default;
|
|
1446
1548
|
$alert-color-scale: 40% !default;
|
|
1447
1549
|
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
|
1448
1550
|
// scss-docs-end alert-variables
|
|
1449
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
|
|
1450
1557
|
|
|
1451
1558
|
// Progress bars
|
|
1452
1559
|
|
|
1453
1560
|
// scss-docs-start progress-variables
|
|
1454
1561
|
$progress-height: 1rem !default;
|
|
1455
1562
|
$progress-font-size: $font-size-base * .75 !default;
|
|
1456
|
-
$progress-bg: $
|
|
1457
|
-
$progress-border-radius: $border-radius !default;
|
|
1458
|
-
$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;
|
|
1459
1566
|
$progress-bar-color: $white !default;
|
|
1460
1567
|
$progress-bar-bg: $primary !default;
|
|
1461
1568
|
$progress-bar-animation-timing: 1s linear infinite !default;
|
|
@@ -1466,30 +1573,32 @@ $progress-bar-transition: width .6s ease !default;
|
|
|
1466
1573
|
// List group
|
|
1467
1574
|
|
|
1468
1575
|
// scss-docs-start list-group-variables
|
|
1469
|
-
$list-group-color: $
|
|
1470
|
-
$list-group-bg: $
|
|
1471
|
-
$list-group-border-color:
|
|
1472
|
-
$list-group-border-width: $border-width !default;
|
|
1473
|
-
$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;
|
|
1474
1581
|
|
|
1475
1582
|
$list-group-item-padding-y: $spacer * .5 !default;
|
|
1476
1583
|
$list-group-item-padding-x: $spacer !default;
|
|
1477
|
-
|
|
1478
|
-
$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
|
|
1479
1588
|
|
|
1480
|
-
$list-group-hover-bg: $
|
|
1589
|
+
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1481
1590
|
$list-group-active-color: $component-active-color !default;
|
|
1482
1591
|
$list-group-active-bg: $component-active-bg !default;
|
|
1483
1592
|
$list-group-active-border-color: $list-group-active-bg !default;
|
|
1484
1593
|
|
|
1485
|
-
$list-group-disabled-color: $
|
|
1594
|
+
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
|
|
1486
1595
|
$list-group-disabled-bg: $list-group-bg !default;
|
|
1487
1596
|
|
|
1488
|
-
$list-group-action-color: $
|
|
1489
|
-
$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;
|
|
1490
1599
|
|
|
1491
|
-
$list-group-action-active-color: $body-color !default;
|
|
1492
|
-
$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;
|
|
1493
1602
|
// scss-docs-end list-group-variables
|
|
1494
1603
|
|
|
1495
1604
|
|
|
@@ -1497,11 +1606,11 @@ $list-group-action-active-bg: $gray-200 !default;
|
|
|
1497
1606
|
|
|
1498
1607
|
// scss-docs-start thumbnail-variables
|
|
1499
1608
|
$thumbnail-padding: .25rem !default;
|
|
1500
|
-
$thumbnail-bg: $body-bg !default;
|
|
1501
|
-
$thumbnail-border-width: $border-width !default;
|
|
1609
|
+
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
|
|
1610
|
+
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
|
|
1502
1611
|
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
|
|
1503
|
-
$thumbnail-border-radius: $border-radius !default;
|
|
1504
|
-
$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;
|
|
1505
1614
|
// scss-docs-end thumbnail-variables
|
|
1506
1615
|
|
|
1507
1616
|
|
|
@@ -1509,7 +1618,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
|
|
|
1509
1618
|
|
|
1510
1619
|
// scss-docs-start figure-variables
|
|
1511
1620
|
$figure-caption-font-size: $small-font-size !default;
|
|
1512
|
-
$figure-caption-color: $
|
|
1621
|
+
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
|
|
1513
1622
|
// scss-docs-end figure-variables
|
|
1514
1623
|
|
|
1515
1624
|
|
|
@@ -1522,8 +1631,8 @@ $breadcrumb-padding-x: 0 !default;
|
|
|
1522
1631
|
$breadcrumb-item-padding-x: .5rem !default;
|
|
1523
1632
|
$breadcrumb-margin-bottom: 1rem !default;
|
|
1524
1633
|
$breadcrumb-bg: null !default;
|
|
1525
|
-
$breadcrumb-divider-color: $
|
|
1526
|
-
$breadcrumb-active-color: $
|
|
1634
|
+
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
|
1635
|
+
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
|
1527
1636
|
$breadcrumb-divider: quote("/") !default;
|
|
1528
1637
|
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
|
1529
1638
|
$breadcrumb-border-radius: null !default;
|
|
@@ -1592,7 +1701,7 @@ $btn-close-padding-x: .25em !default;
|
|
|
1592
1701
|
$btn-close-padding-y: $btn-close-padding-x !default;
|
|
1593
1702
|
$btn-close-color: $black !default;
|
|
1594
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;
|
|
1595
|
-
$btn-close-focus-shadow: $
|
|
1704
|
+
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
|
|
1596
1705
|
$btn-close-opacity: .5 !default;
|
|
1597
1706
|
$btn-close-hover-opacity: .75 !default;
|
|
1598
1707
|
$btn-close-focus-opacity: 1 !default;
|
|
@@ -1612,8 +1721,8 @@ $offcanvas-transition-duration: .3s !default;
|
|
|
1612
1721
|
$offcanvas-border-color: $modal-content-border-color !default;
|
|
1613
1722
|
$offcanvas-border-width: $modal-content-border-width !default;
|
|
1614
1723
|
$offcanvas-title-line-height: $modal-title-line-height !default;
|
|
1615
|
-
$offcanvas-bg-color: $
|
|
1616
|
-
$offcanvas-color: $
|
|
1724
|
+
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
|
|
1725
|
+
$offcanvas-color: var(--#{$prefix}body-color) !default;
|
|
1617
1726
|
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
|
|
1618
1727
|
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
|
|
1619
1728
|
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
|