Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing countryselect component

Browse Source
This commit is contained in:
Antoine M 2024-02-01 18:22:27 +01:00
parent e42c9bb8b0
commit 8e7f88632c
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/assets/css/components/CountrySelect.scss
View File

@ -1,11 +1,53 @@
.country-select {
@apply bg-white border border-neutral-300 border-solid max-h-64 overflow-y-auto rounded-lg shadow-lg text-white w-fit;
@apply w-80 relative;
&__toggle,
&__country-list {
@apply bg-white border-neutral-300 border border-solid w-full;
}
&__toggle {
@apply rounded-md py-3
text-neutral-800
capitalize
text-base
flex
pl-8
my-0
cursor-pointer
items-center;
.flag {
@apply pr-4;
}
&:after {
@apply block w-4 h-4 absolute right-5
bg-center bg-no-repeat bg-contain;
content: "";
background-image: url("../../img/select_deploy_icon.svg");
}
&:hover {
&:after {
filter: invert(88%) sepia(38%) saturate(1041%) hue-rotate(341deg) brightness(108%)
contrast(88%);
}
}
}
&__country-list {
&[aria-hidden="true"] {
@apply hidden;
}
@apply max-h-64 my-0 absolute
z-10
pl-8 overflow-y-auto rounded-b-lg shadow-lg w-full;
box-sizing: border-box;
overflow-y: scroll;
@apply list-none;
}
li {
@apply flex items-center text-neutral-800 py-1;
@apply flex items-center text-neutral-800 my-3 cursor-pointer;
.flag {
@apply pr-4;
}