Fix the specificity issue with the focused state of color picker button

WordPress · Dec 6, 2019 · a3385dd · a3385dd
1 parent 071cfe9
commit a3385dd
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
@@ -96,7 +96,6 @@ $color-palette-circle-spacing: 12px;
 	}
 
 	&:focus {
-		outline: none;
 		&::after {
 			content: "";
 			border: #{ $border-width * 2 } solid $dark-gray-400;
@@ -109,6 +108,12 @@ $color-palette-circle-spacing: 12px;
 			box-shadow: inset 0 0 0 2px $white;
 		}
 	}
+
+	&.components-button:focus {
+		background-color: transparent;
+		box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
+		outline: none;
+	}
 }
 
 .components-circular-option-picker__button-action .components-circular-option-picker__option {