From ef6c3d391f86c8ef181fa3c2a4d96123be5a387e Mon Sep 17 00:00:00 2001 From: doryan04 Date: Tue, 30 Jan 2024 12:33:19 +0400 Subject: [PATCH] ADDED: opportunity align to the center ripple for all components that have ripple effect --- .idea/workspace.xml | 94 +++++++++---------- app/components/buttons.tsx | 3 +- app/components/checkboxes.tsx | 2 +- app/components/fabs.tsx | 3 +- app/components/icon-buttons.tsx | 2 +- app/components/radios.tsx | 2 +- app/page.tsx | 12 +++ ...{button-skeleton.tsx => button-layout.tsx} | 10 +- src/primitive-components/button/button.tsx | 20 ++-- .../checkbox/checkbox.tsx | 4 +- src/primitive-components/fab/fab.tsx | 20 ++-- .../icon-button/icon-button.tsx | 20 ++-- .../material-you-components.tsx | 2 +- src/primitive-components/radio/radio.tsx | 4 +- .../ripple/ripple-area.tsx | 6 +- src/primitive-components/ripple/ripple.tsx | 27 ++++-- .../ripple/ripple.types.ts | 14 ++- src/styles/button.css | 16 +++- src/styles/button.css.map | 2 +- src/styles/button.sass | 16 +++- src/styles/generics.css | 21 +++-- src/styles/generics.css.map | 2 +- src/styles/generics.sass | 5 +- 23 files changed, 184 insertions(+), 123 deletions(-) rename src/primitive-components/button-skeleton/{button-skeleton.tsx => button-layout.tsx} (74%) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 044bb3c..cf3a36f 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,33 +4,30 @@ - @@ -633,6 +630,7 @@ - \ No newline at end of file diff --git a/app/components/buttons.tsx b/app/components/buttons.tsx index 99d04d2..7816922 100644 --- a/app/components/buttons.tsx +++ b/app/components/buttons.tsx @@ -2,7 +2,6 @@ import React, {useCallback, useState} from 'react'; import {Button} from "../../src/primitive-components/material-you-components"; -import axios from "axios"; export default function Buttons() { @@ -19,7 +18,7 @@ export default function Buttons() {

Default buttons

- ) @@ -40,4 +42,4 @@ const ButtonSkeleton = forwardRef( ) -export {ButtonSkeleton}; \ No newline at end of file +export {ButtonLayout}; \ No newline at end of file diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button/button.tsx index 26f97b8..9cea681 100644 --- a/src/primitive-components/button/button.tsx +++ b/src/primitive-components/button/button.tsx @@ -1,6 +1,7 @@ import {forwardRef} from "react"; import {buttonMainProps} from "../button-skeleton/button.types"; -import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; +import {ButtonLayout} from "../button-skeleton/button-layout"; +import {IRippleProps} from "../ripple/ripple.types"; /** * Button component @@ -9,22 +10,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; export const Button = forwardRef( - (props : buttonMainProps, ref) => ( - + ({centralRipple = false, variant, disabled, icon, ...props} : buttonMainProps & IRippleProps, ref) => ( + { - props.icon ? + icon ? - {props.icon} + {icon} : <> } {props.children} - + ) ) \ No newline at end of file diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx index 7258e2b..2a1a6e5 100644 --- a/src/primitive-components/checkbox/checkbox.tsx +++ b/src/primitive-components/checkbox/checkbox.tsx @@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area"; import {forwardRef, useRef, useState} from "react"; import useRippleEffect from "../ripple/hooks/useRippleEffect"; import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; +import {IRippleProps} from "../ripple/ripple.types"; /** * Checkbox component @@ -9,7 +10,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; */ export const Checkbox = forwardRef( - (props : any, ref) => { + ({centralRipple, ...props} : any & IRippleProps, ref) => { const [isActive, setIsActive] = useState(false), ripplesRef = useRef(null), @@ -28,6 +29,7 @@ export const Checkbox = forwardRef( {props.children} diff --git a/src/primitive-components/fab/fab.tsx b/src/primitive-components/fab/fab.tsx index b0da69a..09470b3 100644 --- a/src/primitive-components/fab/fab.tsx +++ b/src/primitive-components/fab/fab.tsx @@ -1,6 +1,7 @@ import {forwardRef} from "react"; import {FABMainProps} from "../button-skeleton/button.types"; -import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; +import {ButtonLayout} from "../button-skeleton/button-layout"; +import {IRippleProps} from "../ripple/ripple.types"; /** * FABs component @@ -8,22 +9,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; */ export const FAB = forwardRef( - (props : FABMainProps, ref) => ( - + ({variant, disabled, icon, centralRipple = false, size, elevated, ...props} : FABMainProps & IRippleProps, ref) => ( + - {props.icon} + {icon} { - props.size === "extended" ? ( + size === "extended" ? ( {props.children} ) : <> } - + ) ); \ No newline at end of file diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx index b05df37..63c2009 100644 --- a/src/primitive-components/icon-button/icon-button.tsx +++ b/src/primitive-components/icon-button/icon-button.tsx @@ -1,6 +1,7 @@ -import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; +import {ButtonLayout} from "../button-skeleton/button-layout"; import {iconButtonMainProps} from "../button-skeleton/button.types"; import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react"; +import {IRippleProps} from "../ripple/ripple.types"; /** * Icon button-skeleton component @@ -9,7 +10,7 @@ import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "re export const IconButton = forwardRef( - ({icon, variant, disabled, selected = false, toggled = false, ...props} : iconButtonMainProps, ref) => { + ({icon, variant, disabled, selected = false, toggled = false, centralRipple, ...props} : iconButtonMainProps & IRippleProps, ref) => { const [toggleIcon, setToggleIcon] = useState({ state : selected == true ? "selected" : "unselected", @@ -36,18 +37,19 @@ export const IconButton = forwardRef( useImperativeHandle(ref, () => buttonRef); return ( - + { toggled ? toggleIcon.icon : icon ? icon : <> } - + ) } diff --git a/src/primitive-components/material-you-components.tsx b/src/primitive-components/material-you-components.tsx index 217babb..3446944 100644 --- a/src/primitive-components/material-you-components.tsx +++ b/src/primitive-components/material-you-components.tsx @@ -11,4 +11,4 @@ export {RippleArea} from "./ripple/ripple-area"; export {Ripples, Ripple} from "./ripple/ripple"; export {TextField} from "./text-field/text-field"; export {IconButton} from "./icon-button/icon-button"; -export {ButtonSkeleton} from "./button-skeleton/button-skeleton"; +export {ButtonLayout} from "./button-skeleton/button-layout"; diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx index 8c183cb..fad436b 100644 --- a/src/primitive-components/radio/radio.tsx +++ b/src/primitive-components/radio/radio.tsx @@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area"; import {forwardRef, useRef, useState} from "react"; import useRippleEffect from "../ripple/hooks/useRippleEffect"; import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; +import {IRippleProps} from "../ripple/ripple.types"; /** * Radio component @@ -10,7 +11,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; export const Radio = forwardRef( - (props : any, ref) => { + ({centralRipple, ...props} : any & IRippleProps, ref) => { const [isActive, setIsActive] = useState(false), ripplesRef = useRef(null), @@ -27,6 +28,7 @@ export const Radio = forwardRef( {props.children} diff --git a/src/primitive-components/ripple/ripple-area.tsx b/src/primitive-components/ripple/ripple-area.tsx index 2b09703..449dc7e 100644 --- a/src/primitive-components/ripple/ripple-area.tsx +++ b/src/primitive-components/ripple/ripple-area.tsx @@ -17,7 +17,7 @@ const rippleAreaContext = React.createContext(false); const RippleArea = forwardRef( - function RippleArea(props : RippleAreaProps, ref) { + function RippleArea({central = false, callback, ...props} : RippleAreaProps, ref) { const [ripples, setRipples] = useState>([]), rippleDomain = useRef(null), @@ -41,8 +41,8 @@ const RippleArea = forwardRef( top: 0, } - let rippleX : number = event.clientX - rippleDomainChar.left, - rippleY : number = event.clientY - rippleDomainChar.top, + let rippleX : number = !central ? event.clientX - rippleDomainChar.left : rippleDomainChar.width / 2, + rippleY : number = !central ? event.clientY - rippleDomainChar.top : rippleDomainChar.height / 2, rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2, rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2, rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5; diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx index 9c94480..d60fe37 100644 --- a/src/primitive-components/ripple/ripple.tsx +++ b/src/primitive-components/ripple/ripple.tsx @@ -1,17 +1,26 @@ "use client" -import React, {useCallback, useContext, useEffect, useRef, useState, useTransition} from 'react'; -import RippleEffectBuild from "./utils/ripple-effect-builder"; -import {rippleAreaContext} from "./ripple-area"; -import {rippleProps} from "./ripple.types"; import isEmpty from "./utils/utils"; +import {rippleProps} from "./ripple.types"; +import {rippleAreaContext} from "./ripple-area"; +import RippleEffectBuild from "./utils/ripple-effect-builder"; +import React, { + useRef, + useState, + useEffect, + forwardRef, + useContext, + useCallback, + ForwardedRef, + useTransition, JSX +} from 'react'; -function Ripples(props : any){ +const Ripples = forwardRef(function Ripples(props : any, ref : ForwardedRef){ const [ripples, setRipples] = useState({}); const firstRender = useRef(true); const [pending, startTransition] = useTransition(); - const LifetimeEnd = useCallback((child) => { + const LifetimeEnd = useCallback((child : JSX.Element) => { if (child.props.endLifetime) { child.props.endLifetime(); @@ -46,9 +55,9 @@ function Ripples(props : any){ ) -} +}) -function Ripple(props : rippleProps) { +const Ripple = forwardRef(function Ripple(props : rippleProps, ref : ForwardedRef) { const { rippleX, @@ -79,6 +88,6 @@ function Ripple(props : rippleProps) { }/> ); -} +}) export {Ripple, Ripples}; diff --git a/src/primitive-components/ripple/ripple.types.ts b/src/primitive-components/ripple/ripple.types.ts index d36083f..4e26fdd 100644 --- a/src/primitive-components/ripple/ripple.types.ts +++ b/src/primitive-components/ripple/ripple.types.ts @@ -1,8 +1,12 @@ -import React, {ComponentProps, Dispatch, SetStateAction} from "react"; +import {Dispatch, SetStateAction} from "react"; -export interface RippleAreaProps extends ComponentProps { - ref : React.ForwardedRef, +export interface IRippleProps { + centralRipple? : boolean +} + +export interface RippleAreaProps extends PropsWithChildren{ callback : Dispatch>, + central? : boolean, } export type rippleProps = { @@ -12,4 +16,6 @@ export type rippleProps = { endLifetime? : any, lifetime : number, key? : number, -} \ No newline at end of file +} + +import {PropsWithChildren} from "react"; \ No newline at end of file diff --git a/src/styles/button.css b/src/styles/button.css index 5f3982a..79705ec 100644 --- a/src/styles/button.css +++ b/src/styles/button.css @@ -1,11 +1,16 @@ button:not(.m3-fab, .m3-icon-button) { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-size: var(--md-sys-typescale-label-large-font-size); + font-weight: var(--md-sys-typescale-label-large-font-weight); + line-height: var(--md-sys-typescale-label-large-line-height); + box-sizing: border-box; } button:not(.m3-fab, .m3-icon-button) > span.m3-icon { font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-weight: 500; - font-size: 18px; - line-height: 18px; + font-size: 14pt; + font-weight: var(--md-sys-typescale-label-large-font-weight); + line-height: var(--md-sys-typescale-label-large-line-height); } button:not(.m3-fab, .m3-icon-button).m3 { contain: content; @@ -27,7 +32,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button color: var(--md-sys-color-on-primary); } button:not(.m3-fab, .m3-icon-button).outlined { - border: 1px solid var(--md-sys-color-outline) !important; + outline-offset: -1px; + outline: 1px solid var(--md-sys-color-outline) !important; background-color: rgba(0, 0, 0, 0); } button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { @@ -121,7 +127,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated { box-shadow: none; } button:not(.m3-fab, .m3-icon-button):disabled.outlined { - border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; + outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } /*# sourceMappingURL=button.css.map */ diff --git a/src/styles/button.css.map b/src/styles/button.css.map index 1715567..ff65d4c 100644 --- a/src/styles/button.css.map +++ b/src/styles/button.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECFI;EDIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECnCA;;ADsCA;EChCA;;ADmCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EClDA;;ADqDA;EC/CA;;ADkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECRI;EDUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECzCA;;AD4CA;ECtCA;;ADyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECxDA;;AD2DA;ECrDA;;ADwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"} \ No newline at end of file diff --git a/src/styles/button.sass b/src/styles/button.sass index 27e0fa8..a462726 100644 --- a/src/styles/button.sass +++ b/src/styles/button.sass @@ -2,12 +2,17 @@ button:not(.m3-fab, .m3-icon-button) transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important + font-family: var(--md-sys-typescale-label-large-font-family-name) + font-size: var(--md-sys-typescale-label-large-font-size) + font-weight: var(--md-sys-typescale-label-large-font-weight) + line-height: var(--md-sys-typescale-label-large-line-height) + box-sizing: border-box & > span.m3-icon font-family: Material-Symbols-Outlined-Regular, sans-serif - font-weight: 500 - font-size: 18px - line-height: 18px + font-size: 14pt + font-weight: var(--md-sys-typescale-label-large-font-weight) + line-height: var(--md-sys-typescale-label-large-line-height) &.m3 contain: content @@ -28,7 +33,8 @@ button:not(.m3-fab, .m3-icon-button) color: var(--md-sys-color-on-primary) &.outlined - border: 1px solid var(--md-sys-color-outline) !important + outline-offset: -1px + outline: 1px solid var(--md-sys-color-outline) !important background-color: #00000000 &, & > span.m3-icon color: var(--md-sys-color-primary) @@ -115,4 +121,4 @@ button:not(.m3-fab, .m3-icon-button) box-shadow: none &.outlined - border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important + outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important diff --git a/src/styles/generics.css b/src/styles/generics.css index 99df848..9c5b05d 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -308,12 +308,17 @@ svg.m3.m3-badge > text { } button:not(.m3-fab, .m3-icon-button) { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-size: var(--md-sys-typescale-label-large-font-size); + font-weight: var(--md-sys-typescale-label-large-font-weight); + line-height: var(--md-sys-typescale-label-large-line-height); + box-sizing: border-box; } button:not(.m3-fab, .m3-icon-button) > span.m3-icon { font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-weight: 500; - font-size: 18px; - line-height: 18px; + font-size: 14pt; + font-weight: var(--md-sys-typescale-label-large-font-weight); + line-height: var(--md-sys-typescale-label-large-line-height); } button:not(.m3-fab, .m3-icon-button).m3 { contain: content; @@ -335,7 +340,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button color: var(--md-sys-color-on-primary); } button:not(.m3-fab, .m3-icon-button).outlined { - border: 1px solid var(--md-sys-color-outline) !important; + outline-offset: -1px; + outline: 1px solid var(--md-sys-color-outline) !important; background-color: rgba(0, 0, 0, 0); } button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { @@ -429,7 +435,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated { box-shadow: none; } button:not(.m3-fab, .m3-icon-button):disabled.outlined { - border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; + outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } .m3.m3-ripple-domain { @@ -1103,10 +1109,13 @@ html { } .m3.m3-wrapper { + width: 100%; background-color: var(--md-sys-color-surface); border-radius: 25px; padding: 25px; - width: max-content; + display: flex; + align-items: center; + flex-direction: column; height: min-content; } diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index afb9645..d491086 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.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":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;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;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJFI;EIIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJnCA;;AIsCA;EJhCA;;AImCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJlDA;;AIqDA;EJ/CA;;AIkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;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;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;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;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;;;AC1FhB;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;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.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":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;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;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJRI;EIUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJzCA;;AI4CA;EJtCA;;AIyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJxDA;;AI2DA;EJrDA;;AIwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC3HZ;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;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;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;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;;;AC1FhB;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;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/generics.sass b/src/styles/generics.sass index ebff8a0..6e37c2e 100644 --- a/src/styles/generics.sass +++ b/src/styles/generics.sass @@ -24,9 +24,12 @@ html user-select: none .m3.m3-wrapper + width: 100% background-color: var(--md-sys-color-surface) border-radius: 25px padding: 25px - width: max-content + display: flex + align-items: center + flex-direction: column height: min-content