Improve appearance of hover on colored backgrounds. (#14501)

* Use transparency in hover state left borders.
WordPress · Mar 20, 2019 · 233446b · 233446b
1 parent 4d65116
commit 233446b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -158,10 +158,10 @@
 
 	// Hover style.
 	&.is-hovered > .block-editor-block-list__block-edit::before {
-		box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500;
 
 		.is-dark-theme & {
-			box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
+			box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400;
 		}
 	}
 

diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
@@ -75,7 +75,11 @@
 
 	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
+			box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500;
+
+			.is-dark-theme & {
+				box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400;
+			}
 		}
 	}