DONE: Dividers, Bages base
TODO: Add number restrict for bages
This commit is contained in:
parent
97ce445e44
commit
d9e3304d38
|
|
@ -4,17 +4,17 @@
|
||||||
<option name="autoReloadType" value="SELECTIVE" />
|
<option name="autoReloadType" value="SELECTIVE" />
|
||||||
</component>
|
</component>
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder ADDED: supported text, animation move for label, and etc">
|
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="DONE: I forget, what I do">
|
||||||
|
<change afterPath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/src/styles/badge.sass" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/src/styles/divider.sass" afterDir="false" />
|
||||||
<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/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/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" />
|
|
||||||
</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" />
|
||||||
|
|
@ -180,22 +180,6 @@
|
||||||
<workItem from="1706373080363" duration="1879000" />
|
<workItem from="1706373080363" duration="1879000" />
|
||||||
<workItem from="1706426744715" duration="17520000" />
|
<workItem from="1706426744715" duration="17520000" />
|
||||||
</task>
|
</task>
|
||||||
<task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
|
|
||||||
<option name="closed" value="true" />
|
|
||||||
<created>1704526583970</created>
|
|
||||||
<option name="number" value="00019" />
|
|
||||||
<option name="presentableId" value="LOCAL-00019" />
|
|
||||||
<option name="project" value="LOCAL" />
|
|
||||||
<updated>1704526583970</updated>
|
|
||||||
</task>
|
|
||||||
<task id="LOCAL-00020" summary="updated switch styles">
|
|
||||||
<option name="closed" value="true" />
|
|
||||||
<created>1704526600066</created>
|
|
||||||
<option name="number" value="00020" />
|
|
||||||
<option name="presentableId" value="LOCAL-00020" />
|
|
||||||
<option name="project" value="LOCAL" />
|
|
||||||
<updated>1704526600066</updated>
|
|
||||||
</task>
|
|
||||||
<task id="LOCAL-00021" summary="updated checkbox component">
|
<task id="LOCAL-00021" summary="updated checkbox component">
|
||||||
<option name="closed" value="true" />
|
<option name="closed" value="true" />
|
||||||
<created>1704526612167</created>
|
<created>1704526612167</created>
|
||||||
|
|
@ -572,7 +556,23 @@
|
||||||
<option name="project" value="LOCAL" />
|
<option name="project" value="LOCAL" />
|
||||||
<updated>1705955541881</updated>
|
<updated>1705955541881</updated>
|
||||||
</task>
|
</task>
|
||||||
<option name="localTasksCounter" value="68" />
|
<task id="LOCAL-00068" summary="DONE: I forget, what I do">
|
||||||
|
<option name="closed" value="true" />
|
||||||
|
<created>1706461771129</created>
|
||||||
|
<option name="number" value="00068" />
|
||||||
|
<option name="presentableId" value="LOCAL-00068" />
|
||||||
|
<option name="project" value="LOCAL" />
|
||||||
|
<updated>1706461771129</updated>
|
||||||
|
</task>
|
||||||
|
<task id="LOCAL-00069" summary="DONE: I forget, what I do">
|
||||||
|
<option name="closed" value="true" />
|
||||||
|
<created>1706461783505</created>
|
||||||
|
<option name="number" value="00069" />
|
||||||
|
<option name="presentableId" value="LOCAL-00069" />
|
||||||
|
<option name="project" value="LOCAL" />
|
||||||
|
<updated>1706461783505</updated>
|
||||||
|
</task>
|
||||||
|
<option name="localTasksCounter" value="70" />
|
||||||
<servers />
|
<servers />
|
||||||
</component>
|
</component>
|
||||||
<component name="TypeScriptGeneratedFilesManager">
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
|
@ -590,7 +590,6 @@
|
||||||
</option>
|
</option>
|
||||||
</component>
|
</component>
|
||||||
<component name="VcsManagerConfiguration">
|
<component name="VcsManagerConfiguration">
|
||||||
<MESSAGE value="added roboto fonts" />
|
|
||||||
<MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
|
<MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
|
||||||
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
|
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
|
||||||
<MESSAGE value="added sass style sheet file for fabs" />
|
<MESSAGE value="added sass style sheet file for fabs" />
|
||||||
|
|
@ -615,6 +614,7 @@
|
||||||
<MESSAGE value="TODO: complete supporting text ADDED: semi-complete filled text fields CHANGED: preview page and m3 color scheme" />
|
<MESSAGE value="TODO: complete supporting text ADDED: semi-complete filled text fields CHANGED: preview page and m3 color scheme" />
|
||||||
<MESSAGE value="TODO: before icon ADDED: semi-complete filled text fields" />
|
<MESSAGE value="TODO: before icon ADDED: semi-complete filled text fields" />
|
||||||
<MESSAGE value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
<MESSAGE value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
||||||
<option name="LAST_COMMIT_MESSAGE" value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
<MESSAGE value="DONE: I forget, what I do" />
|
||||||
|
<option name="LAST_COMMIT_MESSAGE" value="DONE: I forget, what I do" />
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
118
app/page.tsx
118
app/page.tsx
|
|
@ -1,11 +1,5 @@
|
||||||
import {Fragment} from "react";
|
import {Fragment} from "react";
|
||||||
import Buttons from "./components/buttons"
|
import {Badge, Divider} from "../src/primitive-components/material-you-components";
|
||||||
import Switches from "./components/switches";
|
|
||||||
import Checkboxes from "./components/checkboxes";
|
|
||||||
import Radios from "./components/radios";
|
|
||||||
import Fabs from "./components/fabs";
|
|
||||||
import IconButtons from "./components/icon-buttons";
|
|
||||||
import {TextFields} from "./components/text-fields";
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return(
|
return(
|
||||||
|
|
@ -20,30 +14,102 @@ 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:"column",
|
flexDirection: "column",
|
||||||
gap:"20px"
|
gap: "0.5em",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection:"row",
|
flexDirection: "row",
|
||||||
gap:"20px"
|
gap: "0.5em",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
height: "150px",
|
||||||
|
backgroundColor: "#00000010",
|
||||||
|
padding: "10px",
|
||||||
|
borderRadius: "15px"
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div>
|
||||||
display: "flex",
|
<div style={{
|
||||||
flexDirection:"column",
|
display: "flex",
|
||||||
gap:"20px",
|
flexDirection: "column",
|
||||||
}}>
|
gap: "0.5em",
|
||||||
<Buttons/>
|
justifyContent: "center",
|
||||||
<IconButtons/>
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge/>
|
||||||
|
</div>
|
||||||
|
<Divider/>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge>5</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider/>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge>32</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Divider orientation={"vertical"} variant={"inset"}/>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "0.5em",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge/>
|
||||||
|
</div>
|
||||||
|
<Divider variant={"inset"}/>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge>5</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider/>
|
||||||
|
<div style={{
|
||||||
|
width: "24px",
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}>
|
||||||
|
<Badge>32</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Switches/>
|
|
||||||
<Checkboxes/>
|
|
||||||
<Radios/>
|
|
||||||
<Fabs/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<TextFields/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
|
||||||
|
import {number, string} from "prop-types";
|
||||||
|
|
||||||
|
const Badge = forwardRef(function Badge(props : PropsWithChildren<any>, ref : ForwardedRef<any>) {
|
||||||
|
return (
|
||||||
|
<span {...props}
|
||||||
|
className={`m3 m3-badge ${"" ?? props.className}`.trimEnd()}
|
||||||
|
ref={ref}>
|
||||||
|
{props.children && <span>{props.children}</span>}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
|
||||||
|
Badge.propTypes = {
|
||||||
|
children: number,
|
||||||
|
className: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export {Badge};
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
|
||||||
|
|
||||||
|
interface DividerProps extends PropsWithChildren<any> {
|
||||||
|
orientation: "vertical" | "horizontal";
|
||||||
|
variant: "full-width" | "inset" | "middle-inset";
|
||||||
|
}
|
||||||
|
|
||||||
|
const Divider = forwardRef(function Divider({orientation, variant, ...props} : DividerProps, ref : ForwardedRef<any>) {
|
||||||
|
return (
|
||||||
|
<hr {...props}
|
||||||
|
ref={ref}
|
||||||
|
className={`m3 m3-divider ${orientation ?? "horizontal"} ${variant ?? "full-width"}`.trimEnd()}/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
|
||||||
|
export {Divider};
|
||||||
|
|
@ -2,8 +2,10 @@
|
||||||
|
|
||||||
export {FAB} from "./fab/fab";
|
export {FAB} from "./fab/fab";
|
||||||
export {Radio} from "./radio/radio";
|
export {Radio} from "./radio/radio";
|
||||||
|
export {Badge} from "./badge/badge";
|
||||||
export {Switch} from "./switch/switch";
|
export {Switch} from "./switch/switch";
|
||||||
export {Button} from "./button/button";
|
export {Button} from "./button/button";
|
||||||
|
export {Divider} from "./divider/divider";
|
||||||
export {Checkbox} from "./checkbox/checkbox";
|
export {Checkbox} from "./checkbox/checkbox";
|
||||||
export {RippleArea} from "./ripple/ripple-area";
|
export {RippleArea} from "./ripple/ripple-area";
|
||||||
export {Ripples, Ripple} from "./ripple/ripple";
|
export {Ripples, Ripple} from "./ripple/ripple";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
span.m3.m3-badge
|
||||||
|
position: absolute
|
||||||
|
background-color: var(--md-sys-color-error)
|
||||||
|
border-radius: 8px
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
min-width: 6px
|
||||||
|
min-height: 6px
|
||||||
|
|
||||||
|
& > span
|
||||||
|
color: var(--md-sys-color-on-error)
|
||||||
|
font-size: 7pt
|
||||||
|
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||||
|
font-weight: var(--md-sys-typescale-label-small-font-weight)
|
||||||
|
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing)
|
||||||
|
text-align: center
|
||||||
|
min-width: 8px
|
||||||
|
padding: 0 4px
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
min-height: 16px
|
||||||
|
width: auto
|
||||||
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
hr.m3.m3-divider
|
||||||
|
display: flex
|
||||||
|
align-items: end
|
||||||
|
box-sizing: border-box
|
||||||
|
border: none
|
||||||
|
outline: 0.5px solid var(--md-sys-color-outline-variant)
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
&.vertical
|
||||||
|
writing-mode: tb-rl
|
||||||
|
&, &.vertical.full-width
|
||||||
|
height: 100%
|
||||||
|
&.inset
|
||||||
|
align-self: end
|
||||||
|
height: calc(100% - 16px)
|
||||||
|
&.middle-inset
|
||||||
|
height: calc(100% - (2 * 16px))
|
||||||
|
|
||||||
|
&.horizontal
|
||||||
|
box-sizing: border-box
|
||||||
|
&, &.horizontal.full-width
|
||||||
|
width: 100%
|
||||||
|
&.inset
|
||||||
|
align-self: end
|
||||||
|
width: calc(100% - 16px)
|
||||||
|
&.middle-inset
|
||||||
|
width: calc(100% - (2 * 16px))
|
||||||
|
|
||||||
|
|
@ -197,6 +197,32 @@ input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-lay
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
span.m3.m3-badge {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--md-sys-color-error);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 6px;
|
||||||
|
min-height: 6px;
|
||||||
|
}
|
||||||
|
span.m3.m3-badge > span {
|
||||||
|
color: var(--md-sys-color-on-error);
|
||||||
|
font-size: 7pt;
|
||||||
|
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||||
|
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||||
|
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
|
||||||
|
text-align: center;
|
||||||
|
min-width: 8px;
|
||||||
|
padding: 0 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 16px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Material-Icons-Regular;
|
font-family: Material-Icons-Regular;
|
||||||
src: url("./font/MaterialIcons-Regular.ttf");
|
src: url("./font/MaterialIcons-Regular.ttf");
|
||||||
|
|
@ -567,6 +593,41 @@ input[type=checkbox].m3.m3-switch:disabled:checked::before {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
hr.m3.m3-divider {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none;
|
||||||
|
outline: 0.5px solid var(--md-sys-color-outline-variant);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical {
|
||||||
|
writing-mode: tb-rl;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.vertical.full-width {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical.inset {
|
||||||
|
align-self: end;
|
||||||
|
height: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical.middle-inset {
|
||||||
|
height: calc(100% - 32px);
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.horizontal {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.horizontal.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.horizontal.inset {
|
||||||
|
align-self: end;
|
||||||
|
width: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.horizontal.middle-inset {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
}
|
||||||
|
|
||||||
label.m3.m3-checkbox-label {
|
label.m3.m3-checkbox-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -1025,16 +1086,7 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||||
html {
|
html {
|
||||||
font-family: Roboto, serif;
|
font-family: Roboto, serif;
|
||||||
color: var(--md-sys-color-on-surface);
|
color: var(--md-sys-color-on-surface);
|
||||||
}
|
background-color: var(--md-sys-color-surface-container);
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
html {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.m3 {
|
.m3 {
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AASQ;AACA;AACA;AACA;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AVjIZ;EACE;EACA;;AACA;EAHF;IAII;;;AACF;EALF;IAMI;;;;AAEJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"}
|
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJHI;EIKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJpCA;;AIuCA;EJjCA;;AIoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJnDA;;AIsDA;EJhDA;;AImDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAER;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACxBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
@import "fabs"
|
@import "fabs"
|
||||||
@import "radio"
|
@import "radio"
|
||||||
|
@import "badge"
|
||||||
@import "fonts"
|
@import "fonts"
|
||||||
@import "button"
|
@import "button"
|
||||||
@import "ripple"
|
@import "ripple"
|
||||||
@import "swtich"
|
@import "swtich"
|
||||||
|
@import "divider"
|
||||||
@import "checkbox"
|
@import "checkbox"
|
||||||
@import "text-field"
|
@import "text-field"
|
||||||
@import "icon-button"
|
@import "icon-button"
|
||||||
|
|
@ -14,20 +16,17 @@
|
||||||
@import "./themes/theme.light.css" (prefers-color-scheme: light)
|
@import "./themes/theme.light.css" (prefers-color-scheme: light)
|
||||||
|
|
||||||
html
|
html
|
||||||
font-family: Roboto, serif
|
font-family: Roboto, serif
|
||||||
color: var(--md-sys-color-on-surface)
|
color: var(--md-sys-color-on-surface)
|
||||||
@media (prefers-color-scheme: light)
|
background-color: var(--md-sys-color-surface-container)
|
||||||
background-color: white
|
|
||||||
@media (prefers-color-scheme: dark)
|
|
||||||
background-color: black
|
|
||||||
|
|
||||||
.m3
|
.m3
|
||||||
user-select: none
|
user-select: none
|
||||||
|
|
||||||
.m3.m3-wrapper
|
.m3.m3-wrapper
|
||||||
background-color: var(--md-sys-color-surface)
|
background-color: var(--md-sys-color-surface)
|
||||||
border-radius: 25px
|
border-radius: 25px
|
||||||
padding: 25px
|
padding: 25px
|
||||||
width: max-content
|
width: max-content
|
||||||
height: min-content
|
height: min-content
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue