Merge pull request #37 from ltv/feat/PT-60

feat(button): Design layout && style for button | JIRA: PT-60

Author: dzunglee

src/assets/css/el-button.scss

@@ -1,8 +1,126 @@
 body {
   .el-button {
-    background-color: var(--el-button-bg-color, var(--el-color-white));
     &:hover {
       @apply -translate-y-0.25;
     }
   }
+  
+  .el-button.el-button--default.is-plain {
+    @apply bg-transparent text-btn-default border-btn-default;
+    &:hover {
+      @apply bg-btn-default text-white drop-shadow-lg;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--primary.is-plain {
+    @apply bg-transparent text-primary-blue border-primary-blue;
+    &:hover {
+      @apply bg-primary-blue text-white drop-shadow-lg;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--secondary.is-plain {
+    @apply bg-transparent text-secondary border-slate-50 shadow-none;
+    &:hover {
+      @apply bg-slate-50 text-black drop-shadow-lg border-slate-50;
+    }
+    &:active {
+      @apply drop-shadow-none bg-slate-50;
+    }
+  }
+
+  .el-button.el-button--success.is-plain {
+    @apply bg-transparent text-success border-success;
+    &:hover {
+      @apply bg-success text-white drop-shadow-lg border-success;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--warning.is-plain {
+    @apply bg-transparent text-warning border-warning;
+    &:hover {
+      @apply bg-warning text-white drop-shadow-lg border-warning;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--info.is-plain {
+    @apply bg-transparent text-info border-info;
+    &:hover {
+      @apply bg-info text-white drop-shadow-lg border-info;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--danger.is-plain {
+    @apply bg-transparent text-danger border-danger;
+    &:hover {
+      @apply bg-danger text-white drop-shadow-lg border-danger;
+    }
+    &:active {
+      @apply drop-shadow-none;
+    }
+  }
+
+  .el-button.el-button--primary {
+    @apply bg-primary-blue border border-primary-blue text-white;
+    &:active {
+      @apply bg-primary-blue-active;
+    }
+  }
+
+  .el-button.el-button--info {
+    @apply bg-info border border-info text-white;
+    &:active {
+      @apply bg-info-active;
+    }
+  }
+
+  .el-button.el-button--warning {
+    @apply bg-warning border border-warning text-white;
+    &:active {
+      @apply bg-warning-active;
+    }
+  }
+
+  .el-button.el-button--success {
+    @apply bg-success border border-success text-white;
+    &:active {
+      @apply bg-success-active;
+    }
+  }
+
+  .el-button.el-button--danger {
+    @apply bg-danger border border-danger text-white;
+    &:active {
+      @apply bg-danger-active;
+    }
+  }
+
+  .el-button.el-button--secondary {
+    @apply bg-slate-100 border border-slate-100 text-black shadow-md;
+    &:active {
+      @apply shadow-none border-slate-300 bg-slate-300;
+    }
+  }
+
+  .el-button.btn-default {
+    @apply bg-btn-default border border-btn-default text-white;
+    &:active {
+      @apply bg-btn-default-active;
+    }
+  }
 }

src/assets/css/typography.scss

@@ -40,9 +40,6 @@ body {
     .heading-title {
         @apply uppercase text-1.375 text-primary font-semibold tracking-wide
     }
-    .text-warning {
-        @apply text-warnning
-    }
     .lead {
         @apply text-xl font-light leading-1.7
     }

src/components/Navigation/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center mx-0 py-4 px-2.5 md:px-7 shadow-sm bg-indigo-500 h-20 border border-indigo-500 border-b-slate-50/10"
+    class="flex items-center mx-0 py-4 px-2.5 md:px-8 shadow-sm bg-primary-blue h-20 border border-primary-blue border-b-slate-50/10"
   >
     <div class="w-full items-center justify-between">
       <div class="w-full flex basis-auto items-center">

src/components/Sidebar/index.vue

@@ -44,7 +44,7 @@
           >
             <span
               v-if="route.name === item.name"
-              class="absolute flex inset-y-1 left-0 w-0.5 h-5/6 bg-indigo-500 rounded-tr-lg rounded-br-lg"
+              class="absolute flex inset-y-1 left-0 w-0.5 h-5/6 bg-primary-blue rounded-tr-lg rounded-br-lg"
               aria-hidden="true"
             ></span>
             <router-link

src/layouts/default-layout.vue

@@ -6,8 +6,8 @@
       :class="`${!isPin ? 'ml-14' : 'ml-64 cursor-pointer lg:cursor-default'}`"
     >
       <navigation />
-      <div class="w-full h-20 relative bg-indigo-500">
-        <div class="flex items-center py-5 mb-0 px-2.5 md:px-8 pt-6">
+      <div class="w-full h-17 relative bg-primary-blue">
+        <div class="flex items-center py-5 mb-0 px-2.5 md:px-8 pt-5">
           <div class="w-full flex flex-wrap flex-row">
             <div class="flex w-1/2">
               <div class="text-white text-xl font-semibold inline-block mb-0">
@@ -51,20 +51,20 @@
             <div class="w-1/2 text-right">
               <el-button
                 size="small"
-                class="w-11 h-7 shadow-lg font-semibold text-indigo-500 border-white hover:text-black hover:bg-white active:bg-slate-100"
+                class="w-11 h-7 shadow-lg text-primary-blue bg-white border-white hover:text-black hover:bg-white active:bg-slate-100"
                 >New</el-button
               >
               <el-button
                 size="small"
-                class="w-14 h-7 shadow-lg font-semibold text-indigo-500 border-white hover:text-black hover:bg-white active:bg-slate-100"
+                class="h-7 shadow-lg text-primary-blue bg-white border-white hover:text-black hover:bg-white active:bg-slate-100"
                 >Filters</el-button
               >
             </div>
           </div>
         </div>
       </div>
       <router-view v-slot="{ Component }">
-        <div class="h-17 bg-indigo-500 px-2.5">
+        <div class="h-19 bg-primary-blue px-2.5 sm:px-7.5 md:px-8">
           <component :is="Component" />
         </div>
       </router-view>