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