FarmMapsLib/projects/common/src/fm/components/side-panel/side-panel.component.scss
Willem Dantuma f8c3a0db98
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Select better threshold for mobile detection
2020-02-25 11:52:27 +01:00

122 lines
1.8 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);
}
.side-panel.resizing {
transition: left 0s, top 0s;
}
.side-panel.collapsed {
left:-22rem;
}
.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:-24rem;
height:100%;
}
}
.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;
}
}