crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 03:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: animation icon select common

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-08 15:32:07 +07:00
parent 670343c06c
commit b4edbf8c8a
4 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/index.tsx
View File

@ -23,6 +23,7 @@ export default function Home() {
return (
<>
<SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} />
<SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} type='custom'/>
</>
)
}

16
src/components/common/SelectCommon/SelectCommon.module.scss
View File

@ -2,6 +2,11 @@
.select {
background-color: var(--white);
.selectTrigger {
svg {
@apply transition-all duration-200;
}
}
&.base {
width: 20.6rem;
.selectTrigger {
@ -19,7 +24,7 @@
&.default {
.selectTrigger {
@apply border-solid border border-current;
}
}
}
&.custom {
.selectTrigger {
@ -34,13 +39,17 @@
@apply block;
animation: SelectAnimation 0.2s ease-out;
}
.selectTrigger {
svg {
transform: rotate(180deg);
}
}
}
}
.selectTrigger {
@apply outline-none flex justify-between;
color: var(--text-active);
border-radius: 0.8rem;
}
.hoverWrapper {
@apply hidden outline-none absolute z-10;
@ -56,7 +65,7 @@
width: 34.25rem;
}
&.default {
@apply border-solid border border-current;
@apply border-solid border border-current;
}
&.custom {
@apply border-2;
@ -69,7 +78,6 @@
}
}
@keyframes SelectAnimation {
0% {
opacity: 0;

2
src/components/common/SelectCommon/SelectCommon.tsx
View File

@ -44,7 +44,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
>
{
option.map(item =>
<SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
<SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
)
}
</div>

1
src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
View File

@ -13,6 +13,7 @@
}
&:hover{
background-color: var(--gray);
color: var(--primary);
}
&.isChoose{
background-color: var(--gray);