Tidy up button vertical align styles (#17601)

* Remove vertical-align:top from buttons and tweak block-editor-warning message * Styling tweaks for block warnings to account for removed `vertical-align: top`
WordPress · Sep 30, 2019 · 96a4153 · 96a4153
1 parent 29fa609
commit 96a4153
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -1234,10 +1234,4 @@
 	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
 	margin-bottom: -$block-padding;
 	transform: translateY(-$block-padding);
-
-	// Bigger padding on mobile where blocks are edge to edge.
-	padding: 10px $block-padding;
-	@include break-small() {
-		padding: 10px $block-padding;
-	}
 }
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
@@ -6,7 +6,7 @@
 	background-color: $white;
 	border: $border-width solid $light-gray-500;
 	text-align: left;
-	padding: 20px;
+	padding: 10px $block-padding $block-padding;
 
 	// Avoid conflict with the multi-selection highlight color.
 	.has-warning.is-multi-selected & {
@@ -28,14 +28,19 @@
 		font-family: $default-font;
 		font-size: $default-font-size;
 		margin: 1em 0;
+
+	}
+	// Required extra-specifity to override paragraph block styles.
+	p.block-editor-warning__message.block-editor-warning__message {
+		min-height: auto;
 	}
 
 	.block-editor-warning__contents {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		flex-wrap: wrap;
-		align-items: center;
+		align-items: baseline;
 		width: 100%;
 	}
 
@@ -45,15 +50,11 @@
 
 	.block-editor-warning__action {
 		margin: 0 6px 0 0;
-
-		.components-button {
-			vertical-align: top;
-		}
 	}
 }
 
 .block-editor-warning__secondary {
-	margin: 3px 0 0 -4px;
+	margin: 5px 0 0 -4px;
 	height: $block-controls-height;
 
 	// the padding and margin of the more menu is intentionally non-standard

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -24,7 +24,6 @@
 		border-color: #ccc;
 		background: #f7f7f7;
 		box-shadow: inset 0 -1px 0 #ccc;
-		vertical-align: top;
 
 		&:hover {
 			background: #fafafa;
@@ -98,7 +97,6 @@
 			background: color(theme(button) shade(20%));
 			border-color: color(theme(button) shade(50%));
 			box-shadow: inset 0 1px 0 color(theme(button) shade(50%));
-			vertical-align: top;
 		}
 
 		&:disabled,