TinyMCE per block: Update the toolbar style to match the UI prototype (…

…#208)
WordPress · Mar 8, 2017 · c08115c · c08115c
1 parent c7ca370
commit c08115c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 22 deletions.
diff --git a/tinymce-per-block/src/blocks/embed-block/_style.scss b/tinymce-per-block/src/blocks/embed-block/_style.scss
@@ -29,7 +29,6 @@
 			height: 24px;
 			vertical-align: middle;
 			margin-right: 5px;
-			fill: #87919d;
 		}
 	}
 }

diff --git a/tinymce-per-block/src/controls/transform-block-toolbar/style.scss b/tinymce-per-block/src/controls/transform-block-toolbar/style.scss
@@ -55,15 +55,17 @@
 		cursor: pointer;
 		display: flex;
 		align-items: center;
+		color: #191e23;
+		border: 1px solid transparent;
 
-		&.is-active,
 		&:hover {
-			background: #f0f2f4;
+			background: #f8f9f9;
+			outline: 1px solid #6d7882;
+			position: relative;
 		}
 
 		.dashicon {
 			margin-right: 8px;
-			fill: #191e23;
 			width: 24px;
 			height: 24px;
 		}

diff --git a/tinymce-per-block/src/inserter/style.scss b/tinymce-per-block/src/inserter/style.scss
@@ -5,16 +5,20 @@
 	border: none;
 	margin: 20px;
 	padding: 0;
+
+	a {
+		color: #87919d;
+
+		&:hover {
+			color: #12181e;
+		}
+	}
+
 	.dashicon {
 		cursor: pointer;
-		fill: #87919d;
 		width: 24px;
 		height: 24px;
 
-		&:hover {
-			fill: #12181e;
-		}
-
 		&:focus {
 			box-shadow: none;
 			outline: none;
@@ -81,15 +85,24 @@
 				font-size: 11px;
 				align-items: center;
 				cursor: pointer;
+				border: 1px solid transparent;
 
-				&.is-active,
 				&:hover {
-					background: #f0f2f4;
+					background: #f8f9f9;
+					border: 1px solid #6d7882;
+					position: relative;
+				}
+
+				&.is-active {
+					background: #eef0f0;
+					border: 1px solid #6d7882;
+					position: relative;
+					color: #3e444c;
 				}
 
 				.dashicon {
-					margin-right: 8px;
 					fill: #191e23;
+					margin-right: 8px;
 					width: 24px;
 					height: 24px;
 				}

diff --git a/tinymce-per-block/src/renderers/block/block-list/_style.scss b/tinymce-per-block/src/renderers/block/block-list/_style.scss
@@ -18,11 +18,11 @@
 	}
 
 	&:hover > div {
-		border-left-color: mix( $gray-light, $gray-dark-300, 80% );
+		border-left-color: #e1e6ea;
 	}
 
 	&.is-selected > div {
-		border-color: mix( $gray-light, $gray-dark-300, 80% );
+		border-color: #e1e6ea;
 	}
 }
 
@@ -36,11 +36,11 @@
 
 .block-list__block-controls-group {
 	background: #fff;
-	border: 1px solid #e1e6ea;
+	border: 1px solid #d8dbdf;
 	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
 	color: #12181e;
 	display: inline-block;
-	margin-left: 20px;
+	margin-left: 14px;
 }
 
 .block-list__block-toolbar {
@@ -57,20 +57,30 @@
 	cursor: pointer;
 	display: block;
 	float: left;
+	color: #6d7882;
 
-	&.is-selected, &:hover {
-		background: #f0f2f4;
+	&:focus {
+		outline: 0;
+	}
+
+	&:hover {
+		background: #f8f9f9;
+		outline: 1px solid #6d7882;
+		position: relative;
+	}
+
+	&.is-selected {
+		background: #eef0f0;
+		outline: 1px solid #6d7882;
+		position: relative;
+		color: #3e444c;
 	}
 
 	.dashicon {
 		display: block;
 		width: 24px;
 		height: 24px;
 	}
-
-	&:focus {
-		outline: 0;
-	}
 }
 
 .block-list__block-arrangement {