Show diagonal indicator.

WordPress · Dec 14, 2021 · f1d9c6a · f1d9c6a
1 parent 9d04e38
commit f1d9c6a
Showing 1 changed file with 2 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -58,20 +58,9 @@
 }
 
 .block-editor-panel-color-gradient-settings__item {
-	// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
 	.component-color-indicator {
-		margin-left: 0;
-		display: block;
-		border-radius: 50%;
-		border: 0;
-		height: 24px;
-		width: 24px;
-		padding: 0;
-		background-image:
-			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-		background-position: 0 0, 25px 25px;
-		background-size: calc(2 * 5px) calc(2 * 5px);
+		// Show a diagonal line (crossed out) for empty swatches.
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}
 }