🎨 styles: checkout page

:%s
This commit is contained in:
lytrankieio123
2021-10-21 10:44:45 +07:00
parent 6b397fc153
commit 93ddecbd0f
5 changed files with 44 additions and 52 deletions

View File

@@ -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;
} }
} }
} }

View File

@@ -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>
) )

View File

@@ -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;
} }
} }
} }

View File

@@ -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%;
} }
} }
}
}

View File

@@ -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>