CHANGED: Check boxes now is FONT, not SVG or anything
REMOVED: Labels for switch and radio (because it's useless and make code more difficult)
This commit is contained in:
@@ -210,22 +210,16 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
|
||||
}
|
||||
|
||||
div.m3.m3-radio {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
div.m3.m3-radio > span {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
div.m3.m3-radio > span > span.m3-checkbox-ripple-layer, div.m3.m3-radio > span span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
|
||||
z-index: 5;
|
||||
}
|
||||
div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > span.m3.m3-radio-state-layer {
|
||||
width: 40px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
@@ -233,7 +227,7 @@ div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
|
||||
pointer-events: none;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -242,47 +236,47 @@ div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke-opacity: 38%;
|
||||
stroke: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 38%;
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 0;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 1;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > span svg {
|
||||
div.m3.m3-radio svg {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
z-index: 10;
|
||||
@@ -290,17 +284,17 @@ div.m3.m3-radio > span svg {
|
||||
pointer-events: none;
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
div.m3.m3-radio > span svg > circle {
|
||||
div.m3.m3-radio svg > circle {
|
||||
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio > span svg > circle.m3-radio-outline {
|
||||
div.m3.m3-radio svg > circle.m3-radio-outline {
|
||||
r: 9px;
|
||||
fill: black;
|
||||
fill-opacity: 0;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio > span svg > circle.m3-radio-state {
|
||||
div.m3.m3-radio svg > circle.m3-radio-state {
|
||||
r: 5px;
|
||||
}
|
||||
|
||||
@@ -556,42 +550,37 @@ div.m3.m3-switch {
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
div.m3.m3-switch > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
div.m3.m3-switch > span > svg {
|
||||
div.m3.m3-switch > svg {
|
||||
overflow: visible;
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
div.m3.m3-switch > span > svg > g {
|
||||
div.m3.m3-switch > svg > g {
|
||||
transform: translate(11.5%, 81%);
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
div.m3.m3-switch > span > svg > g > text {
|
||||
div.m3.m3-switch > svg > g > text {
|
||||
font-family: Material-Symbols-Outlined-Regular;
|
||||
font-size: 20px;
|
||||
}
|
||||
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
cy: 50%;
|
||||
cx: 16px;
|
||||
}
|
||||
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
|
||||
r: 20px;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
||||
r: 8px;
|
||||
}
|
||||
div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
|
||||
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
stroke-width: 2px;
|
||||
border-radius: 16px;
|
||||
@@ -599,7 +588,7 @@ div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3 {
|
||||
div.m3.m3-switch > input.m3 {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
opacity: 0 !important;
|
||||
@@ -608,98 +597,98 @@ div.m3.m3-switch > span > input.m3 {
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:disabled {
|
||||
div.m3.m3-switch > input.m3:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-outline);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > g {
|
||||
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
|
||||
transform: translate(50%, 81%);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
||||
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
||||
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-surface);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > span > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
|
||||
r: 12px;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||
opacity: 0;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
cx: calc(100% - 16px);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
||||
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
||||
opacity: 0;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:checked, div.m3.m3-switch > span > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
|
||||
r: 14px;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 38%;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-primary-container);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-primary);
|
||||
fill-opacity: 8%;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 8%;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-primary);
|
||||
fill-opacity: 12%;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 12%;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
|
||||
rx: 16px;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
stroke-width: 0;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:not(:checked), div.m3.m3-switch > span > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
|
||||
x: 1px;
|
||||
y: 1px;
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
|
||||
stroke: var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
|
||||
stroke: var(--md-sys-color-primary);
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:disabled + svg > g > text.m3 {
|
||||
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked:disabled + svg > g > text.m3 {
|
||||
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
|
||||
transform: translateX(38.5%);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
div.m3.m3-switch > span > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
@@ -742,6 +731,8 @@ label.m3.m3-checkbox-label {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
@@ -753,88 +744,98 @@ label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer {
|
||||
z-index: 20;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
border-radius: 0.14rem;
|
||||
box-sizing: content-box;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
|
||||
transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
|
||||
background: var(--md-sys-color-on-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
|
||||
background: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) {
|
||||
opacity: 38%;
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0;
|
||||
outline-offset: -0.14rem;
|
||||
border-radius: 0.14rem;
|
||||
outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox::after {
|
||||
line-height: 1.125rem;
|
||||
line-height: 24px;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
font-size: 24px;
|
||||
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
|
||||
content: "check_box_outline_blank";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
|
||||
content: "indeterminate_check_box";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:hover {
|
||||
outline-color: var(--md-sys-color-on-surface);
|
||||
input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
|
||||
content: "check_box";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user