extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-01 19:49: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-14 13:35:55 +00:00
parent 31127070e4
commit ab9ea26934
1 changed files with 15 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/css/form.css
View File

@ -426,31 +426,6 @@ input[type="radio"]:checked:disabled:focus+label .label-icon {
box-shadow: none;
}
input[type="checkbox"]+label .label-icon:before {
content: "";
border-right: 0.2em solid rgb(var(--form-icon-symbol));
border-bottom: 0.2em solid rgb(var(--form-icon-symbol));
box-sizing: content-box;
top: 50%;
left: 50%;
width: 15%;
height: 35%;
transform-origin: left top;
transform: scale(0) rotate(45deg) translate(-55%, -60%);
display: block;
position: absolute;
z-index: 2;
transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
}
input[type="checkbox"]:checked+label .label-icon:before {
transform: scale(1) rotate(45deg) translate(-55%, -60%);
}
input[type="checkbox"]:checked:active+label .label-icon:before {
transform: scale(0.8) rotate(45deg) translate(-55%, -60%);
}
input[type="checkbox"]+label .label-icon:after,
input[type="radio"]+label .label-icon:after {
content: "";
@ -464,35 +439,43 @@ input[type="radio"]+label .label-icon:after {
transform: scale(0.7);
transform-origin: center;
z-index: 3;
transition: background-color 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 {
border-radius: 0.25em;
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 {
border-radius: 70%;
border-radius: 50%;
}
input[type="checkbox"]:focus+label .label-icon:after,
input[type="radio"]:focus+label .label-icon:after {
transform: scale(0.6);
}
input[type="checkbox"]:active+label .label-icon:after,
input[type="radio"]:active+label .label-icon:after {
transform: scale(0.6);
background-color: rgb(var(--form-icon-symbol-active));
transition: none;
}
input[type="checkbox"]:checked+label .label-icon:after,
input[type="radio"]:checked+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol-active));
border-radius: 50%;
}
input[type="checkbox"]:checked+label .label-icon:after {
transform: scale(0);
border-radius: 50%;
transform: scale(0.2);
/* 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.3);
transform: scale(0.2);
}
input[type="checkbox"]:disabled+label .label-icon:after,