Try more muted sibling inserter. (#28550)

WordPress · Jan 29, 2021 · 502f79a · 502f79a
1 parent 068c810
commit 502f79a
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -406,23 +406,24 @@
 	position: absolute;
 	background: var(--wp-admin-theme-color);
 
-	animation: block-editor-inserter__toggle__fade-in-animation 0.3s ease;
+	// Provide a muted animation that isn't too noisy.
+	animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 
 	.block-editor-block-list__insertion-point.is-vertical > & {
-		top: calc(50% - #{ $border-width });
-		height: var(--wp-admin-border-width-focus);
-		left: 0;
+		top: 50%;
 		right: 0;
+		left: 0;
+		height: $border-width;
 	}
 
 	.block-editor-block-list__insertion-point.is-horizontal > & {
 		top: 0;
-		height: 100%;
-		left: calc(50% - #{ $border-width });
 		right: 0;
-		width: var(--wp-admin-border-width-focus);
+		left: 50%;
+		height: 100%;
+		width: $border-width;
 	}
 }
 
@@ -458,7 +459,7 @@
 .block-editor-block-list__block-popover-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
-		background: $gray-900;
+		background: var(--wp-admin-theme-color);
 		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
@@ -469,6 +470,7 @@
 
 		&:hover {
 			color: $white;
+			background: $gray-900;
 		}
 	}
 }
@@ -488,7 +490,7 @@
 	0% {
 		opacity: 0;
 	}
-	80% {
+	60% {
 		opacity: 0;
 	}
 	100% {
@@ -499,11 +501,9 @@
 @keyframes block-editor-inserter__toggle__fade-in-animation {
 	from {
 		opacity: 0;
-		transform: scale(0);
 	}
 	to {
 		opacity: 1;
-		transform: scale(1);
 	}
 }