style: export .vs__dropdown-option--selected

Author: howard-tzw

dev/index.css

@@ -9,9 +9,7 @@
   /* vs__dropdown-toggle */
   --vs-height: 36px;
   --vs-bg-color: #fff;
-
-  /* state */
-  --vs-state-no-drop-bg: #fff;
+  --vs-state-no-drop-bg: red;
   --vs-state-disabled-bg: rgb(248, 248, 248);
 
   /* .vs__dropdown-menu */
@@ -20,4 +18,5 @@
 
   /* dropdown option */
   --vs-dropdown-option--active-bg: black;
+  --vs-dropdown-option--selected-bg: gray;
 }

src/css/global/variables.css

@@ -68,6 +68,8 @@
   /* Option */
   --vs-dropdown-option--active-bg: #5897fb;
   --vs-dropdown-option--active-color: #fff;
+  --vs-dropdown-option--selected-bg: #5897fb;
+  --vs-dropdown-option--selected-color: #fff;
 
   /* Deselect State */
   --vs-dropdown-option--deselect-bg: #fb5858;

src/css/modules/dropdown-menu.css

@@ -49,6 +49,12 @@
   color: var(--vs-dropdown-option--active-color);
 }
 
+/* should be after .vs__dropdown-option--highlight to cover */
+.vs__dropdown-option--selected {
+  background: var(--vs-dropdown-option--selected-bg);
+  color: var(--vs-dropdown-option--selected-color);
+}
+
 .vs__dropdown-option--deselect {
   background: var(--vs-dropdown-option--deselect-bg);
   color: var(--vs-dropdown-option--deselect-color);