🎨 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;
@apply border-b border-solid border-line;
.note{
.note {
@apply cursor-pointer;
font-size: 1.2rem;
line-height: 2rem;
letter-spacing: 0.01em;
color: var(--text-label);
padding: 0 5.6rem;
}
.header{
@apply flex justify-between;
.left{
.header {
@apply flex justify-between cursor-pointer;
.left {
@apply flex items-center;
.number{
.number {
width: 3.2rem;
height: 3.2rem;
border-radius: 100%;
border: 1px solid var(--text-active);
color: var(--text-active);
@apply flex justify-center items-center font-bold;
&.visible{
&.visible {
background-color: var(--text-active);
border: none;
color: var(--white);
}
&.done{
&.done {
@apply border-2 border-solid border-primary;
}
}
.title{
.title {
padding-left: 2.4rem;
@apply font-bold select-none cursor-pointer;
@apply font-bold select-none;
color: var(--text-active);
}
}
.edit{
.edit {
@apply font-bold cursor-pointer;
text-decoration-line: underline;
margin-right: 5.6rem;
}
}
.body{
.body {
height: 0;
@apply overflow-hidden;
&.show{
&.show {
margin-top: 3.2rem;
height: initial;
}
}
}
}

View File

@@ -8,10 +8,10 @@ interface CheckoutCollapseProps {
children: React.ReactNode
title: string
isEdit: boolean
onClose?: (id:number) => void
onOpen?: (id:number) => void
onEditClick?:(id:number) => void
note?:string
onClose?: (id: number) => void
onOpen?: (id: number) => void
onEditClick?: (id: number) => void
note?: string
disableEdit?: boolean
}
@@ -23,34 +23,34 @@ const CheckoutCollapse = ({
visible,
note,
onOpen,
onClose,
onClose,
onEditClick,
disableEdit,
}: CheckoutCollapseProps) => {
const handleTitleClick = () => {
if(visible){
onClose && onClose(id)
const handleToggle = () => {
if (visible) {
onClose && onClose(id)
} else if (!disableEdit) {
onOpen && onOpen(id)
isEdit && onEditClick && onEditClick(id)
}
}
}
const handleEdit = () => {
onEditClick && onEditClick(id)
}
onEditClick && onEditClick(id)
}
return (
<div className={s.warpper}>
<div className={s.header}>
<div className={s.header} onClick={handleToggle}>
<div className={s.left}>
<div className={classNames(s.number, { [s.visible]: visible, [s.done]:isEdit })}>
{isEdit?<IconDoneCheckout/>:id}
<div className={classNames(s.number, { [s.visible]: visible, [s.done]: isEdit })}>
{isEdit ? <IconDoneCheckout /> : id}
</div>
<div className={s.title} onClick={handleTitleClick}>
<div className={s.title}>
{title}
</div>
</div>
{!disableEdit && isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</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>
)

View File

@@ -8,11 +8,10 @@
}
}
.bottom{
@apply flex flex-col items-start;
margin-top: 2.4rem;
@apply flex justify-between items-center;
@screen sm-only {
@apply flex-col items-start;
button {
margin-left: auto;
}
}
}

View File

@@ -1,28 +1,20 @@
@import "../../../../../../styles/utilities";
.warpper{
.warpper {
@apply u-form;
@screen md {
padding: 0 5.6rem;
}
.bottom{
.bottom {
@apply flex flex-col items-start;
margin-top: 2.4rem;
@apply flex justify-between items-center;
.note{
font-size: 1.2rem;
line-height: 2rem;
}
@screen sm-only {
@apply flex-col items-start;
.button {
padding-top: 2rem;
}
button {
margin-left: auto;
}
}
.line{
>div{
.line {
> div {
width: 50%;
}
}
}
}

View File

@@ -176,7 +176,7 @@ const ShippingInfoForm = ({ onConfirm, id, activeStep }: ShippingInfoFormProps)
<div className={s.bottom}>
<ChekoutNotePolicy />
<ButtonCommon HTMLType='submit' loading={loading} size="large">
Continue to Payment
Continue to Shipping method
</ButtonCommon>
</div>
</div>