Polish paddings, margins, headings (#651)

* Darken mover. * Rearrange CSS, and lighten save state. This commit moves some CSS from the button component to the tools stylesheet. It's a better place. It also lightens the save state so it's the same color as everything else in the editor bar. * Normalize block boundary paddings. There were some offset here and there. This commit makes them 1:1 with the mockups, and also moves to using variables and a little SCSS math that should hopefully make the resulting positioning stuff a little easier to work with. * Fix regression that hid the first blocks toolbar. * Polish headings This tunes the margins a bit. It also resizes headings 1-6 a bit, so they are differentiated and all different. This fixes #625 * Use padding instead of margin for heading. * Move to tabs. * Relabel a margin variable.
WordPress · May 4, 2017 · a925c6c · a925c6c
1 parent d85e20c
commit a925c6c
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 22 deletions.
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
 

diff --git a/blocks/library/heading/style.scss b/blocks/library/heading/style.scss
@@ -0,0 +1,39 @@
+.editor-visual-editor__block[data-type="core/heading"] {
+	padding-top: 0;
+	padding-bottom: 0;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		// for this block only we change the block padding to reflect margin instead
+		margin: 0;
+		padding: .5em 0;
+	}
+
+	h1 {
+		font-size: 2em;
+	}
+
+	h2 {
+		font-size: 1.6em;
+	}
+
+	h3 {
+		font-size: 1.4em;
+	}
+
+	h4 {
+		font-size: 1.2em;
+	}
+
+	h5 {
+		font-size: 1.1em;
+	}
+
+	h6 {
+		font-size: 1em;
+	}
+}
diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
@@ -8,12 +8,12 @@
 
 	&[data-align="left"] {
 		float: left;
-		margin-right: 15px;
+		margin-right: $block-padding;
 	}
 
 	&[data-align="right"] {
 		float: right;
-		margin-left: 15px;
+		margin-left: $block-padding;
 	}
 
 	&[data-align="wide"] {
@@ -91,7 +91,7 @@
 }
 
 .blocks-image.is-placeholder {
-	margin: -15px;
+	margin: -$block-padding;
 	padding: 6em 0;
 	border: 2px solid $light-gray-500;
 	text-align: center;

diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
@@ -48,6 +48,10 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 
+/* Blocks */
+$block-padding: 14px;
+$block-mover-margin: 18px;
+
 /* Media Queries */
 
 /* All media queries currently in WordPress:

diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
@@ -10,7 +10,7 @@
 	border: none;
 	outline: none;
 	background: none;
-	color: $light-gray-600;
+	color: $dark-gray-100;
 	cursor: pointer;
 	width: 20px;
 	height: 20px;

diff --git a/editor/components/button/style.scss b/editor/components/button/style.scss
@@ -6,16 +6,4 @@
 	&:disabled {
 		opacity: 0.6;
 	}
-
-	.editor-tools__tabs & {
-		&.is-toggled {
-			background: $dark-gray-500;
-			color: $white;
-		}
-
-		&.is-toggled:hover {
-			color: $white;
-			background: $dark-gray-400;
-		}
-	}
 }
diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss
@@ -2,6 +2,7 @@
 	display: flex;
 	align-items: center;
 	margin-right: $item-spacing;
+	color: $dark-gray-500;
 
 	.dashicon {
 		margin-right: 4px;

diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
@@ -59,4 +59,16 @@
 			margin-right: 4px;
 		}
 	}
+
+	.editor-button {
+		&.is-toggled {
+			background: $dark-gray-500;
+			color: $white;
+		}
+
+		&.is-toggled:hover {
+			color: $white;
+			background: $dark-gray-400;
+		}
+	}
 }
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -1,7 +1,7 @@
 .editor-visual-editor {
 	margin: 0 auto;
 	max-width: 700px;
-	padding: 10px;	/* Floating up/down arrows invisible */
+	padding: 50px 10px;	/* Floating up/down arrows invisible */
 
 	&,
 	& p {
@@ -11,7 +11,7 @@
 	}
 
 	@include break-small() {
-		padding: 30px 40px;	/* Floating up/down appear */
+		padding: 50px 40px;	/* Floating up/down appear */
 	}
 
 	@include break-large() {
@@ -21,8 +21,8 @@
 
 .editor-visual-editor__block {
 	position: relative;
-	left: -35px;
-	padding: 15px 15px 15px 50px;
+	left: -#{ $block-padding + $block-mover-margin };	// make room for the mover
+	padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin };	// compensate for mover
 	transition: 0.2s border-color;
 
 	&:before {
@@ -31,7 +31,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: 35px;
+		left: #{ $block-padding + $block-mover-margin };	// compensate for mover
 		right: 0;
 		border: 2px solid transparent;
 		transition: 0.2s border-color;
@@ -69,7 +69,7 @@
 	position: absolute;
 	bottom: 100%;
 	margin-bottom: -4px;
-	left: 43px;
+	left: #{ $block-padding * 2 + $block-mover-margin };	// compensate for mover, and indent same as padding
 	display: flex;
 	z-index: 1;
 }