fix(Select): fix shadow styles

gitsindonesia · May 23, 2023 · 3c066e8 · 3c066e8
1 parent 4260db5
commit 3c066e8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/packages/select/src/VSelect.vue b/packages/select/src/VSelect.vue
@@ -123,7 +123,7 @@ const props = defineProps({
   },
   shadowClass: {
     type: String,
-    default: 'shadow-sm',
+    default: 'v-select--shadow',
   },
   transition: {
     type: String,
@@ -276,6 +276,7 @@ const emitSelected = (val: any) => {
       {
         'v-select--error': error || !!errorMessages[0] || !!errorMessage,
         'v-select--disabled': disabled,
+        [shadowClass]: shadow,
       },
       wrapperClass,
     ]"
@@ -287,12 +288,7 @@ const emitSelected = (val: any) => {
       <div class="v-select-panel">
         <ListboxButton
           class="v-select-button"
-          :class="[
-            btnClass,
-            {
-              [shadowClass]: shadow,
-            },
-          ]"
+          :class="[btnClass]"
           :disabled="disabled"
         >
           <div

diff --git a/packages/themes/src/morpheme/_select.scss b/packages/themes/src/morpheme/_select.scss
@@ -55,6 +55,14 @@
 }
 
 .v-select {
+  $c: &;
+
+  &--shadow {
+    #{$c}-button {
+      box-shadow: var(--effect-shadow-md);
+    }
+  }
+
   &-button {
     border: 1px solid var(--v-select-border-color);
     border-radius: var(--v-select-border-radius);