Make side panel responsive

2019-08-07 09:11:05 +02:00
parent 538be1490a
commit c59accbbc4
5 changed files with 56 additions and 13 deletions
--- a/projects/common/src/lib/components/side-panel/side-panel.component.scss
+++ b/projects/common/src/lib/components/side-panel/side-panel.component.scss
@@ -1,10 +1,11 @@
 .side-panel {
  position: absolute;
-  top: 0px;
+  top: 50%;
  bottom: 0px;
-  width: 22rem;
+  width: 100%;
  left: 0px;
-  transition: left 0.3s;
+  height:100%;
+  transition: left 0.3s, top 0.3s;
  background-color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
@@ -31,7 +32,7 @@
 }

 .side-panel.hidden {
-  left: -24rem;
+  top:100%;
 }

 .content {
@@ -40,3 +41,18 @@
  overflow:hidden;
  overflow-y:auto;
 }
+
+@media screen and (min-width:44rem) {
+  .side-panel {
+    top:0px;
+    width: 22rem;
+    left:0px;
+  }
+
+  .side-panel.hidden {
+    top:0px;
+    width: 22rem;
+    left:-24rem;
+  }
+
+}