mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 10:41:23 +00:00
🎨 styles: checkout page
:%s
This commit is contained in:
@@ -1,51 +1,52 @@
|
|||||||
.warpper{
|
.warpper {
|
||||||
padding: 2.4rem 0;
|
padding: 2.4rem 0;
|
||||||
@apply border-b border-solid border-line;
|
@apply border-b border-solid border-line;
|
||||||
.note{
|
.note {
|
||||||
|
@apply cursor-pointer;
|
||||||
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-label);
|
color: var(--text-label);
|
||||||
padding: 0 5.6rem;
|
padding: 0 5.6rem;
|
||||||
}
|
}
|
||||||
.header{
|
.header {
|
||||||
@apply flex justify-between;
|
@apply flex justify-between cursor-pointer;
|
||||||
.left{
|
.left {
|
||||||
@apply flex items-center;
|
@apply flex items-center;
|
||||||
.number{
|
.number {
|
||||||
width: 3.2rem;
|
width: 3.2rem;
|
||||||
height: 3.2rem;
|
height: 3.2rem;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 1px solid var(--text-active);
|
border: 1px solid var(--text-active);
|
||||||
color: var(--text-active);
|
color: var(--text-active);
|
||||||
@apply flex justify-center items-center font-bold;
|
@apply flex justify-center items-center font-bold;
|
||||||
&.visible{
|
&.visible {
|
||||||
background-color: var(--text-active);
|
background-color: var(--text-active);
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
&.done{
|
&.done {
|
||||||
@apply border-2 border-solid border-primary;
|
@apply border-2 border-solid border-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title{
|
.title {
|
||||||
padding-left: 2.4rem;
|
padding-left: 2.4rem;
|
||||||
@apply font-bold select-none cursor-pointer;
|
@apply font-bold select-none;
|
||||||
color: var(--text-active);
|
color: var(--text-active);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.edit{
|
.edit {
|
||||||
@apply font-bold cursor-pointer;
|
@apply font-bold cursor-pointer;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
margin-right: 5.6rem;
|
margin-right: 5.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.body{
|
.body {
|
||||||
height: 0;
|
height: 0;
|
||||||
@apply overflow-hidden;
|
@apply overflow-hidden;
|
||||||
&.show{
|
&.show {
|
||||||
margin-top: 3.2rem;
|
margin-top: 3.2rem;
|
||||||
height: initial;
|
height: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -8,10 +8,10 @@ interface CheckoutCollapseProps {
|
|||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
title: string
|
title: string
|
||||||
isEdit: boolean
|
isEdit: boolean
|
||||||
onClose?: (id:number) => void
|
onClose?: (id: number) => void
|
||||||
onOpen?: (id:number) => void
|
onOpen?: (id: number) => void
|
||||||
onEditClick?:(id:number) => void
|
onEditClick?: (id: number) => void
|
||||||
note?:string
|
note?: string
|
||||||
disableEdit?: boolean
|
disableEdit?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,34 +23,34 @@ const CheckoutCollapse = ({
|
|||||||
visible,
|
visible,
|
||||||
note,
|
note,
|
||||||
onOpen,
|
onOpen,
|
||||||
onClose,
|
onClose,
|
||||||
onEditClick,
|
onEditClick,
|
||||||
disableEdit,
|
disableEdit,
|
||||||
}: CheckoutCollapseProps) => {
|
}: CheckoutCollapseProps) => {
|
||||||
const handleTitleClick = () => {
|
const handleToggle = () => {
|
||||||
if(visible){
|
if (visible) {
|
||||||
onClose && onClose(id)
|
onClose && onClose(id)
|
||||||
} else if (!disableEdit) {
|
} else if (!disableEdit) {
|
||||||
onOpen && onOpen(id)
|
isEdit && onEditClick && onEditClick(id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleEdit = () => {
|
const handleEdit = () => {
|
||||||
onEditClick && onEditClick(id)
|
onEditClick && onEditClick(id)
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className={s.warpper}>
|
<div className={s.warpper}>
|
||||||
<div className={s.header}>
|
<div className={s.header} onClick={handleToggle}>
|
||||||
<div className={s.left}>
|
<div className={s.left}>
|
||||||
<div className={classNames(s.number, { [s.visible]: visible, [s.done]:isEdit })}>
|
<div className={classNames(s.number, { [s.visible]: visible, [s.done]: isEdit })}>
|
||||||
{isEdit?<IconDoneCheckout/>:id}
|
{isEdit ? <IconDoneCheckout /> : id}
|
||||||
</div>
|
</div>
|
||||||
<div className={s.title} onClick={handleTitleClick}>
|
<div className={s.title}>
|
||||||
{title}
|
{title}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!disableEdit && isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
|
{!disableEdit && isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
|
||||||
</div>
|
</div>
|
||||||
{(!visible && isEdit) && (<div className={s.note}>{note}</div>) }
|
{(!visible && isEdit) && (<div className={s.note} onClick={handleToggle}>{note}</div>)}
|
||||||
<div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
|
<div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@@ -8,11 +8,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottom{
|
.bottom{
|
||||||
|
@apply flex flex-col items-start;
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
@apply flex justify-between items-center;
|
button {
|
||||||
@screen sm-only {
|
margin-left: auto;
|
||||||
@apply flex-col items-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@@ -1,28 +1,20 @@
|
|||||||
@import "../../../../../../styles/utilities";
|
@import "../../../../../../styles/utilities";
|
||||||
|
|
||||||
.warpper{
|
.warpper {
|
||||||
@apply u-form;
|
@apply u-form;
|
||||||
@screen md {
|
@screen md {
|
||||||
padding: 0 5.6rem;
|
padding: 0 5.6rem;
|
||||||
}
|
}
|
||||||
.bottom{
|
.bottom {
|
||||||
|
@apply flex flex-col items-start;
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
@apply flex justify-between items-center;
|
button {
|
||||||
.note{
|
margin-left: auto;
|
||||||
font-size: 1.2rem;
|
|
||||||
line-height: 2rem;
|
|
||||||
}
|
|
||||||
@screen sm-only {
|
|
||||||
@apply flex-col items-start;
|
|
||||||
.button {
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.line{
|
.line {
|
||||||
>div{
|
> div {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
|
@@ -176,7 +176,7 @@ const ShippingInfoForm = ({ onConfirm, id, activeStep }: ShippingInfoFormProps)
|
|||||||
<div className={s.bottom}>
|
<div className={s.bottom}>
|
||||||
<ChekoutNotePolicy />
|
<ChekoutNotePolicy />
|
||||||
<ButtonCommon HTMLType='submit' loading={loading} size="large">
|
<ButtonCommon HTMLType='submit' loading={loading} size="large">
|
||||||
Continue to Payment
|
Continue to Shipping method
|
||||||
</ButtonCommon>
|
</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user