From ba4a4aaf1c5a0562dd022141a8738dad84540f3b Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 30 Sep 2021 00:08:37 +0800
Subject: [PATCH] Chore: Move multiselect css to own file

---
 src/assets/app.scss         | 25 +------------
 src/assets/multiselect.scss | 73 +++++++++++++++++++++++++++++++++++++
 src/pages/EditMonitor.vue   | 52 --------------------------
 3 files changed, 74 insertions(+), 76 deletions(-)
 create mode 100644 src/assets/multiselect.scss

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 8e96a4a5e..f4707df95 100644
--- a/src/assets/app.scss
+++ b/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 {
diff --git a/src/assets/multiselect.scss b/src/assets/multiselect.scss
new file mode 100644
index 000000000..300230769
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 84231b1ae..a56147011 100644
--- a/src/pages/EditMonitor.vue
+++ b/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;