mirror of
https://github.com/vercel/commerce.git
synced 2025-07-10 06:41:20 +00:00
🎨 styles: product info responsive
:%s
This commit is contained in:
parent
887c3ae2e3
commit
f6504be74f
@ -0,0 +1,9 @@
|
|||||||
|
@import '../../../../styles/utilities';
|
||||||
|
|
||||||
|
.productInfoDetail {
|
||||||
|
@apply spacing-horizontal;
|
||||||
|
margin: 0 auto 4rem;
|
||||||
|
@screen md {
|
||||||
|
@apply flex;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 >
|
||||||
)
|
)
|
||||||
|
@ -49,17 +49,17 @@ 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)',
|
||||||
line: 'var(--border-line)',
|
line: 'var(--border-line)',
|
||||||
background: 'var(--background)',
|
background: 'var(--background)',
|
||||||
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)',
|
||||||
secondary: 'var(--secondary)',
|
secondary: 'var(--secondary)',
|
||||||
@ -93,7 +93,7 @@ module.exports = {
|
|||||||
label: 'var(--text-label)',
|
label: 'var(--text-label)',
|
||||||
placeholder: 'var(--text-placeholder)',
|
placeholder: 'var(--text-placeholder)',
|
||||||
primary: 'var(--primary)',
|
primary: 'var(--primary)',
|
||||||
|
|
||||||
// @deprecated (NOT use these variables)
|
// @deprecated (NOT use these variables)
|
||||||
secondary: 'var(--text-secondary)',
|
secondary: 'var(--text-secondary)',
|
||||||
},
|
},
|
||||||
@ -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"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user