feat: adding new classes to change select background

solfacil · Nov 16, 2022 · d04575a · d04575a
1 parent 7cf7286
commit d04575a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 10 deletions.
diff --git a/src/assets/scss/_multiselect.scss b/src/assets/scss/_multiselect.scss
@@ -16,25 +16,25 @@
   }
 
   .select-main {
-    @apply bg-white flex p-2 items-center border border-gray3 duration-200 ease-linear transition-all min-h-8 rounded;
+    @apply flex p-2 items-center border border-gray3 duration-200 ease-linear transition-all min-h-8 rounded;
 
     .selected-wrapper {
       @apply flex flex-wrap gap-2;
     }
 
-    &:hover {
-      @apply bg-gray1;
-    }
-
     & > span {
       @apply text-small overflow-hidden whitespace-no-wrap;
       text-overflow: ellipsis;
       max-width: calc(100% - 32px);
 
-      &.placeholder {
+      &.default-placeholder {
         @apply text-gray4;
       }
 
+      &.white-placeholder {
+        @apply text-white font-normal text-small;
+      }
+
       &.is-icon {
         max-width: calc(100% - 72px);
       }
@@ -46,19 +46,40 @@
     }
 
     svg {
-      @apply stroke-current text-grayPrimary w-6 h-6 ml-auto;
+      @apply w-6 h-6 ml-auto;
       min-width: 24px;
       transition: all 200ms;
       transition-timing-function: linear;
 
-      &.flip-arrow {
+      &.flip-default-arrow {
         @apply text-rebrandingPrimary;
         transform: rotate(180deg);
 
         path {
           stroke: #008859;
         }
       }
+
+      &.flip-white-arrow {
+        @apply text-white;
+        transform: rotate(180deg);
+
+        path {
+          stroke: white;
+        }
+      }
+    }
+
+    .svg-white-color {
+      path {
+        stroke: white;
+      }
+    }
+
+    .svg-gray-color {
+      path {
+        stroke: gray;
+      }
     }
 
     &.error-input {
@@ -74,6 +95,20 @@
     }
   }
 
+  .bg-green-select-main {
+    @apply bg-rebrandingPrimary;
+    &:hover {
+      @apply bg-rebrandingPrimary;
+    }
+  }
+
+  .bg-white-select-main {
+    @apply bg-white;
+    &:hover {
+      @apply bg-gray1;
+    }
+  }
+
   .options-container {
     @apply p-3 absolute w-full left-0 bg-white border border-gray3 z-50 shadow-sm rounded;
     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);

diff --git a/src/components/Multiselect/Multiselect.vue b/src/components/Multiselect/Multiselect.vue
@@ -16,6 +16,8 @@
         'bg-gray1 rounded-t': showOptions,
         'error-input': invalid,
         disabled,
+        'bg-green-select-main': hasGreenBackground && hideChips,
+        'bg-white-select-main': !(hasGreenBackground && hideChips),
       }"
       @click="toggleSelect"
     >
@@ -25,7 +27,7 @@
       </span>
       <span
         v-if="(placeholder && selected.length === 0) || hideChips"
-        class="placeholder"
+        :class="changePlaceholder"
       >
         {{ placeholder }}
       </span>
@@ -45,7 +47,12 @@
         height="24"
         viewBox="0 0 24 24"
         fill="none"
-        :class="{ 'flip-arrow': showOptions && !disabled }"
+        :class="{
+          'flip-default-arrow': showOptions && !disabled && !hasGreenBackground,
+          'flip-white-arrow': showOptions && hasGreenBackground && hideChips,
+          'svg-white-color': hasGreenBackground && hideChips,
+          'svg-gray-color': !(hasGreenBackground && hideChips),
+        }"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -203,6 +210,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hasGreenBackground: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: () => ({
@@ -211,6 +222,17 @@ export default {
     selected: [],
   }),
 
+  computed: {
+    changePlaceholder() {
+      if (this.hideChips) {
+        return this.hasGreenBackground
+          ? 'white-placeholder'
+          : 'default-placeholder';
+      }
+      return '';
+    },
+  },
+
   watch: {
     options() {
       const action = [