website/assets/scss/layouts/drawer.scss

82 lines
1.3 KiB
SCSS
Raw Permalink Normal View History

2023-01-23 09:07:18 +00:00
body {
overflow-x: hidden !important;
}
.drawer {
.bm-menu {
background-color: #2c3e50 !important;
}
.cross-style {
right: -4px !important;
top: 13px !important;
}
}
.drawer-body-scrolling-disabled {
overflow: hidden;
}
.main-page-wrap {
transition: transform 0.5s ease 0s;
}
.disabled {
transform: translate3d(-300px, 0px, 0px) !important;
}
.drawer {
background-color: #2c3e50;
position: fixed;
width: 0;
transition: width 0.5s ease;
z-index: 999;
right: 0;
top: 0;
height: 100%;
padding-top: 1em;
padding-bottom: 1em;
white-space: nowrap;
overflow: hidden;
.drawer-content {
width: 300px;
padding-left: 1em;
transition: opacity 0.5s ease;
opacity: 1;
}
.drawer-links {
flex-direction: column;
display: flex;
}
.drawer-link {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 1em;
padding-top: 1em;
color: white;
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
transition: opacity 0.2s;
}
}
&.drawer-enabled {
width: 300px;
.drawer-links {
opacity: 1;
}
}
.drawer-close-container {
display: flex;
justify-content: flex-end;
align-items: center;
color: white;
padding-right: 1em;
font-size: 1.3em;
}
}