Fix color picker saturation bug (#23272)

* Fix color picker saturation bug * Address feedback.
WordPress · Jun 22, 2020 · 2833411 · 2833411
1 parent 5f55a13
commit 2833411
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss
@@ -27,7 +27,6 @@
 
 .components-color-picker {
 	width: 100%;
-	overflow: hidden;
 
 	* {
 		box-sizing: border-box;
@@ -104,7 +103,7 @@
 }
 
 .components-color-picker__saturation-color {
-	overflow: hidden;
+	overflow: visible;
 }
 
 .components-color-picker__saturation-white {
@@ -116,17 +115,26 @@
 	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
 }
 
-.components-color-picker__saturation-pointer {
+// Needs specificity.
+.components-button.components-color-picker__saturation-pointer {
 	width: 14px;
 	height: 14px;
 	padding: 0;
-	box-shadow:
-		0 0 0 1.5px #fff,
-		inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
-		0 0 1px 2px rgba(0, 0, 0, 0.4);
 	border-radius: 50%;
 	background-color: transparent;
-	transform: translate(-4px, -4px);
+	transform: translate(-50%, -50%);
+
+	box-shadow:
+		0 0 0 1px $white,
+		inset 0 0 0 1px $black,
+		0 0 0 2px $black;
+
+	&:focus:not(:disabled) {
+		box-shadow:
+			0 0 0 2px $white,
+			inset 0 0 0 1px $black,
+			0 0 0 3px $black;
+	}
 }
 
 /* HUE & ALPHA BARS */