Merge pull request #12061 from woocommerce/add/toggle-input

Add styling for the toggle input type

assets/css/admin.scss

@@ -2830,19 +2830,13 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
 	}
 	.wc-shipping-zone-method-enabled {
 		text-align: center;
-		.status-enabled {
-			margin-top: 1px;
+
+		a {
 			display: inline-block;
-			&::before {
-				line-height: inherit;
-			}
 		}
-		.status-disabled {
-			margin-top: 1px;
-			display: inline-block;
-			&::before {
-				line-height: inherit;
-			}
+
+		.woocommerce-input-toggle {
+			margin-top: 3px;
 		}
 	}
 	tfoot {
@@ -2860,6 +2854,39 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
 	}
 }
 
+.woocommerce-input-toggle {
+	height: 16px;
+	width: 32px;
+	border: 2px solid #935687;
+	background-color: #935687;
+	display: inline-block;
+	text-indent: -9999px;
+	border-radius: 10em;
+	position: relative;
+
+	&:before {
+		content: "";
+		display: block;
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		position: absolute;
+		top: 0;
+		right: 0;
+		border-radius: 100%;
+	}
+
+	&.woocommerce-input-toggle--disabled {
+		border-color: #999;
+		background-color: #999;
+
+		&:before {
+			right: auto;
+			left: 0;
+		}
+	}
+}
+
 .wc-modal-shipping-method-settings {
 	background: #f8f8f8;
 	padding: 1em !important;

assets/js/admin/wc-shipping-zone-methods.js

@@ -128,9 +128,9 @@
 						// Populate $tbody with the current methods
 						$.each( methods, function( id, rowData ) {
 							if ( 'yes' === rowData.enabled ) {
-								rowData.enabled_icon = '<span class="status-enabled">' + data.strings.yes + '</span>';
+								rowData.enabled_icon = '<span class="woocommerce-input-toggle woocommerce-input-toggle--enabled">' + data.strings.yes + '</span>';
 							} else {
-								rowData.enabled_icon = '<span class="status-disabled">' + data.strings.no + '</span>';
+								rowData.enabled_icon = '<span class="woocommerce-input-toggle woocommerce-input-toggle--disabled">' + data.strings.no + '</span>';
 							}
 
 							view.$el.append( view.rowTemplate( rowData ) );