crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-27 04:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: component SelectCommon

Browse Source
This commit is contained in:
unknown
2021-08-26 18:08:32 +07:00
parent 7d55bbf46e
commit b35d48d248
5 changed files with 149 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,32 +1,81 @@
@import "../../../styles/utilities";
.select{
@apply rounded-lg border-solid;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
background-color: var(--white);
margin-left: 2rem;
&.base{
width: 18.6rem;
height: 4.8rem;
width: 20.6rem;
.selectTrigger{
width: 20.6rem;
padding: 1.2rem 1.6rem;
}
}
&.large{
width: 34.25rem;
height: 5.6rem;
.selectTrigger{
width: 34.25rem;
padding: 1.6rem 1.6rem;
}
}
&.default{
@apply border;
.selectTrigger{
@apply border-solid border border-current;
}
}
&.custom{
.selectTrigger{
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
}
&.isActive{
.selectOptionWrapper{
@apply block;
}
}
}
.selectTrigger{
@apply outline-none flex justify-between;
color: var(--text-active);
border-radius: 0.8rem;
}
.selectOptionWrapper{
@apply outline-none hidden z-10 absolute;
border-radius: 0.8rem;
background-color: var(--white);
padding: 0.4rem 0rem 0.4rem 0rem;
margin-top: 0.6rem;
&.base{
width: 20.6rem;
.selectOption{
padding: 1.2rem 1.6rem;
}
}
&.large{
width: 34.25rem;
.selectOption{
padding: 1.6rem 1.6rem;
}
}
&.default{
@apply border-solid border border-current;
}
&.custom{
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
.option{
&.active{
@apply hidden;
}
.selectOption{
&:hover{
background-color: black;
background-color: var(--background);
}
}
}