Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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>
This commit is contained in:
Jo-Philipp Wich 2023-07-26 15:46:06 +02:00
parent 6069f4f228
commit 7cded1f8bb
1 changed files with 53 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
View file

@ -934,70 +934,71 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
background: var(--danger-color); background: var(--danger-color);
} }
.cbi-checkbox { input[type="checkbox"],
position: relative; input[type="radio"] {
} --bd-color: var(--main-dark-color);
--fg-color: var(--main-dark-color);
.cbi-checkbox input[type="checkbox"] { appearance: none;
position: absolute; -webkit-appearance: none;
z-index: 10;
-webkit-appearence: button;
height: 1.3em;
width: 1.3em;
opacity: 0;
cursor: pointer;
}
.cbi-checkbox input[type="checkbox"] + label {
position: relative;
display: inline-block;
width: 1.3em;
height: 1.3em;
vertical-align: text-top;
}
.cbi-checkbox input[type="checkbox"] + label::before {
content: "\0a";
height: 1em;
width: 1em; width: 1em;
box-shadow: 0 0 2px var(--main-dark-color); height: 1em;
color: var(--fg-color);
position: relative;
display: inline-block; display: inline-block;
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; cursor: pointer;
background: none;
border: none;
} }
.cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before { input[type="checkbox"]::before,
box-shadow: 0 0 2px var(--danger-color); input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after {
position: absolute;
content: "";
margin: .15em 0;
} }
.cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after { input[type="checkbox"]::before,
background: var(--danger-color); input[type="radio"]::before {
top: 0;
left: 0;
width: 1em;
height: 1em;
box-shadow: 0 0 2px var(--bd-color) !important;
border-radius: .25em;
} }
.cbi-checkbox input[type="checkbox"][disabled] + label::before, input[type="radio"],
.cbi-checkbox input[type="checkbox"][disabled] + label::after { input[type="radio"]::before {
pointer-events: none; border-radius: 50%;
opacity: .6;
} }
.cbi-checkbox input[type="checkbox"][disabled] { input[type="checkbox"]::after,
pointer-events: none; input[type="radio"]::after {
top: .15em;
left: .15em;
width: .7em;
height: .7em;
}
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);
}
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>");
}
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]), 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; margin: .125em .125em calc(.125em + 2px) calc(-.125em - .25em) !important;
} }
input[type="checkbox"] {
height: 1em;
vertical-align: middle;
-webkit-appearance: checkbox;
}
select { select {
padding: .1rem 0; padding: .1rem 0;
-webkit-appearance: menulist; -webkit-appearance: menulist;