DONE: Dividers, Badges, disable elevation state for FABS
FIXED: Checkboxes, toggled icon-button style
This commit is contained in:
parent
eac5eaed06
commit
40331e8659
|
|
@ -4,17 +4,33 @@
|
|||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="DONE: I forget, what I do">
|
||||
<change afterPath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/styles/badge.sass" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/styles/divider.sass" afterDir="false" />
|
||||
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="DONE: Dividers, Badges, disable elevation state for FABS FIXED: Checkboxes, toggled icon-button style">
|
||||
<change afterPath="$PROJECT_DIR$/app/components/badges.tsx" 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/fabs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/fabs.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.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/badge/badge.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/divider/divider.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/styles/badge.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/badge.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.css.map" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/badge.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.sass" 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/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/divider.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/divider.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.css.map" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/divider.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.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/fabs.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.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.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/mixins/m3-mixins.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" 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" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/radio.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles/radio.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css.map" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
|
@ -25,8 +41,8 @@
|
|||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="TypeScript File" />
|
||||
<option value="TypeScript JSX File" />
|
||||
<option value="Sass File" />
|
||||
<option value="TypeScript JSX File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -48,24 +64,24 @@
|
|||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"git-widget-placeholder": "main",
|
||||
"last_opened_file_path": "/home/drn04/material-you-react",
|
||||
"list.type.of.created.stylesheet": "Sass",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "watcher.settings",
|
||||
"ts.external.directory.path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"git-widget-placeholder": "main",
|
||||
"last_opened_file_path": "/home/drn04/material-you-react",
|
||||
"list.type.of.created.stylesheet": "Sass",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "watcher.settings",
|
||||
"ts.external.directory.path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
}</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="$PROJECT_DIR$/src/styles" />
|
||||
|
|
@ -179,6 +195,8 @@
|
|||
<workItem from="1706351565380" duration="805000" />
|
||||
<workItem from="1706373080363" duration="1879000" />
|
||||
<workItem from="1706426744715" duration="17520000" />
|
||||
<workItem from="1706516378911" duration="15403000" />
|
||||
<workItem from="1706552378046" duration="8039000" />
|
||||
</task>
|
||||
<task id="LOCAL-00021" summary="updated checkbox component">
|
||||
<option name="closed" value="true" />
|
||||
|
|
@ -590,7 +608,6 @@
|
|||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
|
||||
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
|
||||
<MESSAGE value="added sass style sheet file for fabs" />
|
||||
<MESSAGE value="updated button styles and renaming button component file" />
|
||||
|
|
@ -615,6 +632,7 @@
|
|||
<MESSAGE value="TODO: before icon ADDED: semi-complete filled text fields" />
|
||||
<MESSAGE value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
||||
<MESSAGE value="DONE: I forget, what I do" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="DONE: I forget, what I do" />
|
||||
<MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS FIXED: Checkboxes, toggled icon-button style" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="DONE: Dividers, Badges, disable elevation state for FABS FIXED: Checkboxes, toggled icon-button style" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React from 'react';
|
||||
import {Badge} from "../../src/primitive-components/badge/badge";
|
||||
import {Divider} from "../../src/primitive-components/divider/divider";
|
||||
|
||||
export default function Badges() {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"} style={{display:"flex", flexDirection:"row"}}>
|
||||
<div>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.5em",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge/>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge disableValue/>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge disableValue>3487</Badge>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>5</Badge>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>32</Badge>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>322342</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<Divider orientation={"vertical"} variant={"full-width"}/>*/}
|
||||
{/*<div>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* flexDirection: "column",*/}
|
||||
{/* gap: "0.5em",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <Divider variant={"inset"}/>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge>5</Badge>*/}
|
||||
{/* </div>*/}
|
||||
{/* <Divider/>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge>32</Badge>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,79 +4,180 @@ import {FAB} from "../../src/primitive-components/material-you-components";
|
|||
export default function Fabs() {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> FABs </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div style={{display:"flex",flexDirection:"row",gap:"2em"}}>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<h1> FABs with elevation</h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"small"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"primary"}
|
||||
size={"small"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"small"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"small"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"primary"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"secondary"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"tertiary"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"large"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"primary"}
|
||||
size={"large"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"large"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"large"}
|
||||
icon={"edit"}
|
||||
elevated/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"extended"}
|
||||
icon={"edit"}
|
||||
elevated>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"primary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}
|
||||
elevated>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"secondary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}
|
||||
elevated>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}
|
||||
elevated>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB icon={"edit"}/>
|
||||
<FAB variant={"primary"} icon={"edit"}/>
|
||||
<FAB variant={"secondary"} icon={"edit"}/>
|
||||
<FAB variant={"tertiary"} icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"extended"}
|
||||
icon={"edit"}>
|
||||
<h1> FABs without elevation</h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB icon={"edit"}/>
|
||||
<FAB variant={"primary"} icon={"edit"}/>
|
||||
<FAB variant={"secondary"} icon={"edit"}/>
|
||||
<FAB variant={"tertiary"} icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"primary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
</FAB>
|
||||
<FAB variant={"primary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"secondary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
</FAB>
|
||||
<FAB variant={"secondary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
</FAB>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
</FAB>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
96
app/page.tsx
96
app/page.tsx
|
|
@ -1,5 +1,6 @@
|
|||
import {Fragment} from "react";
|
||||
import {Badge, Divider} from "../src/primitive-components/material-you-components";
|
||||
import Fabs from "./components/fabs";
|
||||
import Badges from "./components/badges";
|
||||
|
||||
export default function Page() {
|
||||
return(
|
||||
|
|
@ -20,97 +21,8 @@ export default function Page() {
|
|||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "0.5em",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "150px",
|
||||
backgroundColor: "#00000010",
|
||||
padding: "10px",
|
||||
borderRadius: "15px"
|
||||
}}>
|
||||
<div>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.5em",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge/>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>5</Badge>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>32</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider orientation={"vertical"} variant={"inset"}/>
|
||||
<div>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.5em",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge/>
|
||||
</div>
|
||||
<Divider variant={"inset"}/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>5</Badge>
|
||||
</div>
|
||||
<Divider/>
|
||||
<div style={{
|
||||
width: "24px",
|
||||
aspectRatio: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Badge>32</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Fabs/>
|
||||
<Badges/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,33 @@
|
|||
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
|
||||
import {number, string} from "prop-types";
|
||||
import {bool, number, string} from "prop-types";
|
||||
|
||||
interface BadgeProps extends PropsWithChildren<any>{
|
||||
disableValue?: boolean,
|
||||
}
|
||||
|
||||
const Badge = forwardRef(function Badge({disableValue = false, ...props} : BadgeProps, ref : ForwardedRef<any>) {
|
||||
|
||||
let digitLength = props.children ? 16 + ((props.children.length - 1) * 6) : 6,
|
||||
disableValueClassName = (disableValue || (!props.children ?? true)) ? "disable-value" : "";
|
||||
|
||||
const Badge = forwardRef(function Badge(props : PropsWithChildren<any>, ref : ForwardedRef<any>) {
|
||||
return (
|
||||
<span {...props}
|
||||
className={`m3 m3-badge ${"" ?? props.className}`.trimEnd()}
|
||||
ref={ref}>
|
||||
{props.children && <span>{props.children}</span>}
|
||||
</span>
|
||||
<svg {...props}
|
||||
ref={ref}
|
||||
width={`${digitLength}px`}
|
||||
className={`m3 m3-badge ${"" ?? props.className}${disableValueClassName}`.trimEnd()}>
|
||||
{props.children &&
|
||||
<text x={"50%"} y={"50%"}>
|
||||
{props.children}
|
||||
</text>
|
||||
}
|
||||
</svg>
|
||||
);
|
||||
})
|
||||
|
||||
Badge.propTypes = {
|
||||
children: number,
|
||||
className: string,
|
||||
disableValue: bool,
|
||||
}
|
||||
|
||||
export {Badge};
|
||||
|
|
@ -8,13 +8,11 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
|
|||
*/
|
||||
|
||||
export const FAB = forwardRef(
|
||||
|
||||
(props : FABMainProps, ref) => (
|
||||
<ButtonSkeleton {...props}
|
||||
ref={ref}
|
||||
disabled={props.disabled}
|
||||
variant={props.variant ? props.variant : "surface"}
|
||||
className={props.size ? `m3-fab m3-${props.size}-fab` : `m3-fab m3-default-fab`}>
|
||||
className={`m3-fab m3-${props.size ?? "default"}-fab ${!(props.elevated ?? false) && "without-elevation"}`}>
|
||||
<span className={"m3-icon"}>
|
||||
{props.icon}
|
||||
</span>
|
||||
|
|
@ -28,5 +26,4 @@ export const FAB = forwardRef(
|
|||
}
|
||||
</ButtonSkeleton>
|
||||
)
|
||||
|
||||
);
|
||||
|
|
@ -1,27 +1,31 @@
|
|||
span.m3.m3-badge {
|
||||
svg.m3.m3-badge {
|
||||
position: absolute;
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
}
|
||||
span.m3.m3-badge > span {
|
||||
color: var(--md-sys-color-on-error);
|
||||
font-size: 7pt;
|
||||
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||
svg.m3.m3-badge.disable-value {
|
||||
padding: 0;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
svg.m3.m3-badge.disable-value > text {
|
||||
display: none;
|
||||
}
|
||||
svg.m3.m3-badge {
|
||||
border-radius: 8px;
|
||||
height: 16px;
|
||||
}
|
||||
svg.m3.m3-badge > text {
|
||||
fill: var(--md-sys-color-on-error);
|
||||
font-size: var(--md-sys-typescale-label-small-font-size);
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
|
||||
text-align: center;
|
||||
min-width: 8px;
|
||||
padding: 0 4px;
|
||||
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||
font-optical-sizing: none;
|
||||
alignment-baseline: central;
|
||||
text-anchor: middle;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 16px;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=badge.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["badge.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"badge.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["badge.sass"],"names":[],"mappings":"AAAA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"badge.css"}
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
span.m3.m3-badge
|
||||
svg.m3.m3-badge
|
||||
position: absolute
|
||||
background-color: var(--md-sys-color-error)
|
||||
border-radius: 8px
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
min-width: 6px
|
||||
min-height: 6px
|
||||
&.disable-value
|
||||
padding: 0
|
||||
height: 6px
|
||||
width: 6px
|
||||
border-radius: 3px
|
||||
& > text
|
||||
display: none
|
||||
&
|
||||
border-radius: 8px
|
||||
height: 16px
|
||||
|
||||
& > span
|
||||
color: var(--md-sys-color-on-error)
|
||||
font-size: 7pt
|
||||
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||
& > text
|
||||
fill: var(--md-sys-color-on-error)
|
||||
font-size: var(--md-sys-typescale-label-small-font-size)
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight)
|
||||
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing)
|
||||
text-align: center
|
||||
min-width: 8px
|
||||
padding: 0 4px
|
||||
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||
font-optical-sizing: none
|
||||
alignment-baseline: central
|
||||
text-anchor: middle
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
min-height: 16px
|
||||
width: auto
|
||||
|
||||
justify-content: center
|
||||
|
|
|
|||
|
|
@ -1,93 +1,127 @@
|
|||
button:not(.m3-fab, .m3-icon-button) {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
|
||||
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 18px; }
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
gap: 8px; }
|
||||
button:not(.m3-fab, .m3-icon-button).filled {
|
||||
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 {
|
||||
color: var(--md-sys-color-on-primary); }
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
border: 1px solid var(--md-sys-color-outline) !important;
|
||||
background-color: #00000000; }
|
||||
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); }
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
padding: 10px 12px !important;
|
||||
background-color: #00000000; }
|
||||
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); }
|
||||
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);
|
||||
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); }
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
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); }
|
||||
button:not(.m3-fab, .m3-icon-button)::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: #00000000; }
|
||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important; }
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important; }
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none; }
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none; }
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
gap: 8px;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled {
|
||||
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 {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
border: 1px solid var(--md-sys-color-outline) !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
padding: 10px 12px !important;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
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);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
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);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button)::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,oCAAoC;EAChC,UAAU,EAAE,wEAAuE;EAEnF,mDAAgB;IACZ,WAAW,EAAE,6CAA6C;IAC1D,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;EAErB,uCAAI;IACA,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,UAAU;IACtB,aAAa,EAAE,KAAK;IACpB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,GAAG;EAEZ,2CAAQ;IACJ,gBAAgB,EAAE,2BAA2B;IAC7C,uGAAmB;MACf,KAAK,EAAE,8BAA8B;EAE7C,6CAAU;IACN,MAAM,EAAE,gDAAgD;IACxD,gBAAgB,EAAE,SAAS;IAC3B,2GAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,yCAAM;IACF,OAAO,EAAE,oBAAoB;IAC7B,gBAAgB,EAAE,SAAS;IAC3B,mGAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,6CAAU;ICHN,UAAU,EAAE,iEAAkE;IDK9E,gBAAgB,EAAE,yCAAyC;IAC3D,2GAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,0CAAO;IACH,gBAAgB,EAAE,uCAAuC;IACzD,qGAAmB;MACf,KAAK,EAAE,0CAA0C;EAEzD,4CAAS;ICaT,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;EDjBrB,+EAA4C;IACxC,UAAU,EAAE,mEAAmE;EAG/E,wGAAqC;IACjC,UAAU,EAAE,gEAAgE;EAEpF,8EAA2C;IACvC,UAAU,EAAE,+EAA+E;EAG3F,+DAAqB;ICpCrB,UAAU,EAAE,eAAe;EDuC3B,oDAAU;ICjCV,UAAU,EAAE,4EAA6E;EDoCzF,yDAAe;IACX,gBAAgB,EAAE,+EAA+E;EAGrG,2DAAU;IACN,YAAY,EAAE,sCAAsC;EAExD,iEAAgB;IACZ,gBAAgB,EAAE,mEAAmE;EAEzF,0FAAyC;IACrC,gBAAgB,EAAE,gEAAgE;EAEtF,gEAAe;IACX,gBAAgB,EAAE,+EAA+E;EAGrG,8DAAqB;ICnDrB,UAAU,EAAE,iEAAkE;EDsD9E,mDAAU;IChDV,UAAU,EAAE,iEAAkE;EDmD9E,yDAAgB;IACZ,gBAAgB,EAAE,kEAAkE;EAExF,kFAAyC;IACrC,gBAAgB,EAAE,+DAA+D;EAErF,wDAAe;IACX,gBAAgB,EAAE,8EAA8E;EAExG,6CAAU;IACN,cAAc,EAAE,IAAI;IAEpB,8FAAkD;MAC9C,KAAK,EAAE,mEAAmE;IAE9E,4EAAgC;MAC5B,UAAU,EAAE,mEAAmE;IAEnF,sDAAU;MACN,UAAU,EAAE,IAAI;IAEpB,sDAAU;MACN,MAAM,EAAE,wFAAwF",
|
||||
"sources": ["button.sass","mixins/m3-mixins.sass"],
|
||||
"names": [],
|
||||
"file": "button.css"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECFI;EDIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECnCA;;ADsCA;EChCA;;ADmCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EClDA;;ADqDA;EC/CA;;ADkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||
|
|
@ -3,13 +3,15 @@ label.m3.m3-checkbox-label {
|
|||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1; }
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer {
|
||||
z-index: 20;
|
||||
|
|
@ -17,9 +19,10 @@ span.m3.m3-checkbox-ripple-layer {
|
|||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox {
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -31,50 +34,69 @@ input[type="checkbox"].m3.m3-checkbox {
|
|||
margin: 0;
|
||||
border-radius: 2px;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
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)) {
|
||||
border: 2px solid var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error); }
|
||||
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
border: 2px solid var(--md-sys-color-error); }
|
||||
input[type="checkbox"].m3.m3-checkbox: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);
|
||||
background-color: var(--md-sys-color-primary); }
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:is(:hover, &) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface); }
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(:hover, &) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface); }
|
||||
input[type="checkbox"].m3.m3-checkbox::after {
|
||||
line-height: 18px;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--md-sys-color-on-primary); }
|
||||
input[type="checkbox"].m3.m3-checkbox:checked::after {
|
||||
content: "done"; }
|
||||
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small"; }
|
||||
input[type="checkbox"].m3.m3-checkbox:hover {
|
||||
border: 2px solid 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 {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
|
||||
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)) {
|
||||
border: 2px solid var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
border: 2px solid 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)) {
|
||||
border: 2px solid 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) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox::after {
|
||||
line-height: 18px;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:hover {
|
||||
border: 2px solid 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 {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=checkbox.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,0BAA0B;ECDtB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,YAAY,EAAE,CAAC;EDDf,4DAAmC;ICInC,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,OAAO;IACrB,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,gDAA+C;;ADL/D,gCAAgC;EAC5B,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,qCAAqC;EACjC,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,WAAW;EACvB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,gDAAgD;EACxD,UAAU,EAAE,gDAA+C;EAE3D,+HAA2F;IACvF,MAAM,EAAE,mCAAmC;IAC3C,gBAAgB,EAAE,yBAAyB;EAE/C,qEAAiC;IAC7B,MAAM,EAAE,mCAAmC;EAE/C,wJAAoH;IAChH,MAAM,EAAE,qCAAqC;IAC7C,gBAAgB,EAAE,2BAA2B;EAG7C,4DAAe;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,wCAAwC;EAEpD,oEAAuB;IACnB,OAAO,EAAE,GAAG;IACZ,gBAAgB,EAAE,8BAA8B;EAExD,4CAAQ;IACJ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,6CAA6C;IAC1D,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,8BAA8B;EAEzC,oDAAgB;IACZ,OAAO,EAAE,MAAM;EAEnB,0DAAsB;IAClB,OAAO,EAAE,2BAA2B;EAExC,2CAAO;IACH,MAAM,EAAE,wCAAwC;EAI5C,6JAAmC;IAC/B,gBAAgB,EAAE,6DAA6D;EAEvF,gKAA6G;IACzG,gBAAgB,EAAE,8DAA8D;IAChF,qMAAsC;MAClC,gBAAgB,EAAE,8DAA8D;EAExF,+HAA4E;IACxE,gBAAgB,EAAE,+DAA+D;EAErF,iIAA8E;IAC1E,gBAAgB,EAAE,gEAAgE;IAClF,sKAAsC;MAClC,gBAAgB,EAAE,mEAAmE;EAGzF,yFAAgC;IAC5B,gBAAgB,EAAE,kEAAkE;EAE5F,6FAA0C;IACtC,gBAAgB,EAAE,mEAAmE;IACrF,kIAAsC;MAClC,gBAAgB,EAAE,gEAAgE",
|
||||
"sources": ["checkbox.sass","mixins/m3-mixins.sass"],
|
||||
"names": [],
|
||||
"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;;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"}
|
||||
|
|
@ -4,12 +4,12 @@ hr.m3.m3-divider {
|
|||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: 0.5px solid var(--md-sys-color-outline-variant);
|
||||
margin: 0;
|
||||
margin: 4px;
|
||||
}
|
||||
hr.m3.m3-divider.vertical {
|
||||
writing-mode: tb-rl;
|
||||
}
|
||||
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.vertical.full-width {
|
||||
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
|
||||
height: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.vertical.inset {
|
||||
|
|
@ -19,10 +19,7 @@ hr.m3.m3-divider.vertical.inset {
|
|||
hr.m3.m3-divider.vertical.middle-inset {
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
hr.m3.m3-divider.horizontal {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.horizontal.full-width {
|
||||
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.horizontal.inset {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["divider.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAER;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI","file":"divider.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["divider.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI","file":"divider.css"}
|
||||
|
|
@ -4,11 +4,11 @@ hr.m3.m3-divider
|
|||
box-sizing: border-box
|
||||
border: none
|
||||
outline: 0.5px solid var(--md-sys-color-outline-variant)
|
||||
margin: 0
|
||||
margin: 4px
|
||||
|
||||
&.vertical
|
||||
writing-mode: tb-rl
|
||||
&, &.vertical.full-width
|
||||
&, &.full-width
|
||||
height: 100%
|
||||
&.inset
|
||||
align-self: end
|
||||
|
|
@ -17,12 +17,10 @@ hr.m3.m3-divider
|
|||
height: calc(100% - (2 * 16px))
|
||||
|
||||
&.horizontal
|
||||
box-sizing: border-box
|
||||
&, &.horizontal.full-width
|
||||
&, &.full-width
|
||||
width: 100%
|
||||
&.inset
|
||||
align-self: end
|
||||
width: calc(100% - 16px)
|
||||
&.middle-inset
|
||||
width: calc(100% - (2 * 16px))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,97 +1,135 @@
|
|||
button.m3.m3-fab {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif; }
|
||||
button.m3.m3-fab.m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: none;
|
||||
gap: 12px; }
|
||||
button.m3.m3-fab::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: #00000000; }
|
||||
button.m3.m3-fab.surface {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-surface-container-high); }
|
||||
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
|
||||
color: var(--md-sys-color-primary); }
|
||||
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
button.m3.m3-fab.primary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-primary-container); }
|
||||
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
|
||||
color: var(--md-sys-color-on-primary-container); }
|
||||
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); }
|
||||
button.m3.m3-fab.secondary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-secondary-container); }
|
||||
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
|
||||
color: var(--md-sys-color-on-secondary-container); }
|
||||
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); }
|
||||
button.m3.m3-fab.tertiary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-tertiary-container); }
|
||||
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
|
||||
color: var(--md-sys-color-on-tertiary-container); }
|
||||
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); }
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
font-size: 24px; }
|
||||
button.m3.m3-fab.m3-default-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px; }
|
||||
button.m3.m3-fab.m3-large-fab {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 28px;
|
||||
padding: 34.5px;
|
||||
font-size: 36px; }
|
||||
button.m3.m3-fab.m3-extended-fab {
|
||||
width: auto;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px; }
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); }
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; }
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
|
||||
button.m3.m3-fab:hover.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
|
||||
button.m3.m3-fab:hover.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
|
||||
button.m3.m3-fab:hover.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
|
||||
button.m3.m3-fab:focus-visible.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
button.m3.m3-fab:focus-visible.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
|
||||
button.m3.m3-fab:focus-visible.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
||||
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
}
|
||||
button.m3.m3-fab.m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: none;
|
||||
gap: 12px;
|
||||
}
|
||||
button.m3.m3-fab::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-fab.surface {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.primary {
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.secondary {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.tertiary {
|
||||
background-color: var(--md-sys-color-tertiary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-default-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-large-fab {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 28px;
|
||||
padding: 34.5px;
|
||||
font-size: 36px;
|
||||
}
|
||||
button.m3.m3-fab.m3-extended-fab {
|
||||
width: auto;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fabs.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,gBAAgB;EACZ,UAAU,EAAE,wEAAuE;EAEnF,+BAAgB;IACZ,WAAW,EAAE,6CAA6C;EAE9D,mBAAI;IACA,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,IAAI;EAEb,wBAAS;IC8CT,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;EDlDrB,wBAAS;IC4BL,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,0CAAc;IAChC,iEAAmB;MACf,KAAK,EAAE,2BAAW;IACtB,4DAAqC;MACjC,UAAU,EAAE,gEAAgD;EDDhE,wBAAS;ICyBL,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,qCAAc;IAChC,iEAAmB;MACf,KAAK,EAAE,wCAAW;IACtB,4DAAqC;MACjC,UAAU,EAAE,6EAAgD;EDEhE,0BAAW;ICsBP,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,uCAAc;IAChC,qEAAmB;MACf,KAAK,EAAE,0CAAW;IACtB,8DAAqC;MACjC,UAAU,EAAE,+EAAgD;EDKhE,yBAAU;ICmBN,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,sCAAc;IAChC,mEAAmB;MACf,KAAK,EAAE,yCAAW;IACtB,6DAAqC;MACjC,UAAU,EAAE,8EAAgD;EDQhE,6BAAc;ICnBd,KAAK,EDoB6B,IAAI;ICnBtC,MAAM,EDmBkC,IAAI;IClB5C,aAAa,EDkBe,IAAI;ICjBhC,OAAO,EDiBuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,+BAAgB;ICvBhB,KAAK,EDwB6B,IAAI;ICvBtC,MAAM,EDuBkC,IAAI;ICtB5C,aAAa,EDsBe,IAAI;ICrBhC,OAAO,EDqBuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,6BAAc;IC3Bd,KAAK,ED4B6B,IAAI;IC3BtC,MAAM,ED2BkC,IAAI;IC1B5C,aAAa,ED0Be,IAAI;ICzBhC,OAAO,EDyBuC,MAAM;IAChD,SAAS,EAAE,IAAI;EAEnB,gCAAiB;IC/BjB,KAAK,EDgC6B,IAAI;IC/BtC,MAAM,ED+BkC,IAAI;IC9B5C,aAAa,ED8Be,IAAI;IC7BhC,OAAO,ED6BuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,oEAAqD;ICMjD,UAAU,EAAE,kEAAmE;EDHnF,qEAAsD;ICLlD,UAAU,EAAE,4EAA6E;EDSzF,sCAAiB;IACb,gBAAgB,EAAE,+DAA+D;EAErF,sCAAiB;IACb,gBAAgB,EAAE,4EAA4E;EAElG,wCAAmB;IACf,gBAAgB,EAAE,8EAA8E;EAEpG,uCAAkB;IACd,gBAAgB,EAAE,6EAA6E;EAGnG,8CAAiB;IACb,gBAAgB,EAAE,gEAAgE;EAEtF,8CAAiB;IACb,gBAAgB,EAAE,6EAA6E;EAEnG,gDAAmB;IACf,gBAAgB,EAAE,+EAA+E;EAErG,+CAAkB;IACd,gBAAgB,EAAE,8EAA8E",
|
||||
"sources": ["fabs.sass","mixins/m3-mixins.sass"],
|
||||
"names": [],
|
||||
"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;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"}
|
||||
|
|
@ -48,10 +48,10 @@ button.m3.m3-fab
|
|||
@include m3-fab-default(16px, auto, 56px, 19px)
|
||||
font-size: 24px
|
||||
|
||||
&:is(.surface, .primary, .secondary, .tertiary):hover
|
||||
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
|
||||
@include elevation-4(false)
|
||||
|
||||
&:is(.surface, .primary, .secondary, .tertiary):active
|
||||
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
|
||||
@include elevation-3(true)
|
||||
|
||||
&:hover
|
||||
|
|
|
|||
|
|
@ -31,9 +31,11 @@ button.m3.m3-fab::before {
|
|||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-fab.surface {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
|
@ -41,9 +43,11 @@ button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
|||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.primary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
|
|
@ -51,9 +55,11 @@ 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);
|
||||
}
|
||||
button.m3.m3-fab.secondary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
|
@ -61,9 +67,11 @@ 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);
|
||||
}
|
||||
button.m3.m3-fab.tertiary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-tertiary-container);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
|
|
@ -98,10 +106,10 @@ button.m3.m3-fab.m3-extended-fab {
|
|||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
|
||||
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
|
||||
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
|
|
@ -197,30 +205,34 @@ input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-lay
|
|||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
span.m3.m3-badge {
|
||||
svg.m3.m3-badge {
|
||||
position: absolute;
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
}
|
||||
span.m3.m3-badge > span {
|
||||
color: var(--md-sys-color-on-error);
|
||||
font-size: 7pt;
|
||||
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||
svg.m3.m3-badge.disable-value {
|
||||
padding: 0;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
svg.m3.m3-badge.disable-value > text {
|
||||
display: none;
|
||||
}
|
||||
svg.m3.m3-badge {
|
||||
border-radius: 8px;
|
||||
height: 16px;
|
||||
}
|
||||
svg.m3.m3-badge > text {
|
||||
fill: var(--md-sys-color-on-error);
|
||||
font-size: var(--md-sys-typescale-label-small-font-size);
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
|
||||
text-align: center;
|
||||
min-width: 8px;
|
||||
padding: 0 4px;
|
||||
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||
font-optical-sizing: none;
|
||||
alignment-baseline: central;
|
||||
text-anchor: middle;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 16px;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -599,12 +611,12 @@ hr.m3.m3-divider {
|
|||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: 0.5px solid var(--md-sys-color-outline-variant);
|
||||
margin: 0;
|
||||
margin: 4px;
|
||||
}
|
||||
hr.m3.m3-divider.vertical {
|
||||
writing-mode: tb-rl;
|
||||
}
|
||||
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.vertical.full-width {
|
||||
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
|
||||
height: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.vertical.inset {
|
||||
|
|
@ -614,10 +626,7 @@ hr.m3.m3-divider.vertical.inset {
|
|||
hr.m3.m3-divider.vertical.middle-inset {
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
hr.m3.m3-divider.horizontal {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.horizontal.full-width {
|
||||
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.horizontal.inset {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;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;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJHI;EIKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJpCA;;AIuCA;EJjCA;;AIoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJnDA;;AIsDA;EJhDA;;AImDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAER;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACxBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJFI;EIIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJnCA;;AIsCA;EJhCA;;AImCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJlDA;;AIqDA;EJ/CA;;AIkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
|
||||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "",
|
||||
"sources": [],
|
||||
"names": [],
|
||||
"file": "m3-mixins.css"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"m3-mixins.css"}
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
padding: $padding
|
||||
|
||||
@mixin m3-fab-colors-palette($bg-color, $color)
|
||||
@include elevation-3(false)
|
||||
&:not(.without-elevation)
|
||||
@include elevation-3(false)
|
||||
background-color: var($bg-color)
|
||||
& > span.m3-icon, &
|
||||
color: var($color)
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ label.m3.m3-radio-label {
|
|||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1; }
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
input[type="radio"].m3.m3-radio {
|
||||
input[type=radio].m3.m3-radio {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -22,33 +24,46 @@ input[type="radio"].m3.m3-radio {
|
|||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
|
||||
input[type="radio"].m3.m3-radio::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%; }
|
||||
input[type="radio"].m3.m3-radio:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:checked {
|
||||
border: 2px solid var(--md-sys-color-primary); }
|
||||
input[type="radio"].m3.m3-radio:checked::after {
|
||||
background-color: var(--md-sys-color-primary); }
|
||||
input[type="radio"].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type=radio].m3.m3-radio::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type=radio].m3.m3-radio:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:checked {
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:checked::after {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,uBAAuB;ECDnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,YAAY,EAAE,CAAC;EDDf,sDAAgC;ICIhC,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,OAAO;IACrB,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,gDAA+C;;ADL/D,+BAA+B;EAC3B,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,YAAY,EAAE,OAAO;EACrB,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,gDAAgD;EACxD,UAAU,EAAE,gDAA+C;EAE3D,sCAAQ;IACJ,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,GAAG;EAEtB,wCAAU;IACN,MAAM,EAAE,6EAA6E;EAEzF,uCAAS;IACL,MAAM,EAAE,qCAAqC;EAEjD,8CAAgB;IACZ,gBAAgB,EAAE,2BAA2B;EAEjD,gDAAkB;IACd,MAAM,EAAE,6EAA6E;EAEzF,uDAAyB;IACrB,gBAAgB,EAAE,mEAAmE;EAIrF,2FAA8C;IAC1C,gBAAgB,EAAE,+DAA+D;EAErF,wHAA2E;IACvE,gBAAgB,EAAE,gEAAgE;IAClF,6JAAsC;MAClC,gBAAgB,EAAE,mEAAmE;EAGzF,mFAAgC;IAC5B,gBAAgB,EAAE,kEAAkE;EAE5F,oFAAuC;IACnC,gBAAgB,EAAE,mEAAmE;IACrF,yHAAsC;MAClC,gBAAgB,EAAE,gEAAgE",
|
||||
"sources": ["radio.sass","mixins/m3-mixins.sass"],
|
||||
"names": [],
|
||||
"file": "radio.css"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["radio.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;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}
|
||||
Loading…
Reference in New Issue