feat: add SASS and CSS variables

lib/src/styles/_variables.scss

@@ -1,26 +1,74 @@
+/*
+ * Multiple-Select-Vanilla SASS variables
+ */
 $primary-color: #000 !default;
 
 $ms-item-border: 1px solid transparent !default;
 $ms-item-hover-border: 1px solid #d5d5d5 !default;
-$ms-icon-font-size: 16px !default;
 $ms-checkbox-hover-bg-color: #fafafa !default;
+$ms-choice-border: 1px solid #aaa !default;
+$ms-choice-bgcolor: #fff !default;
+$ms-choice-disabled-bgcolor: #f4f4f4 !default;
+$ms-choice-disabled-border: 1px solid #ddd !default;
+$ms-choice-border-radius: 4px !default;
+$ms-choice-color: #444 !default;
+$ms-choice-text-align: left !default;
+$ms-choice-line-height: 26px !default;
+$ms-drop-background: #fff !default;
+$ms-drop-color: #000 !default;
+$ms-drop-border: 1px solid #aaa !default;
+$ms-drop-bottom-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15) !default;
+$ms-drop-top-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15) !default;
+$ms-drop-border-radius: 4px !default;
+$ms-drop-hide-radio-padding: 0 !default;
+$ms-drop-hide-radio-hover-bgcolor: #f8f9fa !default;
+$ms-drop-hide-radio-label-margin-bottom: 0 !default;
+$ms-drop-hide-radio-label-padding: 5px 8px !default;
+$ms-drop-hide-radio-selected-color: #fff !default;
+$ms-drop-hide-radio-selected-bgcolor: #007bff !default;
+$ms-drop-input-margin-left: -1.25rem !default;
+$ms-drop-input-margin-top: 0.3rem !default;
+$ms-drop-optgroup-font-weight: bold !default;
+$ms-drop-list-item-level1-padding-left: 28px !default;
+$ms-drop-option-divider-padding: 0 !default;
+$ms-drop-option-divider-border-top: 1px solid #e9ecef !default;
+$ms-drop-margin-top: -1px !default;
+$ms-drop-padding: 0 !default;
+$ms-drop-list-item-padding: 0.25rem 8px !default;
+$ms-drop-list-item-disabled-filter: Alpha(Opacity = 35) !default;
+$ms-drop-list-item-disabled-opacity: 0.35 !default;
+$ms-drop-zindex: 1050 !default;
+$ms-label-margin-bottom: 0 !default;
+$ms-label-padding-left: 1.25rem !default;
 $ms-ok-button-bg-color: #fff !default;
 $ms-ok-button-bg-hover-color: #f9f9f9 !default;
 $ms-ok-button-border-color: #ccc !default;
 $ms-ok-button-border-radius: 0 0 4px 4px !default;
 $ms-ok-button-border-width: 1px 0 0 0 !default;
 $ms-ok-button-font-weight: 600 !default;
+$ms-ok-button-padding: 0 !default;
 $ms-ok-button-text-color: $primary-color !default;
 $ms-ok-button-text-hover-color: darken($primary-color, 5%) !default;
 $ms-ok-button-height: 26px !default;
 $ms-ok-button-width: 100% !default;
 $ms-ok-button-text-align: center !default;
-$ms-all-border-bottom: 1px solid #ddd !default;
-$ms-all-label-border: $ms-item-border !default;
-$ms-all-label-hover-border: 1px solid transparent !default;
-$ms-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default;
-$ms-all-label-padding: 4px !default;
-$ms-all-line-height: calc(#{$ms-icon-font-size} + 2px) !default;
-$ms-all-padding: 4px !default;
-$ms-all-text-color: darken($primary-color, 5%) !default;
-$ms-all-text-hover-color: transparent !default;
+$ms-placeholder-color: #999 !default;
+$ms-search-margin: 0 !default;
+$ms-search-min-height: 26px !default;
+$ms-search-padding: 4px !default;
+$ms-search-zindex: 10000 !default;
+$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-padding: 0 5px !default;
+$ms-select-all-border-bottom: 1px solid #ddd !default;
+$ms-select-all-label-border: $ms-item-border !default;
+$ms-select-all-label-hover-border: 1px solid transparent !default;
+$ms-select-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default;
+$ms-select-all-label-padding: 4px !default;
+$ms-select-all-label-span-padding-left: $ms-label-padding-left !default;
+$ms-select-all-line-height: 18px !default;
+$ms-select-all-padding: 4px !default;
+$ms-select-all-text-color: darken($primary-color, 5%) !default;
+$ms-select-all-text-hover-color: transparent !default;

lib/src/styles/multiple-select.scss

@@ -1,4 +1,4 @@
-/* sass variables */
+/* css/sass variables */
 @import './variables';
 
 /*!
@@ -27,26 +27,26 @@
 }
 
 .ms-choice {
+  cursor: pointer;
   display: block;
   width: 100%;
   height: 26px;
   padding: 0;
   overflow: hidden;
-  cursor: pointer;
-  border: 1px solid #aaa;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 26px;
-  color: #444;
+  background-color: var(--ms-choice-bgcolor, $ms-choice-bgcolor);
+  border: var(--ms-choice-border, $ms-choice-border);
+  border-radius: var(--ms-choice-border-radius, $ms-choice-border-radius);
+  line-height: var(--ms-choice-line-height, $ms-choice-line-height);
+  color: var(--ms-choice-color, $ms-choice-color);
+  text-align: var(--ms-choice-text-align, $ms-choice-text-align);
   text-decoration: none;
-  border-radius: 4px;
-  background-color: #fff;
   user-select: none;
+  white-space: nowrap;
 
   &.disabled {
-    background-color: #f4f4f4;
+    border: var(--ms-choice-disabled-border, $ms-choice-disabled-border);
+    background-color: var(--ms-choice-disabled-bgcolor, $ms-choice-disabled-bgcolor);
     background-image: none;
-    border: 1px solid #ddd;
     cursor: default;
   }
 
@@ -63,7 +63,7 @@
       padding-left: 8px;
 
       &.ms-placeholder {
-        color: #999;
+        color: var(--ms-placeholder-color, $ms-placeholder-color);
       }
     }
     div.icon-close {
@@ -110,59 +110,59 @@
   min-width: 100%;
   overflow: hidden;
   display: none;
-  margin-top: -1px;
-  padding: 0;
   position: absolute;
-  z-index: 1050;
-  background: #fff;
-  color: #000;
-  border: 1px solid #aaa;
-  border-radius: 4px;
+  background: var(--ms-drop-background, $ms-drop-background);
+  border: var(--ms-drop-border, $ms-drop-border);
+  border-radius: var(--ms-drop-border-radius, $ms-drop-border-radius);
+  color: var(--ms-drop-color, $ms-drop-color);
+  margin-top: var(--ms-drop-margin-top, $ms-drop-margin-top);
+  padding: var(--ms-drop-padding, $ms-drop-padding);
+  z-index: var(--ms-drop-zindex, $ms-drop-zindex);
 
   &.bottom {
     top: 100%;
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--ms-drop-bottom-box-shadow, $ms-drop-bottom-box-shadow);
   }
 
   &.top {
     bottom: 100%;
-    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--ms-drop-top-box-shadow, $ms-drop-top-box-shadow);
   }
 
   .ms-select-all {
-    border-bottom: var(--ms-all-border-bottom, $ms-all-border-bottom);
-    padding: var(--ms-all-padding, $ms-all-padding);
-    line-height: var(--ms-all-line-height, $ms-all-line-height);
+    border-bottom: var(--ms-select-all-border-bottom, $ms-select-all-border-bottom);
+    line-height: var(--ms-select-all-line-height, $ms-select-all-line-height);
+    padding: var(--ms-select-all-padding, $ms-select-all-padding);
     width: 100%;
     &:hover {
-      background-color: var(--ms-all-text-hover-color, $ms-all-text-hover-color);
+      background-color: var(--ms-select-all-text-hover-color, $ms-select-all-text-hover-color);
     }
 
     label {
       display: inline-block;
       font-weight: normal;
-      padding: var(--ms-all-label-padding, $ms-all-label-padding);
-      border: var(--ms-all-label-border, $ms-all-label-border);
-      color: var(--ms-all-text-color, $ms-all-text-color);
+      padding: var(--ms-select-all-label-padding, $ms-select-all-label-padding);
+      border: var(--ms-select-all-label-border, $ms-select-all-label-border);
+      color: var(--ms-select-all-text-color, $ms-select-all-text-color);
       width: 100%;
       &:hover {
         cursor: pointer;
-        border: var(--ms-all-label-hover-border, $ms-all-label-hover-border);
-        background-color: var(--ms-all-label-hover-bg-color, $ms-all-label-hover-bg-color);
+        border: var(--ms-select-all-label-hover-border, $ms-select-all-label-hover-border);
+        background-color: var(--ms-select-all-label-hover-bg-color, $ms-select-all-label-hover-bg-color);
       }
       input {
         margin-left: 0;
       }
       span {
-        padding-left: 1.25rem;
+        padding-left: var(--ms-select-all-label-span-padding-left, $ms-select-all-label-span-padding-left);
       }
     }
   }
 
   .ms-ok-button {
     cursor: pointer;
     display: block;
-    padding: 0;
+    padding: var(--ms-ok-button-padding, $ms-ok-button-padding);
     width: var(--ms-ok-button-width, $ms-ok-button-width);
     height: var(--ms-ok-button-height, $ms-ok-button-height);
     border-color: var(--ms-ok-button-border-color, $ms-ok-button-border-color);
@@ -181,25 +181,25 @@
 
 .ms-search {
   display: inline-block;
-  margin: 0;
-  min-height: 26px;
-  padding: 4px;
   position: relative;
   white-space: nowrap;
   width: 100%;
-  z-index: 10000;
+  margin: var(--ms-search-margin, $ms-search-margin);
+  min-height: var(--ms-search-min-height, $ms-search-min-height);
+  padding: var(--ms-search-padding, $ms-search-padding);
+  z-index: var(--ms-search-zindex, $ms-search-zindex);
 
   input {
-    width: 100%;
+    box-shadow: none;
+    font-family: sans-serif;
     height: auto !important;
-    min-height: 24px;
-    padding: 0 5px;
-    margin: 0;
     outline: 0;
-    font-family: sans-serif;
-    border: 1px solid #aaa;
-    border-radius: 5px;
-    box-shadow: none;
+    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);
+    padding: var(--ms-search-input-padding, $ms-search-input-padding);
+    margin: var(--ms-search-input-margin, $ms-search-input-margin);
   }
 
   box-sizing: border-box;
@@ -212,17 +212,17 @@
     padding: 0;
 
     > li {
-      list-style: none;
-      display: list-item;
       background-image: none;
+      display: list-item;
+      list-style: none;
       position: static;
-      padding: 0.25rem 8px;
+      padding: var(--ms-drop-list-item-padding, $ms-drop-list-item-padding);
 
       .disabled {
-        font-weight: normal !important;
-        opacity: 0.35;
-        filter: Alpha(Opacity = 35);
         cursor: default;
+        font-weight: normal !important;
+        opacity: var(--ms-drop-list-item-disabled-opacity, $ms-drop-list-item-disabled-opacity);
+        filter: var(--ms-drop-list-item-disabled-filter, $ms-drop-list-item-disabled-filter);
       }
 
       &.multiple {
@@ -243,35 +243,35 @@
       }
 
       label {
-        position: relative;
-        padding-left: 1.25rem;
-        margin-bottom: 0;
-        font-weight: normal;
+        cursor: pointer;
         display: block;
+        font-weight: normal;
+        position: relative;
         white-space: nowrap;
-        cursor: pointer;
+        margin-bottom: var(--ms-label-margin-bottom, $ms-label-margin-bottom);
+        padding-left: var(--ms-label-padding-left, $ms-label-padding-left);
 
         &.optgroup {
-          font-weight: bold;
+          font-weight: var(--ms-drop-optgroup-font-weight, $ms-drop-optgroup-font-weight);
         }
       }
 
       &.hide-radio {
-        padding: 0;
+        padding: var(--ms-drop-hide-radio-padding, $ms-drop-hide-radio-padding);
 
         &:focus,
         &:hover {
-          background-color: #f8f9fa;
+          background-color: var(--ms-drop-hide-radio-hover-bgcolor, $ms-drop-hide-radio-hover-bgcolor);
         }
 
         &.selected {
-          color: #fff;
-          background-color: #007bff;
+          color: var(--ms-drop-hide-radio-selected-color, $ms-drop-hide-radio-selected-color);
+          background-color: var(--ms-drop-hide-radio-selected-bgcolor, $ms-drop-hide-radio-selected-bgcolor);
         }
 
         label {
-          margin-bottom: 0;
-          padding: 5px 8px;
+          margin-bottom: var(--ms-drop-hide-radio-label-margin-bottom, $ms-drop-hide-radio-label-margin-bottom);
+          padding: var(--ms-drop-hide-radio-label-padding, $ms-drop-hide-radio-label-padding);
         }
 
         input {
@@ -281,13 +281,13 @@
 
       &.option-level-1 {
         label {
-          padding-left: 28px;
+          padding-left: var(--ms-drop-list-item-level1-padding-left, $ms-drop-list-item-level1-padding-left);
         }
       }
 
       &.option-divider {
-        padding: 0;
-        border-top: 1px solid #e9ecef;
+        padding: var(--ms-drop-option-divider-padding, $ms-drop-option-divider-padding);
+        border-top: var(--ms-drop-option-divider-border-top, $ms-drop-option-divider-border-top);
       }
     }
   }
@@ -296,8 +296,8 @@
     &[type='radio'],
     &[type='checkbox'] {
       position: absolute;
-      margin-top: 0.3rem;
-      margin-left: -1.25rem;
+      margin-left: var(--ms-drop-input-margin-left, $ms-drop-input-margin-left);
+      margin-top: var(--ms-drop-input-margin-top, $ms-drop-input-margin-top);
     }
   }
 

lib/src/styles/themes/_variables-theme-bootstrap.scss

@@ -0,0 +1,16 @@
+/*
+ * Multiple-Select-Vanilla SASS variables
+ */
+$ms-choice-border: 0 !default;
+$ms-parent-form-control-border-radius: 4px !default;
+$ms-parent-form-control-padding: 0 !default;
+$ms-drop-input-sm-margin-top: 0.4rem !default;
+$ms-drop-input-lg-margin-top: 0.5rem !default;
+$ms-drop-list-item-padding: 0.25rem 8px !default;
+$ms-drop-hide-radio-font-size: 87.5% !default;
+$ms-drop-hide-radio-margin-bottom: 0 !default;
+$ms-drop-hide-radio-color: #6c757d !default;
+$ms-drop-hide-radio-opacity: 1 !default;
+$ms-drop-hide-radio-option-level1-padding-left: 8px !default;
+$ms-dropdown-divider-group-border-top: 1px solid #e9ecef !default;
+$ms-dropdown-divider-first-group-border-top: none !default;