This repository has been archived on 2024-06-14. You can view files and clone it, but cannot push or open issues or pull requests.
icynet-admin/components/common/Dropdown/Dropdown.module.scss

78 lines
1.3 KiB
SCSS
Raw Normal View History

.wrapper {
position: relative;
.toggle {
appearance: none;
border: 1px solid #ddd;
background: #ffffff;
border-radius: 4px;
width: 32px;
height: 32px;
cursor: pointer;
&.active,
&:hover,
&:focus-visible {
background-color: rgb(240, 240, 240);
}
&.active {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&::after {
content: '';
font-weight: bold;
font-size: 1.25rem;
}
}
.dropdown {
position: absolute;
display: flex;
flex-direction: column;
top: 100%;
min-width: 140px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
a,
button {
appearance: none;
border: 0;
background: transparent;
font-size: 1rem;
text-align: left;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid #ddd;
cursor: pointer;
&:hover,
&:focus-visible {
background-color: rgb(240, 240, 240);
}
&:last-child {
border-bottom: 0;
}
}
}
&.right {
.dropdown {
right: 0;
border-top-right-radius: 0;
}
}
&.left {
.dropdown {
left: 0;
border-top-left-radius: 0;
}
}
}