Edit
/* scss/Dropdown/_theme-dropdown.scss */
.theme-dropdown {
display: inline-block;
&.dropdown-right {
.dropdown-menu {
@include dir-right(0);
@include dir-left(auto);
}
}
.dropdown-icon {
margin-inline-start: 10px;
transition: 0.3s ease;
}
.dropdown-menu {
max-width: 240px;
width: 240px;
border: 1px solid $gray-200;
box-sizing: border-box;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
top: calc(100% + 5px);
padding: 0;
overflow: hidden;
@include dir-left(0);
@include dir-right(auto);
.dropdown-head {
display: flex;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid $gray-100;
transition: 0.3s ease;
.icon-badges i {
margin: 0;
}
.dropdown-head-content {
margin-inline-start: 12px;
.title {
color: $gray-700;
margin: 0;
@extend .weight-m;
}
.desc {
color: $gray-500;
margin: 0;
}
}
&:hover,
&:focus {
background-color: $primary-25;
}
}
> .title {
padding: 12px 16px;
border-bottom: 1px solid $gray-100;
@extend .text-md;
@extend .weight-m;
}
ul.list {
max-height: 300px;
overflow: auto;
&::-webkit-scrollbar-track {
border-radius: 10px;
}
&::-webkit-scrollbar {
background-color: transparent;
height: 10px;
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: $gray-200;
border-radius: 50px;
}
i {
font-size: 16px;
}
.foot a {
border-top: 1px solid $gray-100;
}
}
.divider {
height: 1px;
margin: 0;
overflow: hidden;
background-color: $gray-100;
}
li a, li label {
padding: 10px 14px;
display: flex;
align-items: center;
white-space: normal;
color: $gray-700;
transition: 0.3s ease;
i {
margin-inline-end: 10px;
}
&:hover,
&:focus {
background-color: $primary-25;
}
}
}
&.open {
.dropdown-icon {
transform: rotate(180deg);
}
}
// dropdown with icon
.dropdown-btn-icon {
background: transparent;
outline: none;
border: none;
border-radius: 50%;
padding: 0;
.icon-badges {
background-color: $primary-50;
}
&:focus {
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #E3EBFC;
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.user-letter {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: $primary-50;
color: $primary-700;
@extend .display-xs
}
}
// dropdown set active
&.theme-dropdown-active {
ul.list {
li.active a {
color: $primary-700;
background-color: $primary-50;
&::after {
content: "\e97d";
font-family: 'icomoonapp' !important;
margin-inline-start: auto;
}
html[dir="rtl"] & {
right: auto;
left: -21px;
}
}
}
}
}