mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-30 03:54:15 +01:00
[design] improve form radio and checkbox
This commit is contained in:
zombieFox
parent
5490da85bc
commit
31127070e4
187
src/css/form.css
187
src/css/form.css
@ -368,6 +368,7 @@ input[type="radio"]:disabled:focus+label {
|
||||
|
||||
input[type="checkbox"]+label .label-icon,
|
||||
input[type="radio"]+label .label-icon {
|
||||
background-color: rgb(var(--form-icon));
|
||||
margin-right: 1em;
|
||||
width: var(--form-thumb-size);
|
||||
height: var(--form-thumb-size);
|
||||
@ -377,117 +378,139 @@ input[type="radio"]+label .label-icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
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: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: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:before,
|
||||
input[type="radio"]:checked+label .label-icon:before {
|
||||
border-color: rgb(var(--form-icon-checked));
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon:before {
|
||||
input[type="checkbox"]+label .label-icon {
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
input[type="radio"]+label .label-icon:before {
|
||||
input[type="radio"]+label .label-icon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
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));
|
||||
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 {
|
||||
background-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 {
|
||||
background-color: rgb(var(--form-icon-active));
|
||||
box-shadow: var(--form-focus-ring-accent);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-icon,
|
||||
input[type="radio"]:checked+label .label-icon {
|
||||
background-color: rgb(var(--form-icon-checked));
|
||||
}
|
||||
|
||||
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="checkbox"]:checked:disabled+label .label-icon,
|
||||
input[type="checkbox"]:checked:disabled:hover+label .label-icon,
|
||||
input[type="checkbox"]:checked: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,
|
||||
input[type="radio"]:checked:disabled+label .label-icon,
|
||||
input[type="radio"]:checked:disabled:hover+label .label-icon,
|
||||
input[type="radio"]:checked:disabled:focus+label .label-icon {
|
||||
background-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"]+label .label-icon:after,
|
||||
input[type="radio"]+label .label-icon:after {
|
||||
input[type="checkbox"]+label .label-icon:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
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: 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;
|
||||
width: 15%;
|
||||
height: 35%;
|
||||
transform-origin: left top;
|
||||
transform: rotate(0deg) translate(-54%, -58%);
|
||||
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:after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(-54%, -58%);
|
||||
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: "";
|
||||
background-color: rgb(var(--form-icon-symbol));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0.7);
|
||||
transform-origin: center;
|
||||
z-index: 3;
|
||||
transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon:after {
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
input[type="radio"]+label .label-icon:after {
|
||||
background-color: rgb(var(--form-icon-symbol));
|
||||
border-radius: 70%;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-icon:after,
|
||||
input[type="radio"]:active+label .label-icon:after {
|
||||
transform: scale(0.6);
|
||||
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%;
|
||||
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 {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label .label-icon:after {
|
||||
opacity: 1;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled+label .label-icon:before {
|
||||
border-color: rgb(var(--form-icon-symbol-disabled));
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled+label .label-icon:before {
|
||||
input[type="checkbox"]:disabled+label .label-icon:after,
|
||||
input[type="checkbox"]:disabled:hover+label .label-icon:after,
|
||||
input[type="checkbox"]:disabled:focus+label .label-icon:after,
|
||||
input[type="checkbox"]:disabled:active+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:focus+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));
|
||||
}
|
||||
|
||||
|
||||
@ -105,9 +105,10 @@
|
||||
--form-icon: var(--theme-gray-08);
|
||||
--form-icon-focus-hover: var(--theme-gray-18);
|
||||
--form-icon-active: var(--theme-style-text);
|
||||
--form-icon-disabled: var(--theme-gray-04);
|
||||
--form-icon-checked: var(--theme-style-text);
|
||||
--form-icon-symbol: var(--theme-gray-02);
|
||||
--form-icon-disabled: var(--theme-gray-04);
|
||||
--form-icon-symbol: var(--theme-gray-01);
|
||||
--form-icon-symbol-active: var(--theme-gray-01);
|
||||
--form-icon-symbol-disabled: var(--theme-gray-01);
|
||||
--form-placeholder: var(--theme-gray-06);
|
||||
--form-placeholder-focus-hover: var(--theme-gray-10);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user