diff --git a/scss/_card.scss b/scss/_card.scss index cd2c4a5691..c6b67ce05d 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -36,6 +36,7 @@ // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; padding: $card-spacer-x; + color: $card-color; } .card-title { diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index acc68aa599..b82eb1655a 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -25,7 +25,7 @@ padding: $dropdown-padding-y 0; margin: $dropdown-spacer 0 0; // override default ul font-size: $dropdown-font-size; - color: $body-color; + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss index 7966bba1e2..bcd7dcad99 100644 --- a/scss/_jumbotron.scss +++ b/scss/_jumbotron.scss @@ -1,6 +1,7 @@ .jumbotron { padding: $jumbotron-padding ($jumbotron-padding / 2); margin-bottom: $jumbotron-padding; + color: $jumbotron-color; background-color: $jumbotron-bg; @include border-radius($border-radius-lg); diff --git a/scss/_list-group.scss b/scss/_list-group.scss index f941416928..3f80687ab4 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -47,6 +47,7 @@ padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; + color: $list-group-color; background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; diff --git a/scss/_modal.scss b/scss/_modal.scss index 0c4a68d0be..6b6770b32c 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -104,6 +104,7 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog + color: $modal-content-color; pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; diff --git a/scss/_toasts.scss b/scss/_toasts.scss index e77cdaec7d..b781892ee5 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -2,6 +2,7 @@ max-width: $toast-max-width; overflow: hidden; // cheap rounded corners on nested items font-size: $toast-font-size; // knock it down to 14px + color: $toast-color; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6aea5e9814..c916257e78 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -746,6 +746,7 @@ $dropdown-min-width: 10rem !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; +$dropdown-color: $body-color !default; $dropdown-bg: $white !default; $dropdown-border-color: rgba($black, .15) !default; $dropdown-border-radius: $border-radius !default; @@ -804,6 +805,7 @@ $pagination-disabled-border-color: $gray-300 !default; // Jumbotron $jumbotron-padding: 2rem !default; +$jumbotron-color: null !default; $jumbotron-bg: $gray-200 !default; @@ -817,6 +819,7 @@ $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; +$card-color: null !default; $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; @@ -886,6 +889,7 @@ $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; $toast-padding-y: .25rem !default; $toast-font-size: .875rem !default; +$toast-color: null !default; $toast-background-color: rgba($white, .85) !default; $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; @@ -924,6 +928,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; +$modal-content-color: null !default; $modal-content-bg: $white !default; $modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: $border-width !default; @@ -982,6 +987,7 @@ $progress-bar-transition: width .6s ease !default; // List group +$list-group-color: null !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; diff --git a/site/docs/4.2/getting-started/theming.md b/site/docs/4.2/getting-started/theming.md index 85c09e86e4..db3b12ffd4 100644 --- a/site/docs/4.2/getting-started/theming.md +++ b/site/docs/4.2/getting-started/theming.md @@ -75,7 +75,7 @@ With that setup in place, you can begin to modify any of the Sass variables and Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. -You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. +You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files.