update slidePanel css

Author: amazingSurge

css/slidePanel.css

@@ -1,90 +1,65 @@
-.slidePanel
-{
-    position: fixed;
-
-    visibility: hidden;
-
-    max-width: 100%;
-    max-height: 100%;
+.slidePanel {
+  position: fixed;
+  max-width: 100%;
+  max-height: 100%;
+  visibility: hidden;
 }
 .slidePanel-right,
-.slidePanel-left
-{
-    width: 500px;
-    height: 100%;
+.slidePanel-left {
+  width: 500px;
 }
-@media (max-width: 768px)
-{
-    .slidePanel-right,
-    .slidePanel-left
-    {
-        width: 100%;
-    }
-}
-.slidePanel-top,
-.slidePanel-bottom
-{
+@media (max-width: 768px) {
+  .slidePanel-right,
+  .slidePanel-left {
     width: 100%;
-    height: 400px;
+  }
 }
-@media (max-width: 768px)
-{
-    .slidePanel-top,
-    .slidePanel-bottom
-    {
-        height: 100%;
-    }
-}
-.slidePanel-left
-{
-    top: 0;
-    left: 0;
+.slidePanel-top,
+.slidePanel-bottom {
+  width: 100%;
+  height: 400px;
 }
-.slidePanel-right
-{
+@media (max-width: 768px) {
+  .slidePanel-top,
+  .slidePanel-bottom {
     top: 0;
-    right: 0;
+    bottom: 0;
+    height: auto;
+  }
 }
-.slidePanel-top
-{
-    top: 0;
-    left: 0;
+.slidePanel-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
 }
-.slidePanel-bottom
-{
-    bottom: 0;
-    left: 0;
+.slidePanel-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
-.slidePanel-html
-{
-    overflow: hidden;
-
-    height: 100%;
+.slidePanel-top {
+  top: 0;
+  left: 0;
 }
-.slidePanel-html body
-{
-    height: 100%;
+.slidePanel-bottom {
+  bottom: 0;
+  left: 0;
 }
-.slidePanel-show
-{
-    visibility: visible;
+.slidePanel-show {
+  visibility: visible;
 }
-.slidePanel-loading
-{
-    visibility: hidden;
+.slidePanel-loading {
+  visibility: hidden;
 }
-.slidePanel-loading-show
-{
-    visibility: visible;
+.slidePanel-loading-show {
+  visibility: visible;
 }
-.slidePanel-loading .spinner
-{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    -webkit-transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-         -o-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
+.slidePanel-loading .spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+       -o-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
 }

less/slidePanel.less

@@ -5,7 +5,7 @@
 	max-height: 100%;
 
 	&-right, &-left {
-		height: 100%;
+		// height: 100%;
 		width: 500px;
 
 		@media (max-width: 768px) {
@@ -17,16 +17,21 @@
 		height: 400px;
 
 		@media (max-width: 768px) {
-			height: 100%;
+			// height: 100%;
+            top: 0;
+            bottom: 0;
+            height: auto;
 		}
 	}
 	&-left {
 		top: 0;
 		left: 0;
+        bottom: 0;
 	}
 	&-right {
 		top: 0;
 		right: 0;
+        bottom: 0;
 	}
 	&-top {
 		top: 0;
@@ -38,12 +43,12 @@
 	}
 
 	&-html {
-		height: 100%;
-		overflow: hidden;
+		// height: 100%;
+		// overflow: hidden;
 
-		body {
-			height: 100%;
-		}
+		// body {
+		// 	height: 100%;
+		// }
 	}
 
 	visibility: hidden;
@@ -60,7 +65,7 @@
 		visibility: visible;
 	}
 }
-// spinner 
+// spinner
 .slidePanel-loading {
 	.spinner {
 		// make spinner center