crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: product carousel responsive

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-13 14:50:28 +07:00
parent 4512e8cf24
commit fc3ade50db
3 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@@ -94,7 +94,10 @@
&.onlyIcon { &.onlyIcon {
.inner { .inner {
padding: 1.6rem; padding: 1rem;
@screen md {
padding: 1.6rem;
}
.icon { .icon {
margin: 0; margin: 0;
} }

49
src/components/common/ProductCard/ProductCard.module.scss
View File

@@ -1,5 +1,5 @@
.productCardWarpper{ .productCardWarpper {
max-width: 20.8rem; max-width: 22.4rem;
min-height: 31.8rem; min-height: 31.8rem;
padding: 1.2rem 1.2rem 0 1.2rem; padding: 1.2rem 1.2rem 0 1.2rem;
margin: auto; margin: auto;
@@ -8,47 +8,47 @@
&.notSell { &.notSell {
@apply justify-center; @apply justify-center;
} }
.cardTop{ .cardTop {
@apply relative; @apply relative;
height: 13.8rem; height: 13.8rem;
width: 100%; width: 100%;
.productImage{ .productImage {
height: 100%; height: 100%;
width: 100%; width: 100%;
@apply flex justify-center items-center; @apply flex justify-center items-center;
img{ img {
@apply inline; @apply inline;
} }
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.productLabel{ .productLabel {
@apply absolute left-0 bottom-0; @apply absolute left-0 bottom-0;
} }
} }
.cardMid{ .cardMid {
min-height: 10.4rem; min-height: 10.4rem;
@apply flex flex-col justify-between; @apply flex flex-col justify-between;
.cardMidTop{ .cardMidTop {
.productname{ .productname {
font-weight: bold; font-weight: bold;
color: var(--text-active); color: var(--text-active);
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.productWeight{ .productWeight {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 2rem; line-height: 2rem;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: var(--text-base); color: var(--text-base);
} }
} }
.cardMidBot{ .cardMidBot {
padding-top: 0.8rem; padding-top: 0.8rem;
@apply flex justify-between items-center border-t border-solid border-line; @apply flex justify-between items-center border-t border-solid border-line;
.productPrice{ .productPrice {
@apply font-bold; @apply font-bold;
font-size: 2rem; font-size: 2rem;
line-height: 2.8rem; line-height: 2.8rem;
@@ -56,11 +56,24 @@
} }
} }
} }
.cardBot{ .cardBot {
min-height: 4rem; min-height: 4rem;
@apply flex justify-between items-center; @apply flex justify-between items-center;
.cardIcon{ .cardIcon {
margin-right: 0.8rem; 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;
}
}
}
}
} }
} }

9
src/components/common/ProductCarousel/ProductCarousel.tsx
View File

@@ -19,11 +19,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 3, slidesPerView: 3,
}, },
'(min-width: 768px)': { '(min-width: 768px)': {
slidesPerView: 4, slidesPerView: 3,
}, },
'(min-width: 1024px)': { '(min-width: 1008px)': {
slidesPerView: 4.5, slidesPerView: 3.5,
},'(min-width: 1280px)': { },
'(min-width: 1440px)': {
slidesPerView: 5.5, slidesPerView: 5.5,
}, },
}, },