Style the disable button

Author: aatanasovdev

css/cloudinary.css

@@ -288,9 +288,11 @@ protected function make_input( $name, $value ) {
 			'crop-size-inputs',
 		);
 
-		$label                      = $this->get_part( 'label' );
-		$label['attributes']['for'] = $name;
-		$label['content']           = __( 'Disable', 'cloudinary' );
+		// Disable toggle control.
+		$control                          = $this->get_part( 'label' );
+		$control['attributes']['class'][] = 'cld-input-on-off-control';
+		$control['attributes']['class'][] = 'medium';
+		$control['attributes']['for']     = $name;
 
 		$check                          = $this->get_part( 'input' );
 		$check['attributes']['type']    = 'checkbox';
@@ -303,6 +305,17 @@ protected function make_input( $name, $value ) {
 			$check['attributes']['checked'] = 'checked';
 		}
 
+		$slider                          = $this->get_part( 'span' );
+		$slider['attributes']['class'][] = 'cld-input-on-off-control-slider';
+		$slider['render']                = true;
+
+		$control['children']['input']  = $check;
+		$control['children']['slider'] = $slider;
+
+		$label          = $this->get_part( 'span' );
+		$label['attributes']['class'] = 'cld-input-on-off-control-label';
+		$label['content']             = __( 'Disable', 'cloudinary' );
+
 		$input                          = $this->get_part( 'input' );
 		$input['attributes']['type']    = 'text';
 		$input['attributes']['name']    = $name;
@@ -316,10 +329,10 @@ protected function make_input( $name, $value ) {
 		$clear_button['attributes']['title']   = __( 'Reset input', 'cloudinary' );
 		$clear_button['content']               = Utils::get_inline_svg( 'css/images/undo.svg', false ) . '<span>' . __( 'Reset', 'cloudinary' ) . '</span>';
 
-		$wrapper['children']['input']  = $input;
-		$wrapper['children']['button'] = $clear_button;
-		$wrapper['children']['label']  = $label;
-		$wrapper['children']['check']  = $check;
+		$wrapper['children']['input']   = $input;
+		$wrapper['children']['button']  = $clear_button;
+		$wrapper['children']['control'] = $control;
+		$wrapper['children']['label']   = $label;
 
 		return $wrapper;
 	}

php/ui/component/class-crops.php

@@ -78,6 +78,8 @@
 		align-items: center;
 		gap: 10px;
 		margin-bottom: 16px;
+		max-width: 400px;
+		flex-wrap: wrap;
 	}
 
 	.cld-ui-input.regular-text {
@@ -93,6 +95,28 @@
 		margin: 0;
 	}
 
+	// Medium size toggle (between mini and standard)
+	.cld-input-on-off-control.medium {
+		width: 25px;
+		height: 13px;
+		margin-right: 0;
+
+		.cld-input-on-off-control-slider::before {
+			height: 9px;
+			width: 9px;
+			left: 2px;
+			bottom: 2px;
+		}
+
+		input:checked + .cld-input-on-off-control-slider::before {
+			transform: translateX(12px);
+		}
+	}
+
+	.cld-input-on-off-control-label {
+		font-size: 12px;
+	}
+
 	.button.clear-crop-input {
 		display: inline-flex;
 		align-items: center;