extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-14 22:58:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form radio and checkbox scroll performace

Browse Source
This commit is contained in:
zombieFox 2019-11-13 17:25:17 +00:00
parent 5dfe1b941d
commit 7ec8de47f2
1 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/css/form.css
View File

@ -368,11 +368,7 @@ input[type="radio"]:disabled:focus+label {
input[type="checkbox"]+label .label-icon,
input[type="radio"]+label .label-icon {
content: "";
margin-right: 1em;
border-style: solid;
border-width: var(--layout-line-width);
border-color: rgb(var(--form-icon));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
position: relative;
@ -380,95 +376,118 @@ input[type="radio"]+label .label-icon {
display: block;
flex-grow: 0;
flex-shrink: 0;
z-index: 1;
}
input[type="checkbox"]+label .label-icon:before,
input[type="radio"]+label .label-icon:before {
content: "";
border-style: solid;
border-width: var(--layout-line-width);
border-color: rgb(var(--form-icon));
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 2;
transition: border-color var(--layout-timing-extra-fast), border-width var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}
input[type="checkbox"]:focus+label .label-icon,
input[type="checkbox"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon {
input[type="checkbox"]:focus+label .label-icon:before,
input[type="checkbox"]:hover+label .label-icon:before,
input[type="radio"]:focus+label .label-icon:before,
input[type="radio"]:hover+label .label-icon:before {
border-color: rgb(var(--form-icon-focus-hover));
box-shadow: var(--form-hover-ring);
}
input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon {
input[type="checkbox"]:active+label .label-icon:before,
input[type="radio"]:active+label .label-icon:before {
border-color: rgb(var(--form-icon-active));
box-shadow: var(--form-focus-ring-accent);
}
input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
input[type="checkbox"]:checked+label .label-icon:before,
input[type="radio"]:checked+label .label-icon:before {
border-color: rgb(var(--form-icon-checked));
}
input[type="checkbox"]+label .label-icon {
input[type="checkbox"]+label .label-icon:before {
border-radius: 0.25em;
}
input[type="radio"]+label .label-icon {
input[type="radio"]+label .label-icon:before {
border-radius: 50%;
}
input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
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="radio"]:disabled+label .label-icon:before,
input[type="radio"]:disabled:hover+label .label-icon:before,
input[type="radio"]:disabled:focus+label .label-icon:before {
border-color: rgb(var(--form-icon-disabled));
box-shadow: none;
}
input[type="checkbox"]:checked+label .label-icon:before,
input[type="radio"]:checked+label .label-icon:before {
border-top-width: calc(var(--form-thumb-size) / 2);
border-bottom-width: calc(var(--form-thumb-size) / 2);
border-left-width: calc(var(--form-thumb-size) / 2);
border-right-width: calc(var(--form-thumb-size) / 2);
}
input[type="checkbox"]:disabled+label .label-icon,
input[type="checkbox"]:disabled:hover+label .label-icon,
input[type="checkbox"]:disabled:focus+label .label-icon,
input[type="radio"]:disabled+label .label-icon,
input[type="radio"]:disabled:hover+label .label-icon,
input[type="radio"]:disabled:focus+label .label-icon {
border-color: rgb(var(--form-icon-disabled));
box-shadow: none;
}
input[type="checkbox"]+label .label-icon:after,
input[type="radio"]+label .label-icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
opacity: 0;
transition: opacity var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast), transform var(--layout-timing-fast);
z-index: 3;
transition: transform var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
}
input[type="checkbox"]+label .label-icon:after {
border-right: calc(var(--layout-line-width) / 2) solid rgb(var(--form-icon-symbol));
border-bottom: calc(var(--layout-line-width) / 2) solid rgb(var(--form-icon-symbol));
width: calc(var(--form-thumb-size) / 4);
height: calc(var(--form-thumb-size) / 2);
transform: translate(-50%, -50%) rotate(0deg);
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: 0.2em;
height: 0.5em;
opacity: 0;
transform-origin: left top;
transform: rotate(0deg) translate(-54%, -58%);
}
input[type="checkbox"]:checked+label .label-icon:after {
transform: translate(-45%, -60%) rotate(45deg);
opacity: 1;
transform: rotate(45deg) translate(-54%, -58%);
}
input[type="radio"]+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol));
border-radius: 50%;
width: calc(var(--form-thumb-size) / 5);
height: calc(var(--form-thumb-size) / 5);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 0.25em;
height: 0.25em;
transform: translate(-54%, -58%);
opacity: 0;
transition: opacity var(--layout-timing-extra-fast);
}
input[type="checkbox"]:checked+label .label-icon:after,
input[type="radio"]:checked+label .label-icon:after {
opacity: 1;
}
input[type="checkbox"]:disabled+label .label-icon:after {
input[type="checkbox"]:disabled+label .label-icon:before {
border-color: rgb(var(--form-icon-symbol-disabled));
}
input[type="radio"]:disabled+label .label-icon:after {
input[type="radio"]:disabled+label .label-icon:before {
background-color: rgb(var(--form-icon-symbol-disabled));
}