From 747e0ddf5b35e6b9fd8e2e1985c24856f356f329 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Wed, 7 Apr 2021 01:22:03 +0200
Subject: [PATCH] fix custom-select arrows in dark-mode

---
 build/scss/_bootstrap-variables.scss | 13 ++++++++++++-
 build/scss/_forms.scss               |  8 ++++++++
 build/scss/_variables.scss           |  7 +++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/build/scss/_bootstrap-variables.scss b/build/scss/_bootstrap-variables.scss
index b7473a9d6..6dc3c7e1c 100644
--- a/build/scss/_bootstrap-variables.scss
+++ b/build/scss/_bootstrap-variables.scss
@@ -112,6 +112,16 @@ $enable-responsive-font-sizes:                false !default;
 $enable-validation-icons:                     true !default;
 $enable-deprecation-messages:                 true !default;
 
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -491,7 +501,8 @@ $custom-select-bg:                  $white !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
diff --git a/build/scss/_forms.scss b/build/scss/_forms.scss
index 93dfb595b..aa4377e40 100644
--- a/build/scss/_forms.scss
+++ b/build/scss/_forms.scss
@@ -379,6 +379,14 @@ body.text-sm {
     border-color: $gray-600;
   }
 
+  .custom-select {
+    background: $dark $custom-select-dark-background;
+
+    &[multiple]{
+      background: $dark;
+    }
+  }
+
   .input-group-text {
     border-color: $gray-600;
   }
diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss
index 7ba4c7084..4bf8e20a7 100644
--- a/build/scss/_variables.scss
+++ b/build/scss/_variables.scss
@@ -233,3 +233,10 @@ $ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
 $ribbon-xl-top: 47px !default;
 $ribbon-xl-right: 4px !default;
+
+// CUSTOM FORM SELECT
+// --------------------------------------------------------
+
+$custom-select-dark-indicator-color:     $white !default;
+$custom-select-dark-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-dark-background:          escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)