From b531bda07cbea2e124194aefe3b8597b3ac2578e Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 14 Apr 2020 17:28:20 +0300
Subject: Improve gradients

- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
---
 scss/mixins/_background-variant.scss |  7 -------
 scss/mixins/_forms.scss              |  2 +-
 scss/mixins/_gradients.scss          | 12 ++++--------
 3 files changed, 5 insertions(+), 16 deletions(-)
 delete mode 100644 scss/mixins/_background-variant.scss

(limited to 'scss/mixins')

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
deleted file mode 100644
index 8a5bca4a90..0000000000
--- a/scss/mixins/_background-variant.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@mixin bg-gradient-variant($parent, $color) {
-  #{$parent} {
-    background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
-  }
-}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 5166583714..99ca559846 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -97,7 +97,7 @@
       border-color: $color;
 
       &:checked {
-        @include gradient-bg(lighten($color, 10%), escape-svg($form-check-input-checked-bg-image));
+        background-color: $color;
       }
 
       &:focus {
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index cecabc9139..8b87c0f15e 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,14 +1,10 @@
 // Gradients
 
-@mixin gradient-bg($color, $foreground: null) {
+@mixin gradient-bg($color: null) {
+  background-color: $color;
+
   @if $enable-gradients {
-    @if $foreground {
-      background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
-    } @else {
-      background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
-    }
-  } @else {
-    background-color: $color;
+    background-image: var(--bs-gradient);
   }
 }
 
-- 
cgit v1.2.3