Style fixes to loading overlay and debug bar

Automattic · Sep 7, 2017 · 352926b · 352926b
1 parent a89575a
commit 352926b
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/scss/_container.scss b/scss/_container.scss
@@ -27,7 +27,7 @@
 	position: relative;
 	background: #fff;
 	border: 1px solid #ddd;
-	margin: 56px 10px 10px;
+	margin: 10px;
 	padding: 52px 16px;
 	min-height: 600px; // fallback
 	min-height: calc( 100vh - 66px ); // 46 + 20
@@ -61,16 +61,38 @@
 }
 
 .welcome__debug {
+	margin: 56px 0 0 10px; // Get debug bar below the admin bar + 10px
 	position: relative;
 	z-index: 11;
+
+	@media ( min-width: 782px ) {
+		margin: 10px 0 -10px 20px;
+	}
+
+	a.button {
+		margin-left: 8px;
+		margin-bottom: 0;
+
+		&:first-child {
+			margin-left: 0;
+		}
+	}
 }
 
 .welcome__loading-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+	position: absolute;
+	top: -10px;
+	left: -10px;
+	right: -10px;
+	bottom: -10px;
+
+	@media ( min-width: 782px ) {
+		top: -20px;
+		left: -20px;
+		right: -20px;
+		bottom: -20px;
+	}
+
 	z-index: 10;
 	background-color: rgba( white, 0.6 );
 }