src/components/UI/DropDown/DropDown.scss
@import "../../../assets/sass/main";
.select-box {
z-index: 2;
width: 180px;
&--container {
transition: .4s all;
background-color: rgba($color-black, .6);
height: 48px;
border-radius: 4px;
width: 100%;
user-select: none;
cursor: pointer;
&:hover {
background-color: rgba($color-black, .3);
}
}
&--selected-item {
align-items: center;
transition: .2s all;
display: flex;
justify-content: center;
color: $color-white;
font-size: 1.5rem;
height: 100%;
width: 90%;
padding: .8rem;
margin: auto;
font-weight: 800;
text-shadow: 0 1px .5rem $color-black;
}
&--container:hover &--selected-item{
color: white;
}
&--items {
width: 100%;
overflow-y: auto;
height: 12rem;
justify-content: space-around;
background-color: $color-white;
box-shadow: 0px 4px 1rem rgba($color-black, .4);
border-radius: 4px;
&__create-tag {
user-select: none;
cursor: pointer;
padding: 1rem;
border-bottom: 1px solid rgba($color-black, .4);
background-color: $color-white;
font-size: 1.5rem;
text-align: center;
font-weight: 600;
}
}
::-webkit-scrollbar {
width: 3px;
}
}