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

101 lines
1.4 KiB
SCSS
Raw Normal View History

2019-07-15 14:54:19 +00:00
.side-panel {
position: absolute;
bottom: 0px;
2019-08-07 07:11:05 +00:00
width: 100%;
2019-07-15 14:54:19 +00:00
left: 0px;
2019-09-11 16:40:10 +00:00
top:50%;
2019-08-07 07:11:05 +00:00
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);
}
2019-09-11 16:40:10 +00:00
.side-panel.resizing {
transition: left 0s, top 0s;
}
2019-07-15 14:54:19 +00:00
.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 {
2019-09-11 16:40:10 +00:00
height:100% ;
2019-07-15 14:54:19 +00:00
width:100%;
overflow:hidden;
overflow-y:auto;
2019-09-12 07:22:46 +00:00
position: relative;
z-index: 1;
2019-09-12 07:57:45 +00:00
background-color: rgb(255,255,255);
2019-07-15 14:54:19 +00:00
}
2019-08-07 07:11:05 +00:00
2019-09-11 16:40:10 +00:00
.resizegrip {
2019-09-12 07:22:46 +00:00
height:2rem;
2019-09-11 16:40:10 +00:00
line-height: 1rem;
display: none;
text-align: center;
2019-09-12 07:22:46 +00:00
position: relative;
2019-09-12 07:57:45 +00:00
z-index: 2;
}
div.resizegrip > div {
position: absolute;
top:0px;
height: 1rem;
width: 100%;
background-color: rgb(255,255,255);
2019-09-11 16:40:10 +00:00
}
div.resizegrip > span {
position: relative;
display: inline-block;
height:0.3rem;
width:4rem;
2019-09-12 07:22:46 +00:00
background-color:rgba(0, 0, 0, 0.3);
top:-0.3rem;
2019-09-11 16:40:10 +00:00
}
.resizeable .resizegrip {
display:block;
}
.resizeable .content {
height:calc(100% - 1rem);
2019-09-12 07:22:46 +00:00
top:-1rem;
2019-09-11 16:40:10 +00:00
}
2019-08-07 07:11:05 +00:00
@media screen and (min-width:44rem) {
.side-panel {
top:0px;
width: 22rem;
2019-08-07 07:42:28 +00:00
height:100%;
2019-08-07 07:11:05 +00:00
left:0px;
}
.side-panel.hidden {
width: 22rem;
left:-24rem;
2019-08-07 07:42:28 +00:00
height:100%;
2019-08-07 07:11:05 +00:00
}
}