Polish and makes space.

WordPress · May 17, 2018 · 37e7434 · 37e7434
1 parent e4969b7
commit 37e7434
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
@@ -38,12 +38,15 @@ div.components-toolbar {
 	display: inline-flex;
 	align-items: flex-end;
 	margin: 0;
-	padding: 3px;
 	outline: none;
 	cursor: pointer;
 	position: relative;
-	width: $icon-button-size;
 	height: $icon-button-size;
+	padding: 3px 1px;
+
+	@include break-small() {
+		padding: 3px;
+	}
 
 	// unset icon button styles
 	&:active,

diff --git a/core-blocks/heading/editor.scss b/core-blocks/heading/editor.scss
@@ -36,16 +36,42 @@
 
 .core-blocks-heading__icon {
 	height: 20px;
-	position: relative;
 	width: 20px;
+	display: inline-flex;
+	position: relative;
 
-	&:after {
+	/*&:after {
 		content: attr( data-subscript );
 		font-family: $default-font;
 		font-size: $default-font-size;
 		font-weight: 600;
 		position: absolute;
 		bottom: 0;
 		left: 16px;
+	}*/
+
+	// subscript for numbered icon buttons, like headings
+	/*&[data-subscript] svg {
+		padding: 4px 8px 4px 0;
+	}*/
+
+	&[data-subscript]:after {
+		content: attr( data-subscript );
+		font-family: $default-font;
+		font-size: $default-font-size;
+		font-weight: 600;
+		position: absolute;
+		right: -5px;
+		bottom: 0;
+	}
+}
+
+.core-blocks-heading__styles-toolbar {
+	.components-icon-button {
+		padding: 8px 4px;
+
+		@include break-small() {
+			padding: 8px;
+		}
 	}
 }
diff --git a/core-blocks/heading/styles-toolbar.js b/core-blocks/heading/styles-toolbar.js
@@ -51,7 +51,7 @@ const HeadingStylesToolbar = ( { value, onChange } ) => (
 				<span
 					className="core-blocks-heading__styles-toolbar-menu-title"
 				>
-					{ __( 'Transform into:' ) }
+					{ __( 'Heading style:' ) }
 				</span>
 				<NavigableMenu
 					role="menu"

diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss
@@ -9,8 +9,12 @@
 .editor-block-switcher__toggle {
 	width: auto;
 	margin: 0;
-	padding: 8px;
 	border-radius: 0;
+	padding: 8px 4px;
+
+	@include break-small() {
+		padding: 8px;
+	}
 
 	&:focus:before {
 		top: -3px;