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

CHANGED: Check boxes now is FONT, not SVG or anything 

REMOVED: Labels for switch and radio (because it's useless and make code more difficult)
This commit is contained in:
doryan04 2024-02-02 01:47:26 +04:00
parent 252f03af7a
commit bb7b511b76
10 changed files with 221 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/radios.tsx
View File

@ -28,13 +28,6 @@ export default function Radios() {
<Radio defaultChecked disabled /> <Radio defaultChecked disabled />
</div> </div>
</div> </div>
<div>
<h2> With Label </h2>
<form style={{ display: 'flex', gap: '2em' }}>
<Radio> Label </Radio>
<Radio defaultChecked> Label </Radio>
</form>
</div>
</div> </div>
</div> </div>
); );

8
app/components/switches.tsx
View File

@ -89,12 +89,8 @@ export default function Switches() {
> >
<div> <div>
<h2> Default </h2> <h2> Default </h2>
<Switch icon labelPlacement={'left'}> <Switch icon labelPlacement={'left'} />
Label <Switch icon selected />
</Switch>
<Switch icon selected>
Label
</Switch>
</div> </div>
</div> </div>
</div> </div>

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

@ -43,6 +43,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
ref={checkboxRef} ref={checkboxRef}
type={'checkbox'} type={'checkbox'}
/> />
<span className={'m3 m3-checkbox-state'} />
<span className={'m3 m3-checkbox-state-layer'} /> <span className={'m3 m3-checkbox-state-layer'} />
<RippleArea <RippleArea
callback={setIsActive} callback={setIsActive}

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

@ -5,16 +5,15 @@ 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 { CheckBoxLayout } from '../checkbox-layout/check-box-layout'; import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { bool, oneOf, string } from 'prop-types'; import { bool, string } from 'prop-types';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
/** /**
* Radio component * Radio component
** description ** description
*/ */
export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>( export const Radio = forwardRef<HTMLInputElement, RadioProps>(
({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => { ({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive); events = useRippleEffect(ripplesRef, setIsActive);
@ -24,34 +23,26 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
return ( return (
<div {...events} className={classes}> <div {...events} className={classes}>
{children && labelPlacement === 'left' && ( <CheckBoxLayout {...props} ref={ref} type={'radio'} />
<label htmlFor={props.id}>{children}</label> <span className={'m3 m3-radio-state-layer'} />
)} <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
<span> <circle
<CheckBoxLayout {...props} ref={ref} type={'radio'} /> className={'m3-radio-outline'}
<span className={'m3 m3-radio-state-layer'} /> cx={'50%'}
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}> cy={'50%'}
<circle
className={'m3-radio-outline'}
cx={'50%'}
cy={'50%'}
/>
<circle
className={'m3-radio-state'}
cx={'50%'}
cy={'50%'}
/>
</svg>
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/> />
</span> <circle
{children && labelPlacement === 'right' && ( className={'m3-radio-state'}
<label htmlFor={props.id}>{children}</label> cx={'50%'}
)} cy={'50%'}
/>
</svg>
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
</div> </div>
); );
}, },
@ -60,5 +51,4 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
Radio.propTypes = { Radio.propTypes = {
children: string, children: string,
centralRipple: bool, centralRipple: bool,
labelPlacement: oneOf(['left', 'right']),
}; };

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

@ -13,50 +13,24 @@ import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
export const Switch = forwardRef< export const Switch = forwardRef<
HTMLInputElement, HTMLInputElement,
SwitchMainProps & LabelPlacement SwitchMainProps & LabelPlacement
>( >(({ icon, selected = false, ...props }, ref) => (
( <div className={'m3 m3-switch'}>
{ <CheckBoxLayout
icon, {...props}
disabled, className={`m3 ${props.className ?? ''}`.trimEnd()}
selected = false, ref={ref}
children, type={'checkbox'}
labelPlacement = 'right', />
...props <svg>
}, <rect className={'m3 m3-switch-track'} />
ref, <circle className={'m3 m3-switch-handler'} />
) => ( <circle className={'m3 m3-switch-handler-state-layer'} />
<div className={'m3 m3-switch'}> <g>
{children && labelPlacement === 'left' && ( {icon && !selected && (
<label htmlFor={props.id}>{children}</label> <text className={'m3 m3-icon-unchecked'}>close</text>
)} )}
<span> {icon && <text className={'m3 m3-icon-checked'}>check</text>}
<CheckBoxLayout </g>
{...props} </svg>
className={`m3 ${props.className ?? ''}`.trimEnd()} </div>
disabled={disabled} ));
ref={ref}
type={'checkbox'}
/>
<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>
</span>
{children && labelPlacement === 'right' && (
<label htmlFor={props.id}>{children}</label>
)}
</div>
),
);

97
src/styles/checkbox.sass
View File

@ -2,92 +2,103 @@
label.m3.m3-checkbox-label label.m3.m3-checkbox-label
@include m3-label-mixin @include m3-label-mixin
width: 18px
height: 18px
& > span.m3.m3-checkbox-state-layer & > span.m3.m3-checkbox-state-layer
@include m3-state-layer-mixin @include m3-state-layer-mixin
span.m3.m3-checkbox-ripple-layer span.m3.m3-checkbox-ripple-layer
z-index: 20 z-index: 20
width: 2.5rem
height: 2.5rem
contain: content contain: content
border-radius: 50% border-radius: 50%
position: absolute position: absolute
width: 2.5rem
height: 2.5rem
input[type="checkbox"].m3.m3-checkbox input[type="checkbox"].m3.m3-checkbox
appearance: none margin: 0
display: flex
align-items: center
justify-content: center
box-sizing: content-box
z-index: 10 z-index: 10
display: flex
width: 1.125rem width: 1.125rem
height: 1.125rem height: 1.125rem
margin: 0 appearance: none
outline-offset: -.14rem position: absolute
align-items: center
border-radius: .14rem border-radius: .14rem
outline: .14rem solid var(--md-sys-color-on-surface-variant) box-sizing: content-box
justify-content: center
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)) & ~ span.m3-checkbox-state
outline-color: var(--md-sys-color-error) transition: color .2s cubic-bezier(0.2, 0, 0, 1)
background-color: var(--md-sys-color-error) color: var(--md-sys-color-on-surface-variant)
&:is(.m3.m3-error, :user-invalid) &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
outline-color: var(--md-sys-color-error) & ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
background: var(--md-sys-color-on-error)
&:is(:user-invalid, .m3.m3-error):not(:checked)
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
outline-color: var(--md-sys-color-primary) & ~ span.m3-checkbox-state
background-color: var(--md-sys-color-primary) color: var(--md-sys-color-primary)
background: var(--md-sys-color-on-primary)
&:disabled &:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
&:is(:hover, &) color: var(--md-sys-color-on-surface)
&:disabled ~ *
&:is(:hover, &, :checked)
opacity: 38% opacity: 38%
border: 2px solid var(--md-sys-color-on-surface)
&:checked:is(:hover, &) & ~ span.m3-checkbox-state
opacity: 38% pointer-events: none
background-color: var(--md-sys-color-on-surface) z-index: 10
display: flex
&::after align-items: center
line-height: 1.125rem justify-content: center
line-height: 24px
font-family: Material-Symbols-Outlined-Regular, sans-serif font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 700 font-weight: 700
font-size: 1.125rem font-size: 24px
color: var(--md-sys-color-on-primary) font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
&:checked::after &:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
content: "done" content: "check_box_outline_blank"
&:indeterminate::after &:indeterminate ~ span.m3-checkbox-state::before
content: "check_indeterminate_small" content: "indeterminate_check_box"
&:hover &:checked ~ span.m3-checkbox-state::before
outline-color: var(--md-sys-color-on-surface) content: "check_box"
&:not(:disabled) &:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
& + span.m3.m3-checkbox-state-layer & ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple & ~ span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple & ~ span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover &:hover
& + span.m3-checkbox-state-layer & ~ span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&:active + span.m3.m3-checkbox-state-layer &:active ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple & ~ span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)

233
src/styles/generics.css
View File

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

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

File diff suppressed because one or more lines are too long

5
src/styles/radio.sass
View File

@ -1,11 +1,6 @@
@import "mixins/m3-mixins" @import "mixins/m3-mixins"
div.m3.m3-radio div.m3.m3-radio
display: inline-flex
justify-content: space-between
gap: 20px
div.m3.m3-radio > span
width: 20px width: 20px
height: 20px height: 20px
align-items: center align-items: center

11
src/styles/swtich.sass
View File

@ -4,16 +4,11 @@ div.m3.m3-switch
box-sizing: content-box box-sizing: content-box
display: flex display: flex
align-items: center align-items: center
justify-content: space-between justify-content: center
width: 52px width: 52px
height: 32px height: 32px
& > span & > svg
display: flex
align-items: center
justify-content: center
& > span > svg
overflow: visible overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px width: 52px
@ -46,7 +41,7 @@ div.m3.m3-switch
width: 50px width: 50px
height: 30px height: 30px
& > span > input.m3 & > input.m3
cursor: pointer cursor: pointer
appearance: none appearance: none
opacity: 0 !important opacity: 0 !important