From 7cded1f8bbbc85ea6ca57c515b9988130e85726f Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Wed, 26 Jul 2023 15:46:06 +0200 Subject: 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 --- .../htdocs/luci-static/openwrt2020/cascade.css | 99 ++++++++++------------ 1 file changed, 47 insertions(+), 52 deletions(-) (limited to 'themes/luci-theme-openwrt-2020/htdocs') 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,"); + -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,"); } -.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; -- cgit v1.2.3