fix(card): Adding card css | JIRA: PT-101 (#56)

Author: LeThanhPhongLTV

src/assets/css/el-button.scss

@@ -6,14 +6,14 @@ body {
       @apply px-1.5;
     }
     &:hover {
-      transform: translateY(-1px);
+      @apply -translate-y-px;
     }
   }
   .el-button.el-button--large {
-    @apply h-13 rounded-lg #{!important};
+    @apply h-13 rounded-lg font-semibold text-sm tracking-wide #{!important};
   }
   .el-button.el-button--small {
-    @apply rounded max-w-fit #{!important};
+    @apply rounded max-w-fit text-xs tracking-tight #{!important};
   }
   .el-button.el-button--default.el-button--small {
     @apply rounded max-w-fit h-[25px] #{!important};
@@ -136,7 +136,10 @@ body {
   }
 
   .el-button.el-button--default {
-    @apply bg-btn-default border border-btn-default text-white font-semibold h-11;
+    @apply bg-btn-default border border-btn-default text-white font-semibold h-10.75 text-sm tracking-wide;
+    span {
+      @apply px-1.5 ;
+    }
     &:active {
       @apply bg-btn-default-active drop-shadow-none;
     }

src/assets/css/el-card.scss

@@ -1,5 +1,17 @@
 body {
   .el-card {
+    @apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-[5px] shadow-[0_0_2rem_0_rgba(136,152,170,0.15)] cursor-auto text-[#32325d] #{!important};
     --el-card-bg-color: white !important
   }
+  .el-card .card-header {
+    h3 {
+      @apply mb-0 cursor-auto text-[#32325d];
+    }
+  }
+  .el-card .el-card__header {
+    @apply w-full py-5.75 px-6.75 mb-0 border-b-[#0000000d] ;
+  }
+  .el-card .el-card__body {
+    @apply w-full py-6 px-6.75 grow shrink;
+  }
 }

src/layouts/default-layout.vue

@@ -65,7 +65,7 @@
       </div>
       <router-view v-slot="{ Component }">
         <div class="h-20.5 bg-primary-blue px-4 sm:px-7.5 md:px-[29px]">
-          <component :is="Component" class="pb-2.5" />
+          <component :is="Component" class="py-2.5 px-px lg:px-1.5" />
         </div>
       </router-view>
     </div>

src/modules/buttons/views/index.vue

@@ -1,31 +1,27 @@
 <template>
-  <div class="block mx-auto h-auto w-full lg:max-w-2/3 py-2.5 px-1.5">
-    <div
-      class="flex flex-wrap flex-col bg-white shadow-xl drop-shadow-sm shadow-slate-200/60 mb-7 mx-auto rounded-md"
-    >
-      <div class="p-5 pl-6 border-b border-primary-white">
-        <h3 class="cursor-auto">Styles</h3>
-      </div>
-      <div class="px-5 pl-6 py-6">
-        <div class="flex flex-wrap gap-3">
-          <div>
-            <el-button type="primary" class="">Primary</el-button>
-          </div>
-          <div>
-            <el-button type="primary" class="">
-              <el-icon :size="17" class="mr-2"> <Shop /> </el-icon>With icon</el-button
-            >
-          </div>
-          <div>
-            <el-button type="primary" class="">
-              <el-icon :size="17">
-                <Tools />
-              </el-icon>
-            </el-button>
-          </div>
+  <div class="w-full block mx-auto h-auto lg:max-w-2/3">
+    <el-card class="mb-7.5 border-white">
+      <template #header>
+        <h3 class="cursor-auto mb-0 text-[#32325d]">Styles</h3>
+      </template>
+      <div class="flex flex-wrap gap-3">
+        <div>
+          <el-button type="primary" class="">Button</el-button>
+        </div>
+        <div>
+          <el-button type="primary" class="">
+            <el-icon :size="17" class="mr-3"> <Shop /> </el-icon>With icon</el-button
+          >
+        </div>
+        <div>
+          <el-button type="primary" class="">
+            <el-icon :size="17">
+              <Tools />
+            </el-icon>
+          </el-button>
         </div>
       </div>
-    </div>
+    </el-card>
 
     <div
       class="flex flex-wrap flex-col bg-white shadow-xl shadow-slate-200/60 mb-7 mx-auto rounded-lg"
@@ -351,7 +347,7 @@
           <div>
             <el-button
               circle
-              class="px-1 py-4 h-9 bg-[#e4405f] border-[#e4405f] active:bg-[#e6536f] active:border-[#e6536f] text-white"
+              class="px-1.25 py-4 h-9 bg-[#e4405f] border-[#e4405f] active:bg-[#e6536f] active:border-[#e6536f] text-white"
             >
               <font-awesome-icon :icon="['fab', 'instagram']" />
             </el-button>
@@ -367,7 +363,7 @@
           <div>
             <el-button
               circle
-              class="px-1.25 py-4 h-9 bg-[#cd201f] border-[#cd201f] active:bg-[#de2928] active:border-[#de2928] text-white"
+              class="px-1 py-4 h-9 bg-[#cd201f] border-[#cd201f] active:bg-[#de2928] active:border-[#de2928] text-white"
             >
               <font-awesome-icon :icon="['fab', 'youtube']" />
             </el-button>