🎨 styles: product info responsive

:%s
This commit is contained in:
lytrankieio123 2021-08-30 18:22:03 +07:00
parent 887c3ae2e3
commit f6504be74f
5 changed files with 81 additions and 13 deletions

View File

@ -0,0 +1,9 @@
@import '../../../../styles/utilities';
.productInfoDetail {
@apply spacing-horizontal;
margin: 0 auto 4rem;
@screen md {
@apply flex;
}
}

View File

@ -1,4 +1,11 @@
.productImgs { .productImgs {
@apply w-full;
@screen sm-only {
margin-bottom: 2rem;
}
@screen lg {
max-width: 60rem;
}
.img { .img {
@apply w-full h-full; @apply w-full h-full;
object-fit: cover; object-fit: cover;

View File

@ -1,6 +1,13 @@
@import "../../../../../../styles/utilities"; @import "../../../../../../styles/utilities";
.productInfo { .productInfo {
@screen md {
max-width: 39rem;
margin-left: 4.8rem;
}
@screen lg {
margin-left: 11.2rem;
}
.info { .info {
margin-bottom: 3.2rem; margin-bottom: 3.2rem;
.heading { .heading {
@ -25,12 +32,46 @@
margin-top: 0.8rem; margin-top: 0.8rem;
} }
} }
.actions {
@screen sm-only {
@apply fixed flex justify-between items-center bg-white w-full;
z-index: 10000;
bottom: 0;
left: 0;
padding: 2rem;
}
}
.bottom { .bottom {
@screen sm-only {
@apply flex justify-between items-center flex-row-reverse;
margin-left: 1rem;
flex: 1;
button {
&:first-child {
min-width: 13rem;
}
&:nth-child(n + 1) {
margin-left: 0.8rem;
}
}
}
.buttonWithIcon {
@apply flex items-center;
.label {
@apply hidden;
@screen md {
@apply inline-block;
margin-left: 0.8rem;
}
}
}
button {
@apply w-full;
}
@screen md { @screen md {
margin-top: 2.4rem; margin-top: 2.4rem;
max-width: 39rem;
button { button {
@apply w-full;
&:first-child { &:first-child {
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }

View File

@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
import { IconBuy } from 'src/components/icons'
import { LANGUAGE } from 'src/utils/language.utils' import { LANGUAGE } from 'src/utils/language.utils'
import s from './ProductInfo.module.scss' import s from './ProductInfo.module.scss'
@ -25,10 +26,17 @@ const ProductInfo = ({ }: Props) => {
In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
</div> </div>
</div> </div>
<QuanittyInput /> <div className={s.actions}>
<div className={s.bottom}> <QuanittyInput />
<ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon> <div className={s.bottom}>
<ButtonCommon size='large' type='light'>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</ButtonCommon> <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
<ButtonCommon size='large' type='light'>
<span className={s.buttonWithIcon}>
<IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
</span>
</ButtonCommon>
</div>
</div> </div>
</section > </section >
) )

View File

@ -49,7 +49,7 @@ module.exports = {
'background': 'var(--background)', 'background': 'var(--background)',
'white': 'var(--white)', 'white': 'var(--white)',
'background-arrow':'var(--background-arrow)', 'background-arrow': 'var(--background-arrow)',
'disabled': 'var(--text-disabled)', 'disabled': 'var(--text-disabled)',
@ -58,7 +58,7 @@ module.exports = {
white: 'var(--white)', white: 'var(--white)',
gray: 'var(--gray)', gray: 'var(--gray)',
disabled: 'var(--text-disabled)', disabled: 'var(--text-disabled)',
'background-arrow':'var(--background-arrow)', 'background-arrow': 'var(--background-arrow)',
// @deprecated (NOT use these variables) // @deprecated (NOT use these variables)
'primary-2': 'var(--primary-2)', 'primary-2': 'var(--primary-2)',
@ -109,12 +109,15 @@ module.exports = {
rounded: '.8rem', rounded: '.8rem',
}, },
screens: { screens: {
'sm-only': {'min': '0', 'max': '767px'},
'sm': '640px', 'sm': '640px',
// => @media (min-width: 640px) { ... } // => @media (min-width: 640px) { ... }
'md-only': {'min': '768px', 'max': '1023px'},
'md': '768px', 'md': '768px',
// => @media (min-width: 768px) { ... } // => @media (min-width: 768px) { ... }
'lg-only': {'min': '1024px', 'max': '1279px'},
'lg': '1024px', 'lg': '1024px',
// => @media (min-width: 1024px) { ... } // => @media (min-width: 1024px) { ... }
@ -124,8 +127,8 @@ module.exports = {
'2xl': '1536px', '2xl': '1536px',
// => @media (min-width: 1536px) { ... } // => @media (min-width: 1536px) { ... }
}, },
caroucel:{ caroucel: {
"arrow-height":"64px" "arrow-height": "64px"
}, },
}, },
}, },