Adjust visual design of stacked block.

WordPress · May 29, 2018 · fe478b7 · fe478b7
1 parent 1482c35
commit fe478b7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -185,11 +185,11 @@ export class InserterMenu extends Component {
 				<div className="editor-inserter__results">
 					{ !! childItems.length &&
 						<div className="editor-inserter__child-blocks">
-							<div className="editor-inserter__child-blocks-title">
-								<BlockIcon icon={ rootBlockIcon } />
-								<h2>
-									{ rootBlockTitle }
-								</h2>
+							<div className="editor-inserter__parent-block-header">
+								<div className="editor-inserter__parent-block-icon">
+									<BlockIcon icon={ rootBlockIcon } />
+								</div>
+								<h2>{ rootBlockTitle }</h2>
 							</div>
 							<ItemList items={ childItems } onSelect={ onSelect } onHover={ this.onHover } />
 						</div>

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -110,7 +110,6 @@ input[type="search"].editor-inserter__search {
 	cursor: pointer;
 	border: none;
 	background: transparent;
-	overflow: hidden;
 	word-break: break-word;
 	border-radius: 3px;
 	border: 1px solid transparent;
@@ -162,24 +161,38 @@ input[type="search"].editor-inserter__search {
 	padding: 4px 2px;
 }
 
-.editor-inserter__item-with-childs .editor-inserter__item-icon {
-    background: #7E70AF;
-    box-shadow: 3px 3px #AEA6CC;
-	margin-right: 3px;
-	color: white;
+.editor-inserter__item-with-childs {
+	.editor-inserter__item-icon {
+		position: relative;
+		top: -2px;
+		left: -2px;
+	    background: #7E70AF;
+	    box-shadow: 4px 4px #AEA6CC;
+		margin-right: 3px;
+		color: white;
+	}
 }
 
 .editor-inserter__child-blocks {
-	padding: 16px;
+	padding: 0 16px;
 }
 
-.editor-inserter__child-blocks-title .dashicon {
-	display: inline-block;
+.editor-inserter__parent-block-header {
+	display: flex;
+	align-items: center;
+}
+
+.editor-inserter__parent-block-icon {
+	background: $light-gray-200;
+	border-radius: 3px;
+	display: flex;
+	margin-left: -2px;
 	margin-right: 10px;
+	padding: 0 8px;
 }
 
-.editor-inserter__child-blocks-title h2 {
-	display: inline-block;
+.editor-inserter__parent-block-header h2 {
+	font-size: 13px;
 }
 
 .editor-inserter__child-blocks .editor-inserter__item-icon {