DONE: Switch now is SVG
RENAMING: check-box-skeleton -> check-box-layout
This commit is contained in:
parent
c91387e45a
commit
945cdf5202
|
@ -1,13 +1,20 @@
|
|||
import "../src/styles/generics.css"
|
||||
import "../src/styles/button.css"
|
||||
import "../src/styles/ripple.css"
|
||||
import {Metadata} from "next";
|
||||
import {Metadata, Viewport} from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '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({
|
||||
children,
|
||||
}: {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
|
||||
import {CheckboxLayoutProps} from "./checkbox-layout.types";
|
||||
|
||||
export const CheckBoxSkeleton = forwardRef(
|
||||
export const CheckBoxLayout = forwardRef(
|
||||
|
||||
function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import {RippleArea} from "../ripple/ripple-area";
|
||||
import {IRippleProps} from "../ripple/ripple.types";
|
||||
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";
|
||||
|
||||
/**
|
||||
|
@ -30,7 +30,7 @@ export const Checkbox = forwardRef(
|
|||
return (
|
||||
<label {...events}
|
||||
className={classes}>
|
||||
<CheckBoxSkeleton {...props}
|
||||
<CheckBoxLayout {...props}
|
||||
ref={checkboxRef}
|
||||
indeterminate={indeterminate}
|
||||
type={"checkbox"}/>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {RippleArea} from "../ripple/ripple-area";
|
||||
import {forwardRef, useRef, useState} from "react";
|
||||
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";
|
||||
|
||||
/**
|
||||
|
@ -22,7 +22,7 @@ export const Radio = forwardRef(
|
|||
return (
|
||||
<label {...events}
|
||||
className={classes}>
|
||||
<CheckBoxSkeleton {...props}
|
||||
<CheckBoxLayout {...props}
|
||||
ref={ref}
|
||||
type={"radio"}/>
|
||||
<span className={"m3 m3-radio-state-layer"}/>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {forwardRef} from "react";
|
||||
import React, {ForwardedRef, forwardRef} from "react";
|
||||
import {switchMainProps} from "./switch.types";
|
||||
import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
|
||||
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
|
||||
|
||||
/**
|
||||
* Switch component
|
||||
|
@ -8,17 +8,32 @@ import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
|
|||
*/
|
||||
|
||||
export const Switch = forwardRef(
|
||||
|
||||
({icon, disabled, selected = false, ...props} : switchMainProps, ref) => (
|
||||
<label>
|
||||
<CheckBoxSkeleton {...props}
|
||||
ref={ref}
|
||||
data-icon={icon}
|
||||
({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => (
|
||||
<div className={"m3 m3-switch-exp"} ref={ref}>
|
||||
<CheckBoxLayout {...props}
|
||||
type={"checkbox"}
|
||||
disabled={disabled}
|
||||
typeInput={"switch"}
|
||||
data-selected={selected}/>
|
||||
</label>
|
||||
className={`m3 ${props.className ?? ""}`.trimEnd()}/>
|
||||
<svg>
|
||||
<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>
|
||||
)
|
||||
|
||||
)
|
|
@ -7,7 +7,7 @@ label.m3.m3-checkbox-label {
|
|||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
|
@ -18,8 +18,8 @@ span.m3.m3-checkbox-ripple-layer {
|
|||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
|
@ -29,12 +29,12 @@ input[type=checkbox].m3.m3-checkbox {
|
|||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0;
|
||||
border-radius: 2px;
|
||||
outline-offset: -2px;
|
||||
outline: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
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)) {
|
||||
|
@ -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) {
|
||||
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) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox::after {
|
||||
line-height: 18px;
|
||||
line-height: 1.125rem;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
|
|
|
@ -10,8 +10,8 @@ span.m3.m3-checkbox-ripple-layer
|
|||
contain: content
|
||||
border-radius: 50%
|
||||
position: absolute
|
||||
width: 40px
|
||||
height: 40px
|
||||
width: 2.5rem
|
||||
height: 2.5rem
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox
|
||||
appearance: none
|
||||
|
@ -20,12 +20,12 @@ input[type="checkbox"].m3.m3-checkbox
|
|||
justify-content: center
|
||||
box-sizing: content-box
|
||||
z-index: 10
|
||||
width: 18px
|
||||
height: 18px
|
||||
width: 1.125rem
|
||||
height: 1.125rem
|
||||
margin: 0
|
||||
border-radius: 2px
|
||||
outline-offset: -2px
|
||||
outline: 2px solid var(--md-sys-color-on-surface-variant)
|
||||
outline-offset: -.14rem
|
||||
border-radius: .14rem
|
||||
outline: .14rem solid var(--md-sys-color-on-surface-variant)
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
||||
|
@ -42,17 +42,17 @@ input[type="checkbox"].m3.m3-checkbox
|
|||
&:disabled
|
||||
&:is(:hover, &)
|
||||
opacity: 38%
|
||||
outline-color: var(--md-sys-color-on-surface)
|
||||
border: 2px solid var(--md-sys-color-on-surface)
|
||||
|
||||
&:checked:is(:hover, &)
|
||||
opacity: 38%
|
||||
background-color: var(--md-sys-color-on-surface)
|
||||
|
||||
&::after
|
||||
line-height: 18px
|
||||
line-height: 1.125rem
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
font-weight: 700
|
||||
font-size: 18px
|
||||
font-size: 1.125rem
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&:checked::after
|
||||
|
|
|
@ -218,7 +218,7 @@ label.m3.m3-radio-label {
|
|||
}
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch {
|
||||
transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
div.m3.m3-switch-exp {
|
||||
margin: 4px;
|
||||
box-sizing: content-box;
|
||||
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;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
|
||||
content: "done" !important;
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
div.m3.m3-switch-exp > svg {
|
||||
overflow: visible;
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
div.m3.m3-switch-exp > svg > g {
|
||||
transform: translate(11.5%, 81%);
|
||||
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);
|
||||
div.m3.m3-switch-exp > svg > g > text {
|
||||
font-family: Material-Symbols-Outlined-Regular;
|
||||
font-size: 20px;
|
||||
}
|
||||
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);
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > 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-exp > svg > circle.m3.m3-switch-handler-state-layer {
|
||||
r: 20px;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
|
||||
color: var(--md-sys-color-surface-container-high);
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
|
||||
r: 8px;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
|
||||
color: var(--md-sys-color-surface-container-highest);
|
||||
div.m3.m3-switch-exp > 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;
|
||||
rx: 15px;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
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);
|
||||
div.m3.m3-switch-exp > input.m3 {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
opacity: 0 !important;
|
||||
margin: 0;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
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 {
|
||||
transform: scale(150%);
|
||||
content: "close";
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-outline);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch::before {
|
||||
z-index: 10;
|
||||
transition: all 0.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);
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
|
||||
transform: translate(50%, 81%);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:checked::before {
|
||||
opacity: 1;
|
||||
transform: translateX(125%) scale(150%);
|
||||
background-color: var(--md-sys-color-on-primary);
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:hover:checked::after {
|
||||
transform: translateX(50%);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:hover::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active:checked::after {
|
||||
transform: translateX(50%);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
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;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active:checked::before {
|
||||
transform: translateX(125%) scale(175%);
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active::before {
|
||||
transform: scale(175%);
|
||||
background-color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled::before {
|
||||
opacity: 0.38;
|
||||
transform: initial;
|
||||
background-color: var(--md-sys-color-outline) !important;
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
cx: calc(100% - 16px);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked::before {
|
||||
opacity: 1;
|
||||
transform: translateX(125%) scale(150%);
|
||||
background-color: var(--md-sys-color-surface) !important;
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
||||
opacity: 0;
|
||||
}
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
@ -703,7 +712,7 @@ label.m3.m3-checkbox-label {
|
|||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
|
@ -714,8 +723,8 @@ span.m3.m3-checkbox-ripple-layer {
|
|||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
|
@ -725,12 +734,12 @@ input[type=checkbox].m3.m3-checkbox {
|
|||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0;
|
||||
border-radius: 2px;
|
||||
outline-offset: -2px;
|
||||
outline: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
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)) {
|
||||
|
@ -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) {
|
||||
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) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox::after {
|
||||
line-height: 18px;
|
||||
line-height: 1.125rem;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,7 +7,7 @@
|
|||
|
||||
@mixin m3-state-layer-mixin
|
||||
position: absolute
|
||||
width: 40px
|
||||
width: 2.5rem
|
||||
aspect-ratio: inherit
|
||||
border-radius: 50%
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
|
|
@ -7,7 +7,7 @@ label.m3.m3-radio-label {
|
|||
}
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
|
|
|
@ -1,141 +1,149 @@
|
|||
input[type=checkbox].m3.m3-switch {
|
||||
transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
div.m3.m3-switch-exp {
|
||||
margin: 4px;
|
||||
box-sizing: content-box;
|
||||
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;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
|
||||
content: "done" !important;
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
div.m3.m3-switch-exp > svg {
|
||||
overflow: visible;
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
div.m3.m3-switch-exp > svg > g {
|
||||
transform: translate(11.5%, 81%);
|
||||
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);
|
||||
div.m3.m3-switch-exp > svg > g > text {
|
||||
font-family: Material-Symbols-Outlined-Regular;
|
||||
font-size: 20px;
|
||||
}
|
||||
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);
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > 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-exp > svg > circle.m3.m3-switch-handler-state-layer {
|
||||
r: 20px;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
|
||||
color: var(--md-sys-color-surface-container-high);
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
|
||||
r: 8px;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
|
||||
color: var(--md-sys-color-surface-container-highest);
|
||||
div.m3.m3-switch-exp > 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;
|
||||
rx: 15px;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
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);
|
||||
div.m3.m3-switch-exp > input.m3 {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
opacity: 0 !important;
|
||||
margin: 0;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
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 {
|
||||
transform: scale(150%);
|
||||
content: "close";
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-outline);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch::before {
|
||||
z-index: 10;
|
||||
transition: all 0.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);
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
|
||||
transform: translate(50%, 81%);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:checked::before {
|
||||
opacity: 1;
|
||||
transform: translateX(125%) scale(150%);
|
||||
background-color: var(--md-sys-color-on-primary);
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:hover:checked::after {
|
||||
transform: translateX(50%);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:hover::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active:checked::after {
|
||||
transform: translateX(50%);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
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;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active:checked::before {
|
||||
transform: translateX(125%) scale(175%);
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:active::before {
|
||||
transform: scale(175%);
|
||||
background-color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled::before {
|
||||
opacity: 0.38;
|
||||
transform: initial;
|
||||
background-color: var(--md-sys-color-outline) !important;
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
cx: calc(100% - 16px);
|
||||
}
|
||||
input[type=checkbox].m3.m3-switch:disabled:checked::before {
|
||||
opacity: 1;
|
||||
transform: translateX(125%) scale(150%);
|
||||
background-color: var(--md-sys-color-surface) !important;
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes toggle-shifting {
|
||||
50% {
|
||||
width: 30px;
|
||||
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;
|
||||
}
|
||||
100% {
|
||||
width: 16px;
|
||||
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);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=swtich.css.map */
|
||||
|
|
|
@ -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"}
|
|
@ -1,133 +1,157 @@
|
|||
input[type="checkbox"].m3.m3-switch
|
||||
transition: background-color .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
div.m3.m3-switch-exp
|
||||
margin: 4px
|
||||
box-sizing: content-box
|
||||
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
|
||||
justify-content: center
|
||||
text-align: center
|
||||
font-weight: 500
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
width: 52px
|
||||
height: 32px
|
||||
|
||||
&[data-icon=true]:checked::before
|
||||
content: "done" !important
|
||||
color: var(--md-sys-color-on-primary-container)
|
||||
& > svg
|
||||
overflow: visible
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
width: 52px
|
||||
height: 32px
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
&[data-icon=true]::before
|
||||
color: var(--md-sys-color-on-primary)
|
||||
&[data-icon=true]:disabled::before
|
||||
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) 38%, transparent)
|
||||
& > g
|
||||
transform: translate(11.5%, 81%)
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
& > text
|
||||
font-family: Material-Symbols-Outlined-Regular
|
||||
font-size: 20px
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
&[data-icon=true]::before
|
||||
color: var(--md-sys-color-surface-container-high)
|
||||
&[data-icon=true]:disabled::before
|
||||
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)
|
||||
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
cy: 50%
|
||||
cx: 16px
|
||||
|
||||
&[data-icon=true]:where([data-selected=false])::before,
|
||||
&[data-icon=true]:where([data-selected=false]):disabled::before
|
||||
transform: scale(150%)
|
||||
content: "close"
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
r: 20px
|
||||
fill-opacity: 0
|
||||
|
||||
&::before
|
||||
z-index: 10
|
||||
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)
|
||||
& > circle.m3.m3-switch-handler
|
||||
r: 8px
|
||||
|
||||
&:checked::before
|
||||
opacity: 1
|
||||
transform: translateX(125%) scale(150%)
|
||||
background-color: var(--md-sys-color-on-primary)
|
||||
& > rect.m3.m3-switch-track
|
||||
transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
stroke-width: 2px
|
||||
border-radius: 16px
|
||||
rx: 15px
|
||||
width: 50px
|
||||
height: 30px
|
||||
|
||||
&:hover
|
||||
&:checked::after
|
||||
transform: translateX(50%)
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&::after
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&: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)
|
||||
& > input.m3
|
||||
cursor: pointer
|
||||
appearance: none
|
||||
opacity: 0 !important
|
||||
margin: 0
|
||||
width: 52px
|
||||
height: 32px
|
||||
position: absolute
|
||||
|
||||
&:disabled
|
||||
&:checked
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|
||||
cursor: not-allowed
|
||||
|
||||
&: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
|
||||
|
||||
&::before
|
||||
opacity: 0.38
|
||||
transform: initial
|
||||
background-color: var(--md-sys-color-outline) !important
|
||||
& > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
|
||||
cx: calc(100% - 16px)
|
||||
|
||||
&:checked::before
|
||||
opacity: 1
|
||||
transform: translateX(125%) scale(150%)
|
||||
background-color: var(--md-sys-color-surface) !important
|
||||
&:not(:checked) + svg
|
||||
& > g > text.m3.m3-icon-checked
|
||||
opacity: 0
|
||||
|
||||
@keyframes toggle-shifting
|
||||
50%
|
||||
width: 30px
|
||||
100%
|
||||
width: 16px
|
||||
&:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
|
||||
r: 14px
|
||||
|
||||
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
|
||||
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)
|
Loading…
Reference in New Issue