2019-07-15 14:54:19 +00:00
|
|
|
.side-panel {
|
|
|
|
position: absolute;
|
2019-08-07 07:11:05 +00:00
|
|
|
top: 50%;
|
2019-07-15 14:54:19 +00:00
|
|
|
bottom: 0px;
|
2019-08-07 07:11:05 +00:00
|
|
|
width: 100%;
|
2019-07-15 14:54:19 +00:00
|
|
|
left: 0px;
|
2019-08-07 07:11:05 +00:00
|
|
|
height:100%;
|
|
|
|
transition: left 0.3s, top 0.3s;
|
2019-07-15 14:54:19 +00:00
|
|
|
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 {
|
2019-08-07 07:11:05 +00:00
|
|
|
top:100%;
|
2019-07-15 14:54:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
height:100%;
|
|
|
|
width:100%;
|
|
|
|
overflow:hidden;
|
|
|
|
overflow-y:auto;
|
|
|
|
}
|
2019-08-07 07:11:05 +00:00
|
|
|
|
|
|
|
@media screen and (min-width:44rem) {
|
|
|
|
.side-panel {
|
|
|
|
top:0px;
|
|
|
|
width: 22rem;
|
|
|
|
left:0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.side-panel.hidden {
|
|
|
|
top:0px;
|
|
|
|
width: 22rem;
|
|
|
|
left:-24rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|