Merge pull request #1389 from WordPress/polish/controls-floats-various

Polish controls, floats, switches and headings
WordPress · Jun 23, 2017 · 988f0f8 · 988f0f8
2 parents ddf4d65 + e28a078
commit 988f0f8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/components/form-toggle/style.scss b/components/form-toggle/style.scss
@@ -72,6 +72,7 @@ $toggle-border-width: 2px;
 
 .components-form-toggle__hint {
 	display: inline-block;
+	min-width: 24px;	// This prevents a position jog when the control is right aligned, and the width of the label changes
 	margin-left: 10px;
 	font-weight: 500;
 }
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
@@ -94,14 +94,18 @@
 		color: $white;
 	}
 
+	&[data-subscript] svg {
+		padding: 4px 8px 4px 0px;
+	}
+
 	&[data-subscript]:after {
 		content: attr( data-subscript );
 		font-family: $default-font;
-		font-size: 10px;
+		font-size: $default-font-size;
 		font-weight: bold;
 		position: relative;
-		top: -6px;
-		left: -9px;
+		top: -5px;
+		left: -12px;
 	}
 }
 

diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
@@ -107,4 +107,6 @@
 		@content;
 	}
 }
-$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+$visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
+$float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
@@ -58,7 +58,7 @@ $text-editor-max-width: 760px;
 
 /* Editor */
 $text-editor-max-width: 760px;
-$visual-editor-max-width: 636px;	// previously 700
+$visual-editor-max-width: 636px;
 $block-controls-height: 38px;
 $icon-button-size: 36px;
 

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -29,7 +29,7 @@
 	margin-bottom: 5px;
 	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
 	position: relative;
-	 // The block mover needs to stay inside the block to allow clicks when hovering the block
+	// The block mover needs to stay inside the block to allow clicks when hovering the block
 	padding: $block-padding $block-padding + $block-mover-padding-visible;
 
 	&:before {
@@ -175,13 +175,24 @@
 
 		&:before {
 			left: 0;
+			right: 0;
 			border-left-width: 0;
 			border-right-width: 0;
 		}
 
 		.editor-block-mover {
 			display: none;
 		}
+
+		.editor-block-settings-menu {
+			top: -24px;
+			right: 10px;
+		}
+
+		.editor-block-settings-menu__control {
+			float: left;
+			margin-right: 8px;
+		}
 	}
 
 	&[data-align="full"],