mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-11-15 07:11:36 +08:00
style(next): fall back to the user agent's default check boxes and radio buttons if the ":has" selector is not supported
This commit is contained in:
Adorian Doran
parent
41ef47576d
commit
97295e959b
@ -183,135 +183,141 @@ optgroup {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* Check box & radio button commons */
|
||||
/* Check boxes and radio buttons */
|
||||
|
||||
/* The parent label */
|
||||
label.tn-radio,
|
||||
label.tn-checkbox {
|
||||
--box-size: 1em;
|
||||
--box-label-gap: .5em;
|
||||
@supports selector(label:has(*)) {
|
||||
|
||||
position: relative;
|
||||
padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
|
||||
user-select: none;
|
||||
/* Check box & radio button commons */
|
||||
|
||||
}
|
||||
/* The parent label */
|
||||
label.tn-radio,
|
||||
label.tn-checkbox {
|
||||
--box-size: 1em;
|
||||
--box-label-gap: .5em;
|
||||
|
||||
/* The original input */
|
||||
label.tn-radio > input[type="radio"],
|
||||
label.tn-checkbox > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--box-size);
|
||||
height: 100%;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
position: relative;
|
||||
padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
|
||||
user-select: none;
|
||||
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after,
|
||||
label.tn-checkbox::before,
|
||||
label.tn-checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
translate: 0 -50%;
|
||||
width: var(--box-size);
|
||||
height: var(--box-size);
|
||||
}
|
||||
}
|
||||
|
||||
label.tn-radio:has(>input[type="radio"]:focus-visible)::before,
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
/* The original input */
|
||||
label.tn-radio > input[type="radio"],
|
||||
label.tn-checkbox > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--box-size);
|
||||
height: 100%;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Check boxes */
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after,
|
||||
label.tn-checkbox::before,
|
||||
label.tn-checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
translate: 0 -50%;
|
||||
width: var(--box-size);
|
||||
height: var(--box-size);
|
||||
}
|
||||
|
||||
/* The check box background */
|
||||
label.tn-checkbox::before {
|
||||
border-radius: 3px;
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
label.tn-radio:has(>input[type="radio"]:focus-visible)::before,
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
/* Check boxes */
|
||||
|
||||
@keyframes checkbox-checked {
|
||||
from {
|
||||
transform: scale(2);
|
||||
} to {
|
||||
/* The check box background */
|
||||
label.tn-checkbox::before {
|
||||
border-radius: 3px;
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
|
||||
@keyframes checkbox-checked {
|
||||
from {
|
||||
transform: scale(2);
|
||||
} to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* The tick mark */
|
||||
label.tn-checkbox::after {
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
|
||||
mask-position: center center;
|
||||
mask-size: .95em;
|
||||
background-color: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: transform 300ms ease-out,
|
||||
opacity 300ms linear;
|
||||
}
|
||||
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:checked)::after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity 100ms ease-in-out;
|
||||
animation: checkbox-checked 150ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* The tick mark */
|
||||
label.tn-checkbox::after {
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
|
||||
mask-position: center center;
|
||||
mask-size: .95em;
|
||||
background-color: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: transform 300ms ease-out,
|
||||
opacity 300ms linear;
|
||||
}
|
||||
/* Radio buttons */
|
||||
|
||||
label.tn-checkbox:has(>input[type="checkbox"]:checked)::after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity 100ms ease-in-out;
|
||||
animation: checkbox-checked 150ms ease-out;
|
||||
}
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Radio buttons */
|
||||
/* The outer circle */
|
||||
label.tn-radio::before {
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
|
||||
/* The outer circle */
|
||||
label.tn-radio::before {
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
@keyframes radio-checked {
|
||||
from {
|
||||
transform: scale(1.5);
|
||||
} to {
|
||||
transform: scale(.5);
|
||||
}
|
||||
}
|
||||
|
||||
label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
/* The inner circle */
|
||||
label.tn-radio::after {
|
||||
background: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms linear,
|
||||
transform 300ms ease-in;
|
||||
}
|
||||
|
||||
@keyframes radio-checked {
|
||||
from {
|
||||
transform: scale(1.5);
|
||||
} to {
|
||||
label.tn-radio:has(>input[type="radio"]:checked)::after {
|
||||
transform: scale(.5);
|
||||
opacity: 1;
|
||||
transition: opacity 150ms linear;
|
||||
animation: radio-checked 200ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* The inner circle */
|
||||
label.tn-radio::after {
|
||||
background: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms linear,
|
||||
transform 300ms ease-in;
|
||||
}
|
||||
/* Disabled check boxes and radio buttons */
|
||||
|
||||
label.tn-radio:has(>input[type="radio"]:checked)::after {
|
||||
transform: scale(.5);
|
||||
opacity: 1;
|
||||
transition: opacity 150ms linear;
|
||||
animation: radio-checked 200ms ease-out;
|
||||
}
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::before,
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::after,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Disabled check boxes and radio buttons */
|
||||
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::before,
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::after,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user