Compare commits

...

2 Commits

Author SHA1 Message Date
doryan04 c91387e45a Merge remote-tracking branch 'origin/main' 2024-01-30 23:52:26 +04:00
doryan04 241eb0c9a5 ADDED: icon component
CHANGED: in everything, where use icons (except switch and checkbox), change from icon-font to Icon component
2024-01-30 23:52:06 +04:00
45 changed files with 612 additions and 429 deletions

View File

@ -4,30 +4,49 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="UPDATE: README.md"> <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="ADDED: opportunity align to the center ripple for all components that have ripple effect">
<change afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/checkbox-layout.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/styles/icon.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/buttons.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/checkboxes.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/checkboxes.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/components/checkboxes.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/checkboxes.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/fabs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/fabs.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/icon-buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/icon-buttons.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/components/icon-buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/icon-buttons.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/radios.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/radios.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/components/radios.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/radios.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/components/switches.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/switches.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/layout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/dist/output.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/output.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/dist/styles/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/styles/styles.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button-layout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button.types.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/check-box-skeleton.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.sass" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -37,8 +56,8 @@
<component name="FileTemplateManagerImpl"> <component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
<option value="Sass File" />
<option value="TypeScript JSX File" /> <option value="TypeScript JSX File" />
<option value="Sass File" />
<option value="TypeScript File" /> <option value="TypeScript File" />
</list> </list>
</option> </option>
@ -194,15 +213,9 @@
<workItem from="1706426744715" duration="17520000" /> <workItem from="1706426744715" duration="17520000" />
<workItem from="1706516378911" duration="15403000" /> <workItem from="1706516378911" duration="15403000" />
<workItem from="1706552378046" duration="8738000" /> <workItem from="1706552378046" duration="8738000" />
<workItem from="1706598284665" duration="4149000" /> <workItem from="1706598284665" duration="4240000" />
</task> <workItem from="1706617852695" duration="6530000" />
<task id="LOCAL-00024" summary="other updates..."> <workItem from="1706629691514" duration="13025000" />
<option name="closed" value="true" />
<created>1704526668819</created>
<option name="number" value="00024" />
<option name="presentableId" value="LOCAL-00024" />
<option name="project" value="LOCAL" />
<updated>1704526668819</updated>
</task> </task>
<task id="LOCAL-00025" summary="added radio component"> <task id="LOCAL-00025" summary="added radio component">
<option name="closed" value="true" /> <option name="closed" value="true" />
@ -588,7 +601,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1706562164219</updated> <updated>1706562164219</updated>
</task> </task>
<option name="localTasksCounter" value="73" /> <task id="LOCAL-00073" summary="ADDED: opportunity align to the center ripple for all components that have ripple effect">
<option name="closed" value="true" />
<created>1706603599586</created>
<option name="number" value="00073" />
<option name="presentableId" value="LOCAL-00073" />
<option name="project" value="LOCAL" />
<updated>1706603599586</updated>
</task>
<option name="localTasksCounter" value="74" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -606,7 +627,6 @@
</option> </option>
</component> </component>
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="added sass style sheet file for fabs" />
<MESSAGE value="updated button styles and renaming button component file" /> <MESSAGE value="updated button styles and renaming button component file" />
<MESSAGE value="updated checkbox styles" /> <MESSAGE value="updated checkbox styles" />
<MESSAGE value="updated styles for preview page" /> <MESSAGE value="updated styles for preview page" />
@ -631,6 +651,7 @@
<MESSAGE value="DONE: I forget, what I do" /> <MESSAGE value="DONE: I forget, what I do" />
<MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" /> <MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" />
<MESSAGE value="UPDATE: README.md" /> <MESSAGE value="UPDATE: README.md" />
<option name="LAST_COMMIT_MESSAGE" value="UPDATE: README.md" /> <MESSAGE value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
<option name="LAST_COMMIT_MESSAGE" value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
</component> </component>
</project> </project>

View File

@ -8,20 +8,22 @@ export default function Checkboxes() {
return ( return (
<div className={"m3 m3-wrapper"}> <div className={"m3 m3-wrapper"}>
<h1> Checkboxes </h1> <h1> Checkboxes </h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
<div> <div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
<h2> Default </h2> <div>
<div style={{display: "flex", gap: "2em"}}> <h2> Default </h2>
<Checkbox centralRipple/> <div style={{display: "flex", gap: "2em"}}>
<Checkbox defaultChecked/> <Checkbox centralRipple/>
<Checkbox indeterminate={true}/> <Checkbox defaultChecked/>
<Checkbox indeterminate={true}/>
</div>
</div> </div>
</div> <div>
<div> <h2> Disabled </h2>
<h2> Disabled </h2> <div style={{display: "flex", gap: "2em"}}>
<div style={{display: "flex", gap: "2em"}}> <Checkbox disabled/>
<Checkbox disabled/> <Checkbox disabled defaultChecked/>
<Checkbox disabled defaultChecked/> </div>
</div> </div>
</div> </div>
<div> <div>

View File

@ -8,7 +8,7 @@ function IconButtons() {
return ( return (
<div className={"m3 m3-wrapper"}> <div className={"m3 m3-wrapper"}>
<h1> Icon buttons </h1> <h1> Icon buttons </h1>
<div style={{display: "flex", flexDirection: "column", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div> <div>
<h2> Default buttons </h2> <h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>

View File

@ -5,7 +5,7 @@ export default function Radios() {
return ( return (
<div className={"m3 m3-wrapper"}> <div className={"m3 m3-wrapper"}>
<h1> Radio </h1> <h1> Radio </h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
<div> <div>
<h2> Default </h2> <h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}> <div style={{display: "flex", gap: "2em"}}>

View File

@ -5,48 +5,50 @@ export default function Switches() {
return ( return (
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}> <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
<h1> Switches </h1> <h1> Switches </h1>
<div style={{display: "flex", flexDirection: "column"}}> <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<h2 style={{margin: 0}}> Without icon </h2> <div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}> <h2 style={{margin: 0}}> Without icon </h2>
<div> <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<h2> Default </h2> <div>
<Switch/> <h2> Default </h2>
<Switch defaultChecked/> <Switch/>
</div> <Switch defaultChecked/>
<div> </div>
<h2> Disabled </h2> <div>
<Switch disabled/> <h2> Disabled </h2>
<Switch disabled defaultChecked/> <Switch disabled/>
<Switch disabled defaultChecked/>
</div>
</div> </div>
</div> </div>
</div> <div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: "flex", flexDirection: "column"}}> <h2 style={{margin: 0}}> With icon (both)</h2>
<h2 style={{margin: 0}}> With icon (both)</h2> <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}> <div>
<div> <h2> Default </h2>
<h2> Default </h2> <Switch icon/>
<Switch icon/> <Switch defaultChecked icon/>
<Switch defaultChecked icon/> </div>
</div> <div>
<div> <h2> Disabled </h2>
<h2> Disabled </h2> <Switch disabled icon/>
<Switch disabled icon/> <Switch disabled defaultChecked icon/>
<Switch disabled defaultChecked icon/> </div>
</div> </div>
</div> </div>
</div> <div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: "flex", flexDirection: "column"}}> <h2 style={{margin: 0}}> With icon (selected)</h2>
<h2 style={{margin: 0}}> With icon (selected)</h2> <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}> <div>
<div> <h2> Default </h2>
<h2> Default </h2> <Switch selected icon/>
<Switch selected icon/> <Switch selected defaultChecked icon/>
<Switch selected defaultChecked icon/> </div>
</div> <div>
<div> <h2> Disabled </h2>
<h2> Disabled </h2> <Switch selected disabled icon/>
<Switch selected disabled icon/> <Switch selected disabled defaultChecked icon/>
<Switch selected disabled defaultChecked icon/> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,12 @@
import "../src/styles/generics.css" import "../src/styles/generics.css"
import "../src/styles/button.css" import "../src/styles/button.css"
import "../src/styles/ripple.css" import "../src/styles/ripple.css"
import {Metadata} from "next";
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ export default function RootLayout({
children, children,

2
dist/output.css vendored
View File

@ -226,7 +226,7 @@ select {
/* /*
1. Correct the inability to style clickable types in iOS and Safari. 1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-skeleton styles. 2. Remove default button-layout styles.
*/ */
button, button,

View File

@ -226,7 +226,7 @@ select {
/* /*
1. Correct the inability to style clickable types in iOS and Safari. 1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-skeleton styles. 2. Remove default button-layout styles.
*/ */
button, button,

View File

@ -1,7 +1,8 @@
import {forwardRef} from "react"; import {forwardRef} from "react";
import {buttonMainProps} from "../button-skeleton/button.types"; import {Icon} from "../material-you-components";
import {ButtonLayout} from "../button-skeleton/button-layout";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
import {ButtonLayout} from "../button-layout/button-layout";
import {buttonMainProps} from "../button-layout/button.types";
/** /**
* Button component * Button component
@ -18,14 +19,14 @@ export const Button = forwardRef(
variant={variant ? variant : "filled"}> variant={variant ? variant : "filled"}>
{ {
icon ? icon ?
<span className={"m3 m3-icon"}> <Icon iconSize={20}>
{icon} {icon}
</span> </Icon>
: <></> : <></>
} }
<span className={"label-large"}> <span className={"label-large"}>
{props.children} {props.children}
</span> </span>
</ButtonLayout> </ButtonLayout>
) )

View File

@ -0,0 +1,32 @@
"use client"
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
import {CheckboxLayoutProps} from "./checkbox-layout.types";
export const CheckBoxSkeleton = forwardRef(
function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
const checkboxRef = useRef<any>(null);
useEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true;
}, []);
useImperativeHandle(ref, () => checkboxRef.current);
let classesType = typeInput || type;
const classes = props.className !== undefined ?
`m3 m3-${type} ${props.className}` : `m3 m3-${classesType}`
return (
<input ref={checkboxRef}
{...props}
type={type}
className={classes.trimEnd()}/>
);
}
);

View File

@ -0,0 +1,7 @@
import {PropsWithChildren} from "react";
export interface CheckboxLayoutProps extends PropsWithChildren<any>{
indeterminate?: boolean;
typeInput? : string;
type? : string;
}

View File

@ -1,34 +0,0 @@
"use client"
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
export const CheckBoxSkeleton = forwardRef(
function CheckBoxBase(props : any, ref) : JSX.Element {
const checkboxRef = useRef<any>(null);
useEffect(() => {
checkboxRef.current.indeterminate = props.indeterminate === "true";
}, []);
useImperativeHandle(ref, () => checkboxRef);
let type = props.typeInput || props.type,
_props = {...props};
if(_props.indeterminate) delete _props.indeterminate;
if(_props.typeInput) delete _props.typeInput;
const classes = props.className !== undefined ?
`m3 m3-${type} ${props.className}` : `m3 m3-${type}`
return (
<input ref={checkboxRef}
{..._props}
type={props.type}
className={classes.trimEnd()}/>
);
}
);

View File

@ -1,8 +1,8 @@
import {RippleArea} from "../ripple/ripple-area"; 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"; import {IRippleProps} from "../ripple/ripple.types";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
/** /**
* Checkbox component * Checkbox component
@ -13,17 +13,25 @@ export const Checkbox = forwardRef(
({centralRipple, ...props} : any & IRippleProps, ref) => { ({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive); events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd(); const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString(); const indeterminate = (props.indeterminate === true).toString();
useImperativeHandle(ref, () => checkboxRef.current)
useEffect(() => {
setChecked(!checked)
}, [checkboxRef.current?.checked]);
return ( return (
<label {...events} <label {...events}
className={classes}> className={classes}>
<CheckBoxSkeleton {...props} <CheckBoxSkeleton {...props}
ref={ref} ref={checkboxRef}
indeterminate={indeterminate} indeterminate={indeterminate}
type={"checkbox"}/> type={"checkbox"}/>
<span className={"m3 m3-checkbox-state-layer"}/> <span className={"m3 m3-checkbox-state-layer"}/>

View File

@ -1,30 +1,45 @@
import {forwardRef} from "react"; import {forwardRef} from "react";
import {FABMainProps} from "../button-skeleton/button.types"; import {FABMainProps} from "../button-layout/button.types";
import {ButtonLayout} from "../button-skeleton/button-layout"; import {ButtonLayout} from "../button-layout/button-layout";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
import {Icon} from "../material-you-components";
/** /**
* FABs component * FABs component
** description ** description
*/ */
const sizes = {
"small": 24,
"default": 24,
"large": 36,
"extended": 24,
}
export const FAB = forwardRef( export const FAB = forwardRef(
({variant, disabled, icon, centralRipple = false, size, elevated, ...props} : FABMainProps & IRippleProps, ref) => ( ({
variant,
disabled,
icon,
centralRipple = false,
size = "default",
elevated,
...props} : FABMainProps & IRippleProps, ref) => (
<ButtonLayout {...props} <ButtonLayout {...props}
ref={ref} ref={ref}
centralRipple={centralRipple} centralRipple={centralRipple}
variant={variant ? variant : "surface"} variant={variant ? variant : "surface"}
className={`m3-fab m3-${size ?? "default"}-fab ${!(elevated ?? false) && "without-elevation"}`}> className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && "without-elevation"}`}>
<span className={"m3-icon"}>
{icon} <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
</span> {icon}
</Icon>
{ {
size === "extended" ? ( size === "extended" ? (
<span className={"label-large"}> <span className={"label-large"}>
{props.children} {props.children}
</span> </span>
) ) : <></>
: <></>
} }
</ButtonLayout> </ButtonLayout>
) )

View File

@ -1,35 +1,45 @@
import {ButtonLayout} from "../button-skeleton/button-layout"; import {ButtonLayout} from "../button-layout/button-layout";
import {iconButtonMainProps} from "../button-skeleton/button.types"; import {iconButtonMainProps} from "../button-layout/button.types";
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react"; import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
import {Icon} from "../material-you-components";
/** /**
* Icon button-skeleton component * Icon button-layout component
** description ** description
*/ */
export const IconButton = forwardRef( export const IconButton = forwardRef(
({icon, variant, disabled, selected = false, toggled = false, centralRipple, ...props} : iconButtonMainProps & IRippleProps, ref) => { ({
icon,
variant,
disabled,
selected = false,
toggled = false,
centralRipple,
...props
} : iconButtonMainProps & IRippleProps,
ref) => {
const [toggleIcon, setToggleIcon] = useState<any>({ const [toggleIcon, setToggleIcon] = useState<any>({
state : selected == true ? "selected" : "unselected", state : selected == true ? "selected" : "unselected",
icon : toggled ? toggled.unselected : "" icon : toggled ? toggled.unselected ?? "add_circle" : "add_circle"
}); });
const toggle = useCallback((classes, icon) => { const toggle = (classes, icon) => {
setToggleIcon(() => ({ setToggleIcon(() => ({
state : classes, state : classes,
icon : icon, icon : icon,
})) }))
}, []) }
let buttonRef = useRef<HTMLButtonElement>(null); let buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback(() => { const callback = useCallback(() => {
if(toggled) { if(toggled) {
if (toggleIcon.state === "selected") toggle("", toggled.unselected) if (toggleIcon.state === "selected") toggle("", toggled.unselected ?? "add_circle")
else toggle("selected", toggled.selected) else toggle("selected", toggled.selected ?? "add_circle")
} }
if(props.onClick) props.onClick(); if(props.onClick) props.onClick();
}, [toggleIcon]) }, [toggleIcon])
@ -44,11 +54,10 @@ export const IconButton = forwardRef(
disabled={disabled} disabled={disabled}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()} className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
variant={variant ? variant : "default"}> variant={variant ? variant : "default"}>
<span className={"m3-icon"}>
{ <Icon svgSize={40} iconSize={28} fill={toggleIcon.state === "selected" ? 1 : 0}>
toggled ? toggleIcon.icon : icon ? icon : <></> {toggled ? toggleIcon.icon : icon ? icon : undefined}
} </Icon>
</span>
</ButtonLayout> </ButtonLayout>
) )

View File

@ -0,0 +1,48 @@
import React, {ForwardedRef, forwardRef} from 'react';
import {IconProps} from "./icon.types";
import {bool, number, string} from "prop-types";
const Icon = forwardRef(function Icon(
{
grade = 0,
weight = 500,
svgSize = 20,
fill = false,
iconSize = 20,
opticalSize = 24,
type = "outlined",
...props
} : IconProps, ref : ForwardedRef<any>) {
let fontVariation = {
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`
};
return (
<svg {...props}
ref={ref}
className={`m3 m3-svg-icon ${props.className ?? ""}`.trim()}
width={svgSize}
height={svgSize}>
<text className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
style={fontVariation}
x={"50%"}
y={"50%"}>
{props.children ?? "add_circle"}
</text>
</svg>
);
})
Icon.propTypes = {
fill : bool,
type : string,
grade : number,
weight : number,
svgSize : number,
iconSize : number,
children : string,
opticalSize : number,
}
export {Icon};

View File

@ -0,0 +1,11 @@
import {PropsWithChildren} from "react";
export interface IconProps extends PropsWithChildren<any>{
fill?: boolean;
grade?: number;
svgSize?: number;
iconSize?: number;
opticalSize?: number;
type?: "outlined" | "rounded" | "sharp";
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
}

View File

@ -1,6 +1,7 @@
"use client" "use client"
export {FAB} from "./fab/fab"; export {FAB} from "./fab/fab";
export {Icon} from "./icon/icon";
export {Radio} from "./radio/radio"; export {Radio} from "./radio/radio";
export {Badge} from "./badge/badge"; export {Badge} from "./badge/badge";
export {Switch} from "./switch/switch"; export {Switch} from "./switch/switch";
@ -11,4 +12,4 @@ export {RippleArea} from "./ripple/ripple-area";
export {Ripples, Ripple} from "./ripple/ripple"; export {Ripples, Ripple} from "./ripple/ripple";
export {TextField} from "./text-field/text-field"; export {TextField} from "./text-field/text-field";
export {IconButton} from "./icon-button/icon-button"; export {IconButton} from "./icon-button/icon-button";
export {ButtonLayout} from "./button-skeleton/button-layout"; export {ButtonLayout} from "./button-layout/button-layout";

View File

@ -1,7 +1,7 @@
import {RippleArea} from "../ripple/ripple-area"; 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 {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from "../ripple/ripple.types";
/** /**

View File

@ -1,6 +1,6 @@
import {forwardRef} from "react"; import {forwardRef} from "react";
import {switchMainProps} from "./switch.types"; import {switchMainProps} from "./switch.types";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
/** /**
* Switch component * Switch component

View File

@ -1,18 +1,12 @@
"use client" "use client"
import React, {useState} from 'react';
import {bool, string} from "prop-types"; import {bool, string} from "prop-types";
import React, {PropsWithChildren, useState} from 'react'; import {TextFieldInterface} from "./text-field.types";
interface TextFieldInterface extends PropsWithChildren<any>{ export function TextField({variant = "filled", withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
variant: "filled" | "outlined",
withAfterIcon?: boolean,
withBeforeIcon?: boolean,
supportingText?: string,
}
export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) { const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
const [raised, setRaised] = useState<boolean>(props.placeholder ? true : false);
const callback = (e : any) => { const callback = (e : any) => {
if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false); if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false);
@ -47,7 +41,7 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
callback(event) callback(event)
if(props.onBlur) props.onBlur(event) if(props.onBlur) props.onBlur(event)
}}/> }}/>
<label className={raised && "raised"}> <label className={raised ? "raised" : ""}>
{props.children ?? "Label"} {props.children ?? "Label"}
</label> </label>
<span className={"m3-text-field-state-layer"}/> <span className={"m3-text-field-state-layer"}/>

View File

@ -0,0 +1,8 @@
import {PropsWithChildren} from "react";
export interface TextFieldInterface extends PropsWithChildren<any>{
variant: "filled" | "outlined",
withAfterIcon?: boolean,
withBeforeIcon?: boolean,
supportingText?: string,
}

View File

@ -6,12 +6,6 @@ button:not(.m3-fab, .m3-icon-button) {
line-height: var(--md-sys-typescale-label-large-line-height); line-height: var(--md-sys-typescale-label-large-line-height);
box-sizing: border-box; box-sizing: border-box;
} }
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
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 { button:not(.m3-fab, .m3-icon-button).m3 {
contain: content; contain: content;
box-sizing: border-box; box-sizing: border-box;
@ -28,37 +22,42 @@ button:not(.m3-fab, .m3-icon-button).m3 {
button:not(.m3-fab, .m3-icon-button).filled { button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon { button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
fill: var(--md-sys-color-on-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined { button:not(.m3-fab, .m3-icon-button).outlined {
outline-offset: -1px; outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline) !important; outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0); 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 {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text { button:not(.m3-fab, .m3-icon-button).text {
padding: 10px 12px !important; padding: 10px 12px !important;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated { button:not(.m3-fab, .m3-icon-button).elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
}
button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal { button:not(.m3-fab, .m3-icon-button).tonal {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container);
} }
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button)::before { button:not(.m3-fab, .m3-icon-button)::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: ""; content: "";

View File

@ -1 +1 @@
{"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"} {"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;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;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

View File

@ -8,12 +8,6 @@ button:not(.m3-fab, .m3-icon-button)
line-height: var(--md-sys-typescale-label-large-line-height) line-height: var(--md-sys-typescale-label-large-line-height)
box-sizing: border-box box-sizing: border-box
& > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-size: 14pt
font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: var(--md-sys-typescale-label-large-line-height)
&.m3 &.m3
contain: content contain: content
box-sizing: border-box box-sizing: border-box
@ -29,32 +23,41 @@ button:not(.m3-fab, .m3-icon-button)
&.filled &.filled
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)
&, & > span.m3-icon &, & > svg.m3-svg-icon
color: var(--md-sys-color-on-primary) color: var(--md-sys-color-on-primary)
fill: var(--md-sys-color-on-primary)
&.outlined &.outlined
outline-offset: -1px outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline) !important outline: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000 background-color: #00000000
&, & > span.m3-icon color: var(--md-sys-color-primary)
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.text &.text
padding: 10px 12px !important padding: 10px 12px !important
background-color: #00000000 background-color: #00000000
&, & > span.m3-icon color: var(--md-sys-color-primary)
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.elevated &.elevated
@include elevation-1(false) @include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low) background-color: var(--md-sys-color-surface-container-low)
&, & > span.m3-icon color: var(--md-sys-color-primary)
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.tonal &.tonal
background-color: var(--md-sys-color-secondary-container) background-color: var(--md-sys-color-secondary-container)
&, & > span.m3-icon color: var(--md-sys-color-on-secondary-container)
color: var(--md-sys-color-on-secondary-container)
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)
&::before &::before
@include state-layer @include state-layer

View File

@ -29,27 +29,28 @@ input[type=checkbox].m3.m3-checkbox {
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
z-index: 10; z-index: 10;
width: 14px; width: 18px;
height: 14px; height: 18px;
margin: 0; margin: 0;
border-radius: 2px; border-radius: 2px;
border: 2px solid var(--md-sys-color-on-surface-variant); outline-offset: -2px;
outline: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); 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)) { input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
border: 2px solid var(--md-sys-color-error); outline-color: var(--md-sys-color-error);
background-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) { input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
border: 2px solid var(--md-sys-color-error); 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)) { 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)) {
border: 2px solid var(--md-sys-color-primary); outline-color: var(--md-sys-color-primary);
background-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) { input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
border: 2px solid var(--md-sys-color-on-surface); outline-color: var(--md-sys-color-on-surface);
} }
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) { input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
@ -69,7 +70,7 @@ input[type=checkbox].m3.m3-checkbox:indeterminate::after {
content: "check_indeterminate_small"; content: "check_indeterminate_small";
} }
input[type=checkbox].m3.m3-checkbox:hover { input[type=checkbox].m3.m3-checkbox:hover {
border: 2px solid var(--md-sys-color-on-surface); outline-color: var(--md-sys-color-on-surface);
} }
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);

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;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","file":"checkbox.css"} {"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;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","file":"checkbox.css"}

View File

@ -20,28 +20,29 @@ input[type="checkbox"].m3.m3-checkbox
justify-content: center justify-content: center
box-sizing: content-box box-sizing: content-box
z-index: 10 z-index: 10
width: 14px width: 18px
height: 14px height: 18px
margin: 0 margin: 0
border-radius: 2px border-radius: 2px
border: 2px solid var(--md-sys-color-on-surface-variant) outline-offset: -2px
outline: 2px solid var(--md-sys-color-on-surface-variant)
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)) &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
border: 2px solid var(--md-sys-color-error) outline-color: var(--md-sys-color-error)
background-color: var(--md-sys-color-error) background-color: var(--md-sys-color-error)
&:is(.m3.m3-error, :user-invalid) &:is(.m3.m3-error, :user-invalid)
border: 2px solid var(--md-sys-color-error) outline-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))
border: 2px solid var(--md-sys-color-primary) outline-color: var(--md-sys-color-primary)
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)
&:disabled &:disabled
&:is(:hover, &) &:is(:hover, &)
opacity: 38% opacity: 38%
border: 2px solid var(--md-sys-color-on-surface) outline-color: var(--md-sys-color-on-surface)
&:checked:is(:hover, &) &:checked:is(:hover, &)
opacity: 38% opacity: 38%
@ -61,7 +62,7 @@ input[type="checkbox"].m3.m3-checkbox
content: "check_indeterminate_small" content: "check_indeterminate_small"
&:hover &:hover
border: 2px solid var(--md-sys-color-on-surface) outline-color: var(--md-sys-color-on-surface)
&: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)

View File

@ -27,48 +27,52 @@ button.m3.m3-fab::before {
} }
button.m3.m3-fab.surface { button.m3.m3-fab.surface {
background-color: var(--md-sys-color-surface-container-high); background-color: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-primary);
} }
button.m3.m3-fab.surface:not(.without-elevation) { button.m3.m3-fab.surface:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface { button.m3.m3-fab.surface > svg.m3-svg-icon {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-fab.primary { button.m3.m3-fab.primary {
background-color: var(--md-sys-color-primary-container); background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
} }
button.m3.m3-fab.primary:not(.without-elevation) { button.m3.m3-fab.primary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary { button.m3.m3-fab.primary > svg.m3-svg-icon {
color: var(--md-sys-color-on-primary-container); fill: var(--md-sys-color-on-primary-container);
} }
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
} }
button.m3.m3-fab.secondary { button.m3.m3-fab.secondary {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
} }
button.m3.m3-fab.secondary:not(.without-elevation) { button.m3.m3-fab.secondary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary { button.m3.m3-fab.secondary > svg.m3-svg-icon {
color: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
} }
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary {
background-color: var(--md-sys-color-tertiary-container); background-color: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
} }
button.m3.m3-fab.tertiary:not(.without-elevation) { button.m3.m3-fab.tertiary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary > svg.m3-svg-icon {
color: var(--md-sys-color-on-tertiary-container); fill: var(--md-sys-color-on-tertiary-container);
} }
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;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","file":"fabs.css"} {"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;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","file":"fabs.css"}

View File

@ -1,33 +1,13 @@
@font-face { @font-face {
font-family: Material-Icons-Regular; font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialIcons-Regular.ttf"); src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
} src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
@font-face {
font-family: Material-Icons-Outlined-Regular;
src: url("./font/MaterialIconsOutlined-Regular.otf");
}
@font-face {
font-family: Material-Icons-Round-Regular;
src: url("./font/MaterialIconsRound-Regular.otf");
}
@font-face {
font-family: Material-Icons-Sharp-Regular;
src: url("./font/MaterialIconsSharp-Regular.otf");
}
@font-face {
font-family: Material-Icons-Two-Tone-Regular;
src: url("./font/MaterialIconsTwoTone-Regular.otf");
} }
@font-face { @font-face {
font-family: Material-Symbols-Outlined-Regular; font-family: Material-Symbols-Outlined-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
} }
@font-face {
font-family: Material-Symbols-Round-Regular;
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face { @font-face {
font-family: Material-Symbols-Sharp-Regular; font-family: Material-Symbols-Sharp-Regular;
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAAA;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","file":"fonts.css"} {"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;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","file":"fonts.css"}

View File

@ -1,70 +1,16 @@
@font-face $fonts-family: ["Rounded", "Outlined", "Sharp"]
font-family: Material-Icons-Regular
src: url("./font/MaterialIcons-Regular.ttf")
@font-face @each $font-family in $fonts-family
font-family: Material-Icons-Outlined-Regular @font-face
src: url("./font/MaterialIconsOutlined-Regular.otf") font-family: Material-Symbols-#{$font-family}-Regular
src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700, "Black": 900)
font-family: Material-Icons-Round-Regular
src: url("./font/MaterialIconsRound-Regular.otf")
@font-face @each $name, $weight in $weights
font-family: Material-Icons-Sharp-Regular @font-face
src: url("./font/MaterialIconsSharp-Regular.otf") font-family: Roboto
font-face-name: #{$name}
@font-face font-weight: #{$weight}
font-family: Material-Icons-Two-Tone-Regular src: url("./font/Roboto-#{$name}.ttf")
src: url("./font/MaterialIconsTwoTone-Regular.otf")
@font-face
font-family: Material-Symbols-Outlined-Regular
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Material-Symbols-Round-Regular
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Material-Symbols-Sharp-Regular
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Roboto
font-face-name: Thin
font-weight: 100
src: url("./font/Roboto-Thin.ttf")
@font-face
font-family: Roboto
font-face-name: Light
font-weight: 300
src: url("./font/Roboto-Light.ttf")
@font-face
font-family: Roboto
font-face-name: Regular
font-weight: 400
src: url("./font/Roboto-Regular.ttf")
@font-face
font-family: Roboto
font-face-name: Medium
font-weight: 500
src: url("./font/Roboto-Medium.ttf")
@font-face
font-family: Roboto
font-face-name: Bold
font-weight: 700
src: url("./font/Roboto-Bold.ttf")
@font-face
font-family: Roboto
font-face-name: Black
font-weight: 900
src: url("./font/Roboto-Black.ttf")

View File

@ -32,48 +32,52 @@ button.m3.m3-fab::before {
} }
button.m3.m3-fab.surface { button.m3.m3-fab.surface {
background-color: var(--md-sys-color-surface-container-high); background-color: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-primary);
} }
button.m3.m3-fab.surface:not(.without-elevation) { button.m3.m3-fab.surface:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface { button.m3.m3-fab.surface > svg.m3-svg-icon {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-fab.primary { button.m3.m3-fab.primary {
background-color: var(--md-sys-color-primary-container); background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
} }
button.m3.m3-fab.primary:not(.without-elevation) { button.m3.m3-fab.primary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary { button.m3.m3-fab.primary > svg.m3-svg-icon {
color: var(--md-sys-color-on-primary-container); fill: var(--md-sys-color-on-primary-container);
} }
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
} }
button.m3.m3-fab.secondary { button.m3.m3-fab.secondary {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
} }
button.m3.m3-fab.secondary:not(.without-elevation) { button.m3.m3-fab.secondary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary { button.m3.m3-fab.secondary > svg.m3-svg-icon {
color: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
} }
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary {
background-color: var(--md-sys-color-tertiary-container); background-color: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
} }
button.m3.m3-fab.tertiary:not(.without-elevation) { button.m3.m3-fab.tertiary:not(.without-elevation) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
} }
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary > svg.m3-svg-icon {
color: var(--md-sys-color-on-tertiary-container); fill: var(--md-sys-color-on-tertiary-container);
} }
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
@ -137,6 +141,74 @@ button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
} }
svg.m3.m3-svg-icon > text {
alignment-baseline: central;
text-anchor: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
aspect-ratio: 1;
line-height: 12px;
font-size: 12px;
}
svg.m3.m3-svg-icon > text.m3-size-16px {
width: 16px;
aspect-ratio: 1;
line-height: 16px;
font-size: 16px;
}
svg.m3.m3-svg-icon > text.m3-size-20px {
width: 20px;
aspect-ratio: 1;
line-height: 20px;
font-size: 20px;
}
svg.m3.m3-svg-icon > text.m3-size-24px {
width: 24px;
aspect-ratio: 1;
line-height: 24px;
font-size: 24px;
}
svg.m3.m3-svg-icon > text.m3-size-28px {
width: 28px;
aspect-ratio: 1;
line-height: 28px;
font-size: 28px;
}
svg.m3.m3-svg-icon > text.m3-size-32px {
width: 32px;
aspect-ratio: 1;
line-height: 32px;
font-size: 32px;
}
svg.m3.m3-svg-icon > text.m3-size-36px {
width: 36px;
aspect-ratio: 1;
line-height: 36px;
font-size: 36px;
}
svg.m3.m3-svg-icon > text.m3-size-40px {
width: 40px;
aspect-ratio: 1;
line-height: 40px;
font-size: 40px;
}
svg.m3.m3-svg-icon > text.m3-size-48px {
width: 48px;
aspect-ratio: 1;
line-height: 48px;
font-size: 48px;
}
svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular;
}
svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular;
}
svg.m3.m3-svg-icon > text.m3-Sharp {
font-family: Material-Symbols-Sharp-Regular;
}
label.m3.m3-radio-label { label.m3.m3-radio-label {
display: flex; display: flex;
position: relative; position: relative;
@ -236,35 +308,15 @@ svg.m3.m3-badge > text {
} }
@font-face { @font-face {
font-family: Material-Icons-Regular; font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialIcons-Regular.ttf"); src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
} src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
@font-face {
font-family: Material-Icons-Outlined-Regular;
src: url("./font/MaterialIconsOutlined-Regular.otf");
}
@font-face {
font-family: Material-Icons-Round-Regular;
src: url("./font/MaterialIconsRound-Regular.otf");
}
@font-face {
font-family: Material-Icons-Sharp-Regular;
src: url("./font/MaterialIconsSharp-Regular.otf");
}
@font-face {
font-family: Material-Icons-Two-Tone-Regular;
src: url("./font/MaterialIconsTwoTone-Regular.otf");
} }
@font-face { @font-face {
font-family: Material-Symbols-Outlined-Regular; font-family: Material-Symbols-Outlined-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
} }
@font-face {
font-family: Material-Symbols-Round-Regular;
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face { @font-face {
font-family: Material-Symbols-Sharp-Regular; font-family: Material-Symbols-Sharp-Regular;
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
@ -314,12 +366,6 @@ button:not(.m3-fab, .m3-icon-button) {
line-height: var(--md-sys-typescale-label-large-line-height); line-height: var(--md-sys-typescale-label-large-line-height);
box-sizing: border-box; box-sizing: border-box;
} }
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
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 { button:not(.m3-fab, .m3-icon-button).m3 {
contain: content; contain: content;
box-sizing: border-box; box-sizing: border-box;
@ -336,37 +382,42 @@ button:not(.m3-fab, .m3-icon-button).m3 {
button:not(.m3-fab, .m3-icon-button).filled { button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon { button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
fill: var(--md-sys-color-on-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined { button:not(.m3-fab, .m3-icon-button).outlined {
outline-offset: -1px; outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline) !important; outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0); 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 {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text { button:not(.m3-fab, .m3-icon-button).text {
padding: 10px 12px !important; padding: 10px 12px !important;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated { button:not(.m3-fab, .m3-icon-button).elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
}
button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal { button:not(.m3-fab, .m3-icon-button).tonal {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container);
} }
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button)::before { button:not(.m3-fab, .m3-icon-button)::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: ""; content: "";
@ -674,27 +725,28 @@ input[type=checkbox].m3.m3-checkbox {
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
z-index: 10; z-index: 10;
width: 14px; width: 18px;
height: 14px; height: 18px;
margin: 0; margin: 0;
border-radius: 2px; border-radius: 2px;
border: 2px solid var(--md-sys-color-on-surface-variant); outline-offset: -2px;
outline: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); 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)) { input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
border: 2px solid var(--md-sys-color-error); outline-color: var(--md-sys-color-error);
background-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) { input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
border: 2px solid var(--md-sys-color-error); 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)) { 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)) {
border: 2px solid var(--md-sys-color-primary); outline-color: var(--md-sys-color-primary);
background-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) { input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
border: 2px solid var(--md-sys-color-on-surface); outline-color: var(--md-sys-color-on-surface);
} }
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) { input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
@ -714,7 +766,7 @@ input[type=checkbox].m3.m3-checkbox:indeterminate::after {
content: "check_indeterminate_small"; content: "check_indeterminate_small";
} }
input[type=checkbox].m3.m3-checkbox:hover { input[type=checkbox].m3.m3-checkbox:hover {
border: 2px solid var(--md-sys-color-on-surface); outline-color: var(--md-sys-color-on-surface);
} }
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);
@ -983,68 +1035,60 @@ button.m3.m3-icon-button > span.m3-icon {
font-size: 2em; font-size: 2em;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
} }
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
font-family: Material-Symbols-Round-Regular, serif;
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
font-size: 13.49px;
font-family: Material-Icons-Regular, serif;
font-weight: 500;
}
button.m3.m3-icon-button.default { button.m3.m3-icon-button.default {
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.default.selected.toggled { button.m3.m3-icon-button.default.selected.toggled {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.filled { button.m3.m3-icon-button.filled {
color: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.filled.toggled { button.m3.m3-icon-button.filled.toggled {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
} }
button.m3.m3-icon-button.filled.selected.toggled { button.m3.m3-icon-button.filled.selected.toggled {
color: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.tonal.toggled { button.m3.m3-icon-button.tonal.toggled {
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
} }
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
color: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
} }
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
color: 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);
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);
} }
button.m3.m3-icon-button.outlined { button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.outlined:disabled { button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.outlined.toggled.selected:disabled { button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
color: 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);
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);
} }
button.m3.m3-icon-button.outlined.selected.toggled { button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface); background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface); fill: var(--md-sys-color-inverse-on-surface);
} }
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,5 @@
@import "fabs" @import "fabs"
@import "icon"
@import "radio" @import "radio"
@import "badge" @import "badge"
@import "fonts" @import "fonts"

View File

@ -24,68 +24,60 @@ button.m3.m3-icon-button > span.m3-icon {
font-size: 2em; font-size: 2em;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
} }
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
font-family: Material-Symbols-Round-Regular, serif;
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
font-size: 13.49px;
font-family: Material-Icons-Regular, serif;
font-weight: 500;
}
button.m3.m3-icon-button.default { button.m3.m3-icon-button.default {
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.default.selected.toggled { button.m3.m3-icon-button.default.selected.toggled {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.filled { button.m3.m3-icon-button.filled {
color: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.filled.toggled { button.m3.m3-icon-button.filled.toggled {
color: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
} }
button.m3.m3-icon-button.filled.selected.toggled { button.m3.m3-icon-button.filled.selected.toggled {
color: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.tonal.toggled { button.m3.m3-icon-button.tonal.toggled {
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
} }
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
color: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
} }
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
color: 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);
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);
} }
button.m3.m3-icon-button.outlined { button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
color: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.outlined:disabled { button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button.m3.m3-icon-button.outlined.toggled.selected:disabled { button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
color: 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);
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);
} }
button.m3.m3-icon-button.outlined.selected.toggled { button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface); background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface); fill: var(--md-sys-color-inverse-on-surface);
} }
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;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","file":"icon-button.css"} {"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;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;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","file":"icon-button.css"}

View File

@ -26,73 +26,64 @@ button.m3.m3-icon-button
font-size: 2em font-size: 2em
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48 font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
&:is(.default, .filled, .tonal, .outlined)
&
font-family: Material-Symbols-Round-Regular, serif
&.selected.toggled
font-size: 13.49px
font-family: Material-Icons-Regular, serif
font-weight: 500
&.default &.default
& &
color: var(--md-sys-color-on-surface-variant) fill: var(--md-sys-color-on-surface-variant)
background-color: #00000000 background-color: #00000000
&:disabled, &.selected:disabled, &.selected.toggled:disabled &:disabled, &.selected:disabled, &.selected.toggled:disabled
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent) fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
background-color: #00000000 background-color: #00000000
&.selected.toggled &.selected.toggled
color: var(--md-sys-color-primary) fill: var(--md-sys-color-primary)
&.filled &.filled
& &
color: var(--md-sys-color-on-primary) fill: var(--md-sys-color-on-primary)
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)
&.toggled &.toggled
color: var(--md-sys-color-primary) fill: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-highest) background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled &.selected.toggled
color: var(--md-sys-color-on-primary) fill: var(--md-sys-color-on-primary)
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)
&.tonal &.tonal
&.toggled &.toggled
color: var(--md-sys-color-on-surface-variant) fill: var(--md-sys-color-on-surface-variant)
background-color: var(--md-sys-color-surface-container-highest) background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled, & &.selected.toggled, &
color: var(--md-sys-color-on-secondary-container) fill: var(--md-sys-color-on-secondary-container)
background-color: var(--md-sys-color-secondary-container) background-color: var(--md-sys-color-secondary-container)
&:is(.tonal, .filled, .toggled.selected):disabled &:is(.tonal, .filled, .toggled.selected):disabled
color: 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)
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)
&.outlined &.outlined
& &
border: 1px solid var(--md-sys-color-outline) border: 1px solid var(--md-sys-color-outline)
color: var(--md-sys-color-on-surface-variant) fill: var(--md-sys-color-on-surface-variant)
background-color: #00000000 background-color: #00000000
&:disabled &:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent) fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
background-color: #00000000 background-color: #00000000
&.toggled.selected:disabled &.toggled.selected:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent) border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent)
color: 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)
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)
&.selected.toggled &.selected.toggled
border: 1px solid #00000000 border: 1px solid #00000000
background-color: var(--md-sys-color-inverse-surface) background-color: var(--md-sys-color-inverse-surface)
color: var(--md-sys-color-inverse-on-surface) fill: var(--md-sys-color-inverse-on-surface)
&.filled:not(:disabled) &.filled:not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple

69
src/styles/icon.css Normal file
View File

@ -0,0 +1,69 @@
svg.m3.m3-svg-icon > text {
alignment-baseline: central;
text-anchor: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
aspect-ratio: 1;
line-height: 12px;
font-size: 12px;
}
svg.m3.m3-svg-icon > text.m3-size-16px {
width: 16px;
aspect-ratio: 1;
line-height: 16px;
font-size: 16px;
}
svg.m3.m3-svg-icon > text.m3-size-20px {
width: 20px;
aspect-ratio: 1;
line-height: 20px;
font-size: 20px;
}
svg.m3.m3-svg-icon > text.m3-size-24px {
width: 24px;
aspect-ratio: 1;
line-height: 24px;
font-size: 24px;
}
svg.m3.m3-svg-icon > text.m3-size-28px {
width: 28px;
aspect-ratio: 1;
line-height: 28px;
font-size: 28px;
}
svg.m3.m3-svg-icon > text.m3-size-32px {
width: 32px;
aspect-ratio: 1;
line-height: 32px;
font-size: 32px;
}
svg.m3.m3-svg-icon > text.m3-size-36px {
width: 36px;
aspect-ratio: 1;
line-height: 36px;
font-size: 36px;
}
svg.m3.m3-svg-icon > text.m3-size-40px {
width: 40px;
aspect-ratio: 1;
line-height: 40px;
font-size: 40px;
}
svg.m3.m3-svg-icon > text.m3-size-48px {
width: 48px;
aspect-ratio: 1;
line-height: 48px;
font-size: 48px;
}
svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular;
}
svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular;
}
svg.m3.m3-svg-icon > text.m3-Sharp {
font-family: Material-Symbols-Sharp-Regular;
}
/*# sourceMappingURL=icon.css.map */

1
src/styles/icon.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;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","file":"icon.css"}

19
src/styles/icon.sass Normal file
View File

@ -0,0 +1,19 @@
svg.m3.m3-svg-icon
$sizes: [12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px]
$types: ["Outlined", "Rounded", "Sharp"]
& > text
alignment-baseline: central
text-anchor: middle
@each $size in $sizes
& > text.m3-size-#{$size}
width: $size
aspect-ratio: 1
line-height: $size
font-size: $size
@each $type in $types
& > text.m3-#{$type}
font-family: Material-Symbols-#{$type}-Regular

View File

@ -22,8 +22,9 @@
&:not(.without-elevation) &:not(.without-elevation)
@include elevation-3(false) @include elevation-3(false)
background-color: var($bg-color) background-color: var($bg-color)
& > span.m3-icon, & color: var($color)
color: var($color) & > svg.m3-svg-icon
fill: var($color)
& > .m3.m3-ripple-domain > .m3.ripple & > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var($color) 12%, transparent) background: color-mix(in srgb, var($color) 12%, transparent)