v4: hardcoded white values (#fff) in both _cards.scss and mixins/background_variants.scss
Created by: bassjobsen
suggested solution:
in _variables.scss
:
$body-bg: #fff !default;
$body-color: $gray-dark !default;
$body-color-inverse: $gray-lightest !default;
then in _cards.scss
:
// // Inverse text within a card for use with dark backgrounds //
.card-inverse {
.card-header,
.card-footer {
border-bottom: .075rem solid rgba($body-color-inverse,.2);
}
.card-header,
.card-footer,
.card-title,
.card-blockquote {
color: #fff;
}
.card-link,
.card-text,
.card-blockquote > footer {
color: rgba($body-color-inverse,.65);
}
.card-link {
@include hover-focus {
color: $body-color-inverse;
}
}
}
and in mixins/background-variants.scss
:
// Contextual backgrounds
// [converter] $parent hack
@mixin bg-variant($parent, $color) {
#{$parent} {
color:$body-color-inverse;
background-color: $color;
}
a#{$parent} {
@include hover-focus {
background-color: darken($color, 10%);
}
}
}