Merge pull request #511 from chakflying/fix-multiselect-css

Chore: Move multiselect css to its own file

src/assets/app.scss

@@ -1,4 +1,5 @@
 @import "vars.scss";
+@import "multiselect.scss";
 @import "node_modules/bootstrap/scss/bootstrap";
 
 #app {
@@ -233,30 +234,6 @@ h2 {
         color: $dark-font-color;
     }
 
-    // Multiselect
-    .multiselect__tags {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
-
-    .multiselect__input, .multiselect__single {
-        background-color: $dark-bg2;
-        color: $dark-font-color;
-    }
-
-    .multiselect__content-wrapper {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
-
-    .multiselect--above .multiselect__content-wrapper {
-        border-color: $dark-border-color;
-    }
-
-    .multiselect__option--selected {
-        background-color: $dark-bg;
-    }
-
     .monitor-list {
         .item {
             &:hover {

src/assets/multiselect.scss

@@ -0,0 +1,73 @@
+@import "vars.scss";
+@import "node_modules/vue-multiselect/dist/vue-multiselect";
+
+.multiselect__tags {
+    border-radius: 1.5rem;
+    border: 1px solid #ced4da;
+    min-height: 38px;
+    padding: 6px 40px 0 8px;
+}
+
+.multiselect--active .multiselect__tags {
+    border-radius: 1rem;
+}
+
+.multiselect__option--highlight {
+    background: $primary !important;
+}
+
+.multiselect__option--highlight::after {
+    background: $primary !important;
+}
+
+.multiselect__tag {
+    border-radius: 50rem;
+    margin-bottom: 0;
+    padding: 6px 26px 6px 10px;
+    background: $primary !important;
+}
+
+.multiselect__placeholder {
+    font-size: 1rem;
+    padding-left: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    opacity: 0.67;
+}
+
+.multiselect__input,
+.multiselect__single {
+    line-height: 14px;
+    margin-bottom: 0;
+}
+
+.dark {
+    .multiselect__tag {
+        color: $dark-font-color2;
+    }
+
+    .multiselect__tags {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+
+    .multiselect__content-wrapper {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__option--selected {
+        background-color: $dark-bg;
+    }
+}

src/pages/EditMonitor.vue

@@ -383,58 +383,6 @@ export default {
 }
 </script>
 
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
-
-<style lang="scss">
-    @import "../assets/vars.scss";
-
-    .multiselect__tags {
-        border-radius: 1.5rem;
-        border: 1px solid #ced4da;
-        min-height: 38px;
-        padding: 6px 40px 0 8px;
-    }
-
-    .multiselect--active .multiselect__tags {
-        border-radius: 1rem;
-    }
-
-    .multiselect__option--highlight {
-        background: $primary !important;
-    }
-
-    .multiselect__option--highlight::after {
-        background: $primary !important;
-    }
-
-    .multiselect__tag {
-        border-radius: 50rem;
-        margin-bottom: 0;
-        padding: 6px 26px 6px 10px;
-        background: $primary !important;
-    }
-
-    .multiselect__placeholder {
-        font-size: 1rem;
-        padding-left: 6px;
-        padding-top: 0;
-        padding-bottom: 0;
-        margin-bottom: 0;
-        opacity: 0.67;
-    }
-
-    .multiselect__input, .multiselect__single {
-        line-height: 14px;
-        margin-bottom: 0;
-    }
-
-    .dark {
-        .multiselect__tag {
-            color: $dark-font-color2;
-        }
-    }
-</style>
-
 <style scoped>
     .shadow-box {
         padding: 20px;