Redo panels animation

style/_common.scss

@@ -62,6 +62,10 @@
 
 /* Common objects */
 
+body {
+	overflow: hidden;
+}
+
 body, textarea, input, button {
 	font-size: 14px;
 	font-family: 'Ubuntu', sans-serif;

style/_leaflet.scss

@@ -40,6 +40,10 @@ $stroke-width-axis : 2;
 	.fa, .heightgraph-toggle-icon {
 		@extend .control-icon;
 	}
+
+	.fa {
+		width: 100%;
+	}
 }
 
 /* Leaflet Heightgraph fixes */

style/_mask_project.scss

@@ -27,33 +27,29 @@ $legend-color: $post-color;
 
 #projects {
 
+	/* Panels movements */
 	&.with-feed {
 		#submap {
 			width: calc(100% - #{$panel-width});
 			min-width: calc(100% - #{$panel-width-max});
 		}
 
+		#feed {
+			right: 0;
+		}
+
 		.leaflet-right {
 			width: $panel-width;
 			max-width: calc(#{$panel-width-max});
 		}
 
-		#feed {
-			z-index: 999;
-			transition: none;
-		}
-
 		#post-button {
 			.fa {
 				@extend .fa-next;
 			}
 		}
 	}
-	&:not(.with-feed) {
+
-		#feed #posts {
-			right: -100%;
-		}
-	}
 	&.with-settings {
 		#submap {
 			width: calc(100% - #{$panel-width});
@@ -66,8 +62,7 @@ $legend-color: $post-color;
 		}
 
 		#settings {
-			z-index: 999;
+			left: 0;
-			transition: none;
 		}
 
 		#settings-button {
@@ -76,11 +71,7 @@ $legend-color: $post-color;
 			}
 		}
 	}
-	&:not(.with-settings) {
+
-		#settings #settings-panel {
-			left: -100%;
-		}
-	}
 	&.with-feed.with-settings {
 		#submap {
 			width: calc(100% - #{$panel-width} * 2);
@@ -88,6 +79,15 @@ $legend-color: $post-color;
 		}
 	}
 
+	#background {
+		background: #666;
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: 0;
+	}
+
 	#submap {
 		position: absolute;
 		left: 0;
@@ -239,7 +239,7 @@ $legend-color: $post-color;
 
 	/* Pull right/left controls by $panel-width */
 	.leaflet-right, .leaflet-left {
-		transition: all 0.5s;
+		transition: width 0.5s, max-width 0.5s, left 0.5s, right 0.5s;
 		width: 0;
 		max-width: 0;
 	}
@@ -340,11 +340,8 @@ $legend-color: $post-color;
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		z-index: -1;
-		transition-property: z-index;
-		transition-duration: 0.1s;
-		transition-delay: 0.5s;
 		overflow: hidden;
+		z-index: 999;
 
 		input, textarea {
 			background-color: $post-input-bg;
@@ -360,20 +357,23 @@ $legend-color: $post-color;
 				color: $post-color;
 			}
 		}
+
+		#feed-panel, #settings-panel {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+		}
 	}
 	#feed {
-		right: 0;
+		right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
+		transition: right 0.5s;
 		width: #{$panel-width};
 		max-width: calc(#{$panel-width-max});
 
-		#posts {
+		#feed-panel {
-			position: absolute;
-			transition: all 0.5s;
-			top: 0;
-			bottom: 0;
-			right: 0;
 			width: 100%;
-
+			
 			#posts_list {
 				position: relative;
 			}
@@ -589,7 +589,7 @@ $legend-color: $post-color;
 								text-align: justify;
 								background: rgba(255, 255, 255, 0.6);
 								border-radius: 0 0 3px 3px;
-								transition: all 0.3s;
+								transition: opacity 0.3s;
 								opacity: 1;
 							}
 						}
@@ -611,7 +611,8 @@ $legend-color: $post-color;
 		}
 	}
 	#settings {
-		left: 0;
+		left: calc(min(#{$panel-width} + 3px, #{$panel-width-max} + 3px) * -1);
+		transition: left 0.5s;
 		width: calc(#{$panel-width} + 3px); //Add box-shadow
 		max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
 
@@ -620,11 +621,6 @@ $legend-color: $post-color;
 			margin: $block-spacing;
 			border-radius: 3px;
 			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
-			position: absolute;
-			transition: all 0.5s;
-			top: 0;
-			bottom: 0;
-			left: 0;
 			color: $post-color;
 			background: rgba(255, 255, 255, 0.8);
 			display: flex;

style/_mobile.scss

@@ -29,6 +29,14 @@
 		#feed, #settings {
 			width: calc(100% - 44px - 2 * #{$block-spacing});
 		}
+
+		#feed {
+			right: calc((100% - 44px - 2 * #{$block-spacing}) * -1);
+		}
+
+		#settings {
+			left: calc((100% - 44px - 2 * #{$block-spacing}) * -1);
+		}
 	}
 }