crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +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 ( return (
<> <>
<SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} /> <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 { .select {
background-color: var(--white); background-color: var(--white);
.selectTrigger {
svg {
@apply transition-all duration-200;
}
}
&.base { &.base {
width: 20.6rem; width: 20.6rem;
.selectTrigger { .selectTrigger {
@ -19,7 +24,7 @@
&.default { &.default {
.selectTrigger { .selectTrigger {
@apply border-solid border border-current; @apply border-solid border border-current;
} }
} }
&.custom { &.custom {
.selectTrigger { .selectTrigger {
@ -34,13 +39,17 @@
@apply block; @apply block;
animation: SelectAnimation 0.2s ease-out; animation: SelectAnimation 0.2s ease-out;
} }
.selectTrigger {
svg {
transform: rotate(180deg);
}
}
} }
} }
.selectTrigger { .selectTrigger {
@apply outline-none flex justify-between; @apply outline-none flex justify-between;
color: var(--text-active); color: var(--text-active);
border-radius: 0.8rem; border-radius: 0.8rem;
} }
.hoverWrapper { .hoverWrapper {
@apply hidden outline-none absolute z-10; @apply hidden outline-none absolute z-10;
@ -56,7 +65,7 @@
width: 34.25rem; width: 34.25rem;
} }
&.default { &.default {
@apply border-solid border border-current; @apply border-solid border border-current;
} }
&.custom { &.custom {
@apply border-2; @apply border-2;
@ -69,7 +78,6 @@
} }
} }
@keyframes SelectAnimation { @keyframes SelectAnimation {
0% { 0% {
opacity: 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 => 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> </div>

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

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