mempool/frontend/src/app/components/menu/menu.component.scss

90 lines
1.3 KiB
SCSS

.sidenav {
z-index: 1;
background-color: transparent;
width: 225px;
height: calc(100vh - 65px);
position: sticky;
top: 65px;
transition: 0.25s;
margin-left: -250px;
box-shadow: 5px 0px 30px 0px #000;
padding-bottom: 20px;
@media (max-width: 613px) {
top: 105px;
}
}
.ellipsis {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
.sidenav.open {
margin-left: 0px;
left: 0px;
display: block;
background-color: #1d1f31;
}
.sidenav a, button{
text-decoration: none;
color: lightgray;
margin-left: 20px;
}
.sidenav a:hover {
color: white;
}
.sidenav nav {
width: 100%;
height: calc(100vh - 65px);
background-color: #1d1f31;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
@media (max-width: 991px) {
padding-bottom: 200px;
}
}
@media screen and (max-height: 450px) {
.sidenav a {font-size: 18px;}
}
.badge-default {
background-color: black;
}
.badge-og {
background-color: #4a68b9;
}
.badge-pleb {
background-color: #3ccbe3;
}
.badge-chad {
background-color: #957d0b;
}
.badge-whale {
background-color: #653b9c;
}
.badge-silver {
background-color: #95a5a6;
}
.badge-gold {
background-color: #f1c40f;
}
.badge-platinium {
background-color: #653b9c;
}