From c08115cfd618bc6eed6e8a6771726b4cfa2de352 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 8 Mar 2017 14:30:41 +0100
Subject: [PATCH] TinyMCE per block: Update the toolbar style to match the UI
 prototype (#208)

---
 .../src/blocks/embed-block/_style.scss        |  1 -
 .../transform-block-toolbar/style.scss        |  8 +++--
 tinymce-per-block/src/inserter/style.scss     | 29 +++++++++++++-----
 .../renderers/block/block-list/_style.scss    | 30 ++++++++++++-------
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/tinymce-per-block/src/blocks/embed-block/_style.scss b/tinymce-per-block/src/blocks/embed-block/_style.scss
index 7b15e6648f144..e6e7563699f6a 100644
--- 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
index 0db6481f0d5c5..7ef761ead052e 100644
--- 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
index feb24e16c8a86..c066e569c1614 100644
--- 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
index f604520211cea..b668d43d0fea9 100644
--- 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,9 +57,23 @@
 	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 {
@@ -67,10 +81,6 @@
 		width: 24px;
 		height: 24px;
 	}
-
-	&:focus {
-		outline: 0;
-	}
 }
 
 .block-list__block-arrangement {