extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-20 04:48:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form radio and checkbox

Browse Source
This commit is contained in:
zombieFox 2019-11-16 16:04:05 +00:00
parent 5a8be81835
commit 022dfb68a1
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/css/form.css
View File

@ -426,8 +426,8 @@ input[type="radio"]:checked:disabled:focus+label .label-icon {
box-shadow: none; box-shadow: none;
} }
input[type="checkbox"]+label .label-icon:after, input[type="checkbox"]+label .label-icon:before,
input[type="radio"]+label .label-icon:after { input[type="radio"]+label .label-icon:before {
content: ""; content: "";
background-color: rgb(var(--form-icon-symbol)); background-color: rgb(var(--form-icon-symbol));
width: 100%; width: 100%;
@ -438,44 +438,76 @@ input[type="radio"]+label .label-icon:after {
left: 0; left: 0;
transform: scale(0.7); transform: scale(0.7);
transform-origin: center; transform-origin: center;
z-index: 3; z-index: 2;
transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
/* transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast); */
} }
input[type="checkbox"]+label .label-icon:after { input[type="checkbox"]+label .label-icon:before {
border-radius: 0.1em; border-radius: 0.1em;
/* clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0); */
} }
input[type="radio"]+label .label-icon:after { input[type="radio"]+label .label-icon:before {
border-radius: 50%; border-radius: 50%;
} }
input[type="checkbox"]:focus+label .label-icon:after, input[type="checkbox"]:active+label .label-icon:before,
input[type="radio"]:focus+label .label-icon:after { input[type="radio"]:active+label .label-icon:before {
transform: scale(0.6);
}
input[type="checkbox"]:active+label .label-icon:after,
input[type="radio"]:active+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol-active)); background-color: rgb(var(--form-icon-symbol-active));
transition: none; transition: none;
} }
input[type="checkbox"]:checked+label .label-icon:after, input[type="checkbox"]:checked+label .label-icon:before,
input[type="radio"]:checked+label .label-icon:after { input[type="radio"]:checked+label .label-icon:before {
background-color: rgb(var(--form-icon-symbol-active)); background-color: rgb(var(--form-icon-symbol-active));
border-radius: 50%;
}
input[type="checkbox"]:checked+label .label-icon:before {
transform: scale(0);
}
input[type="radio"]:checked+label .label-icon:before {
transform: scale(0.2);
}
input[type="checkbox"]:disabled+label .label-icon:before,
input[type="checkbox"]:disabled:hover+label .label-icon:before,
input[type="checkbox"]:disabled:focus+label .label-icon:before,
input[type="checkbox"]:disabled:active+label .label-icon:before,
input[type="checkbox"]:checked:disabled+label .label-icon:before,
input[type="checkbox"]:checked:disabled:hover+label .label-icon:before,
input[type="checkbox"]:checked:disabled:focus+label .label-icon:before,
input[type="checkbox"]:checked:disabled:active+label .label-icon:before,
input[type="radio"]:disabled+label .label-icon:before,
input[type="radio"]:disabled:hover+label .label-icon:before,
input[type="radio"]:disabled:focus+label .label-icon:before,
input[type="radio"]:disabled:active+label .label-icon:before,
input[type="radio"]:checked:disabled+label .label-icon:before,
input[type="radio"]:checked:disabled:hover+label .label-icon:before,
input[type="radio"]:checked:disabled:focus+label .label-icon:before,
input[type="radio"]:checked:disabled:active+label .label-icon:before {
background-color: rgb(var(--form-icon-symbol-disabled));
}
input[type="checkbox"]+label .label-icon:after {
content: "";
background-color: rgb(var(--form-icon-symbol));
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform: scale(0);
transform-origin: center;
z-index: 2;
transition: transform var(--layout-timing-extra-fast);
clip-path: polygon(7% 56%, 37% 86%, 95% 27%, 84% 16%, 37% 64%, 18% 45%);
} }
input[type="checkbox"]:checked+label .label-icon:after { input[type="checkbox"]:checked+label .label-icon:after {
border-radius: 50%; background-color: rgb(var(--form-icon-symbol-active));
transform: scale(0.2); transform: scale(0.8);
/* clip-path: polygon(19% 40%, 5% 54%, 41% 89%, 99% 32%, 84% 18%, 40% 60%); */
}
input[type="radio"]:checked+label .label-icon:after {
transform: scale(0.2);
} }
input[type="checkbox"]:disabled+label .label-icon:after, input[type="checkbox"]:disabled+label .label-icon:after,
@ -485,15 +517,7 @@ input[type="checkbox"]:disabled:active+label .label-icon:after,
input[type="checkbox"]:checked:disabled+label .label-icon:after, input[type="checkbox"]:checked:disabled+label .label-icon:after,
input[type="checkbox"]:checked:disabled:hover+label .label-icon:after, input[type="checkbox"]:checked:disabled:hover+label .label-icon:after,
input[type="checkbox"]:checked:disabled:focus+label .label-icon:after, input[type="checkbox"]:checked:disabled:focus+label .label-icon:after,
input[type="checkbox"]:checked:disabled:active+label .label-icon:after, input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
input[type="radio"]:disabled+label .label-icon:after,
input[type="radio"]:disabled:hover+label .label-icon:after,
input[type="radio"]:disabled:focus+label .label-icon:after,
input[type="radio"]:disabled:active+label .label-icon:after,
input[type="radio"]:checked:disabled+label .label-icon:after,
input[type="radio"]:checked:disabled:hover+label .label-icon:after,
input[type="radio"]:checked:disabled:focus+label .label-icon:after,
input[type="radio"]:checked:disabled:active+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol-disabled)); background-color: rgb(var(--form-icon-symbol-disabled));
} }