doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: Switch now is SVG 

RENAMING: check-box-skeleton -> check-box-layout
This commit is contained in:
doryan04 2024-01-31 21:55:53 +04:00
parent c91387e45a
commit 945cdf5202
14 changed files with 463 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/layout.tsx
View File

@ -1,13 +1,20 @@
import "../src/styles/generics.css" import "../src/styles/generics.css"
import "../src/styles/button.css" import "../src/styles/button.css"
import "../src/styles/ripple.css" import "../src/styles/ripple.css"
import {Metadata} from "next"; import {Metadata, Viewport} from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Create Next App', title: 'Create Next App',
description: 'Generated by create next app', description: 'Generated by create next app',
} }
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
}
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {

2
src/primitive-components/checkbox-layout/check-box-skeleton.tsx → src/primitive-components/checkbox-layout/check-box-layout.tsx
View File

@ -3,7 +3,7 @@
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'; import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
import {CheckboxLayoutProps} from "./checkbox-layout.types"; import {CheckboxLayoutProps} from "./checkbox-layout.types";
export const CheckBoxSkeleton = forwardRef( export const CheckBoxLayout = forwardRef(
function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element { function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {

4
src/primitive-components/checkbox/checkbox.tsx
View File

@ -1,7 +1,7 @@
import {RippleArea} from "../ripple/ripple-area"; import {RippleArea} from "../ripple/ripple-area";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton"; import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react"; import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
/** /**
@ -30,7 +30,7 @@ export const Checkbox = forwardRef(
return ( return (
<label {...events} <label {...events}
className={classes}> className={classes}>
<CheckBoxSkeleton {...props} <CheckBoxLayout {...props}
ref={checkboxRef} ref={checkboxRef}
indeterminate={indeterminate} indeterminate={indeterminate}
type={"checkbox"}/> type={"checkbox"}/>

4
src/primitive-components/radio/radio.tsx
View File

@ -1,7 +1,7 @@
import {RippleArea} from "../ripple/ripple-area"; import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react"; import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton"; import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
/** /**
@ -22,7 +22,7 @@ export const Radio = forwardRef(
return ( return (
<label {...events} <label {...events}
className={classes}> className={classes}>
<CheckBoxSkeleton {...props} <CheckBoxLayout {...props}
ref={ref} ref={ref}
type={"radio"}/> type={"radio"}/>
<span className={"m3 m3-radio-state-layer"}/> <span className={"m3 m3-radio-state-layer"}/>

37
src/primitive-components/switch/switch.tsx
View File

@ -1,6 +1,6 @@
import {forwardRef} from "react"; import React, {ForwardedRef, forwardRef} from "react";
import {switchMainProps} from "./switch.types"; import {switchMainProps} from "./switch.types";
import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton"; import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
/** /**
* Switch component * Switch component
@ -8,17 +8,32 @@ import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
*/ */
export const Switch = forwardRef( export const Switch = forwardRef(
({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => (
({icon, disabled, selected = false, ...props} : switchMainProps, ref) => ( <div className={"m3 m3-switch-exp"} ref={ref}>
<label> <CheckBoxLayout {...props}
<CheckBoxSkeleton {...props}
ref={ref}
data-icon={icon}
type={"checkbox"} type={"checkbox"}
disabled={disabled} disabled={disabled}
typeInput={"switch"} className={`m3 ${props.className ?? ""}`.trimEnd()}/>
data-selected={selected}/> <svg>
</label> <rect className={"m3 m3-switch-track"}/>
<circle className={"m3 m3-switch-handler"}/>
<circle className={"m3 m3-switch-handler-state-layer"}/>
<g>
{
icon && !selected &&
<text className={"m3 m3-icon-unchecked"}>
close
</text>
}
{
icon &&
<text className={"m3 m3-icon-checked"}>
check
</text>
}
</g>
</svg>
</div>
) )
) )

22
src/styles/checkbox.css
View File

@ -7,7 +7,7 @@ label.m3.m3-checkbox-label {
} }
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@ -18,8 +18,8 @@ span.m3.m3-checkbox-ripple-layer {
contain: content; contain: content;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
} }
input[type=checkbox].m3.m3-checkbox { input[type=checkbox].m3.m3-checkbox {
@ -29,12 +29,12 @@ input[type=checkbox].m3.m3-checkbox {
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
z-index: 10; z-index: 10;
width: 18px; width: 1.125rem;
height: 18px; height: 1.125rem;
margin: 0; margin: 0;
border-radius: 2px; outline-offset: -0.14rem;
outline-offset: -2px; border-radius: 0.14rem;
outline: 2px solid var(--md-sys-color-on-surface-variant); outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); 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)) { input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
@ -50,17 +50,17 @@ input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].
} }
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) { input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
outline-color: var(--md-sys-color-on-surface); 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) { input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
background-color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-on-surface);
} }
input[type=checkbox].m3.m3-checkbox::after { input[type=checkbox].m3.m3-checkbox::after {
line-height: 18px; line-height: 1.125rem;
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 1.125rem;
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-checkbox:checked::after { input[type=checkbox].m3.m3-checkbox:checked::after {

20
src/styles/checkbox.sass
View File

@ -10,8 +10,8 @@ span.m3.m3-checkbox-ripple-layer
contain: content contain: content
border-radius: 50% border-radius: 50%
position: absolute position: absolute
width: 40px width: 2.5rem
height: 40px height: 2.5rem
input[type="checkbox"].m3.m3-checkbox input[type="checkbox"].m3.m3-checkbox
appearance: none appearance: none
@ -20,12 +20,12 @@ input[type="checkbox"].m3.m3-checkbox
justify-content: center justify-content: center
box-sizing: content-box box-sizing: content-box
z-index: 10 z-index: 10
width: 18px width: 1.125rem
height: 18px height: 1.125rem
margin: 0 margin: 0
border-radius: 2px outline-offset: -.14rem
outline-offset: -2px border-radius: .14rem
outline: 2px solid var(--md-sys-color-on-surface-variant) outline: .14rem solid var(--md-sys-color-on-surface-variant)
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
@ -42,17 +42,17 @@ input[type="checkbox"].m3.m3-checkbox
&:disabled &:disabled
&:is(:hover, &) &:is(:hover, &)
opacity: 38% opacity: 38%
outline-color: var(--md-sys-color-on-surface) border: 2px solid var(--md-sys-color-on-surface)
&:checked:is(:hover, &) &:checked:is(:hover, &)
opacity: 38% opacity: 38%
background-color: var(--md-sys-color-on-surface) background-color: var(--md-sys-color-on-surface)
&::after &::after
line-height: 18px line-height: 1.125rem
font-family: Material-Symbols-Outlined-Regular, sans-serif font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 700 font-weight: 700
font-size: 18px font-size: 1.125rem
color: var(--md-sys-color-on-primary) color: var(--md-sys-color-on-primary)
&:checked::after &:checked::after

267
src/styles/generics.css
View File

@ -218,7 +218,7 @@ label.m3.m3-radio-label {
} }
label.m3.m3-radio-label > span.m3.m3-radio-state-layer { label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@ -523,145 +523,154 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
} }
input[type=checkbox].m3.m3-switch { div.m3.m3-switch-exp {
transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin: 4px;
box-sizing: content-box;
display: flex; display: flex;
position: relative;
align-items: center;
width: 52px;
height: 32px;
appearance: none;
padding: 2px 2px 2px 6px;
border-radius: 16px;
border: 2px solid var(--md-sys-color-outline);
background-color: var(--md-sys-color-surface-container-high);
}
input[type=checkbox].m3.m3-switch:disabled {
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);
}
input[type=checkbox].m3.m3-switch:checked {
border: 2px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-primary);
}
input[type=checkbox].m3.m3-switch::after {
transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 9;
position: absolute;
display: flex;
content: "";
height: 40px;
width: 40px;
left: -6px;
border-radius: 50%;
}
input[type=checkbox].m3.m3-switch:checked::after {
transform: translateX(50%);
}
input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {
transform-origin: center;
}
input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; width: 52px;
font-weight: 500; height: 32px;
font-size: 12px;
line-height: 12px;
} }
input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before { div.m3.m3-switch-exp > svg {
content: "done" !important; overflow: visible;
color: var(--md-sys-color-on-primary-container); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
} }
@media (prefers-color-scheme: light) { div.m3.m3-switch-exp > svg > g {
input[type=checkbox].m3.m3-switch[data-icon=true]::before { transform: translate(11.5%, 81%);
color: var(--md-sys-color-on-primary); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
color: var(--md-sys-color-surface-container-highest);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
} }
@media (prefers-color-scheme: dark) { div.m3.m3-switch-exp > svg > g > text {
input[type=checkbox].m3.m3-switch[data-icon=true]::before { font-family: Material-Symbols-Outlined-Regular;
color: var(--md-sys-color-surface-container-high); font-size: 20px;
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
color: var(--md-sys-color-surface-container-highest);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
}
} }
input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
transform: scale(150%); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
content: "close"; cy: 50%;
cx: 16px;
} }
input[type=checkbox].m3.m3-switch::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
z-index: 10; r: 20px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); fill-opacity: 0;
content: "";
display: flex;
height: 16px;
width: 16px;
border-radius: 50%;
background-color: var(--md-sys-color-outline);
} }
input[type=checkbox].m3.m3-switch:checked::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
opacity: 1; r: 8px;
transform: translateX(125%) scale(150%);
background-color: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-switch:hover:checked::after { div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
transform: translateX(50%); transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); stroke-width: 2px;
border-radius: 16px;
rx: 15px;
width: 50px;
height: 30px;
} }
input[type=checkbox].m3.m3-switch:hover::after { div.m3.m3-switch-exp > input.m3 {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); cursor: pointer;
appearance: none;
opacity: 0 !important;
margin: 0;
width: 52px;
height: 32px;
position: absolute;
} }
input[type=checkbox].m3.m3-switch:active:checked::after { div.m3.m3-switch-exp > input.m3:disabled {
transform: translateX(50%); cursor: not-allowed;
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
input[type=checkbox].m3.m3-switch:active::after { div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); fill: var(--md-sys-color-outline);
} }
input[type=checkbox].m3.m3-switch:active:checked::before { div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
transform: translateX(125%) scale(175%); transform: translate(50%, 81%);
background-color: var(--md-sys-color-primary-container);
} }
input[type=checkbox].m3.m3-switch:active::before { div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
transform: scale(175%); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-on-surface-variant);
} }
input[type=checkbox].m3.m3-switch:disabled:checked { div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; fill: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after { div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
r: 12px;
}
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0; opacity: 0;
} }
input[type=checkbox].m3.m3-switch:disabled::before { div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
opacity: 0.38; cx: calc(100% - 16px);
transform: initial;
background-color: var(--md-sys-color-outline) !important;
} }
input[type=checkbox].m3.m3-switch:disabled:checked::before { div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
opacity: 1; opacity: 0;
transform: translateX(125%) scale(150%); }
background-color: var(--md-sys-color-surface) !important; div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
r: 14px;
}
div.m3.m3-switch-exp > 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-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
x: 1px;
y: 1px;
}
div.m3.m3-switch-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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);
} }
@keyframes toggle-shifting {
50% {
width: 30px;
}
100% {
width: 16px;
}
}
hr.m3.m3-divider { hr.m3.m3-divider {
display: flex; display: flex;
align-items: end; align-items: end;
@ -703,7 +712,7 @@ label.m3.m3-checkbox-label {
} }
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@ -714,8 +723,8 @@ span.m3.m3-checkbox-ripple-layer {
contain: content; contain: content;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
} }
input[type=checkbox].m3.m3-checkbox { input[type=checkbox].m3.m3-checkbox {
@ -725,12 +734,12 @@ input[type=checkbox].m3.m3-checkbox {
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
z-index: 10; z-index: 10;
width: 18px; width: 1.125rem;
height: 18px; height: 1.125rem;
margin: 0; margin: 0;
border-radius: 2px; outline-offset: -0.14rem;
outline-offset: -2px; border-radius: 0.14rem;
outline: 2px solid var(--md-sys-color-on-surface-variant); outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); 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)) { input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
@ -746,17 +755,17 @@ input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].
} }
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) { input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
outline-color: var(--md-sys-color-on-surface); 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) { input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
background-color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-on-surface);
} }
input[type=checkbox].m3.m3-checkbox::after { input[type=checkbox].m3.m3-checkbox::after {
line-height: 18px; line-height: 1.125rem;
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 1.125rem;
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-checkbox:checked::after { input[type=checkbox].m3.m3-checkbox:checked::after {

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

2
src/styles/mixins/m3-mixins.sass
View File

@ -7,7 +7,7 @@
@mixin m3-state-layer-mixin @mixin m3-state-layer-mixin
position: absolute position: absolute
width: 40px width: 2.5rem
aspect-ratio: inherit aspect-ratio: inherit
border-radius: 50% border-radius: 50%
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

2
src/styles/radio.css
View File

@ -7,7 +7,7 @@ label.m3.m3-radio-label {
} }
label.m3.m3-radio-label > span.m3.m3-radio-state-layer { label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
position: absolute; position: absolute;
width: 40px; width: 2.5rem;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);

242
src/styles/swtich.css
View File

@ -1,141 +1,149 @@
input[type=checkbox].m3.m3-switch { div.m3.m3-switch-exp {
transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin: 4px;
box-sizing: content-box;
display: flex; display: flex;
position: relative;
align-items: center;
width: 52px;
height: 32px;
appearance: none;
padding: 2px 2px 2px 6px;
border-radius: 16px;
border: 2px solid var(--md-sys-color-outline);
background-color: var(--md-sys-color-surface-container-high);
}
input[type=checkbox].m3.m3-switch:disabled {
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);
}
input[type=checkbox].m3.m3-switch:checked {
border: 2px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-primary);
}
input[type=checkbox].m3.m3-switch::after {
transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 9;
position: absolute;
display: flex;
content: "";
height: 40px;
width: 40px;
left: -6px;
border-radius: 50%;
}
input[type=checkbox].m3.m3-switch:checked::after {
transform: translateX(50%);
}
input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {
transform-origin: center;
}
input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; width: 52px;
font-weight: 500; height: 32px;
font-size: 12px;
line-height: 12px;
} }
input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before { div.m3.m3-switch-exp > svg {
content: "done" !important; overflow: visible;
color: var(--md-sys-color-on-primary-container); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
} }
@media (prefers-color-scheme: light) { div.m3.m3-switch-exp > svg > g {
input[type=checkbox].m3.m3-switch[data-icon=true]::before { transform: translate(11.5%, 81%);
color: var(--md-sys-color-on-primary); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
color: var(--md-sys-color-surface-container-highest);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
} }
@media (prefers-color-scheme: dark) { div.m3.m3-switch-exp > svg > g > text {
input[type=checkbox].m3.m3-switch[data-icon=true]::before { font-family: Material-Symbols-Outlined-Regular;
color: var(--md-sys-color-surface-container-high); font-size: 20px;
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
color: var(--md-sys-color-surface-container-highest);
}
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
}
} }
input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
transform: scale(150%); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
content: "close"; cy: 50%;
cx: 16px;
} }
input[type=checkbox].m3.m3-switch::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
z-index: 10; r: 20px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); fill-opacity: 0;
content: "";
display: flex;
height: 16px;
width: 16px;
border-radius: 50%;
background-color: var(--md-sys-color-outline);
} }
input[type=checkbox].m3.m3-switch:checked::before { div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
opacity: 1; r: 8px;
transform: translateX(125%) scale(150%);
background-color: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-switch:hover:checked::after { div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
transform: translateX(50%); transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); stroke-width: 2px;
border-radius: 16px;
rx: 15px;
width: 50px;
height: 30px;
} }
input[type=checkbox].m3.m3-switch:hover::after { div.m3.m3-switch-exp > input.m3 {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); cursor: pointer;
appearance: none;
opacity: 0 !important;
margin: 0;
width: 52px;
height: 32px;
position: absolute;
} }
input[type=checkbox].m3.m3-switch:active:checked::after { div.m3.m3-switch-exp > input.m3:disabled {
transform: translateX(50%); cursor: not-allowed;
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
input[type=checkbox].m3.m3-switch:active::after { div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); fill: var(--md-sys-color-outline);
} }
input[type=checkbox].m3.m3-switch:active:checked::before { div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
transform: translateX(125%) scale(175%); transform: translate(50%, 81%);
background-color: var(--md-sys-color-primary-container);
} }
input[type=checkbox].m3.m3-switch:active::before { div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
transform: scale(175%); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-on-surface-variant);
} }
input[type=checkbox].m3.m3-switch:disabled:checked { div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; fill: var(--md-sys-color-on-primary);
} }
input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after { div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
r: 12px;
}
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0; opacity: 0;
} }
input[type=checkbox].m3.m3-switch:disabled::before { div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
opacity: 0.38; cx: calc(100% - 16px);
transform: initial;
background-color: var(--md-sys-color-outline) !important;
} }
input[type=checkbox].m3.m3-switch:disabled:checked::before { div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
opacity: 1; opacity: 0;
transform: translateX(125%) scale(150%);
background-color: var(--md-sys-color-surface) !important;
} }
div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
@keyframes toggle-shifting { r: 14px;
50% { }
width: 30px; div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
} fill: var(--md-sys-color-on-surface);
100% { fill-opacity: 38%;
width: 16px; }
} div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
x: 1px;
y: 1px;
}
div.m3.m3-switch-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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-exp > 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);
} }
/*# sourceMappingURL=swtich.css.map */ /*# sourceMappingURL=swtich.css.map */

2
src/styles/swtich.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI","file":"swtich.css"} {"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA","file":"swtich.css"}

256
src/styles/swtich.sass
View File

@ -1,133 +1,157 @@
input[type="checkbox"].m3.m3-switch div.m3.m3-switch-exp
transition: background-color .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) margin: 4px
box-sizing: content-box
display: flex display: flex
position: relative
align-items: center
width: 52px
height: 32px
appearance: none
padding: 2px 2px 2px 6px
border-radius: calc(32px / 2)
border: 2px solid var(--md-sys-color-outline)
background-color: var(--md-sys-color-surface-container-high)
&:disabled
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent)
&:checked
border: 2px solid #00000000
background-color: var(--md-sys-color-primary)
&::after
transition: color, background-color, opacity, .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
z-index: 9
position: absolute
display: flex
content: ""
height: 40px
width: 40px
left: -6px
border-radius: 50%
&:checked::after
transform: translateX(50%)
&:checked::after, &::after, &:checked::before, &::before
transform-origin: center
&:is([data-icon=true], [data-icon=true]:checked)::before
font-family: Material-Symbols-Outlined-Regular, sans-serif
align-items: center align-items: center
justify-content: center justify-content: center
text-align: center width: 52px
font-weight: 500 height: 32px
font-size: 12px
line-height: 12px
&[data-icon=true]:checked::before & > svg
content: "done" !important overflow: visible
color: var(--md-sys-color-on-primary-container) transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px
height: 32px
@media (prefers-color-scheme: light) & > g
&[data-icon=true]::before transform: translate(11.5%, 81%)
color: var(--md-sys-color-on-primary) transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
&[data-icon=true]:disabled::before & > text
color: var(--md-sys-color-surface-container-highest) font-family: Material-Symbols-Outlined-Regular
&[data-icon=true]:disabled:checked::before font-size: 20px
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
@media (prefers-color-scheme: dark) & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
&[data-icon=true]::before transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
color: var(--md-sys-color-surface-container-high) cy: 50%
&[data-icon=true]:disabled::before cx: 16px
color: var(--md-sys-color-surface-container-highest)
&[data-icon=true]:disabled:checked::before
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
&[data-icon=true]:where([data-selected=false])::before, & > circle.m3.m3-switch-handler-state-layer
&[data-icon=true]:where([data-selected=false]):disabled::before r: 20px
transform: scale(150%) fill-opacity: 0
content: "close"
&::before & > circle.m3.m3-switch-handler
z-index: 10 r: 8px
transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
content: ""
display: flex
height: 16px
width: 16px
border-radius: 50%
background-color: var(--md-sys-color-outline)
&:checked::before & > rect.m3.m3-switch-track
opacity: 1 transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
transform: translateX(125%) scale(150%) stroke-width: 2px
background-color: var(--md-sys-color-on-primary) border-radius: 16px
rx: 15px
width: 50px
height: 30px
&:hover & > input.m3
&:checked::after cursor: pointer
transform: translateX(50%) appearance: none
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) opacity: 0 !important
margin: 0
&::after width: 52px
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) height: 32px
position: absolute
&:active
&:checked::after
transform: translateX(50%)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&::after
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&:checked::before
transform: translateX(125%) scale(175%)
background-color: var(--md-sys-color-primary-container)
&::before
transform: scale(175%)
background-color: var(--md-sys-color-on-surface-variant)
&:disabled &:disabled
&:checked cursor: not-allowed
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
&:checked::after, &::after &:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline)
&:checked:not(:disabled) + svg
& > g
transform: translate(50%, 81%)
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary)
&:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary)
& > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container)
&:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface)
&:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
r: 12px
&:checked + svg
& > g > text.m3.m3-icon-unchecked
opacity: 0 opacity: 0
&::before & > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
opacity: 0.38 cx: calc(100% - 16px)
transform: initial
background-color: var(--md-sys-color-outline) !important
&:checked::before &:not(:checked) + svg
opacity: 1 & > g > text.m3.m3-icon-checked
transform: translateX(125%) scale(150%) opacity: 0
background-color: var(--md-sys-color-surface) !important
@keyframes toggle-shifting &:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
50% r: 14px
width: 30px
100% &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
width: 16px fill: var(--md-sys-color-on-surface)
fill-opacity: 38%
&:hover:not(:disabled)
&:checked + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 8%
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 8%
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 12%
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 12%
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px
width: 52px
height: 32px
stroke-width: 0
&:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track
x: 1px
y: 1px
&:not(:checked) + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-outline)
fill: var(--md-sys-color-surface-container-highest)
&:checked + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-primary)
fill: var(--md-sys-color-primary)
&:disabled + svg
& > g > text.m3
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
& > 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)
&:checked:disabled + svg
& > g > text.m3
transform: translateX(38.5%)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
& > 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)