mue/src/components/modals/main/scss/modules/_sidebar.scss

76 lines
1.4 KiB
SCSS

@import '../.../../../../../././../scss/variables';
.sidebar {
@include themed {
top: 0;
left: 0;
position: sticky;
margin: 0;
padding: 0;
background: t($modal-sidebar);
border-radius: 12px 0 0 12px;
overflow-y: auto;
height: 80vh;
min-width: 250px;
overflow-x: hidden;
.mainTitle {
text-align: center;
font-size: 35px;
display: flex;
justify-content: center;
padding: 25px;
}
svg {
margin-left: 20px;
margin-right: 20px;
color: t($subColor);
font-size: 17px;
}
hr {
height: 1px;
background: #ccc;
margin: 0 1.75rem;
border: none;
}
button {
color: t($color);
font-size: 18px;
list-style: none;
cursor: pointer;
border-radius: 12px;
display: flex;
align-items: center;
margin: 0.2rem;
padding: 0.5rem;
transition: 0.5s;
outline: none;
border: none;
background: none;
min-width: calc(100% - 1.2em);
text-align: left;
&:hover {
background: t($modal-sidebarActive);
}
&:active {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 0.5px t($color);
}
&:focus {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 0.5px t($color);
}
}
.tab-list-active {
background: t($modal-sidebarActive);
}
}
}