mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🎨 styles: checkout page
:%s
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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>
|
||||
)
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user