fix(toast): remove container padding to avoid ghost element

lecoueyl · Feb 21, 2021 · 8a2b822 · 8a2b822
1 parent 9887b32
commit 8a2b822
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed p-4 z-40 w-full sm:w-96"
+    class="fixed z-40 w-full sm:w-96"
     :class="{
       // align
       'left-0': align === 'left',
@@ -19,23 +19,34 @@
       leave-class="transform translate-y-0 opacity-100"
       leave-to-class="transform translate-y-2 opacity-0"
       move-class="ease-in-out duration-200"
-      class="space-y-3"
     >
       <li
         v-for="event in events"
         :key="event.id"
-        class="rounded px-4 py-3 cursor-pointer w-full"
-        :class="{
-          // type
-          'bg-white dark:bg-gray-900 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700':
-            !event.type || (event.type && !['success', 'error', 'warn'].includes(event.type)),
-          'bg-success-500 text-success-50': event.type && event.type === 'success',
-          'bg-danger-500 text-danger-50': event.type && event.type === 'error',
-          'bg-warning-500 text-warning-50': event.type && event.type === 'warn',
-        }"
-        @click="remove(event)"
+        :class="[
+          'px-4',
+          {
+            'pb-2': position === 'bottom',
+            'pt-2': position === 'top',
+          }
+        ]"
       >
-        {{ event.content }}
+        <div
+          :class="[
+            'rounded px-4 py-3 cursor-pointer w-full',
+            {
+              // type
+              'bg-white dark:bg-gray-900 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700':
+                !event.type || (event.type && !['success', 'error', 'warn'].includes(event.type)),
+              'bg-success-500 text-success-50': event.type && event.type === 'success',
+              'bg-danger-500 text-danger-50': event.type && event.type === 'error',
+              'bg-warning-500 text-warning-50': event.type && event.type === 'warn',
+            }
+          ]"
+          @click="remove(event)"
+        >
+          {{ event.content }}
+        </div>
       </li>
     </transition-group>
   </div>