Apply icon button centering by horizontal padding

WordPress · May 1, 2017 · b00e551 · b00e551
1 parent 96f3957
commit b00e551
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss
@@ -1,8 +1,7 @@
 .editor-icon-button {
 	display: flex;
 	align-items: center;
-	min-width: 36px;
-	height: 36px;
+	padding: 8px;
 	border: none;
 	background: none;
 	color: $dark-gray-500;

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -18,19 +18,12 @@
 	background: none;
 	cursor: pointer;
 	border: none;
-	width: 36px;
-	height: 36px;
 	outline: none;
-	padding: 0;
 	transition: color .2s ease;
 
 	&:hover {
 		color: $blue-medium;
 	}
-
-	.dashicon.insert {
-		margin: 0 auto; // Fixes horizontal alignment in Safari 10.
-	}
 }
 
 .editor-inserter__menu {

diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss
@@ -7,9 +7,9 @@
 
 .editor-toolbar__control.editor-button {
 	display: inline-flex;
+	align-items: flex-end;
 	margin: 3px;
 	margin-left: 0;
-	padding: 6px;
 	background: none;
 	border: 1px solid transparent;
 	outline: none;
@@ -39,9 +39,9 @@
 		font-family: $default-font;
 		font-size: 10px;
 		font-weight: bold;
-		position: absolute;
-		bottom: 8px;
-		right: 5px;
+		position: relative;
+		top: -1px;
+		margin-left: -3px;
 	}
 }