diff --git a/.storybook/preview.js b/.storybook/preview.js index c62c3ef00..e0c27a1ac 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,6 +3,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import VueI18n from 'vue-i18n'; import Vuelidate from 'vuelidate'; +import Multiselect from 'vue-multiselect'; import WootUiKit from '../app/javascript/dashboard/components'; import i18n from '../app/javascript/dashboard/i18n'; @@ -13,6 +14,7 @@ Vue.use(VueI18n); Vue.use(Vuelidate); Vue.use(WootUiKit); Vue.use(Vuex); +Vue.component('multiselect', Multiselect); const store = new Vuex.Store({}); const i18nConfig = new VueI18n({ diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index 1e4d9c733..51309625a 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -137,6 +137,7 @@ } .sidebar-labels-wrap { + &.has-edited, &:hover { .multiselect { @@ -162,6 +163,12 @@ .multiselect-wrap--small { $multiselect-height: 3.8rem; + .multiselect__tags, + .multiselect__input { + align-items: center; + display: flex; + } + .multiselect__tags, .multiselect__input, .multiselect { @@ -177,15 +184,24 @@ } .multiselect__single { + align-items: center; + display: flex; font-size: var(--font-size-small); - padding: var(--space-small) 0; + margin: 0; + padding: var(--space-smaller) var(--space-micro); } .multiselect__placeholder { - padding: var(--space-small) 0; + margin: 0; + padding: var(--space-smaller) var(--space-micro); } .multiselect__select { min-height: $multiselect-height; } + + .multiselect--disabled .multiselect__current, + .multiselect--disabled .multiselect__select { + background: transparent; + } } diff --git a/app/javascript/dashboard/assets/scss/storybook.scss b/app/javascript/dashboard/assets/scss/storybook.scss index f6a9d5eb3..2364c3d5b 100644 --- a/app/javascript/dashboard/assets/scss/storybook.scss +++ b/app/javascript/dashboard/assets/scss/storybook.scss @@ -8,6 +8,7 @@ @import 'variables'; @import '~spinkit/scss/spinners/7-three-bounce'; +@import '~vue-multiselect/dist/vue-multiselect.min.css'; @import '~shared/assets/stylesheets/ionicons'; @import 'mixins'; @@ -27,3 +28,5 @@ @import 'foundation-custom'; @import 'widgets/buttons'; @import 'widgets/forms'; + +@import 'plugins/multiselect';