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

CHANGED: README

Browse Source 
ADDED: Labels for switch and radio component
This commit is contained in:
doryan committed 2024-02-02 01:12:58 +04:00
1 parent f39f302555
commit 252f03af7a
11 files changed
+164 -68
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+3 -3
View File
@@ -6,11 +6,11 @@ This repository is including and will be including components, enumerates in tab
- [x] Default
- [x] Icon
- [x] FAB
- [x] Radio
- [ ] Radio
- [ ] Segmented
- [x] Checkbox
- [ ] Checkbox
- [x] Text fields
- [x] Switches
- [ ] Switches
- [ ] Chips
- [x] Icon
- [x] Ripple Effect
app/components/radios.tsx
+7
View File
@@ -28,6 +28,13 @@ export default function Radios() {
<Radio defaultChecked disabled />
</div>
</div>
<div>
<h2> With Label </h2>
<form style={{ display: 'flex', gap: '2em' }}>
<Radio> Label </Radio>
<Radio defaultChecked> Label </Radio>
</form>
</div>
</div>
</div>
);
app/components/switches.tsx
+21
View File
@@ -77,6 +77,27 @@ export default function Switches() {
</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h2 style={{ margin: 0 }}> With label</h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Default </h2>
<Switch icon labelPlacement={'left'}>
Label
</Switch>
<Switch icon selected>
Label
</Switch>
</div>
</div>
</div>
</div>
</div>
);
src/primitive-components/checkbox-layout/checkbox-layout.types.ts
+4
View File
@@ -6,3 +6,7 @@ export interface CheckboxLayoutProps
typeInput?: string;
type?: string;
}
export interface LabelPlacement {
labelPlacement?: 'left' | 'right';
}
src/primitive-components/radio/radio.tsx
+18 -3
View File
@@ -5,14 +5,16 @@ import { RippleArea } from '../ripple/ripple-area';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { bool, oneOf, string } from 'prop-types';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
/**
* Radio component
** description
*/
export const Radio = forwardRef<HTMLInputElement, RadioProps>(
({ centralRipple, ...props }, ref) => {
export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
@@ -22,6 +24,10 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
return (
<div {...events} className={classes}>
{children && labelPlacement === 'left' && (
<label htmlFor={props.id}>{children}</label>
)}
<span>
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
@@ -42,8 +48,17 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
{props.children}
</span>
{children && labelPlacement === 'right' && (
<label htmlFor={props.id}>{children}</label>
)}
</div>
);
},
);
Radio.propTypes = {
children: string,
centralRipple: bool,
labelPlacement: oneOf(['left', 'right']),
};
src/primitive-components/radio/radio.types.ts
+1
View File
@@ -3,5 +3,6 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
RipplePropsForComponents<HTMLInputElement> & {
children?: string;
centralRipple?: boolean;
};
src/primitive-components/switch/switch.tsx
+28 -3
View File
@@ -3,15 +3,33 @@
import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
/**
* Switch component
** description
*/
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
({ icon, disabled, selected = false, ...props }, ref) => (
export const Switch = forwardRef<
HTMLInputElement,
SwitchMainProps & LabelPlacement
>(
(
{
icon,
disabled,
selected = false,
children,
labelPlacement = 'right',
...props
},
ref,
) => (
<div className={'m3 m3-switch'}>
{children && labelPlacement === 'left' && (
<label htmlFor={props.id}>{children}</label>
)}
<span>
<CheckBoxLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
@@ -25,13 +43,20 @@ export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
<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>
),
);
src/styles/generics.css
+67 -55
View File
@@ -210,16 +210,22 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
}
div.m3.m3-radio {
display: inline-flex;
justify-content: space-between;
gap: 20px;
}
div.m3.m3-radio > span {
width: 20px;
height: 20px;
align-items: center;
display: inline-flex;
justify-content: center;
}
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > span.m3-checkbox-ripple-layer, div.m3.m3-radio > span span.m3.m3-radio-state-layer {
z-index: 5;
}
div.m3.m3-radio > span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
width: 40px;
aspect-ratio: 1;
border-radius: 50%;
@@ -227,7 +233,7 @@ div.m3.m3-radio > span.m3.m3-radio-state-layer {
pointer-events: none;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
margin: 0;
width: 20px;
height: 20px;
@@ -236,47 +242,47 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio {
appearance: none;
position: absolute;
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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);
}
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 {
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 {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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);
}
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 {
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 {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
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 {
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 {
stroke-opacity: 38%;
stroke: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
fill-opacity: 38%;
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
fill-opacity: 0;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
fill-opacity: 1;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio svg {
div.m3.m3-radio > span svg {
margin: 0;
width: 20px;
z-index: 10;
@@ -284,17 +290,17 @@ div.m3.m3-radio svg {
pointer-events: none;
aspect-ratio: inherit;
}
div.m3.m3-radio svg > circle {
div.m3.m3-radio > span svg > circle {
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio svg > circle.m3-radio-outline {
div.m3.m3-radio > span svg > circle.m3-radio-outline {
r: 9px;
fill: black;
fill-opacity: 0;
stroke-width: 2px;
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio svg > circle.m3-radio-state {
div.m3.m3-radio > span svg > circle.m3-radio-state {
r: 5px;
}
@@ -546,40 +552,46 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
}
div.m3.m3-switch {
margin: 4px;
gap: 20px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg {
div.m3.m3-switch > span {
display: flex;
align-items: center;
justify-content: center;
}
div.m3.m3-switch > span > svg {
overflow: visible;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg > g {
div.m3.m3-switch > span > svg > g {
transform: translate(11.5%, 81%);
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.m3.m3-switch > svg > g > text {
div.m3.m3-switch > span > svg > g > text {
font-family: Material-Symbols-Outlined-Regular;
font-size: 20px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cy: 50%;
cx: 16px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
r: 8px;
}
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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;
@@ -587,7 +599,7 @@ div.m3.m3-switch > svg > rect.m3.m3-switch-track {
width: 50px;
height: 30px;
}
div.m3.m3-switch > input.m3 {
div.m3.m3-switch > span > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
@@ -596,98 +608,98 @@ div.m3.m3-switch > input.m3 {
height: 32px;
position: absolute;
}
div.m3.m3-switch > input.m3:disabled {
div.m3.m3-switch > span > input.m3:disabled {
cursor: not-allowed;
}
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
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 {
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 {
r: 12px;
}
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
div.m3.m3-switch > span > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0;
}
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
div.m3.m3-switch > span > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px);
}
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
div.m3.m3-switch > span > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
opacity: 0;
}
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 {
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 {
r: 14px;
}
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > 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 > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > 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 > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > 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 > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > 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 > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > 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 > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > 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 > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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 > 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 {
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 {
x: 1px;
y: 1px;
}
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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 > input.m3:checked + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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 > input.m3:disabled + svg > g > text.m3 {
div.m3.m3-switch > span > 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 > input.m3:disabled + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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 > input.m3:checked:disabled + svg > g > text.m3 {
div.m3.m3-switch > span > 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 > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > 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);
}
src/styles/generics.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC5FhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;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;;;AC5JhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;;ASDA;ETIA;EACA;EACA;EACA;EACA;;;ASLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC3FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACALine truncated
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACjGhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;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;;;AClKhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;;ASDA;ETIA;EACA;EACA;EACA;EACA;;;ASLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC3FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACILine truncated
src/styles/radio.sass
+5
View File
@@ -1,6 +1,11 @@
@import "mixins/m3-mixins"
div.m3.m3-radio
display: inline-flex
justify-content: space-between
gap: 20px
div.m3.m3-radio > span
width: 20px
height: 20px
align-items: center
src/styles/swtich.sass
+9 -3
View File
@@ -1,13 +1,19 @@
div.m3.m3-switch
margin: 4px
gap: 20px
box-sizing: content-box
display: flex
align-items: center
justify-content: center
justify-content: space-between
width: 52px
height: 32px
& > svg
& > span
display: flex
align-items: center
justify-content: center
& > span > svg
overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px
@@ -40,7 +46,7 @@ div.m3.m3-switch
width: 50px
height: 30px
& > input.m3
& > span > input.m3
cursor: pointer
appearance: none
opacity: 0 !important