FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Some menu fixes
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2020-01-07 21:43:48 +01:00
parent e077aa34df
commit 73550b3201
8 changed files with 228 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
projects/common/src/fm/components/side-panel/side-panel.component.scss
View File

@@ -1,100 +1,113 @@
.side-panel {
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
top:50%;
transition: left 0.3s, top 0.3s;
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.3s;
}
.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 {
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
top:50%;
transition: left 0.3s, top 0.3s;
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.3s;
}
.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;
width: 22rem;
height:100%;
left:0px;
}
.side-panel.left.hidden {
width: 22rem;
left:-24rem;
height:100%;
}