ADDED: icon component
CHANGED: in everything, where use icons (except switch and checkbox), change from icon-font to Icon component
This commit is contained in:
parent
ef6c3d391f
commit
241eb0c9a5
|
|
@ -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 FIXED: Checkboxes, toggled icon-button style" />
|
<MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS 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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"}}>
|
||||||
|
|
|
||||||
|
|
@ -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"}}>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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()}/>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import {PropsWithChildren} from "react";
|
||||||
|
|
||||||
|
export interface CheckboxLayoutProps extends PropsWithChildren<any>{
|
||||||
|
indeterminate?: boolean;
|
||||||
|
typeInput? : string;
|
||||||
|
type? : string;
|
||||||
|
}
|
||||||
|
|
@ -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()}/>
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
@ -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"}/>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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};
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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"}/>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import {PropsWithChildren} from "react";
|
||||||
|
|
||||||
|
export interface TextFieldInterface extends PropsWithChildren<any>{
|
||||||
|
variant: "filled" | "outlined",
|
||||||
|
withAfterIcon?: boolean,
|
||||||
|
withBeforeIcon?: boolean,
|
||||||
|
supportingText?: string,
|
||||||
|
}
|
||||||
|
|
@ -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: "";
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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");
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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")
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
@ -1,4 +1,5 @@
|
||||||
@import "fabs"
|
@import "fabs"
|
||||||
|
@import "icon"
|
||||||
@import "radio"
|
@import "radio"
|
||||||
@import "badge"
|
@import "badge"
|
||||||
@import "fonts"
|
@import "fonts"
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 */
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue