130 lines
2.0 KiB
SCSS
130 lines
2.0 KiB
SCSS
.side-panel {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
left: 0px;
|
|
top:50%;
|
|
transition: left 0.2s, top 0.2s;
|
|
background-color: white;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.side-panel.resizing {
|
|
transition: left 0s, top 0s;
|
|
}
|
|
|
|
.side-panel.collapsed {
|
|
left:-44rem;
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 100%;
|
|
background-color: inherit;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.arrow i {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.collapsed .arrow i {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.side-panel.hidden {
|
|
top:100%;
|
|
}
|
|
|
|
.content {
|
|
height:100% ;
|
|
width:100%;
|
|
overflow:hidden;
|
|
overflow-y:auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: rgb(255,255,255);
|
|
}
|
|
|
|
.resizegrip {
|
|
height:2rem;
|
|
line-height: 1rem;
|
|
display: none;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
div.resizegrip > div {
|
|
position: absolute;
|
|
top:0px;
|
|
height: 1rem;
|
|
width: 100%;
|
|
background-color: rgb(255,255,255);
|
|
}
|
|
|
|
div.resizegrip > span {
|
|
position: relative;
|
|
display: inline-block;
|
|
height:0.3rem;
|
|
width:4rem;
|
|
background-color:rgba(0, 0, 0, 0.3);
|
|
top:-0.3rem;
|
|
}
|
|
|
|
.resizeable .resizegrip {
|
|
display:block;
|
|
}
|
|
|
|
.resizeable .content {
|
|
height:calc(100% - 1rem);
|
|
top:-1rem;
|
|
}
|
|
|
|
@media screen and (min-width:40rem) {
|
|
.side-panel {
|
|
top:0px;
|
|
width: 22rem;
|
|
height:100%;
|
|
left:0px;
|
|
}
|
|
|
|
.side-panel.hidden {
|
|
width: 22rem;
|
|
left:-22rem;
|
|
height:100%;
|
|
top: 0px;
|
|
}
|
|
|
|
.side-panel.extrawide {
|
|
top:0px;
|
|
width: 44rem;
|
|
height:100%;
|
|
left:0px;
|
|
}
|
|
}
|
|
|
|
|
|
.side-panel.left {
|
|
top:0px;
|
|
width: 80%;
|
|
height:100%;
|
|
left:0px;
|
|
}
|
|
|
|
.side-panel.left.hidden {
|
|
width: 80%;
|
|
left:-80%;
|
|
height:100%;
|
|
}
|
|
|
|
@media screen and (min-width:40rem) {
|
|
.side-panel.left {
|
|
width:22rem;
|
|
}
|
|
.side-panel.left.hidden {
|
|
width:22rem;
|
|
}
|
|
} |