fix: add SASS/CSS variable to remove drop outline (#228)

Author: ghiscoding

packages/multiple-select-vanilla/src/styles/_variables.scss

@@ -29,6 +29,7 @@ $ms-drop-hide-radio-selected-color: #fff !default;
 $ms-drop-hide-radio-selected-bgcolor: $primary-color !default;
 $ms-drop-input-margin-left: -1.25rem !default;
 $ms-drop-input-margin-top: 0.3rem !default;
+$ms-drop-outline: 0 !default;
 $ms-drop-optgroup-font-weight: bold !default;
 $ms-drop-list-margin: 0px !default;
 $ms-drop-list-padding: 0px !default;
@@ -48,7 +49,7 @@ $ms-infinite-empty-option-height: 20px !default;
 $ms-label-margin-bottom: 0 !default;
 $ms-label-min-height: 1.25rem !default;
 $ms-label-padding: 0 0 0 1.25rem !default;
-$ms-option-highlight: rgba($primary-color, 8%) !default;
+$ms-option-highlight-bg-color: rgba($primary-color, 8%) !default;
 $ms-ok-button-bg-color: #fff !default;
 $ms-ok-button-bg-hover-color: #f9f9f9 !default;
 $ms-ok-button-border-color: #ccc !default;
@@ -70,6 +71,7 @@ $ms-search-input-border: 1px solid #aaa !default;
 $ms-search-input-border-radius: 5px !default;
 $ms-search-input-min-height: 24px !default;
 $ms-search-input-margin: 0 !default;
+$ms-search-input-outline: 0 !default;
 $ms-search-input-padding: 0 5px !default;
 $ms-search-input-placeholder: #999 !default;
 $ms-select-all-border-bottom: 1px solid #ddd !default;

packages/multiple-select-vanilla/src/styles/multiple-select.scss

@@ -134,7 +134,7 @@
       background-color: var(--ms-select-all-text-hover-color, $ms-select-all-text-hover-color);
     }
     &.highlighted {
-      background-color: var(--ms-option-highlight, $ms-option-highlight);
+      background-color: var(--ms-option-highlight-bg-color, $ms-option-highlight-bg-color);
     }
 
     label {
@@ -192,11 +192,11 @@
     box-shadow: none;
     font-family: sans-serif;
     height: auto !important;
-    outline: 0;
     width: 100%;
     border: var(--ms-search-input-border, $ms-search-input-border);
     border-radius: var(--ms-search-input-border-radius, $ms-search-input-border-radius);
     min-height: var(--ms-search-input-min-height, $ms-search-input-min-height);
+    outline: var(--ms-search-input-outline, $ms-search-input-outline);
     padding: var(--ms-search-input-padding, $ms-search-input-padding);
     margin: var(--ms-search-input-margin, $ms-search-input-margin);
     &::placeholder {
@@ -228,6 +228,7 @@
 .ms-drop {
   ul {
     overflow: auto;
+    outline: var(--ms-drop-outline, $ms-drop-outline);
     margin: var(--ms-drop-list-margin, $ms-drop-list-margin);
     padding: var(--ms-drop-list-padding, $ms-drop-list-padding);
 
@@ -312,7 +313,7 @@
         border-top: var(--ms-drop-option-divider-border-top, $ms-drop-option-divider-border-top);
       }
       &.highlighted {
-        background-color: var(--ms-option-highlight, $ms-option-highlight);
+        background-color: var(--ms-option-highlight-bg-color, $ms-option-highlight-bg-color);
       }
     }
   }