Style switch #2

README.md

@@ -98,6 +98,7 @@ Arguments:
 | name | string | true | Name of the input
 | checked | boolean | true |
 | help | string | false | Optional. Help / description
+| nice_ui | boolean | false | Optional. Display as a nicer ui. Default true.
 
 > Example of usage
 

include/Fields.php

@@ -94,14 +94,27 @@ public static function dropdown( $args ) {
 	}
 
 	public static function switch($args) {
+
+		$defaults = [
+			'name'    => '',
+			'checked' => false,
+			'help'    => '',
+			'nice_ui' => true,
+		];
+
+		// Parse incoming $args and merge it with $defaults.
+		$args = wp_parse_args( $args, $defaults );
+
+		if ( $args['nice_ui'] ) self::include_switch_assets();
+
 		printf(
-			'<div class="switch"><input class="switch__chk" type="checkbox" id="%1$s" name="%2$s" %3$s><label for="%1$s" class="switch__label" tabindex="-1"></label></div>',
+			'<div class="wsfd-switch"><input class="wsfd-switch__chk" type="checkbox" id="%1$s" name="%2$s" %3$s><label for="%1$s" class="wsfd-switch__label" tabindex="-1"></label></div>',
 			$args['id'] ?? $args['name'],
 			$args['name'],
 			($args['checked']  ? 'checked' : '')
 		);
 
-		if ( isset($args['help']) ) {
+		if ( !empty($args['help']) ) {
 			printf( '<p class="description">%s</p>', $args['help']);
 		}
 	}
@@ -292,6 +305,11 @@ private static function get_lib_uri() {
 		return  trailingslashit(get_site_url()) . preg_replace("/(\/[^\/]+)$/", '', str_replace(ABSPATH, '', __DIR__) );
 	}
 
+	private static function include_switch_assets() {
+		$lib_uri = self::get_lib_uri();
+		wp_enqueue_style('wsfd-switch-nice-ui', untrailingslashit($lib_uri). '/src/switch-nice-ui.css', null, WSFD_VERSION );
+	}
+
 	private static function include_select2() {
 
 		if ( wp_script_is('select2', 'enqueued') ) return;

src/switch-nice-ui.css

@@ -0,0 +1,46 @@
+.wsfd-switch {
+	position: relative;
+	display: flex;
+	font-size: 14px;
+}
+.wsfd-switch__chk {
+	position: absolute;
+	z-index: -1;
+	opacity: 0;
+}
+.wsfd-switch__label {
+	position: relative;
+	z-index: 1;
+	height: 20px;
+	width: 38px;
+	order: 2;
+	cursor: pointer;
+	border-radius: 34px;
+	font-size: 0;
+	box-shadow: none;
+	background-color: #858585;
+	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+.wsfd-switch__label::before {
+	content: '';
+	position: absolute;
+	top: calc(50% - 8px);
+	left: 2px;
+	display: block;
+	height: 12px;
+	width: 12px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 2px solid #ffffff;
+	transition: background-color 0.2s ease-out, transform 0.2s ease-out;
+}
+.wsfd-switch__chk:checked + label {
+	background-color: #00a54b;
+}
+.wsfd-switch__chk:checked + label::before {
+	transform: translateX(18px);
+	background-color: #ffffff;
+}
+.wsfd-switch__chk:focus + label {
+	box-shadow: inset #007cba 0px 0px 1px 1px, #007cba 0px 0px 1px 1px;
+}