Remove importants and simplify the disabled selection

WordPress · Sep 24, 2018 · 2a4e4db · 2a4e4db
1 parent fd9bfa5
commit 2a4e4db
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -33,7 +33,7 @@
 			color: #23282d;
 		}
 
-		&:focus:not(:disabled):not([aria-disabled="true"]) {
+		&:focus:enabled {
 			background: #fafafa;
 			color: #23282d;
 			border-color: #999;
@@ -42,21 +42,20 @@
 				0 0 0 2px $blue-medium-200;
 		}
 
-		&:active:not(:disabled):not([aria-disabled="true"]) {
+		&:active:enabled {
 			background: #eee;
 			border-color: #999;
 			box-shadow: inset 0 1px 0 #999,;
 		}
 
-		&:disabled,
-		&[disabled] {
-			color: #a0a5aa !important;
-			border-color: #ddd !important;
-			background: #f7f7f7 !important;
-			box-shadow: none !important;
-			text-shadow: 0 1px 0 #fff !important;
-			-webkit-transform: none !important;
-			transform: none !important;
+		&:disabled {
+			color: #a0a5aa;
+			border-color: #ddd;
+			background: #f7f7f7;
+			box-shadow: none;
+			text-shadow: 0 1px 0 #fff;
+			-webkit-transform: none;
+			transform: none;
 		}
 	}
 
@@ -73,39 +72,41 @@
 			-1px 0 1px color(theme(button) shade(30%));
 
 		&:hover,
-		&:focus:not(:disabled):not([aria-disabled="true"]) {
+		&:focus:enabled {
 			background: color(theme(button) shade(5%));
 			border-color: color(theme(button) shade(50%));
-			box-shadow: inset 0 -1px 0 color(theme(button) shade(50%));
 			color: $white;
 		}
 
-		&:focus:not(:disabled):not([aria-disabled="true"]) {
+		&:hover {
+			box-shadow: inset 0 -1px 0 color(theme(button) shade(50%));
+		}
+
+		&:focus:enabled {
 			box-shadow:
 				inset 0 -1px 0 color(theme(button) shade(50%)),
 				0 0 0 2px $blue-medium-200;
 		}
 
-		&:active:not(:disabled):not([aria-disabled="true"]) {
+		&:active:enabled {
 			background: color(theme(button) shade(20%));
 			border-color: color(theme(button) shade(50%));
 			box-shadow: inset 0 1px 0 color(theme(button) shade(50%));
 			vertical-align: top;
 		}
 
-		&:disabled,
-		&[disabled] {
-			color: color(theme(button) tint(30%)) !important;
-			background: color(theme(button) shade(30%)) !important;
-			border-color: color(theme(button) shade(20%)) !important;
-			box-shadow: none !important;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
+		&:disabled {
+			color: color(theme(button) tint(30%));
+			background: color(theme(button) shade(30%));
+			border-color: color(theme(button) shade(20%));
+			box-shadow: none;
+			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
 		}
 
 		&.is-busy,
-		&.is-primary.is-busy[disabled] {
-			color: $white !important;
-			background-size: 100px 100% !important;
+		&.is-primary.is-busy:disabled {
+			color: $white;
+			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
 			background-image: linear-gradient(
@@ -114,9 +115,9 @@
 				color(theme(primary) shade(30%)) 28%,
 				color(theme(primary) shade(30%)) 72%,
 				theme(primary) 72%
-			) !important;
+			);
 			/* stylelint-enable */
-			border-color: color(theme(primary) shade(50%)) !important;
+			border-color: color(theme(primary) shade(50%));
 		}
 	}
 
@@ -165,15 +166,14 @@
 		opacity: 0.3;
 	}
 
-	&:not(:disabled):not([aria-disabled="true"]):focus {
+	&:focus:enabled {
 		@include button-style__focus-active;
 	}
 
-	&.is-busy,
-	&.is-busy[disabled] {
+	&.is-busy {
 		animation: components-button__busy-animation 2500ms infinite linear;
-		background-size: 100px 100% !important;
-		background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px) !important;
+		background-size: 100px 100%;
+		background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px);
 		opacity: 1;
 	}