Refactor the Settings button CSS. (#14475)

* Refactor the Settings button CSS. * Remove box-shadow use padding and margin.
WordPress · Apr 10, 2019 · c939517 · c939517
1 parent c96df03
commit c939517
Showing 1 changed file with 6 additions and 15 deletions.
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -68,26 +68,17 @@
 	// Header toggle buttons.
 	&.is-toggled {
 		color: $white;
-	}
-
-	// Put the gray background on a separate layer, so as to match the size of the publish button (34px).
-	&.is-toggled::before {
-		content: "";
-		border-radius: $radius-round-rectangle;
-		position: absolute;
-		z-index: -1;
 		background: $dark-gray-500;
-		top: 1px;
-		right: 1px;
-		bottom: 1px;
-		left: 1px;
+		margin: 1px;
+		padding: 7px;
 	}
 
+	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
 	&.is-toggled:hover,
 	&.is-toggled:focus {
-		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white;
-		color: $white;
-		background: $dark-gray-500;
+		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
+		color: $white !important;
+		background: $dark-gray-500 !important;
 	}
 
 	// Make editor header bar buttons bigger to match IconButtons.