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 {
}
-
-
-
-