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

CHANGED: Some stuff changed in switch, Radio now is SVG

This commit is contained in:
doryan04 2024-02-02 00:30:13 +04:00
parent df7901a779
commit f39f302555
8 changed files with 378 additions and 853 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/primitive-components/icon-button/icon-button.tsx
View File

@ -3,14 +3,7 @@
import { Icon } from '../components'; import { Icon } from '../components';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
import { IconButtonProps, StateToggleIconType } from './icon-button.types'; import { IconButtonProps, StateToggleIconType } from './icon-button.types';
import { import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
forwardRef,
MouseEventHandler,
useCallback,
useImperativeHandle,
useRef,
useState,
} from 'react';
/** /**
* Icon button-layout component * Icon button-layout component

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

@ -18,12 +18,24 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
events = useRippleEffect(ripplesRef, setIsActive); events = useRippleEffect(ripplesRef, setIsActive);
const classes = const classes =
`m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd(); `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
return ( return (
<label {...events} className={classes}> <div {...events} className={classes}>
<CheckBoxLayout {...props} ref={ref} type={'radio'} /> <CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} /> <span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
<circle
className={'m3-radio-outline'}
cx={'50%'}
cy={'50%'}
/>
<circle
className={'m3-radio-state'}
cx={'50%'}
cy={'50%'}
/>
</svg>
<RippleArea <RippleArea
callback={setIsActive} callback={setIsActive}
central={centralRipple} central={centralRipple}
@ -31,7 +43,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
ref={ripplesRef} ref={ripplesRef}
/> />
{props.children} {props.children}
</label> </div>
); );
}, },
); );

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

@ -11,7 +11,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>( export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
({ icon, disabled, selected = false, ...props }, ref) => ( ({ icon, disabled, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch-exp'}> <div className={'m3 m3-switch'}>
<CheckBoxLayout <CheckBoxLayout
{...props} {...props}
className={`m3 ${props.className ?? ''}`.trimEnd()} className={`m3 ${props.className ?? ''}`.trimEnd()}

994
src/styles/generics.css
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

120
src/styles/radio.sass
View File

@ -1,59 +1,93 @@
@import "mixins/m3-mixins" @import "mixins/m3-mixins"
label.m3.m3-radio-label div.m3.m3-radio
@include m3-label-mixin
& > span.m3.m3-radio-state-layer
@include m3-state-layer-mixin
input[type="radio"].m3.m3-radio
appearance: none
display: flex
align-items: center
justify-content: center
z-index: 10
width: 20px width: 20px
margin: 0 height: 20px
aspect-ratio: inherit align-items: center
border-radius: 50% display: inline-flex
border: 2px solid var(--md-sys-color-on-surface-variant) justify-content: center
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&::after & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
content: "" z-index: 5
width: 10px
& > span.m3.m3-radio-state-layer
width: 40px
aspect-ratio: 1 aspect-ratio: 1
border-radius: 50% border-radius: 50%
position: absolute
pointer-events: none
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&:disabled & > input[type="radio"].m3.m3-radio
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) margin: 0
width: 20px
height: 20px
aspect-ratio: 1
cursor: pointer
appearance: none
position: absolute
&:checked &:not(:disabled)
border: 2px solid var(--md-sys-color-primary) &:checked:hover + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:checked::after &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
background-color: var(--md-sys-color-primary) background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
& ~ span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:checked:disabled &:hover
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) & + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&:checked:disabled::after &:active + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& ~ span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
&:not(:disabled) &:disabled
&:is(:not(:checked), &:checked) ~ svg
& > circle.m3-radio-outline
stroke-opacity: 38%
stroke: var(--md-sys-color-on-surface)
&:checked:hover + span.m3.m3-radio-state-layer &:checked ~ svg > circle.m3-radio-state
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer &:not(:checked) ~ svg
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) & > circle.m3-radio-outline
& + span.m3-ripple-domain > .m3.ripple stroke: var(--md-sys-color-on-surface-variant)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover & > circle.m3-radio-state
& + span.m3.m3-radio-state-layer fill-opacity: 0
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) fill: var(--md-sys-color-primary)
&:active + span.m3.m3-radio-state-layer &:checked ~ svg
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) & > circle.m3-radio-outline
& + span.m3-ripple-domain > .m3.ripple stroke: var(--md-sys-color-primary)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
& > circle.m3-radio-state
fill-opacity: 1
fill: var(--md-sys-color-primary)
svg
margin: 0
width: 20px
z-index: 10
border-radius: 50%
pointer-events: none
aspect-ratio: inherit
& > circle
transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
&.m3-radio-outline
r: 9px
fill: black
fill-opacity: 0
stroke-width: 2px
stroke: var(--md-sys-color-on-surface-variant)
&.m3-radio-state
r: 5px

84
src/styles/swtich.css
View File

@ -1,4 +1,4 @@
div.m3.m3-switch-exp { div.m3.m3-switch {
margin: 4px; margin: 4px;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
@ -7,34 +7,34 @@ div.m3.m3-switch-exp {
width: 52px; width: 52px;
height: 32px; height: 32px;
} }
div.m3.m3-switch-exp > svg { div.m3.m3-switch > 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-exp > 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-exp > 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-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler { 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-exp > 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-exp > svg > circle.m3.m3-switch-handler { div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
r: 8px; r: 8px;
} }
div.m3.m3-switch-exp > 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;
@ -42,7 +42,7 @@ div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
width: 50px; width: 50px;
height: 30px; height: 30px;
} }
div.m3.m3-switch-exp > input.m3 { div.m3.m3-switch > input.m3 {
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
opacity: 0 !important; opacity: 0 !important;
@ -51,124 +51,124 @@ div.m3.m3-switch-exp > input.m3 {
height: 32px; height: 32px;
position: absolute; position: absolute;
} }
div.m3.m3-switch-exp > input.m3:disabled { div.m3.m3-switch > input.m3:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:not(:checked, :disabled) > input.m3:not(:checked, :disabled)
+ svg + svg
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline); fill: var(--md-sys-color-outline);
} }
div.m3.m3-switch-exp > 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-exp div.m3.m3-switch
> input.m3:checked:not(:disabled) > input.m3:checked:not(:disabled)
+ svg + svg
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:not(:disabled) > input.m3:not(:disabled)
+ svg + svg
> g > g
> text.m3.m3-icon-unchecked { > text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:not(:disabled) > input.m3:not(:disabled)
+ svg + svg
> g > g
> text.m3.m3-icon-checked { > 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-exp div.m3.m3-switch
> input.m3:checked:disabled > input.m3:checked:disabled
+ svg + svg
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface); fill: var(--md-sys-color-surface);
} }
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler,
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3 > input.m3
+ svg:has(text.m3.m3-icon-unchecked) + svg:has(text.m3.m3-icon-unchecked)
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
r: 12px; r: 12px;
} }
div.m3.m3-switch-exp > 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-exp div.m3.m3-switch
> input.m3:checked > input.m3:checked
+ svg + svg
> circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) { > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px); cx: calc(100% - 16px);
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:not(:checked) > input.m3:not(:checked)
+ svg + svg
> g > g
> text.m3.m3-icon-checked { > text.m3.m3-icon-checked {
opacity: 0; opacity: 0;
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:is( > input.m3:is(
div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch > input.m3:checked,
div.m3.m3-switch-exp > input.m3 div.m3.m3-switch > input.m3
):not(:disabled):active ):not(:disabled):active
+ svg + svg
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
r: 14px; r: 14px;
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:not(:checked):disabled > input.m3:not(:checked):disabled
+ svg + svg
> circle.m3.m3-switch-handler { > 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-exp div.m3.m3-switch
> input.m3:hover:not(:disabled):checked > input.m3:hover:not(:disabled):checked
+ svg + svg
> circle.m3.m3-switch-handler { > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container); fill: var(--md-sys-color-primary-container);
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:hover:not(:disabled):checked > input.m3:hover:not(:disabled):checked
+ svg + svg
> circle.m3.m3-switch-handler-state-layer { > 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-exp div.m3.m3-switch
> input.m3:hover:not(:disabled):not(:checked) > input.m3:hover:not(:disabled):not(:checked)
+ svg + svg
> circle.m3.m3-switch-handler { > 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-exp div.m3.m3-switch
> input.m3:hover:not(:disabled):not(:checked) > input.m3:hover:not(:disabled):not(:checked)
+ svg + svg
> circle.m3.m3-switch-handler-state-layer { > 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-exp div.m3.m3-switch
> input.m3:active:not(:disabled):checked > input.m3:active:not(:disabled):checked
+ svg + svg
> circle.m3.m3-switch-handler-state-layer { > 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-exp div.m3.m3-switch
> input.m3:active:not(:disabled):not(:checked) > input.m3:active:not(:disabled):not(:checked)
+ svg + svg
> circle.m3.m3-switch-handler-state-layer { > 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-exp div.m3.m3-switch
> input.m3:is(:checked, :checked:disabled) > input.m3:is(:checked, :checked:disabled)
+ svg + svg
> rect.m3.m3-switch-track { > rect.m3.m3-switch-track {
@ -177,32 +177,32 @@ div.m3.m3-switch-exp
height: 32px; height: 32px;
stroke-width: 0; stroke-width: 0;
} }
div.m3.m3-switch-exp div.m3.m3-switch
> input.m3:is( > input.m3:is(
div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked),
div.m3.m3-switch-exp > input.m3:not(:checked):disabled div.m3.m3-switch > input.m3:not(:checked):disabled
) )
+ svg + svg
> rect.m3.m3-switch-track { > rect.m3.m3-switch-track {
x: 1px; x: 1px;
y: 1px; y: 1px;
} }
div.m3.m3-switch-exp > 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-exp > 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-exp > input.m3:disabled + svg > g > text.m3 { div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
var(--md-sys-color-surface-container-highest) 38%, var(--md-sys-color-surface-container-highest) 38%,
transparent transparent
); );
} }
div.m3.m3-switch-exp > 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( fill: color-mix(
in srgb, in srgb,
@ -210,11 +210,11 @@ div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
transparent transparent
); );
} }
div.m3.m3-switch-exp > 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-exp div.m3.m3-switch
> input.m3:checked:disabled > input.m3:checked:disabled
+ svg + svg
> rect.m3.m3-switch-track { > rect.m3.m3-switch-track {

2
src/styles/swtich.sass
View File

@ -1,4 +1,4 @@
div.m3.m3-switch-exp div.m3.m3-switch
margin: 4px margin: 4px
box-sizing: content-box box-sizing: content-box
display: flex display: flex