From bef76a5727e7b9d5419ce0daadabbc327eb2b611 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Fri, 14 Mar 2025 02:35:26 +0000
Subject: [PATCH] Convert checkboxes to ACF-style toggle switches: - Add
sliding toggle switch UI - Implement smooth transitions - Add hover and focus
states - Improve accessibility - Update HTML structure for toggle switches
---
admin/css/wpa-superstar-admin.css | 94 +++++++++++++++++++++----------
admin/settings.php | 45 +++++++++------
2 files changed, 90 insertions(+), 49 deletions(-)
diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css
index f69a978..1b8e975 100644
--- a/admin/css/wpa-superstar-admin.css
+++ b/admin/css/wpa-superstar-admin.css
@@ -33,7 +33,7 @@
margin-bottom: -1px;
}
-/* ACF-style checkbox toggles */
+/* ACF-style toggle switches */
.wpa-superstar-toggle {
margin: 15px 0;
padding: 15px;
@@ -53,39 +53,71 @@
cursor: pointer;
}
-.wpa-superstar-toggle input[type="checkbox"] {
- margin: 0 8px 0 0;
- border: 1px solid #7e8993;
- border-radius: 4px;
- background: #fff;
- color: #555;
- clear: none;
- cursor: pointer;
- display: inline-block;
- line-height: 0;
- height: 16px;
- width: 16px;
- min-width: 16px;
- outline: 0;
- padding: 0 !important;
- text-align: center;
- vertical-align: middle;
- -webkit-appearance: none;
- box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
- transition: .05s border-color ease-in-out;
+.wpa-superstar-toggle .description {
+ margin: 5px 0 0 44px;
+ color: #666;
}
-.wpa-superstar-toggle input[type="checkbox"]:checked {
- background: #2271b1;
+/* Toggle Switch Container */
+.wpa-toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 36px;
+ height: 20px;
+ margin-right: 8px;
+}
+
+/* Hide default checkbox */
+.wpa-toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ margin: 0;
+}
+
+/* The slider */
+.wpa-toggle-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccd0d4;
+ transition: .3s;
+ border-radius: 20px;
+ border: 2px solid #ccd0d4;
+}
+
+/* Slider knob */
+.wpa-toggle-slider:before {
+ position: absolute;
+ content: "";
+ height: 12px;
+ width: 12px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ transition: .3s;
+ border-radius: 50%;
+}
+
+/* Active/checked state */
+.wpa-toggle-switch input:checked + .wpa-toggle-slider {
+ background-color: #2271b1;
border-color: #2271b1;
}
-.wpa-superstar-toggle input[type="checkbox"]:checked::before {
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23fff" d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"/></svg>');
- float: left;
- display: inline-block;
- vertical-align: middle;
- width: 16px;
- height: 16px;
- margin: -1px 0 0 -1px;
+.wpa-toggle-switch input:checked + .wpa-toggle-slider:before {
+ transform: translateX(16px);
+}
+
+/* Focus state */
+.wpa-toggle-switch input:focus + .wpa-toggle-slider {
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
+}
+
+/* Hover state */
+.wpa-toggle-switch:hover .wpa-toggle-slider {
+ border-color: #2271b1;
}
\ No newline at end of file
diff --git a/admin/settings.php b/admin/settings.php
index 5d4a942..652cb5e 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -56,12 +56,15 @@ function wpa_superstar_settings_page() {
<?php if ( $active_tab == 'general' ) : ?>
<div class="wpa-superstar-toggle">
<label for="wpa_superstar_lazy_load">
- <input type="checkbox"
- id="wpa_superstar_lazy_load"
- name="wpa_superstar_lazy_load"
- value="1"
- <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?>
- />
+ <div class="wpa-toggle-switch">
+ <input type="checkbox"
+ id="wpa_superstar_lazy_load"
+ name="wpa_superstar_lazy_load"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?>
+ />
+ <span class="wpa-toggle-slider"></span>
+ </div>
<?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?>
</label>
<p class="description">
@@ -71,12 +74,15 @@ function wpa_superstar_settings_page() {
<?php elseif ( $active_tab == 'advanced' ) : ?>
<div class="wpa-superstar-toggle">
<label for="wpa_superstar_minify_css">
- <input type="checkbox"
- id="wpa_superstar_minify_css"
- name="wpa_superstar_minify_css"
- value="1"
- <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?>
- />
+ <div class="wpa-toggle-switch">
+ <input type="checkbox"
+ id="wpa_superstar_minify_css"
+ name="wpa_superstar_minify_css"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?>
+ />
+ <span class="wpa-toggle-slider"></span>
+ </div>
<?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?>
</label>
<p class="description">
@@ -86,12 +92,15 @@ function wpa_superstar_settings_page() {
<div class="wpa-superstar-toggle">
<label for="wpa_superstar_minify_js">
- <input type="checkbox"
- id="wpa_superstar_minify_js"
- name="wpa_superstar_minify_js"
- value="1"
- <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?>
- />
+ <div class="wpa-toggle-switch">
+ <input type="checkbox"
+ id="wpa_superstar_minify_js"
+ name="wpa_superstar_minify_js"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?>
+ />
+ <span class="wpa-toggle-slider"></span>
+ </div>
<?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?>
</label>
<p class="description">