From 129bfd7034623adf9a173d630f2bb95d8d222429 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 20 Oct 2021 09:31:37 -0700
Subject: [PATCH] feat: add $vs-component-bg to sass variables (#1528)

#1490
---
 src/scss/global/_variables.scss        |  9 +++---
 src/scss/modules/_dropdown-toggle.scss | 42 +++++++++++++-------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index b4772fb..eb63f8a 100644
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -1,11 +1,12 @@
 $vs-colors: (
-        lightest: rgba(60, 60, 60, 0.26),
-        light: rgba(60, 60, 60, 0.5),
-        dark: #333,
-        darkest: rgba(0, 0, 0, .15),
+    lightest: rgba(60, 60, 60, 0.26),
+    light: rgba(60, 60, 60, 0.5),
+    dark: #333,
+    darkest: rgba(0, 0, 0, 0.15),
 ) !default;
 
 //  Global Component Variables
+$vs-component-bg: none !default;
 $vs-component-line-height: 1.4 !default;
 $vs-component-placeholder-color: inherit !default;
 
diff --git a/src/scss/modules/_dropdown-toggle.scss b/src/scss/modules/_dropdown-toggle.scss
index 5d5ddeb..87161fa 100644
--- a/src/scss/modules/_dropdown-toggle.scss
+++ b/src/scss/modules/_dropdown-toggle.scss
@@ -16,39 +16,39 @@ $border-color: $vs-border-color;
 $border-radius: $vs-border-radius;
 
 .vs__dropdown-toggle {
-  appearance: none;
-  display: flex;
-  padding: 0 0 4px 0;
-  background: none;
-  border: $border-width $border-style $border-color;
-  border-radius: $border-radius;
-  white-space: normal;
+    appearance: none;
+    display: flex;
+    padding: 0 0 4px 0;
+    background: $vs-component-bg;
+    border: $border-width $border-style $border-color;
+    border-radius: $border-radius;
+    white-space: normal;
 }
 
 .vs__selected-options {
-  display: flex;
-  flex-basis: 100%;
-  flex-grow: 1;
-  flex-wrap: wrap;
-  padding: 0 2px;
-  position: relative;
+    display: flex;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    padding: 0 2px;
+    position: relative;
 }
 
 .vs__actions {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px 0 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px 6px 0 3px;
 }
 
 /* Dropdown Toggle States */
 .vs--searchable .vs__dropdown-toggle {
-  cursor: text;
+    cursor: text;
 }
 .vs--unsearchable .vs__dropdown-toggle {
-  cursor: pointer;
+    cursor: pointer;
 }
 .vs--open .vs__dropdown-toggle {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+    border-bottom-color: transparent;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }