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/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,
}: {

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 {CheckboxLayoutProps} from "./checkbox-layout.types";
export const CheckBoxSkeleton = forwardRef(
export const CheckBoxLayout = forwardRef(
function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {

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

@ -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,10 +30,10 @@ export const Checkbox = forwardRef(
return (
<label {...events}
className={classes}>
<CheckBoxSkeleton {...props}
ref={checkboxRef}
indeterminate={indeterminate}
type={"checkbox"}/>
<CheckBoxLayout {...props}
ref={checkboxRef}
indeterminate={indeterminate}
type={"checkbox"}/>
<span className={"m3 m3-checkbox-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}

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

@ -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,9 +22,9 @@ export const Radio = forwardRef(
return (
<label {...events}
className={classes}>
<CheckBoxSkeleton {...props}
ref={ref}
type={"radio"}/>
<CheckBoxLayout {...props}
ref={ref}
type={"radio"}/>
<span className={"m3 m3-radio-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}

41
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 {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}
type={"checkbox"}
disabled={disabled}
typeInput={"switch"}
data-selected={selected}/>
</label>
({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => (
<div className={"m3 m3-switch-exp"} ref={ref}>
<CheckBoxLayout {...props}
type={"checkbox"}
disabled={disabled}
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>
)
)

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 {
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 {

20
src/styles/checkbox.sass
View File

@ -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

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 {
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);
}
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);
}
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);
}
@media (prefers-color-scheme: dark) {
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
color: var(--md-sys-color-surface-container-high);
}
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);
}
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]: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 > 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;
}
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 > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
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 > svg > circle.m3.m3-switch-handler {
r: 8px;
}
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 > 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:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
div.m3.m3-switch-exp > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
margin: 0;
width: 52px;
height: 32px;
position: absolute;
}
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:disabled {
cursor: not-allowed;
}
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:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
input[type=checkbox].m3.m3-switch:active:checked::before {
transform: translateX(125%) scale(175%);
background-color: var(--md-sys-color-primary-container);
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
input[type=checkbox].m3.m3-switch:active::before {
transform: scale(175%);
background-color: var(--md-sys-color-on-surface-variant);
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:disabled:checked {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
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: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;
}
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 {

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
position: absolute
width: 40px
width: 2.5rem
aspect-ratio: inherit
border-radius: 50%
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 {
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);

242
src/styles/swtich.css
View File

@ -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);
}
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);
}
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);
}
@media (prefers-color-scheme: dark) {
input[type=checkbox].m3.m3-switch[data-icon=true]::before {
color: var(--md-sys-color-surface-container-high);
}
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);
}
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]: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 > 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;
}
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 > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
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 > svg > circle.m3.m3-switch-handler {
r: 8px;
}
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 > 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:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
div.m3.m3-switch-exp > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
margin: 0;
width: 52px;
height: 32px;
position: absolute;
}
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:disabled {
cursor: not-allowed;
}
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:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
input[type=checkbox].m3.m3-switch:active:checked::before {
transform: translateX(125%) scale(175%);
background-color: var(--md-sys-color-primary-container);
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
input[type=checkbox].m3.m3-switch:active::before {
transform: scale(175%);
background-color: var(--md-sys-color-on-surface-variant);
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:disabled:checked {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
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: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;
}
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;
}
100% {
width: 16px;
}
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);
}
/*# 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"}

234
src/styles/swtich.sass
View File

@ -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
justify-content: 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)
& > svg
overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px
height: 32px
&:checked
border: 2px solid #00000000
background-color: var(--md-sys-color-primary)
& > 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
&::after
transition: color, background-color, opacity, .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
z-index: 9
& > 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
& > circle.m3.m3-switch-handler-state-layer
r: 20px
fill-opacity: 0
& > circle.m3.m3-switch-handler
r: 8px
& > 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
& > input.m3
cursor: pointer
appearance: none
opacity: 0 !important
margin: 0
width: 52px
height: 32px
position: absolute
display: flex
content: ""
height: 40px
width: 40px
left: -6px
border-radius: 50%
&:checked::after
transform: translateX(50%)
&:disabled
cursor: not-allowed
&:checked::after, &::after, &:checked::before, &::before
transform-origin: center
&:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline)
&: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
&:checked:not(:disabled) + svg
& > g
transform: translate(50%, 81%)
&[data-icon=true]:checked::before
content: "done" !important
color: var(--md-sys-color-on-primary-container)
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary)
@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)
&:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary)
@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)
& > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container)
&[data-icon=true]:where([data-selected=false])::before,
&[data-icon=true]:where([data-selected=false]):disabled::before
transform: scale(150%)
content: "close"
&:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface)
&::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)
&:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
r: 12px
&:checked::before
opacity: 1
transform: translateX(125%) scale(150%)
background-color: var(--md-sys-color-on-primary)
&:checked + svg
& > g > text.m3.m3-icon-unchecked
opacity: 0
&:hover
&:checked::after
transform: translateX(50%)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
& > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
cx: calc(100% - 16px)
&::after
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&:not(:checked) + svg
& > g > text.m3.m3-icon-checked
opacity: 0
&:active
&:checked::after
transform: translateX(50%)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
r: 14px
&::after
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface)
fill-opacity: 38%
&:checked::before
transform: translateX(125%) scale(175%)
background-color: var(--md-sys-color-primary-container)
&:hover:not(:disabled)
&:checked + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container)
&::before
transform: scale(175%)
background-color: var(--md-sys-color-on-surface-variant)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 8%
&:disabled
&:checked
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
&:checked::after, &::after
opacity: 0
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 8%
&::before
opacity: 0.38
transform: initial
background-color: var(--md-sys-color-outline) !important
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 12%
&:checked::before
opacity: 1
transform: translateX(125%) scale(150%)
background-color: var(--md-sys-color-surface) !important
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 12%
@keyframes toggle-shifting
50%
width: 30px
100%
width: 16px
&: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)