FarmMapsLib/projects/common/src/fm/components/side-panel/side-panel.component.scss

122 lines
1.8 KiB
SCSS
Raw Normal View History

2020-01-07 20:43:48 +00:00
.side-panel {
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
top:50%;
2020-01-13 13:43:02 +00:00
transition: left 0.2s, top 0.2s;
2020-01-07 20:43:48 +00:00
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 {
2020-01-13 13:43:02 +00:00
transition: transform 0.2s;
2020-01-07 20:43:48 +00:00
}
.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:44rem) {
.side-panel {
top:0px;
width: 22rem;
height:100%;
left:0px;
}
.side-panel.hidden {
width: 22rem;
left:-24rem;
height:100%;
}
}
.side-panel.left {
top:0px;
2020-01-13 13:43:02 +00:00
width: 80%;
2020-01-07 20:43:48 +00:00
height:100%;
left:0px;
}
.side-panel.left.hidden {
2020-01-17 15:39:08 +00:00
width: 80%;
2020-01-07 20:43:48 +00:00
left:-24rem;
height:100%;
2020-01-13 13:43:02 +00:00
}
@media screen and (min-width:44rem) {
.side-panel.left {
width:22rem;
}
2020-01-17 15:39:08 +00:00
.side-panel.left.hidden {
width:22rem;
}
2020-01-13 13:43:02 +00:00
}