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 · Mar 6, 2019 · 259b153 · 259b153
1 parent cd43dcf
commit 259b153
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;
  }
 }