benivo-ui-library
Version:
Benivo UI library
107 lines (92 loc) • 2.84 kB
text/less
.sidebar-menu {
ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
li {
margin-bottom: 4px;
}
.divider-li {
margin-left: -16px;
margin-right: -16px;
margin-bottom: 20px;
@media @lg-max {
margin-left: -30px;
margin-right: -30px;
}
}
.sidebar-menu-item-content {
display: flex;
align-items: center;
height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 14px 16px;
border-radius: 8px;
font-size: @font-size-sm;
font-weight: 500;
line-height: 11px;
color: var(--text-600);
position: relative;
cursor: pointer;
&:hover,
&.active {
background: var(--bg-100);
text-decoration: none;
border-radius: 8px;
}
&.active {
font-weight: @font-weight-medium;
color: var(--black);
background-color: var(--bg-50);
.icon {
font-weight: @font-weight-medium;
color: var(--black);
&:before {
color: var(--black);
}
}
}
@media @lg-max {
font-size: @font-size;
min-height: 48px;
height: initial;
&:hover {
font-weight: @font-weight-medium;
}
}
.icon {
display: block;
font-size: 20px;
height: 20px;
width: 20px;
@media @lg-max {
font-size: @lg-font-size;
}
}
.text-content {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.3;
margin-left: 20px;
@media @lg-max {
line-height: 1.3;
white-space: normal;
}
}
.unread-messages {
position: absolute;
top: -8px;
right: -8px;
padding: 1px 4px;
background-color: var(--pink-500);
border-radius: 10px;
color: var(--white);
font-size: 11px;
font-weight: @font-weight-bold;
}
}
}
}