Merge pull request #831 from WordPress/polish/switch

Polish the switch control.
WordPress · May 18, 2017 · cbd2759 · cbd2759
2 parents 9079c4e + b779fdd
commit cbd2759
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/components/form-toggle/style.scss b/components/form-toggle/style.scss
@@ -10,46 +10,53 @@
 	padding: 0;
 }
 
+$toggle-width: 32px;
+$toggle-height: 18px;
+$toggle-border-width: 2px;
 .components-form-toggle__label {
 	&:before {
 		content: '';
 		display: inline-block;
-		vertical-align: middle;
+		vertical-align: top;
 		box-sizing: border-box;
-		background-color: $dark-gray-200;
-		width: 24px;
-		height: 16px;
-		border-radius: 8px;
-		margin-right: 5px;
-
-		&:hover {
-			background-color: $dark-gray-100;
+		background-color: $white;
+		border: $toggle-border-width solid $dark-gray-500;
+		width: $toggle-width;
+		height: $toggle-height;
+		border-radius: $toggle-height / 2;
+		transition: 0.2s background ease;
+
+		.components-form-toggle.is-checked & {
+			background-color: $blue-medium-400;
+			border: $toggle-border-width solid $blue-medium-400;
 		}
+	}
+
+	&:hover:before {
+		background-color: $light-gray-500;
 
 		.components-form-toggle.is-checked & {
 			background-color: $blue-medium;
-
-			&:hover {
-				background-color: $dark-gray-100;
-			}
+			border: $toggle-border-width solid $blue-medium;
 		}
 	}
 
 	&:after {
 		content: '';
 		display: block;
 		position: absolute;
-		top: 9px;
-		left: 4px;
-		width: 8px;
-		height: 8px;
+		top: $toggle-border-width * 2;
+		left: $toggle-border-width * 2;
+		width: $toggle-height - ( $toggle-border-width * 4 );
+		height: $toggle-height - ( $toggle-border-width * 4 );
 		border-radius: 50%;
-		background: $white;
-		transition: 0.2s transform ease-out;
+		background: $dark-gray-500;
+		transition: 0.1s transform ease;
 
 
 		.components-form-toggle.is-checked & {
-			transform: translateX( 8px );
+			background-color: $white;
+			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}
 	}
 }