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

TODO: fix checkbox styles 

DONE: text fields error state styles and etc
This commit is contained in:
doryan 2024-01-28 19:01:07 +04:00
parent cf584fe269
commit bfa8e746f4
23 changed files with 1525 additions and 2321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
.idea/workspace.xml
View File

@ -6,6 +6,28 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc"> <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/text-fields.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/text-fields.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/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/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/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/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/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" />
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/text-field.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.sass" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -39,24 +61,24 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent">{ <component name="PropertiesComponent"><![CDATA[{
&quot;keyToString&quot;: { "keyToString": {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;, "RunOnceActivity.OpenProjectViewOnStart": "true",
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, "RunOnceActivity.ShowReadmeOnStart": "true",
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;, "WebServerToolWindowFactoryState": "false",
&quot;git-widget-placeholder&quot;: &quot;experimental&quot;, "git-widget-placeholder": "main",
&quot;last_opened_file_path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/src/styles&quot;, "last_opened_file_path": "/home/drn04/material-you-react",
&quot;list.type.of.created.stylesheet&quot;: &quot;Sass&quot;, "list.type.of.created.stylesheet": "Sass",
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;, "node.js.detected.package.eslint": "true",
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, "node.js.detected.package.tslint": "true",
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.eslint": "(autodetect)",
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.tslint": "(autodetect)",
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;, "nodejs_package_manager_path": "npm",
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;, "settings.editor.selected.configurable": "watcher.settings",
&quot;ts.external.directory.path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib&quot;, "ts.external.directory.path": "/home/drn04/material-you-react/node_modules/typescript/lib",
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot; "vue.rearranger.settings.migration": "true"
} }
}</component> }]]></component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/styles" /> <recent name="$PROJECT_DIR$/src/styles" />
@ -163,6 +185,13 @@
<workItem from="1705937839794" duration="11116000" /> <workItem from="1705937839794" duration="11116000" />
<workItem from="1706023242228" duration="822000" /> <workItem from="1706023242228" duration="822000" />
<workItem from="1706024195558" duration="6543000" /> <workItem from="1706024195558" duration="6543000" />
<workItem from="1706212432785" duration="1892000" />
<workItem from="1706214971346" duration="611000" />
<workItem from="1706288977398" duration="4026000" />
<workItem from="1706338830405" duration="10157000" />
<workItem from="1706351565380" duration="805000" />
<workItem from="1706373080363" duration="1879000" />
<workItem from="1706426744715" duration="17520000" />
</task> </task>
<task id="LOCAL-00019" summary="added customizable classname field for rippleArea component"> <task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
<option name="closed" value="true" /> <option name="closed" value="true" />

233
app/components/text-fields.tsx
View File

@ -4,9 +4,9 @@ import {Button} from "../../src/primitive-components/button/button";
export function TextFields(_props : any) { export function TextFields(_props : any) {
return ( return (
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}> <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection:"column", gap: "2em"}}>
<div>
<h1> Inputs </h1> <h1> Inputs </h1>
<div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<h2> Filled Inputs </h2> <h2> Filled Inputs </h2>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
@ -25,6 +25,17 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField placeholder={"Placeholder"}
variant={"filled"}
type={"email"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField placeholder={"Placeholder"}
variant={"filled"}
type={"email"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -46,6 +57,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -70,6 +94,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
placeholder={"Placeholder"}
type={"email"}
withAfterIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
placeholder={"Placeholder"}
type={"email"}
withAfterIcon
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -93,6 +130,21 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -120,6 +172,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -144,6 +209,21 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -171,6 +251,22 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
withAfterIcon
/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -198,6 +294,24 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"} <TextField variant={"filled"}
type={"email"} type={"email"}
@ -213,9 +327,8 @@ export function TextFields(_props : any) {
</div> </div>
</div> </div>
<div> <div>
<h1> Outlined </h1>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<h2> Filled Inputs </h2> <h2> Outlined Inputs </h2>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div> <div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}> <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
@ -232,6 +345,17 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -253,6 +377,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -277,6 +414,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -300,6 +450,21 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -327,6 +492,19 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -351,6 +529,21 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -378,6 +571,21 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}
@ -405,6 +613,23 @@ export function TextFields(_props : any) {
Send Send
</Button> </Button>
</form> </form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"} <TextField variant={"outlined"}
type={"email"} type={"email"}

36
app/page.tsx
View File

@ -21,26 +21,32 @@ export default function Page() {
<h1>Google Material You UI kit</h1> <h1>Google Material You UI kit</h1>
<div style={{ <div style={{
display: "flex", display: "flex",
flexDirection:"row", flexDirection:"column",
justifyContent: "center",
alignItems: "center",
gap:"20px" gap:"20px"
}}> }}>
{/*<div style={{*/} <div style={{
{/* display: "flex",*/} display: "flex",
{/* flexDirection:"column",*/} flexDirection:"row",
{/* gap:"20px",*/} gap:"20px"
{/*}}>*/} }}>
{/* <Buttons/>*/} <div style={{
{/* <IconButtons/>*/} display: "flex",
{/*</div>*/} flexDirection:"column",
{/*<Switches/>*/} gap:"20px",
{/*<Checkboxes/>*/} }}>
{/*<Radios/>*/} <Buttons/>
{/*<Fabs/>*/} <IconButtons/>
</div>
<Switches/>
<Checkboxes/>
<Radios/>
<Fabs/>
</div>
<div>
<TextFields/> <TextFields/>
</div> </div>
</div> </div>
</div>
</Fragment> </Fragment>
) )
} }

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "doryan-blog-next-turbo", "name": "material-you-react",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

38
src/primitive-components/text-field/text-field.tsx
View File

@ -1,7 +1,7 @@
"use client" "use client"
import React, {PropsWithChildren, useState} from 'react';
import {bool, string} from "prop-types"; import {bool, string} from "prop-types";
import React, {PropsWithChildren, useState} from 'react';
interface TextFieldInterface extends PropsWithChildren<any>{ interface TextFieldInterface extends PropsWithChildren<any>{
variant: "filled" | "outlined", variant: "filled" | "outlined",
@ -12,11 +12,11 @@ interface TextFieldInterface extends PropsWithChildren<any>{
export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) { export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
const [used, setUsed] = useState<boolean>(false); const [raised, setRaised] = useState<boolean>(props.placeholder ? true : false);
const callback = (e : any) => { const callback = (e : any) => {
if(e.type === "blur" && e.target.value.length === 0) setUsed(false); if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false);
else if(e.type === "focus") setUsed(true); else if(e.type === "focus") setRaised(true);
} }
const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" : const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" :
@ -25,7 +25,18 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
return ( return (
<span> <span>
<div className={`m3 m3-text-field ${variant}`.trimEnd()}> <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
{withBeforeIcon && <span className={"m3-icon icon-before"}>{withBeforeIcon && "search"}</span>} {variant === "outlined" &&
<fieldset>
<legend className={raised && "raised"}>
<span>Label</span>
</legend>
</fieldset>
}
{withBeforeIcon &&
<span className={"m3-icon icon-before"}>
{withBeforeIcon && "search"}
</span>
}
<input {...props} <input {...props}
className={`${props.className ?? ""} ${iconStyles}`.trim()} className={`${props.className ?? ""} ${iconStyles}`.trim()}
onFocus={(event) => { onFocus={(event) => {
@ -36,11 +47,21 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
callback(event) callback(event)
if(props.onBlur) props.onBlur(event) if(props.onBlur) props.onBlur(event)
}}/> }}/>
<label className={used && "used"}> {props.children ?? "Label"} </label> <label className={raised && "raised"}>
{props.children ?? "Label"}
</label>
<span className={"m3-text-field-state-layer"}/> <span className={"m3-text-field-state-layer"}/>
{withAfterIcon && <span className={"m3-icon"}>{withAfterIcon && "cancel"}</span>} {withAfterIcon &&
<span className={"m3-icon"}>
{withAfterIcon && "cancel"}
</span>
}
</div> </div>
{supportingText && <span className={"m3-text-field-supporting-text"}>{supportingText}</span>} {supportingText &&
<span className={"m3-text-field-supporting-text"}>
{supportingText}
</span>
}
</span> </span>
); );
@ -52,5 +73,6 @@ TextField.propTypes = {
withAfterIcon: bool, withAfterIcon: bool,
className: string, className: string,
variant: string, variant: string,
placeholder: string,
supportingText: string, supportingText: string,
} }

102
src/styles/button.css
View File

@ -1,12 +1,10 @@
button:not(.m3-fab, .m3-icon-button) { button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
}
button:not(.m3-fab, .m3-icon-button) > span.m3-icon { button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px; }
}
button:not(.m3-fab, .m3-icon-button).m3 { button:not(.m3-fab, .m3-icon-button).m3 {
contain: content; contain: content;
box-sizing: border-box; box-sizing: border-box;
@ -18,41 +16,30 @@ button:not(.m3-fab, .m3-icon-button).m3 {
text-align: center; text-align: center;
padding: 10px 24px; padding: 10px 24px;
border: none; border: none;
gap: 8px; gap: 8px; }
}
button:not(.m3-fab, .m3-icon-button).filled { button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); }
}
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon { button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary); }
}
button:not(.m3-fab, .m3-icon-button).outlined { button:not(.m3-fab, .m3-icon-button).outlined {
border: 1px solid var(--md-sys-color-outline) !important; border: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
}
button:not(.m3-fab, .m3-icon-button).text { button:not(.m3-fab, .m3-icon-button).text {
padding: 10px 12px !important; padding: 10px 12px !important;
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon { button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
}
button:not(.m3-fab, .m3-icon-button).elevated { button:not(.m3-fab, .m3-icon-button).elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low); }
}
button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon { button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
}
button:not(.m3-fab, .m3-icon-button).tonal { button:not(.m3-fab, .m3-icon-button).tonal {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container); }
}
button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon { button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container); }
}
button:not(.m3-fab, .m3-icon-button)::before { button:not(.m3-fab, .m3-icon-button)::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: ""; content: "";
@ -61,67 +48,46 @@ button:not(.m3-fab, .m3-icon-button)::before {
left: 0; left: 0;
right: 0; right: 0;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0); background: #00000000; }
}
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple { 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); 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 { 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); 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 { 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); 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) { button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
box-shadow: none !important; box-shadow: none !important; }
}
button:not(.m3-fab, .m3-icon-button):active.elevated { 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; 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 { 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); 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 { button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
border-color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important; }
}
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before { 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); 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 { 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); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before { 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); 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) { 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); 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 { 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); 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 { button:not(.m3-fab, .m3-icon-button):hover.filled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); 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 { 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); background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
}
button:not(.m3-fab, .m3-icon-button):hover.tonal::before { 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); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
}
button:not(.m3-fab, .m3-icon-button):disabled { button:not(.m3-fab, .m3-icon-button):disabled {
pointer-events: none; pointer-events: none; }
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) { 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); 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) { 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); background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
}
button:not(.m3-fab, .m3-icon-button):disabled.elevated { button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none; box-shadow: none; }
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined { 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; border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
}
/*# sourceMappingURL=button.css.map */ /*# sourceMappingURL=button.css.map */

8
src/styles/button.css.map
View File

@ -1 +1,7 @@
{"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;ECHI;EDKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECpCA;;ADuCA;ECjCA;;ADoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECnDA;;ADsDA;EChDA;;ADmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"} {
"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"
}

104
src/styles/checkbox.css
View File

@ -3,15 +3,13 @@ label.m3.m3-checkbox-label {
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
aspect-ratio: 1; aspect-ratio: 1; }
}
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
position: absolute; position: absolute;
width: 40px; width: 40px;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
}
span.m3.m3-checkbox-ripple-layer { span.m3.m3-checkbox-ripple-layer {
z-index: 20; z-index: 20;
@ -19,10 +17,9 @@ span.m3.m3-checkbox-ripple-layer {
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
width: 40px; width: 40px;
height: 40px; height: 40px; }
}
input[type=checkbox].m3.m3-checkbox { input[type="checkbox"].m3.m3-checkbox {
appearance: none; appearance: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -34,69 +31,50 @@ input[type=checkbox].m3.m3-checkbox {
margin: 0; margin: 0;
border-radius: 2px; border-radius: 2px;
border: 2px solid var(--md-sys-color-on-surface-variant); border: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
} input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
border: 2px solid var(--md-sys-color-error); border: 2px solid var(--md-sys-color-error);
background-color: var(--md-sys-color-error); background-color: var(--md-sys-color-error); }
} input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) { border: 2px solid var(--md-sys-color-error); }
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)) {
}
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); border: 2px solid var(--md-sys-color-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); }
} input[type="checkbox"].m3.m3-checkbox:disabled:is(:hover, &) {
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
border: 2px solid var(--md-sys-color-on-surface); 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:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%; opacity: 38%;
background-color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-on-surface); }
} input[type="checkbox"].m3.m3-checkbox::after {
input[type=checkbox].m3.m3-checkbox::after {
line-height: 18px; line-height: 18px;
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary); }
} input[type="checkbox"].m3.m3-checkbox:checked::after {
input[type=checkbox].m3.m3-checkbox:checked::after { content: "done"; }
content: "done"; input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
} content: "check_indeterminate_small"; }
input[type=checkbox].m3.m3-checkbox:indeterminate::after { input[type="checkbox"].m3.m3-checkbox:hover {
content: "check_indeterminate_small"; 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 {
input[type=checkbox].m3.m3-checkbox:hover { background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }
border: 2px solid var(--md-sys-color-on-surface); 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(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer { input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(: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) 8%, transparent); 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 {
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-primary) 8%, transparent); }
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, 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(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple { 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-error) 20%, transparent); 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 {
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-on-surface) 8%, transparent); }
background-color: color-mix(in srgb, var(--md-sys-color-primary) 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):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer { 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) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, 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 */ /*# sourceMappingURL=checkbox.css.map */

8
src/styles/checkbox.css.map
View File

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

90
src/styles/fabs.css
View File

@ -1,9 +1,7 @@
button.m3.m3-fab { button.m3.m3-fab {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
}
button.m3.m3-fab > span.m3-icon { button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif; }
}
button.m3.m3-fab.m3 { button.m3.m3-fab.m3 {
contain: content; contain: content;
box-sizing: border-box; box-sizing: border-box;
@ -13,8 +11,7 @@ button.m3.m3-fab.m3 {
align-items: center; align-items: center;
text-align: center; text-align: center;
border: none; border: none;
gap: 12px; gap: 12px; }
}
button.m3.m3-fab::before { button.m3.m3-fab::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: ""; content: "";
@ -23,105 +20,78 @@ button.m3.m3-fab::before {
left: 0; left: 0;
right: 0; right: 0;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0); background: #00000000; }
}
button.m3.m3-fab.surface { 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); 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); background-color: var(--md-sys-color-surface-container-high); }
}
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface { button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
}
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button.m3.m3-fab.primary { button.m3.m3-fab.primary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-primary-container); background-color: var(--md-sys-color-primary-container); }
}
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary { button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
color: var(--md-sys-color-on-primary-container); color: var(--md-sys-color-on-primary-container); }
}
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
}
button.m3.m3-fab.secondary { button.m3.m3-fab.secondary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container); }
}
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary { button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container); }
}
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
}
button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-tertiary-container); background-color: var(--md-sys-color-tertiary-container); }
}
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
color: var(--md-sys-color-on-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
}
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
}
button.m3.m3-fab.m3-small-fab { button.m3.m3-fab.m3-small-fab {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 12px; border-radius: 12px;
padding: 11px; padding: 11px;
font-size: 24px; font-size: 24px; }
}
button.m3.m3-fab.m3-default-fab { button.m3.m3-fab.m3-default-fab {
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 16px; border-radius: 16px;
padding: 19px; padding: 19px;
font-size: 24px; font-size: 24px; }
}
button.m3.m3-fab.m3-large-fab { button.m3.m3-fab.m3-large-fab {
width: 96px; width: 96px;
height: 96px; height: 96px;
border-radius: 28px; border-radius: 28px;
padding: 34.5px; padding: 34.5px;
font-size: 36px; font-size: 36px; }
}
button.m3.m3-fab.m3-extended-fab { button.m3.m3-fab.m3-extended-fab {
width: auto; width: auto;
height: 56px; height: 56px;
border-radius: 16px; border-radius: 16px;
padding: 19px; padding: 19px;
font-size: 24px; font-size: 24px; }
}
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover { 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); 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: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; 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 { button.m3.m3-fab:hover.surface::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
}
button.m3.m3-fab:hover.primary::before { button.m3.m3-fab:hover.primary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
}
button.m3.m3-fab:hover.secondary::before { button.m3.m3-fab:hover.secondary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
}
button.m3.m3-fab:hover.tertiary::before { button.m3.m3-fab:hover.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
}
button.m3.m3-fab:focus-visible.surface::before { button.m3.m3-fab:focus-visible.surface::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button.m3.m3-fab:focus-visible.primary::before { button.m3.m3-fab:focus-visible.primary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
}
button.m3.m3-fab:focus-visible.secondary::before { button.m3.m3-fab:focus-visible.secondary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
}
button.m3.m3-fab:focus-visible.tertiary::before { button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
}
/*# sourceMappingURL=fabs.css.map */ /*# sourceMappingURL=fabs.css.map */

8
src/styles/fabs.css.map
View File

@ -1 +1,7 @@
{"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;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","file":"fabs.css"} {
"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"
}

1533
src/styles/generics.css
View File

File diff suppressed because it is too large Load Diff

8
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

7
src/styles/generics.sass
View File

@ -5,11 +5,10 @@
@import "ripple" @import "ripple"
@import "swtich" @import "swtich"
@import "checkbox" @import "checkbox"
@import "text-field"
@import "icon-button" @import "icon-button"
@import "./themes/tokens" @import "./themes/tokens.css"
@import "./themes/colors.module" @import "./themes/colors.module.css"
@import "./themes/typography.module" @import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark) @import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light) @import "./themes/theme.light.css" (prefers-color-scheme: light)

114
src/styles/icon-button.css
View File

@ -10,142 +10,104 @@ button.m3.m3-icon-button {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: none; border: none;
padding: 0; padding: 0; }
}
button.m3.m3-icon-button::before { button.m3.m3-icon-button::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: ""; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute; }
}
button.m3.m3-icon-button > span.m3-icon { button.m3.m3-icon-button > span.m3-icon {
z-index: 25; z-index: 25;
font-size: 2em; font-size: 2em;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) { button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
font-family: Material-Symbols-Round-Regular, serif; font-family: Material-Symbols-Round-Regular, serif; }
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled { button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
font-size: 13.49px; font-size: 13.49px;
font-family: Material-Icons-Regular, serif; font-family: Material-Icons-Regular, serif;
font-weight: 500; font-weight: 500; }
}
button.m3.m3-icon-button.default { button.m3.m3-icon-button.default {
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button.m3.m3-icon-button.default.selected.toggled { button.m3.m3-icon-button.default.selected.toggled {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
}
button.m3.m3-icon-button.filled { button.m3.m3-icon-button.filled {
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); }
}
button.m3.m3-icon-button.filled.toggled { button.m3.m3-icon-button.filled.toggled {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest); }
}
button.m3.m3-icon-button.filled.selected.toggled { button.m3.m3-icon-button.filled.selected.toggled {
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); }
}
button.m3.m3-icon-button.tonal.toggled { button.m3.m3-icon-button.tonal.toggled {
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest); }
}
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container); }
}
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
}
button.m3.m3-icon-button.outlined { button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button.m3.m3-icon-button.outlined:disabled { button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: #00000000; }
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled { button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
button.m3.m3-icon-button.outlined.selected.toggled { button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid #00000000;
background-color: var(--md-sys-color-inverse-surface-light); background-color: var(--md-sys-color-inverse-surface-light);
color: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-on-surface); } }
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
button.m3.m3-icon-button.outlined.selected.toggled { button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid #00000000;
background-color: var(--md-sys-color-inverse-surface); background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-on-surface); } }
}
}
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
}
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
}
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
}
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
}
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before { button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before { button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before { button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before { button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
}
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before { button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before { button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before { button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before { button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
}
/*# sourceMappingURL=icon-button.css.map */ /*# sourceMappingURL=icon-button.css.map */

8
src/styles/icon-button.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"} {
"version": 3,
"mappings": "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",
"sources": ["icon-button.sass"],
"names": [],
"file": "icon-button.css"
}

8
src/styles/mixins/m3-mixins.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"m3-mixins.css"} {
"version": 3,
"mappings": "",
"sources": [],
"names": [],
"file": "m3-mixins.css"
}

12
src/styles/mixins/m3-mixins.sass
View File

@ -27,37 +27,37 @@
background: color-mix(in srgb, var($color) 12%, transparent) background: color-mix(in srgb, var($color) 12%, transparent)
@mixin elevation-0($important) @mixin elevation-0($important)
@if($important == true) @if $important == true
box-shadow: none !important box-shadow: none !important
@else @else
box-shadow: none box-shadow: none
@mixin elevation-1($important) @mixin elevation-1($important)
@if($important == true) @if $important == true
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
@else @else
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
@mixin elevation-2($important) @mixin elevation-2($important)
@if($important == true) @if $important == true
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
@else @else
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
@mixin elevation-3($important) @mixin elevation-3($important)
@if($important == true) @if $important == true
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
@else @else
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
@mixin elevation-4($important) @mixin elevation-4($important)
@if($important == true) @if $important == true
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
@else @else
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
@mixin elevation-5($important) @mixin elevation-5($important)
@if($important == true) @if $important == true
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
@else @else
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)

71
src/styles/radio.css
View File

@ -3,17 +3,15 @@ label.m3.m3-radio-label {
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
aspect-ratio: 1; aspect-ratio: 1; }
}
label.m3.m3-radio-label > span.m3.m3-radio-state-layer { label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
position: absolute; position: absolute;
width: 40px; width: 40px;
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
}
input[type=radio].m3.m3-radio { input[type="radio"].m3.m3-radio {
appearance: none; appearance: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -24,46 +22,33 @@ input[type=radio].m3.m3-radio {
aspect-ratio: inherit; aspect-ratio: inherit;
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--md-sys-color-on-surface-variant); border: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
} input[type="radio"].m3.m3-radio::after {
input[type=radio].m3.m3-radio::after {
content: ""; content: "";
width: 10px; width: 10px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; border-radius: 50%; }
} input[type="radio"].m3.m3-radio:disabled {
input[type=radio].m3.m3-radio:disabled { border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
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 { input[type="radio"].m3.m3-radio:checked::after {
border: 2px solid var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); }
} input[type="radio"].m3.m3-radio:checked:disabled {
input[type=radio].m3.m3-radio:checked::after { border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
background-color: var(--md-sys-color-primary); 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:checked:disabled { input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); 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 {
input[type=radio].m3.m3-radio:checked:disabled::after { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, 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):checked:hover + span.m3.m3-radio-state-layer { 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-primary) 8%, transparent); 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 {
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-on-surface) 12%, transparent); }
background-color: color-mix(in srgb, var(--md-sys-color-primary) 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); }
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 */ /*# sourceMappingURL=radio.css.map */

8
src/styles/radio.css.map
View File

@ -1 +1,7 @@
{"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"} {
"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"
}

216
src/styles/text-field.css
View File

@ -4,36 +4,28 @@ div.m3.m3-text-field {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0; }
}
div.m3.m3-text-field span.m3-icon.icon-before { div.m3.m3-text-field span.m3-icon.icon-before {
align-self: start; align-self: start; }
} div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
line-height: var(--md-sys-typescale-body-large-line-height);
font-size: var(--md-sys-typescale-body-large-font-size); }
div.m3.m3-text-field + span.m3-text-field-supporting-text { div.m3.m3-text-field + span.m3-text-field-supporting-text {
display: flex; display: flex;
line-height: var(--md-sys-typescale-body-large-line-height); line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size); font-size: var(--md-sys-typescale-body-small-font-size);
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
margin: 0 16px; margin: 4px 16px 2px 16px; }
}
div.m3.m3-text-field > label { div.m3.m3-text-field > label {
padding-inline: 4px; padding-inline: 4px;
pointer-events: none; pointer-events: none;
transform: translate(12px, 0); transform: translate(16px, 0);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
color: var(--md-sys-color-on-surface-variant); position: absolute; }
line-height: var(--md-sys-typescale-body-large-line-height);
font-size: var(--md-sys-typescale-body-large-font-size);
position: absolute;
}
div.m3.m3-text-field > input { div.m3.m3-text-field > input {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
color: var(--md-sys-color-on-surface);
line-height: var(--md-sys-typescale-body-large-line-height);
font-size: var(--md-sys-typescale-body-large-font-size);
background-color: transparent; background-color: transparent;
border: none; border: none; }
}
div.m3.m3-text-field > span.m3-icon { div.m3.m3-text-field > span.m3-icon {
position: absolute; position: absolute;
align-self: end; align-self: end;
@ -46,125 +38,129 @@ div.m3.m3-text-field > span.m3-icon {
justify-content: inherit; justify-content: inherit;
cursor: pointer; cursor: pointer;
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
font-family: Material-Symbols-Outlined-Regular, serif; font-family: Material-Symbols-Outlined-Regular, serif; }
}
div.m3.m3-text-field > span.m3-text-field-state-layer { div.m3.m3-text-field > span.m3-text-field-state-layer {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute; }
} div.m3.m3-text-field > input, div.m3.m3-text-field > label {
color: var(--md-sys-color-on-surface); }
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
color: var(--md-sys-color-on-surface-variant); }
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
outline: none; outline: none;
caret-color: var(--md-sys-color-primary); caret-color: var(--md-sys-color-primary); }
} div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
opacity: 38%; }
div.m3.m3-text-field.filled { div.m3.m3-text-field.filled {
contain: content; contain: content;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
}
div.m3.m3-text-field.filled > label.used {
transform: translate(12px, -12px);
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
caret-color: var(--md-sys-color-error);
box-shadow: inset 0 -2px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled:has(input:required:user-invalid) > *, div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:focus-visible {
outline-offset: 2px;
box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled > input:focus-visible + label {
color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled:has(input:disabled), div.m3.m3-text-field.filled:has(input:disabled) + span.m3-text-field-supporting-text {
opacity: 38%;
}
div.m3.m3-text-field.filled > input { div.m3.m3-text-field.filled > input {
display: inline-flex;
align-items: center;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); }
}
div.m3.m3-text-field.filled > input.with-after-icon { div.m3.m3-text-field.filled > input.with-after-icon {
padding: 24px 48px 8px 16px; padding: 24px 48px 8px 16px; }
}
div.m3.m3-text-field.filled > input.with-before-icon { div.m3.m3-text-field.filled > input.with-before-icon {
padding: 24px 16px 8px 48px; padding: 24px 16px 8px 48px; }
}
div.m3.m3-text-field.filled > input.with-before-icon + label { div.m3.m3-text-field.filled > input.with-before-icon + label {
margin-left: 32px; margin-left: 32px; }
}
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
padding: 24px 16px 8px; padding: 24px 16px 8px; }
}
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
padding: 24px 48px 8px 48px; padding: 24px 48px 8px 48px; }
} div.m3.m3-text-field.filled > label.raised {
transform: translate(12px, -12px);
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size); }
div.m3.m3-text-field.filled > input:required:user-invalid {
caret-color: var(--md-sys-color-error); }
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
box-shadow: inset 0 -3px 0 var(--md-sys-color-error); }
div.m3.m3-text-field.filled > input:required:user-invalid {
box-shadow: inset 0 -1px 0 var(--md-sys-color-error); }
div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
color: var(--md-sys-color-error); }
div.m3.m3-text-field.filled > input:focus-visible {
outline-offset: 3px;
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
div.m3.m3-text-field.filled > input:focus-visible + label {
color: var(--md-sys-color-primary); }
div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
} div.m3.m3-text-field.outlined > fieldset {
div.m3.m3-text-field.outlined { margin: 0;
position: absolute;
border-radius: 4px; border-radius: 4px;
} pointer-events: none;
div.m3.m3-text-field.outlined > label.used { padding-inline: 12px;
background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline);
transform: translate(12px, -27px) !important; inset: -7.5px 0px 0px 0px;
line-height: var(--md-sys-typescale-body-small-line-height); transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
font-size: var(--md-sys-typescale-body-small-font-size); div.m3.m3-text-field.outlined > fieldset > legend > span {
} width: 100%; }
div.m3.m3-text-field.outlined > input:required:user-invalid { div.m3.m3-text-field.outlined > fieldset > legend {
caret-color: var(--md-sys-color-error); opacity: 0;
outline-offset: -2px; width: 0;
outline: 2px solid var(--md-sys-color-error); padding: 0;
} pointer-events: none;
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *, div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { border: 0 solid transparent;
color: var(--md-sys-color-error); transition: 0.05s cubic-bezier(0.2, 0, 0, 1); }
} div.m3.m3-text-field.outlined > fieldset > legend.raised {
div.m3.m3-text-field.outlined > input:focus-visible { border-inline-width: 6px;
outline-offset: -2px; border-style: solid;
outline: 2px solid var(--md-sys-color-primary); border-color: transparent;
} width: auto;
div.m3.m3-text-field.outlined > input:focus-visible + label { visibility: visible; }
color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined:has(input:disabled), div.m3.m3-text-field.outlined:has(input:disabled) + span.m3-text-field-supporting-text {
opacity: 38%;
}
div.m3.m3-text-field.outlined > input { div.m3.m3-text-field.outlined > input {
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px; }
outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-text-field.outlined > input.with-after-icon { div.m3.m3-text-field.outlined > input.with-after-icon {
padding: 16px 48px 16px 16px; padding: 16px 48px 16px 16px; }
}
div.m3.m3-text-field.outlined > input.with-before-icon { div.m3.m3-text-field.outlined > input.with-before-icon {
padding: 16px 16px 16px 48px; padding: 16px 16px 16px 48px; }
}
div.m3.m3-text-field.outlined > input.with-before-icon + label { div.m3.m3-text-field.outlined > input.with-before-icon + label {
transform: translate(48px, 0); transform: translate(48px, 0); }
}
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
padding: 16px; padding: 16px; }
}
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
padding: 16px 48px; padding: 16px 48px; }
} div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
div.m3.m3-text-field.outlined:hover:not(:focus-visible) { border: 3px solid var(--md-sys-color-primary); }
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
border-top-width: 0;
border-bottom-width: 0;
border-inline-width: 5.5px;
border-style: solid;
border-color: transparent; }
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
border-top-width: 0;
border-bottom-width: 0;
border-inline-width: 7.5px;
border-style: solid;
border-color: transparent; }
div.m3.m3-text-field.outlined > input:focus-visible + label {
color: var(--md-sys-color-primary); }
div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size); }
div.m3.m3-text-field.outlined > label.raised {
transform: translate(16px, -27px) !important; }
div.m3.m3-text-field.outlined > input:required:user-invalid {
caret-color: var(--md-sys-color-error); }
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
color: var(--md-sys-color-error); }
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
border: 3px solid var(--md-sys-color-error); }
div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
border: 1px solid var(--md-sys-color-error); }
div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
} border-color: var(--md-sys-color-on-surface); }
div.m3.m3-text-field.outlined:hover:not(:focus-visible):has(input:not(div.m3.m3-text-field.outlined:hover:not(:focus-visible):user-invalid, :disabled, :focus-visible)) > label {
color: var(--md-sys-color-on-surface);
}
div.m3.m3-text-field.outlined:hover:not(:focus-visible) > input:not(:user-invalid, :disabled, :focus-visible) {
outline-color: var(--md-sys-color-on-surface) !important;
}
/*# sourceMappingURL=text-field.css.map */ /*# sourceMappingURL=text-field.css.map */

8
src/styles/text-field.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["text-field.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI","file":"text-field.css"} {
"version": 3,
"mappings": "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",
"sources": ["text-field.sass"],
"names": [],
"file": "text-field.css"
}

175
src/styles/text-field.sass
View File

@ -9,28 +9,26 @@ div.m3.m3-text-field
span.m3-icon.icon-before span.m3-icon.icon-before
align-self: start align-self: start
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
line-height: var(--md-sys-typescale-body-large-line-height)
font-size: var(--md-sys-typescale-body-large-font-size)
& + span.m3-text-field-supporting-text & + span.m3-text-field-supporting-text
display: flex display: flex
line-height: var(--md-sys-typescale-body-large-line-height) line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size) font-size: var(--md-sys-typescale-body-small-font-size)
color: var(--md-sys-color-on-surface-variant) color: var(--md-sys-color-on-surface-variant)
margin: 0 16px margin: 4px 16px 2px 16px
& > label & > label
padding-inline: 4px padding-inline: 4px
pointer-events: none pointer-events: none
transform: translate(12px, 0) transform: translate(16px, 0)
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
color: var(--md-sys-color-on-surface-variant)
line-height: var(--md-sys-typescale-body-large-line-height)
font-size: var(--md-sys-typescale-body-large-font-size)
position: absolute position: absolute
& > input & > input
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
color: var(--md-sys-color-on-surface)
line-height: var(--md-sys-typescale-body-large-line-height)
font-size: var(--md-sys-typescale-body-large-font-size)
background-color: transparent background-color: transparent
border: none border: none
@ -54,38 +52,24 @@ div.m3.m3-text-field
pointer-events: none pointer-events: none
position: absolute position: absolute
& > input, & > label
color: var(--md-sys-color-on-surface)
&:is(.filled, .outlined) > input::placeholder
color: var(--md-sys-color-on-surface-variant)
&:is(.filled, .outlined) > input:focus-visible &:is(.filled, .outlined) > input:focus-visible
outline: none outline: none
caret-color: var(--md-sys-color-primary) caret-color: var(--md-sys-color-primary)
&:is(.filled, .outlined):has(input:disabled)
& > *, & + span.m3-text-field-supporting-text
opacity: 38%
&.filled &.filled
contain: content contain: content
border-radius: 4px 4px 0 0 border-radius: 4px 4px 0 0
& > label.used
transform: translate(12px, -12px)
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
box-shadow: inset 0 -2px 0 var(--md-sys-color-error)
&:has(input:required:user-invalid) > *,
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
& > input:focus-visible
outline-offset: 2px
box-shadow: inset 0 -2px 0 var(--md-sys-color-primary)
& > input:focus-visible + label
color: var(--md-sys-color-primary)
&:has(input:disabled),
&:has(input:disabled) + span.m3-text-field-supporting-text
opacity: 38%
& > input & > input
&.with-after-icon &.with-after-icon
padding: 24px 48px 8px 16px padding: 24px 48px 8px 16px
@ -102,44 +86,70 @@ div.m3.m3-text-field
&.with-after-icon.with-before-icon &.with-after-icon.with-before-icon
padding: 24px 48px 8px 48px padding: 24px 48px 8px 48px
display: inline-flex
align-items: center
box-sizing: border-box box-sizing: border-box
border-radius: 4px 4px 0 0 border-radius: 4px 4px 0 0
background-color: var(--md-sys-color-surface-container-highest) background-color: var(--md-sys-color-surface-container-highest)
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant) box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
& > label.raised
transform: translate(12px, -12px)
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
&:focus-visible
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
&
box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
& > input:focus-visible
outline-offset: 3px
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
& > input:focus-visible + label
color: var(--md-sys-color-primary)
&:hover &:hover
& > input:not(:disabled) ~ span.m3-text-field-state-layer & > input:not(:disabled) ~ span.m3-text-field-state-layer
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&.outlined &.outlined
& > fieldset
margin: 0
position: absolute
border-radius: 4px border-radius: 4px
pointer-events: none
padding-inline: 12px
border: 1px solid var(--md-sys-color-outline)
inset: -7.5px 0px 0px 0px
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > label.used & > legend > span
background-color: var(--md-sys-color-surface) width: 100%
transform: translate(12px, -27px) !important
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > input:required:user-invalid & > legend
caret-color: var(--md-sys-color-error) opacity: 0
outline-offset: -2px width: 0
outline: 2px solid var(--md-sys-color-error) padding: 0
pointer-events: none
border: 0 solid transparent
transition: .05s cubic-bezier(0.2, 0, 0, 1)
&:has(input:required:user-invalid) > *, & > legend.raised
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text border-inline-width: 6px
color: var(--md-sys-color-error) border-style: solid
border-color: transparent
& > input:focus-visible width: auto
outline-offset: -2px visibility: visible
outline: 2px solid var(--md-sys-color-primary)
& > input:focus-visible + label
color: var(--md-sys-color-primary)
&:has(input:disabled),
&:has(input:disabled) + span.m3-text-field-supporting-text
opacity: 38%
& > input & > input
&.with-after-icon &.with-after-icon
@ -159,15 +169,48 @@ div.m3.m3-text-field
box-sizing: border-box box-sizing: border-box
border-radius: 4px border-radius: 4px
outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline)
&:hover:not(:focus-visible) &:has(input:focus-visible) > fieldset
border: 3px solid var(--md-sys-color-primary)
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 5.5px
border-style: solid
border-color: transparent
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 7.5px
border-style: solid
border-color: transparent
& > input:focus-visible + label
color: var(--md-sys-color-primary)
& > label.raised, & > fieldset > *
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > label.raised
transform: translate(16px, -27px) !important
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
&:has(input:required:user-invalid) > fieldset
border: 3px solid var(--md-sys-color-error)
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
border: 1px solid var(--md-sys-color-error)
&:hover
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
border-color: var(--md-sys-color-on-surface)
&:has(input:not(&:user-invalid,:disabled,:focus-visible)) > label
color: var(--md-sys-color-on-surface)
& > input:not(:user-invalid,:disabled,:focus-visible)
outline-color: var(--md-sys-color-on-surface) !important