luci-theme-openwrt-2020: properly handle invalid checkbox state

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index db2f3bbd5e32fcaea139ced2b5956a4ab0b763e4..36e6b9778fcabd92dad2de21d1fe767c9efb3cad 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -921,8 +921,18 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        background: var(--danger-color);
 }
 
+.cbi-checkbox {
+       position: relative;
+}
+
 .cbi-checkbox input[type="checkbox"] {
-       display: none;
+       position: absolute;
+       z-index: 10;
+       -webkit-appearence: button;
+       height: 1.3em;
+       width: 1.3em;
+       opacity: 0;
+       cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"] + label {
@@ -944,7 +954,6 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        position: absolute;
        left: 0;
        top: 0;
-       cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"]:checked + label::after {
@@ -960,6 +969,14 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        cursor: pointer;
 }
 
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before {
+       box-shadow: 0 0 2px var(--danger-color);
+}
+
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after {
+       background: var(--danger-color);
+}
+
 input:not([type]),
 input[type="text"],
 input[type="password"],