From fc3ade50db98f032e350119dc413a5e9082c390e Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 14:50:28 +0700
Subject: [PATCH] :art: styles: product carousel responsive

:%s
---
 .../ButtonCommon/ButtonCommon.module.scss     |  5 +-
 .../ProductCard/ProductCard.module.scss       | 49 ++++++++++++-------
 .../ProductCarousel/ProductCarousel.tsx       |  9 ++--
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 41ecee010..1c188af4b 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -94,7 +94,10 @@
 
   &.onlyIcon {
     .inner {
-      padding: 1.6rem;
+      padding: 1rem;
+      @screen md {
+        padding: 1.6rem;
+      }
       .icon {
         margin: 0;
       }
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index cffbe063b..2e62cc4d5 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -1,5 +1,5 @@
-.productCardWarpper{
-    max-width: 20.8rem;
+.productCardWarpper {
+    max-width: 22.4rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin: auto;
@@ -8,47 +8,47 @@
     &.notSell {
         @apply justify-center;
     }
-    .cardTop{
+    .cardTop {
         @apply relative;
         height: 13.8rem;
         width: 100%;
-        .productImage{
+        .productImage {
             height: 100%;
             width: 100%;
             @apply flex justify-center items-center;
-            img{
+            img {
                 @apply inline;
             }
-            &:hover{
+            &:hover {
                 cursor: pointer;
             }
         }
-        .productLabel{
+        .productLabel {
             @apply absolute left-0 bottom-0;
         }
     }
-    .cardMid{
+    .cardMid {
         min-height: 10.4rem;
         @apply flex flex-col justify-between;
-        .cardMidTop{
-            .productname{
+        .cardMidTop {
+            .productname {
                 font-weight: bold;
                 color: var(--text-active);
-                &:hover{
+                &:hover {
                     cursor: pointer;
                 }
             }
-            .productWeight{
+            .productWeight {
                 font-size: 1.2rem;
                 line-height: 2rem;
                 letter-spacing: 0.01em;
                 color: var(--text-base);
             }
         }
-        .cardMidBot{
+        .cardMidBot {
             padding-top: 0.8rem;
             @apply flex justify-between items-center border-t border-solid border-line;
-            .productPrice{
+            .productPrice {
                 @apply font-bold;
                 font-size: 2rem;
                 line-height: 2.8rem;
@@ -56,11 +56,24 @@
             }
         }
     }
-    .cardBot{
+    .cardBot {
         min-height: 4rem;
-        @apply flex justify-between items-center; 
-        .cardIcon{
+        @apply flex justify-between items-center;
+        .cardIcon {
             margin-right: 0.8rem;
         }
+        .cardButton {
+            button {
+                > div {
+                    span {
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical;
+                        overflow-y: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
index 533e81ed3..381fc2992 100644
--- a/src/components/common/ProductCarousel/ProductCarousel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@@ -19,11 +19,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 4,
+      slidesPerView: 3,
     },
-    '(min-width: 1024px)': {
-      slidesPerView: 4.5,
-    },'(min-width: 1280px)': {
+    '(min-width: 1008px)': {
+      slidesPerView: 3.5,
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },
   },