Update sidebar spacing (#13181)

* Update sidebar spacing * Update packages/components/src/base-control/style.scss Co-Authored-By: geekpulp <glen@geekpulp.co.nz> * updated use of $grid-size Increased the size of some spacing to allow more room between elements. * Commit fixes
WordPress · Feb 6, 2019 · d82a3bc · d82a3bc
1 parent 7c33661
commit d82a3bc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
@@ -18,6 +18,9 @@
 	.components-base-control__help {
 		margin-top: -$grid-size;
 		font-style: italic;
-		margin-bottom: 0;
 	}
 }
+
+.components-base-control + .components-base-control {
+	margin-bottom: $grid-size-large;
+}
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/style.scss b/packages/edit-post/src/components/sidebar/settings-sidebar/style.scss
@@ -1,12 +1,13 @@
 .edit-post-settings-sidebar__panel-block .components-panel__body {
 	border: none;
 	border-top: $border-width solid $light-gray-500;
-	margin: 0 -16px;
+	margin: 0 #{ -$grid-size-large };
 
 	.components-base-control {
-		margin: 0 0 1.5em 0;
+		margin-bottom: #{ $grid-size * 3 };
+
 		&:last-child {
-			margin-bottom: 0.5em;
+			margin-bottom: $grid-size;
 		}
 	}
 
@@ -15,10 +16,10 @@
 	}
 
 	&:first-child {
-		margin-top: 16px;
+		margin-top: $grid-size-large;
 	}
 
 	&:last-child {
-		margin-bottom: -16px;
+		margin-bottom: -$grid-size-large;
 	}
 }