43 lines
597 B
SCSS
43 lines
597 B
SCSS
|
.side-panel {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 22rem;
|
||
|
|
left: 0px;
|
||
|
|
transition: left 0.3s;
|
||
|
|
background-color: white;
|
||
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.side-panel.collapsed {
|
||
|
|
left:-22rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow {
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
left: 100%;
|
||
|
|
background-color: inherit;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow i {
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsed .arrow i {
|
||
|
|
-webkit-transform: rotate(180deg);
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.side-panel.hidden {
|
||
|
|
left: -24rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
overflow:hidden;
|
||
|
|
overflow-y:auto;
|
||
|
|
}
|