luci-theme-openwrt-2020: import bootstrap radio/checkbox styling rules

Import the radio and checkbox styling rules from the default Bootstrap
theme and adapt colors and margins to the OpenWrt 2020 one.

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

1 files changed, 47 insertions, 52 deletions

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 ff3b909178..bf7a7a391d 100644
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -934,70 +934,71 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
 	background: var(--danger-color);
 }
 
-.cbi-checkbox {
-	position: relative;
-}
+input[type="checkbox"],
+input[type="radio"] {
+	--bd-color: var(--main-dark-color);
+	--fg-color: var(--main-dark-color);
 
-.cbi-checkbox input[type="checkbox"] {
-	position: absolute;
-	z-index: 10;
-	-webkit-appearence: button;
-	height: 1.3em;
-	width: 1.3em;
-	opacity: 0;
+	appearance: none;
+	-webkit-appearance: none;
+	width: 1em;
+	height: 1em;
+	color: var(--fg-color);
+	position: relative;
+	display: inline-block;
 	cursor: pointer;
+	background: none;
+	border: none;
 }
 
-.cbi-checkbox input[type="checkbox"] + label {
-	position: relative;
-	display: inline-block;
-	width: 1.3em;
-	height: 1.3em;
-	vertical-align: text-top;
+input[type="checkbox"]::before,
+input[type="checkbox"]::after,
+input[type="radio"]::before,
+input[type="radio"]::after {
+	position: absolute;
+	content: "";
+	margin: .15em 0;
 }
 
-.cbi-checkbox input[type="checkbox"] + label::before {
-	content: "\0a";
-	height: 1em;
+input[type="checkbox"]::before,
+input[type="radio"]::before {
+	top: 0;
+	left: 0;
 	width: 1em;
-	box-shadow: 0 0 2px var(--main-dark-color);
-	display: inline-block;
+	height: 1em;
+	box-shadow: 0 0 2px var(--bd-color) !important;
 	border-radius: .25em;
-	margin: .15em 0;
-	position: absolute;
-	left: 0;
-	top: 0;
 }
 
-.cbi-checkbox input[type="checkbox"]:checked + label::after {
-	content: "\0a";
-	position: absolute;
-	display: inline-block;
-	background: var(--main-dark-color);
-	top: .35em;
-	left: .2em;
-	width: .6em;
-	height: .6em;
-	border-radius: .15em;
-	cursor: pointer;
+input[type="radio"],
+input[type="radio"]::before {
+	border-radius: 50%;
 }
 
-.cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before {
-	box-shadow: 0 0 2px var(--danger-color);
+input[type="checkbox"]::after,
+input[type="radio"]::after {
+	top: .15em;
+	left: .15em;
+	width: .7em;
+	height: .7em;
 }
 
-.cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after {
-	background: var(--danger-color);
+input[type="checkbox"]:checked::after,
+input[type="radio"]:checked::after {
+	--checkmark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='m2.5 7.4 7.5 7.5-2.5 2.4L0 10Zm15-5L20 4.9 7.5 17.3 5 15Z'/></svg>");
+	-webkit-mask: var(--checkmark-icon) center/cover no-repeat;
+	mask: var(--checkmark-icon) center/cover no-repeat;
+	background: var(--fg-color);
 }
 
-.cbi-checkbox input[type="checkbox"][disabled] + label::before,
-.cbi-checkbox input[type="checkbox"][disabled] + label::after {
-	pointer-events: none;
-	opacity: .6;
+input[type="radio"]:checked:after {
+	--checkmark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='7'/></svg>");
 }
 
-.cbi-checkbox input[type="checkbox"][disabled] {
-	pointer-events: none;
+input[type="checkbox"].cbi-input-invalid,
+input[type="radio"].cbi-input-invalid {
+	--bd-color: var(--danger-color);
+	--fg-color: var(--danger-color);
 }
 
 input:not([type]),
@@ -1050,12 +1051,6 @@ input[type="password"] + .btn, input[type="password"] + button {
 	margin: .125em .125em calc(.125em + 2px) calc(-.125em - .25em) !important;
 }
 
-input[type="checkbox"] {
-	height: 1em;
-	vertical-align: middle;
-	-webkit-appearance: checkbox;
-}
-
 select {
 	padding: .1rem 0;
 	-webkit-appearance: menulist;