mirror of
https://github.com/vercel/commerce.git
synced 2025-07-06 21:11:20 +00:00
feat: add animation toggle icon
This commit is contained in:
parent
08cbc248d4
commit
e21853ea4e
@ -12,6 +12,14 @@
|
|||||||
.contentContainer{
|
.contentContainer{
|
||||||
@apply block;
|
@apply block;
|
||||||
}
|
}
|
||||||
|
.toggle{
|
||||||
|
&:before {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
svg:hover{
|
svg:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -22,6 +30,25 @@
|
|||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
|
.toggle{
|
||||||
|
height: 2.2rem;
|
||||||
|
width: 2.2rem;
|
||||||
|
position: relative;
|
||||||
|
&:before,
|
||||||
|
&:after{
|
||||||
|
@apply absolute h-2;
|
||||||
|
content: "";
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
background: var(--text-active);
|
||||||
|
top: 40%;
|
||||||
|
width: 2.2rem;
|
||||||
|
transition: transform 500ms ease;
|
||||||
|
}
|
||||||
|
&:before{
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.contentContainer{
|
.contentContainer{
|
||||||
@apply hidden pb-16;
|
@apply hidden pb-16;
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import s from './CollapseCommon.module.scss'
|
import s from './CollapseCommon.module.scss'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import { IconPlus, IconMinus } from 'src/components/icons'
|
|
||||||
import CollapseContent from './CollapseContent/CollapseContent'
|
import CollapseContent from './CollapseContent/CollapseContent'
|
||||||
|
|
||||||
interface CollapseProps{
|
interface CollapseProps{
|
||||||
@ -23,7 +22,8 @@ const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
|
|||||||
onClick = { handleToggle }
|
onClick = { handleToggle }
|
||||||
>
|
>
|
||||||
<div className={s.title}>
|
<div className={s.title}>
|
||||||
{title}{isActive ? <IconMinus /> : <IconPlus />}
|
<a>{title}</a>
|
||||||
|
<div className={s.toggle}></div>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.contentContainer}>
|
<div className={s.contentContainer}>
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user