From 59d040fcbb2766240c6fc38b330f495b840ce75d Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 20 Jan 2019 22:38:29 +0100
Subject: [PATCH] Make component colors configurable (#28035)
---
scss/_card.scss | 1 +
scss/_dropdown.scss | 2 +-
scss/_jumbotron.scss | 1 +
scss/_list-group.scss | 1 +
scss/_modal.scss | 1 +
scss/_toasts.scss | 1 +
scss/_variables.scss | 6 ++++++
site/docs/4.2/getting-started/theming.md | 2 +-
8 files changed, 13 insertions(+), 2 deletions(-)
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.
--
GitLab