introducing dropdown select
This commit is contained in:
parent
8e7f88632c
commit
04d64457ab
52
src/assets/css/components/DropdownSelect.scss
Normal file
52
src/assets/css/components/DropdownSelect.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
.dropdown-select {
|
||||||
|
@apply w-80 relative;
|
||||||
|
&__toggle,
|
||||||
|
&__select-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;
|
||||||
|
|
||||||
|
&: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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__select-list {
|
||||||
|
&[aria-hidden="true"] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
@apply max-h-64 p-0 absolute
|
||||||
|
z-10
|
||||||
|
overflow-y-auto rounded-b-lg shadow-lg w-full;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
@apply list-none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
@apply pl-8 flex items-center text-neutral-800 py-3 cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
@apply bg-neutral-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user