ESLINT is holy crap
This commit is contained in:
95
.eslintrc.js
Normal file
95
.eslintrc.js
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
const prettierConfig = require('./.prettierrc.js');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es2021: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
'plugin:prettier/recommended',
|
||||||
|
'plugin:@typescript-eslint/eslint-recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'next/core-web-vitals',
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
ecmaVersion: 12,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
plugins: ['react'],
|
||||||
|
rules: {
|
||||||
|
// Possible errors
|
||||||
|
'no-console': 'warn',
|
||||||
|
// Best practices
|
||||||
|
'dot-notation': 'error',
|
||||||
|
'no-else-return': 'error',
|
||||||
|
'no-floating-decimal': 'error',
|
||||||
|
'no-sequences': 'error',
|
||||||
|
// Stylistic
|
||||||
|
'array-bracket-spacing': 'error',
|
||||||
|
'computed-property-spacing': ['error', 'never'],
|
||||||
|
curly: 'error',
|
||||||
|
'no-lonely-if': 'error',
|
||||||
|
'no-unneeded-ternary': 'error',
|
||||||
|
'one-var-declaration-per-line': 'error',
|
||||||
|
quotes: [
|
||||||
|
'error',
|
||||||
|
'single',
|
||||||
|
{
|
||||||
|
allowTemplateLiterals: false,
|
||||||
|
avoidEscape: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// ES6
|
||||||
|
'array-callback-return': 'off',
|
||||||
|
'prefer-const': 'error',
|
||||||
|
// Imports
|
||||||
|
'import/prefer-default-export': 'off',
|
||||||
|
'sort-imports': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
ignoreCase: true,
|
||||||
|
ignoreDeclarationSort: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-unused-expressions': 'off',
|
||||||
|
'no-prototype-builtins': 'off',
|
||||||
|
// REACT
|
||||||
|
'react/jsx-uses-react': 'off',
|
||||||
|
'react/react-in-jsx-scope': 'off',
|
||||||
|
'jsx-a11y/href-no-hash': [0],
|
||||||
|
'react/display-name': 0,
|
||||||
|
'react/no-deprecated': 'error',
|
||||||
|
'react/no-unsafe': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
checkAliases: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react/jsx-sort-props': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
ignoreCase: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react-hooks/rules-of-hooks': 'error',
|
||||||
|
'react-hooks/exhaustive-deps': 0,
|
||||||
|
// Prettier
|
||||||
|
// eslint looks for the prettier config at the top level of the package/app
|
||||||
|
// but the config lives in the `config/` directory. Passing the config here
|
||||||
|
// to get around this.
|
||||||
|
'prettier/prettier': ['error', prettierConfig],
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: 'detect',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
5
.idea/.gitignore
generated
vendored
Normal file
5
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
5
.idea/codeStyles/codeStyleConfig.xml
generated
Normal file
5
.idea/codeStyles/codeStyleConfig.xml
generated
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<component name="ProjectCodeStyleConfiguration">
|
||||||
|
<state>
|
||||||
|
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||||
|
</state>
|
||||||
|
</component>
|
||||||
12
.idea/google-material-you-ui.iml
generated
Normal file
12
.idea/google-material-you-ui.iml
generated
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
6
.idea/jsLinters/eslint.xml
generated
Normal file
6
.idea/jsLinters/eslint.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="EslintConfiguration">
|
||||||
|
<option name="fix-on-save" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/google-material-you-ui.iml" filepath="$PROJECT_DIR$/.idea/google-material-you-ui.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
7
.prettierrc.js
Normal file
7
.prettierrc.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
arrowParens: 'avoid',
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: 'all',
|
||||||
|
tabWidth: 4,
|
||||||
|
endOfLine: 'auto',
|
||||||
|
};
|
||||||
56
README.md
56
README.md
@@ -1,25 +1,49 @@
|
|||||||
# Next.js + Turbopack
|
# React/Next.js Material You UI kit (pre-alpha)
|
||||||
|
|
||||||
This example allows you to get started with `next dev --turbo` quicky.
|
This repository is including and will be including components, enumerates in table:
|
||||||
|
|
||||||
## Deploy your own
|
- [x] Buttons
|
||||||
|
- [x] Default
|
||||||
|
- [x] Icon
|
||||||
|
- [x] FAB
|
||||||
|
- [x] Radio
|
||||||
|
- [ ] Segmented
|
||||||
|
- [x] Checkbox
|
||||||
|
- [x] Text fields
|
||||||
|
- [x] Switches
|
||||||
|
- [ ] Chips
|
||||||
|
- [x] Icon
|
||||||
|
- [x] Ripple Effect
|
||||||
|
- [x] Dividers
|
||||||
|
- [x] Badges
|
||||||
|
- [ ] Select field
|
||||||
|
- [ ] Bottom sheets
|
||||||
|
- [ ] Cards
|
||||||
|
- [ ] Menus
|
||||||
|
- [ ] Navigation
|
||||||
|
- [ ] Bars
|
||||||
|
- [ ] Drawer
|
||||||
|
- [ ] Rail
|
||||||
|
- [ ] Sliders
|
||||||
|
- [ ] Snackbar
|
||||||
|
- [ ] Tabs
|
||||||
|
- [ ] Bottom sheets
|
||||||
|
- [ ] Bottom app bars
|
||||||
|
~~and including preview page for test.~~
|
||||||
|
Preview page on stage WIP.
|
||||||
|
|
||||||
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-turbopack&project-name=with-turbopack&repository-name=with-turbopack)
|
# Status
|
||||||
|
|
||||||
## How to use
|
Nowadays, this UI kit have base kinds of components and you could make everything. For example - general forms (without select field and etc.)
|
||||||
|
|
||||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
# Roadmap
|
||||||
|
|
||||||
```bash
|
1. Full implementation components;
|
||||||
npx create-next-app --example with-turbopack with-turbopack-app
|
2. Release NPM package;
|
||||||
```
|
3. Custom theaming.
|
||||||
|
|
||||||
```bash
|
## Did you find the bug? Make sure to [leave an issue](https://github.com/doryan04/DSS/issues/new) in case of any problems.
|
||||||
yarn create next-app --example with-turbopack with-turbopack-app
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash
|
## If you want help to the project, please, advise your idea in Pull request and don't forget [send issue](https://github.com/doryan04/DSS/issues/new)
|
||||||
pnpm create next-app --example with-turbopack with-turbopack-app
|
|
||||||
```
|
|
||||||
|
|
||||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
### Check out actual news on Telegram. [https://t.me/doryanProjects](https://t.me/doryanProjects)
|
||||||
|
|||||||
136
app/components/badges.tsx
Normal file
136
app/components/badges.tsx
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Badge } from '../../src/primitive-components/badge/badge';
|
||||||
|
import { Divider } from '../../src/primitive-components/divider/divider';
|
||||||
|
|
||||||
|
export default function Badges() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={'m3 m3-wrapper'}
|
||||||
|
style={{ display: 'flex', flexDirection: 'row' }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '0.5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge />
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge disableValue />
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge disableValue>3487</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>5</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>32</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>322342</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/*<Divider orientation={"vertical"} variant={"full-width"}/>*/}
|
||||||
|
{/*<div>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* flexDirection: "column",*/}
|
||||||
|
{/* gap: "0.5em",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge/>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <Divider variant={"inset"}/>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge>5</Badge>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <Divider/>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge>32</Badge>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/*</div>*/}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
71
app/components/buttons.tsx
Normal file
71
app/components/buttons.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useCallback, useState } from 'react';
|
||||||
|
import { Button } from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
export default function Buttons() {
|
||||||
|
const [state, setState] = useState(1);
|
||||||
|
|
||||||
|
const callback = useCallback(
|
||||||
|
() => setState(prevState => prevState + 1),
|
||||||
|
[state],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Buttons </h1>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div>
|
||||||
|
<h2> Default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '150px',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
centralRipple
|
||||||
|
onClick={callback}
|
||||||
|
variant={'filled'}
|
||||||
|
>
|
||||||
|
Label + {state}
|
||||||
|
</Button>
|
||||||
|
<Button variant={'outlined'}>Label</Button>
|
||||||
|
<Button variant={'tonal'}>Label</Button>
|
||||||
|
<Button variant={'elevated'}>Label</Button>
|
||||||
|
<Button variant={'text'}>Label</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Buttons with icon </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '150px',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button icon={'add'} variant={'filled'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'outlined'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'tonal'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'elevated'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'text'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
90
app/components/checkboxes.tsx
Normal file
90
app/components/checkboxes.tsx
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
} from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
export default function Checkboxes() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Checkboxes </h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Checkbox centralRipple />
|
||||||
|
<Checkbox defaultChecked />
|
||||||
|
<Checkbox indeterminate={true} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Checkbox disabled />
|
||||||
|
<Checkbox defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Errored </h2>
|
||||||
|
<form
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'row',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox required />
|
||||||
|
<Checkbox defaultChecked required />
|
||||||
|
<Checkbox indeterminate={true} required />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'row',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox className={'m3-error'} required />
|
||||||
|
<Checkbox
|
||||||
|
className={'m3-error'}
|
||||||
|
defaultChecked
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
className={'m3-error'}
|
||||||
|
indeterminate={true}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type={'submit'}>Send</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
221
app/components/fabs.tsx
Normal file
221
app/components/fabs.tsx
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FAB } from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
export default function Fabs() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div>
|
||||||
|
<h1> FABs with elevation</h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Small </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB
|
||||||
|
centralRipple
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} />
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Large </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} size={'large'} />
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Extended </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} size={'extended'}>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'primary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'secondary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1> FABs without elevation</h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Small </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'small'} />
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} />
|
||||||
|
<FAB icon={'edit'} variant={'primary'} />
|
||||||
|
<FAB icon={'edit'} variant={'secondary'} />
|
||||||
|
<FAB icon={'edit'} variant={'tertiary'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Large </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'large'} />
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Extended </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'extended'}>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'primary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'secondary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
190
app/components/icon-buttons.tsx
Normal file
190
app/components/icon-buttons.tsx
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { IconButton } from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
function IconButtons() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Icon buttons </h1>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div>
|
||||||
|
<h2> Default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton centralRipple icon={'settings'} />
|
||||||
|
<IconButton icon={'settings'} variant={'filled'} />
|
||||||
|
<IconButton icon={'settings'} variant={'tonal'} />
|
||||||
|
<IconButton icon={'settings'} variant={'outlined'} />
|
||||||
|
</div>
|
||||||
|
<h2> Disabled default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton disabled icon={'settings'} />
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2> Disabled toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2> Disabled selected toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IconButtons;
|
||||||
34
app/components/radios.tsx
Normal file
34
app/components/radios.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Radio } from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
export default function Radios() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Radio </h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Radio centralRipple />
|
||||||
|
<Radio defaultChecked />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Radio disabled />
|
||||||
|
<Radio defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
83
app/components/switches.tsx
Normal file
83
app/components/switches.tsx
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Switch } from '../../src/primitive-components/material-you-components';
|
||||||
|
|
||||||
|
export default function Switches() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={'m3 m3-wrapper'}
|
||||||
|
style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
|
||||||
|
>
|
||||||
|
<h1> Switches </h1>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> Without icon </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch />
|
||||||
|
<Switch defaultChecked />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled />
|
||||||
|
<Switch defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> With icon (both)</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch icon />
|
||||||
|
<Switch defaultChecked icon />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled icon />
|
||||||
|
<Switch defaultChecked disabled icon />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> With icon (selected)</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch icon selected />
|
||||||
|
<Switch defaultChecked icon selected />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled icon selected />
|
||||||
|
<Switch defaultChecked disabled icon selected />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1504
app/components/text-fields.tsx
Normal file
1504
app/components/text-fields.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,26 @@
|
|||||||
|
import '../src/styles/generics.css';
|
||||||
|
import { Metadata, Viewport } from 'next';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Create Next App',
|
||||||
|
description: 'Generated by create next app',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const viewport: Viewport = {
|
||||||
|
width: 'device-width',
|
||||||
|
initialScale: 1,
|
||||||
|
maximumScale: 1,
|
||||||
|
userScalable: false,
|
||||||
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
45
app/page.tsx
45
app/page.tsx
@@ -1,3 +1,46 @@
|
|||||||
|
import { Fragment } from 'react';
|
||||||
|
import Fabs from './components/fabs';
|
||||||
|
import Badges from './components/badges';
|
||||||
|
import IconButtons from './components/icon-buttons';
|
||||||
|
import Buttons from './components/buttons';
|
||||||
|
import Switches from './components/switches';
|
||||||
|
import Checkboxes from './components/checkboxes';
|
||||||
|
import Radios from './components/radios';
|
||||||
|
import { TextFields } from './components/text-fields';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <h1>Hello, Next.js!</h1>;
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
overflowX: 'auto',
|
||||||
|
gap: '0em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1>Google Material You UI kit</h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '0.5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Buttons />
|
||||||
|
<IconButtons />
|
||||||
|
<Switches />
|
||||||
|
<Checkboxes />
|
||||||
|
<Radios />
|
||||||
|
<TextFields />
|
||||||
|
<Fabs />
|
||||||
|
<Badges />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
6554
package-lock.json
generated
6554
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@@ -3,17 +3,39 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbo",
|
"dev": "next dev --turbo",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start",
|
||||||
|
"lint": "lint",
|
||||||
|
"compile": "tsc",
|
||||||
|
"prepare": "npm run compile",
|
||||||
|
"pretest": "npm run compile",
|
||||||
|
"posttest": "npm run lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
|
"install": "^0.13.0",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "20.8.10",
|
"@next/eslint-plugin-next": "^14.1.0",
|
||||||
|
"@types/node": "20.8.2",
|
||||||
"@types/react": "18.2.33",
|
"@types/react": "18.2.33",
|
||||||
"@types/react-dom": "18.2.14",
|
"@types/react-dom": "18.2.14",
|
||||||
"typescript": "^5.2.2"
|
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-config-next": "^14.1.0",
|
||||||
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
"eslint-config-standard-with-typescript": "^43.0.1",
|
||||||
|
"eslint-plugin-import": "^2.29.1",
|
||||||
|
"eslint-plugin-n": "^16.6.2",
|
||||||
|
"eslint-plugin-promise": "^6.1.1",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"i": "^0.3.7",
|
||||||
|
"npm": "^10.4.0",
|
||||||
|
"prettier": "3.2.4",
|
||||||
|
"typescript": "~5.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
37
src/primitive-components/badge/badge.tsx
Normal file
37
src/primitive-components/badge/badge.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { BadgeProps } from './badges.types';
|
||||||
|
import { bool, number, string } from 'prop-types';
|
||||||
|
import React, { forwardRef } from 'react';
|
||||||
|
|
||||||
|
const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
|
||||||
|
{ disableValue = false, ...props },
|
||||||
|
ref,
|
||||||
|
) {
|
||||||
|
const digitLength = props.children
|
||||||
|
? 16 + (props.children.length - 1) * 6
|
||||||
|
: 6,
|
||||||
|
disableValueClassName =
|
||||||
|
disableValue || (!props.children ?? true) ? 'disable-value' : '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
{...props}
|
||||||
|
className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
|
||||||
|
ref={ref}
|
||||||
|
width={`${digitLength}px`}
|
||||||
|
>
|
||||||
|
{props.children && (
|
||||||
|
<text x={'50%'} y={'50%'}>
|
||||||
|
{props.children}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Badge.propTypes = {
|
||||||
|
children: number,
|
||||||
|
className: string,
|
||||||
|
disableValue: bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Badge };
|
||||||
5
src/primitive-components/badge/badges.types.ts
Normal file
5
src/primitive-components/badge/badges.types.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export interface BadgeProps extends PropsWithChildren<any> {
|
||||||
|
disableValue?: boolean;
|
||||||
|
}
|
||||||
48
src/primitive-components/button-layout/button-layout.tsx
Normal file
48
src/primitive-components/button-layout/button-layout.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RippleArea } from '../ripple/ripple-area';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||||
|
import React, {
|
||||||
|
forwardRef,
|
||||||
|
PropsWithChildren,
|
||||||
|
useId,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
const ButtonLayout = forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
PropsWithChildren<any> & IRippleProps
|
||||||
|
>(function ButtonBase({ centralRipple = false, ...props }, ref) {
|
||||||
|
const [isActive, setIsActive] = useState<boolean>(false),
|
||||||
|
ripplesRef = useRef(null),
|
||||||
|
buttonId = useId(),
|
||||||
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
|
const { variant, disabled, className } = props;
|
||||||
|
|
||||||
|
const classes = className
|
||||||
|
? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
|
||||||
|
: `m3 ${variant}${isActive ? ' is-active' : ''}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
{...props}
|
||||||
|
{...events}
|
||||||
|
className={classes}
|
||||||
|
disabled={disabled}
|
||||||
|
id={buttonId}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
<RippleArea
|
||||||
|
callback={setIsActive}
|
||||||
|
central={centralRipple}
|
||||||
|
ref={ripplesRef}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { ButtonLayout };
|
||||||
25
src/primitive-components/button-layout/button.types.ts
Normal file
25
src/primitive-components/button-layout/button.types.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
type ToggleButtonType = {
|
||||||
|
selected: string;
|
||||||
|
unselected: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface ButtonMainProps extends PropsWithChildren<any> {
|
||||||
|
disabled?: boolean;
|
||||||
|
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FABMainProps extends PropsWithChildren<any> {
|
||||||
|
icon: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
size?: 'small' | 'default' | 'large' | 'extended';
|
||||||
|
variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IconButtonMainProps extends PropsWithChildren<any> {
|
||||||
|
icon: string;
|
||||||
|
toggled?: false | ToggleButtonType;
|
||||||
|
disabled?: boolean;
|
||||||
|
variant?: 'default' | 'filled' | 'tonal' | 'outlined';
|
||||||
|
}
|
||||||
33
src/primitive-components/button/button.tsx
Normal file
33
src/primitive-components/button/button.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { forwardRef } from 'react';
|
||||||
|
import { Icon } from '../material-you-components';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
|
import { ButtonMainProps } from '../button-layout/button.types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Button component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const Button = forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
ButtonMainProps & IRippleProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ centralRipple = false, variant, disabled = false, icon, ...props },
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<ButtonLayout
|
||||||
|
{...props}
|
||||||
|
centralRipple={centralRipple}
|
||||||
|
disabled={disabled}
|
||||||
|
ref={ref}
|
||||||
|
variant={variant ? variant : 'filled'}
|
||||||
|
>
|
||||||
|
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
|
||||||
|
<span className={'label-large'}>{props.children}</span>
|
||||||
|
</ButtonLayout>
|
||||||
|
),
|
||||||
|
);
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, {
|
||||||
|
forwardRef,
|
||||||
|
useEffect,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
} from 'react';
|
||||||
|
import { CheckboxLayoutProps } from './checkbox-layout.types';
|
||||||
|
|
||||||
|
export const CheckBoxLayout = forwardRef(function CheckBoxBase(
|
||||||
|
{ indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
|
||||||
|
ref,
|
||||||
|
): JSX.Element {
|
||||||
|
const checkboxRef = useRef<any>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
checkboxRef.current.indeterminate = indeterminate === true;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => checkboxRef.current);
|
||||||
|
|
||||||
|
const classesType = typeInput || type;
|
||||||
|
|
||||||
|
const classes =
|
||||||
|
props.className !== undefined
|
||||||
|
? `m3 m3-${type} ${props.className}`
|
||||||
|
: `m3 m3-${classesType}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
ref={checkboxRef}
|
||||||
|
{...props}
|
||||||
|
className={classes.trimEnd()}
|
||||||
|
type={type}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export interface CheckboxLayoutProps extends PropsWithChildren<any> {
|
||||||
|
indeterminate?: boolean;
|
||||||
|
typeInput?: string;
|
||||||
|
type?: string;
|
||||||
|
}
|
||||||
59
src/primitive-components/checkbox/checkbox.tsx
Normal file
59
src/primitive-components/checkbox/checkbox.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RippleArea } from '../ripple/ripple-area';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||||
|
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||||
|
import {
|
||||||
|
forwardRef,
|
||||||
|
PropsWithChildren,
|
||||||
|
useEffect,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checkbox component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const Checkbox = forwardRef<
|
||||||
|
HTMLInputElement,
|
||||||
|
PropsWithChildren<any> & IRippleProps
|
||||||
|
>(({ centralRipple, ...props }, ref) => {
|
||||||
|
const [isActive, setIsActive] = useState<boolean>(false),
|
||||||
|
[checked, setChecked] = useState<boolean>(props.checked ?? false),
|
||||||
|
ripplesRef = useRef(null),
|
||||||
|
checkboxRef = useRef(null),
|
||||||
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
|
const classes =
|
||||||
|
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
|
||||||
|
const indeterminate = (props.indeterminate === true).toString();
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => checkboxRef.current);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setChecked(!checked);
|
||||||
|
}, [checkboxRef.current?.checked]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label {...events} className={classes}>
|
||||||
|
<CheckBoxLayout
|
||||||
|
{...props}
|
||||||
|
indeterminate={indeterminate}
|
||||||
|
ref={checkboxRef}
|
||||||
|
type={'checkbox'}
|
||||||
|
/>
|
||||||
|
<span className={'m3 m3-checkbox-state-layer'} />
|
||||||
|
<RippleArea
|
||||||
|
callback={setIsActive}
|
||||||
|
central={centralRipple}
|
||||||
|
className={'m3-checkbox-ripple-layer'}
|
||||||
|
ref={ripplesRef}
|
||||||
|
/>
|
||||||
|
{props.children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
});
|
||||||
18
src/primitive-components/divider/divider.tsx
Normal file
18
src/primitive-components/divider/divider.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import React, { forwardRef, PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface DividerProps extends PropsWithChildren<any> {
|
||||||
|
orientation?: 'vertical' | 'horizontal';
|
||||||
|
variant?: 'full-width' | 'inset' | 'middle-inset';
|
||||||
|
}
|
||||||
|
|
||||||
|
const Divider = forwardRef<HTMLHRElement, DividerProps>(
|
||||||
|
({ orientation, variant, ...props }, ref) => (
|
||||||
|
<hr
|
||||||
|
{...props}
|
||||||
|
className={`m3 m3-divider ${orientation ?? 'horizontal'} ${variant ?? 'full-width'}`.trimEnd()}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Divider };
|
||||||
52
src/primitive-components/fab/fab.tsx
Normal file
52
src/primitive-components/fab/fab.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { forwardRef } from 'react';
|
||||||
|
import { Icon } from '../material-you-components';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import { FABMainProps } from '../button-layout/button.types';
|
||||||
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FABs component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
const sizes = {
|
||||||
|
small: 24,
|
||||||
|
default: 24,
|
||||||
|
large: 36,
|
||||||
|
extended: 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
variant,
|
||||||
|
disabled,
|
||||||
|
icon,
|
||||||
|
centralRipple = false,
|
||||||
|
size = 'default',
|
||||||
|
elevated,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<ButtonLayout
|
||||||
|
{...props}
|
||||||
|
centralRipple={centralRipple}
|
||||||
|
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
|
||||||
|
disabled={disabled}
|
||||||
|
ref={ref}
|
||||||
|
variant={variant ? variant : 'surface'}
|
||||||
|
>
|
||||||
|
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
|
||||||
|
{icon}
|
||||||
|
</Icon>
|
||||||
|
{size === 'extended' ? (
|
||||||
|
<span className={'label-large'}>{props.children}</span>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</ButtonLayout>
|
||||||
|
),
|
||||||
|
);
|
||||||
86
src/primitive-components/icon-button/icon-button.tsx
Normal file
86
src/primitive-components/icon-button/icon-button.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Icon } from '../material-you-components';
|
||||||
|
import { toggleIconType } from './icon-button.types';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
|
import { IconButtonMainProps } from '../button-layout/button.types';
|
||||||
|
import {
|
||||||
|
forwardRef,
|
||||||
|
useCallback,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Icon button-layout component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const IconButton = forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
IconButtonMainProps & IRippleProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
icon,
|
||||||
|
variant,
|
||||||
|
disabled,
|
||||||
|
selected = false,
|
||||||
|
toggled = false,
|
||||||
|
centralRipple,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
|
||||||
|
state: selected == true ? 'selected' : 'unselected',
|
||||||
|
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggle = (classes: string, icon: string) => {
|
||||||
|
setToggleIcon(() => ({
|
||||||
|
state: classes,
|
||||||
|
icon: icon,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
const callback = useCallback(() => {
|
||||||
|
if (toggled) {
|
||||||
|
if (toggleIcon.state === 'selected') {
|
||||||
|
toggle('', toggled.unselected ?? 'add_circle');
|
||||||
|
} else {
|
||||||
|
toggle('selected', toggled.selected ?? 'add_circle');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (props.onClick) {
|
||||||
|
props.onClick();
|
||||||
|
}
|
||||||
|
}, [toggleIcon]);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => buttonRef.current);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ButtonLayout
|
||||||
|
{...props}
|
||||||
|
centralRipple={centralRipple}
|
||||||
|
className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={callback}
|
||||||
|
ref={buttonRef}
|
||||||
|
variant={variant ? variant : 'default'}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
fill={toggleIcon.state === 'selected' ? 1 : 0}
|
||||||
|
iconSize={28}
|
||||||
|
svgSize={40}
|
||||||
|
>
|
||||||
|
{toggled ? toggleIcon.icon : icon ? icon : undefined}
|
||||||
|
</Icon>
|
||||||
|
</ButtonLayout>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export type toggleIconType = {
|
||||||
|
state: string;
|
||||||
|
icon: string;
|
||||||
|
};
|
||||||
53
src/primitive-components/icon/icon.tsx
Normal file
53
src/primitive-components/icon/icon.tsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { IconProps } from './icon.types';
|
||||||
|
import { bool, number, string } from 'prop-types';
|
||||||
|
import React, { ForwardedRef, forwardRef } from 'react';
|
||||||
|
|
||||||
|
const Icon = forwardRef(function Icon(
|
||||||
|
{
|
||||||
|
grade = 0,
|
||||||
|
weight = 500,
|
||||||
|
svgSize = 20,
|
||||||
|
fill = false,
|
||||||
|
iconSize = 20,
|
||||||
|
opticalSize = 24,
|
||||||
|
type = 'outlined',
|
||||||
|
...props
|
||||||
|
}: IconProps,
|
||||||
|
ref: ForwardedRef<any>,
|
||||||
|
) {
|
||||||
|
const fontVariation = {
|
||||||
|
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
{...props}
|
||||||
|
className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
|
||||||
|
height={svgSize}
|
||||||
|
ref={ref}
|
||||||
|
width={svgSize}
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
|
||||||
|
style={fontVariation}
|
||||||
|
x={'50%'}
|
||||||
|
y={'50%'}
|
||||||
|
>
|
||||||
|
{props.children ?? 'add_circle'}
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Icon.propTypes = {
|
||||||
|
fill: bool,
|
||||||
|
type: string,
|
||||||
|
grade: number,
|
||||||
|
weight: number,
|
||||||
|
svgSize: number,
|
||||||
|
iconSize: number,
|
||||||
|
children: string,
|
||||||
|
opticalSize: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Icon };
|
||||||
11
src/primitive-components/icon/icon.types.ts
Normal file
11
src/primitive-components/icon/icon.types.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export interface IconProps extends PropsWithChildren<any> {
|
||||||
|
fill?: boolean;
|
||||||
|
grade?: number;
|
||||||
|
svgSize?: number;
|
||||||
|
iconSize?: number;
|
||||||
|
opticalSize?: number;
|
||||||
|
type?: 'outlined' | 'rounded' | 'sharp';
|
||||||
|
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
|
||||||
|
}
|
||||||
13
src/primitive-components/material-you-components.tsx
Normal file
13
src/primitive-components/material-you-components.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
export { FAB } from './fab/fab';
|
||||||
|
export { Icon } from './icon/icon';
|
||||||
|
export { Radio } from './radio/radio';
|
||||||
|
export { Badge } from './badge/badge';
|
||||||
|
export { Switch } from './switch/switch';
|
||||||
|
export { Button } from './button/button';
|
||||||
|
export { Divider } from './divider/divider';
|
||||||
|
export { Checkbox } from './checkbox/checkbox';
|
||||||
|
export { RippleArea } from './ripple/ripple-area';
|
||||||
|
export { Ripples, Ripple } from './ripple/ripple';
|
||||||
|
export { TextField } from './text-field/text-field';
|
||||||
|
export { IconButton } from './icon-button/icon-button';
|
||||||
|
export { ButtonLayout } from './button-layout/button-layout';
|
||||||
38
src/primitive-components/radio/radio.tsx
Normal file
38
src/primitive-components/radio/radio.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RippleArea } from '../ripple/ripple-area';
|
||||||
|
import { IRippleProps } from '../ripple/ripple.types';
|
||||||
|
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||||
|
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||||
|
import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Radio component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const Radio = forwardRef<
|
||||||
|
HTMLInputElement,
|
||||||
|
PropsWithChildren<HTMLElement> & IRippleProps
|
||||||
|
>(({ centralRipple, ...props }, ref) => {
|
||||||
|
const [isActive, setIsActive] = useState<boolean>(false),
|
||||||
|
ripplesRef = useRef(null),
|
||||||
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
|
const classes =
|
||||||
|
`m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label {...events} className={classes}>
|
||||||
|
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
|
||||||
|
<span className={'m3 m3-radio-state-layer'} />
|
||||||
|
<RippleArea
|
||||||
|
callback={setIsActive}
|
||||||
|
central={centralRipple}
|
||||||
|
className={'m3-checkbox-ripple-layer'}
|
||||||
|
ref={ripplesRef}
|
||||||
|
/>
|
||||||
|
{props.children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
});
|
||||||
43
src/primitive-components/ripple/hooks/useRippleEffect.ts
Normal file
43
src/primitive-components/ripple/hooks/useRippleEffect.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface RippleEventHandlers {
|
||||||
|
onBlur: React.FocusEventHandler;
|
||||||
|
onContextMenu: React.MouseEventHandler;
|
||||||
|
onDragLeave: React.DragEventHandler;
|
||||||
|
onMouseDown: React.MouseEventHandler;
|
||||||
|
onMouseLeave: React.MouseEventHandler;
|
||||||
|
onMouseUp: React.MouseEventHandler;
|
||||||
|
onTouchEnd: React.TouchEventHandler;
|
||||||
|
onTouchMove: React.TouchEventHandler;
|
||||||
|
onTouchStart: React.TouchEventHandler;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
|
||||||
|
const [mounted, setMounted] = useState<boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!mounted) {
|
||||||
|
setMounted(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { start, stop } = ref.current;
|
||||||
|
|
||||||
|
return {
|
||||||
|
onBlur: event => stop(event, callback),
|
||||||
|
onContextMenu: event => start(event, callback),
|
||||||
|
onDragLeave: event => stop(event, callback),
|
||||||
|
onMouseDown: event => start(event, callback),
|
||||||
|
onMouseLeave: event => stop(event, callback),
|
||||||
|
onMouseUp: event => stop(event, callback),
|
||||||
|
onTouchEnd: event => stop(event, callback),
|
||||||
|
onTouchMove: event => stop(event, callback),
|
||||||
|
onTouchStart: event => stop(event, callback),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UseRippleEffect;
|
||||||
130
src/primitive-components/ripple/ripple-area.tsx
Normal file
130
src/primitive-components/ripple/ripple-area.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, {
|
||||||
|
forwardRef,
|
||||||
|
useCallback,
|
||||||
|
useId,
|
||||||
|
useImperativeHandle,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import { Ripple } from './ripple';
|
||||||
|
import { Ripples } from './ripple';
|
||||||
|
import { RippleAreaProps } from './ripple.types';
|
||||||
|
|
||||||
|
const TIMEOUT: number = 550;
|
||||||
|
const rippleAreaContext = React.createContext(false);
|
||||||
|
|
||||||
|
const RippleArea = forwardRef(function RippleArea(
|
||||||
|
{ central = false, callback, ...props }: RippleAreaProps,
|
||||||
|
ref,
|
||||||
|
) {
|
||||||
|
const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
|
||||||
|
rippleDomain = useRef<any>(null),
|
||||||
|
clicked = useRef<boolean>(false),
|
||||||
|
uniqueKey = useRef<number>(0),
|
||||||
|
uniqueId = useId();
|
||||||
|
|
||||||
|
const classes = props.className
|
||||||
|
? `m3 m3-ripple-domain ${props.className}`.trimEnd()
|
||||||
|
: 'm3 m3-ripple-domain';
|
||||||
|
|
||||||
|
const start = useCallback(
|
||||||
|
(event: any, cb: (state: boolean) => void): void => {
|
||||||
|
clicked.current = true;
|
||||||
|
cb(clicked.current);
|
||||||
|
|
||||||
|
const rippleDomainChar = rippleDomain.current
|
||||||
|
? rippleDomain.current.getBoundingClientRect()
|
||||||
|
: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const rippleX: number = !central
|
||||||
|
? event.clientX - rippleDomainChar.left
|
||||||
|
: rippleDomainChar.width / 2,
|
||||||
|
rippleY: number = !central
|
||||||
|
? event.clientY - rippleDomainChar.top
|
||||||
|
: rippleDomainChar.height / 2,
|
||||||
|
rippleSizeX: number =
|
||||||
|
Math.max(
|
||||||
|
Math.abs(rippleDomainChar.width - rippleX),
|
||||||
|
rippleX,
|
||||||
|
) *
|
||||||
|
2 +
|
||||||
|
2,
|
||||||
|
rippleSizeY: number =
|
||||||
|
Math.max(
|
||||||
|
Math.abs(rippleDomainChar.height - rippleY),
|
||||||
|
rippleY,
|
||||||
|
) *
|
||||||
|
2 +
|
||||||
|
2,
|
||||||
|
rippleS: number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
|
||||||
|
|
||||||
|
setRipples((prevRipples: Array<JSX.Element>) => {
|
||||||
|
if (prevRipples.length === 0) {
|
||||||
|
return [
|
||||||
|
<Ripple
|
||||||
|
key={uniqueKey.current}
|
||||||
|
lifetime={TIMEOUT}
|
||||||
|
rippleS={rippleS}
|
||||||
|
rippleX={rippleX}
|
||||||
|
rippleY={rippleY}
|
||||||
|
/>,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
const old = [...prevRipples];
|
||||||
|
old.push(
|
||||||
|
<Ripple
|
||||||
|
key={uniqueKey.current}
|
||||||
|
lifetime={TIMEOUT}
|
||||||
|
rippleS={rippleS}
|
||||||
|
rippleX={rippleX}
|
||||||
|
rippleY={rippleY}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
return old;
|
||||||
|
});
|
||||||
|
|
||||||
|
uniqueKey.current += 1;
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const stop = useCallback((_event: any, cb: (state: boolean) => void) => {
|
||||||
|
clicked.current = false;
|
||||||
|
cb(clicked.current);
|
||||||
|
|
||||||
|
setRipples((prevRipples: Array<JSX.Element>) => {
|
||||||
|
if (prevRipples.length > 0) {
|
||||||
|
const old = [...prevRipples];
|
||||||
|
old.shift();
|
||||||
|
return old;
|
||||||
|
}
|
||||||
|
return prevRipples;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useImperativeHandle(
|
||||||
|
ref,
|
||||||
|
() => ({
|
||||||
|
start,
|
||||||
|
stop,
|
||||||
|
}),
|
||||||
|
[start, stop],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={classes} id={uniqueId} ref={rippleDomain}>
|
||||||
|
<rippleAreaContext.Provider value={clicked.current}>
|
||||||
|
<Ripples>{ripples}</Ripples>
|
||||||
|
</rippleAreaContext.Provider>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { rippleAreaContext, RippleArea };
|
||||||
86
src/primitive-components/ripple/ripple.tsx
Normal file
86
src/primitive-components/ripple/ripple.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import isEmpty from './utils/utils';
|
||||||
|
import { rippleProps } from './ripple.types';
|
||||||
|
import { rippleAreaContext } from './ripple-area';
|
||||||
|
import RippleEffectBuild from './utils/ripple-effect-builder';
|
||||||
|
import React, {
|
||||||
|
ForwardedRef,
|
||||||
|
forwardRef,
|
||||||
|
JSX,
|
||||||
|
useCallback,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
useTransition,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
const Ripples = forwardRef(function Ripples(
|
||||||
|
props: any,
|
||||||
|
ref: ForwardedRef<any>,
|
||||||
|
) {
|
||||||
|
const [ripples, setRipples] = useState({});
|
||||||
|
const firstRender = useRef<boolean>(true);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
const LifetimeEnd = useCallback((child: JSX.Element) => {
|
||||||
|
if (child.props.endLifetime) {
|
||||||
|
child.props.endLifetime();
|
||||||
|
}
|
||||||
|
|
||||||
|
setRipples(state => {
|
||||||
|
const children = { ...state };
|
||||||
|
delete children[child.key];
|
||||||
|
return children;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.children.length > 0) {
|
||||||
|
startTransition(() => {
|
||||||
|
if (firstRender.current || isEmpty(ripples)) {
|
||||||
|
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
|
||||||
|
firstRender.current = false;
|
||||||
|
} else {
|
||||||
|
setRipples(
|
||||||
|
RippleEffectBuild(props.children, LifetimeEnd, ripples),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [props.children]);
|
||||||
|
|
||||||
|
return <>{Object.values(ripples)}</>;
|
||||||
|
});
|
||||||
|
|
||||||
|
const Ripple = forwardRef(function Ripple(
|
||||||
|
props: rippleProps,
|
||||||
|
ref: ForwardedRef<any>,
|
||||||
|
) {
|
||||||
|
const { rippleX, rippleY, rippleS, endLifetime, lifetime } = props;
|
||||||
|
|
||||||
|
const clicked = useContext<boolean>(rippleAreaContext);
|
||||||
|
const [classes, setClasses] = useState<string>('m3 ripple visible');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (endLifetime !== null && !clicked) {
|
||||||
|
setClasses('m3 ripple');
|
||||||
|
setTimeout(endLifetime, lifetime);
|
||||||
|
}
|
||||||
|
}, [clicked, endLifetime]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={classes}
|
||||||
|
style={{
|
||||||
|
left: -(rippleS / 2) + rippleX,
|
||||||
|
top: -(rippleS / 2) + rippleY,
|
||||||
|
width: rippleS,
|
||||||
|
aspectRatio: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Ripple, Ripples };
|
||||||
21
src/primitive-components/ripple/ripple.types.ts
Normal file
21
src/primitive-components/ripple/ripple.types.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { Dispatch, SetStateAction } from 'react';
|
||||||
|
|
||||||
|
export interface IRippleProps extends PropsWithChildren<any> {
|
||||||
|
centralRipple?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RippleAreaProps extends PropsWithChildren<any> {
|
||||||
|
callback: Dispatch<SetStateAction<boolean>>;
|
||||||
|
central?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type rippleProps = {
|
||||||
|
rippleX: number;
|
||||||
|
rippleY: number;
|
||||||
|
rippleS: number;
|
||||||
|
endLifetime?: () => void;
|
||||||
|
lifetime: number;
|
||||||
|
key?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
import { PropsWithChildren } from 'react';
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { cloneElement, ReactElement } from 'react';
|
||||||
|
|
||||||
|
export default function ArrayConvertToObj(
|
||||||
|
obj: Object,
|
||||||
|
nextChildren: ReactElement[],
|
||||||
|
callback: (child: any) => void,
|
||||||
|
): void {
|
||||||
|
Object.values(nextChildren).forEach(
|
||||||
|
(child: JSX.Element) =>
|
||||||
|
(obj[child.key] = cloneElement(child, {
|
||||||
|
...child.props,
|
||||||
|
endLifetime: callback.bind(null, child),
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import ArrayConvertToObj from './array-convert-to-obj';
|
||||||
|
import { cloneElement, ReactElement } from 'react';
|
||||||
|
import isEmpty from './utils';
|
||||||
|
|
||||||
|
export default function RippleEffectBuild(
|
||||||
|
nextRipples: ReactElement[],
|
||||||
|
callback: (child: any) => void,
|
||||||
|
prevRipples?: any | null,
|
||||||
|
) {
|
||||||
|
const empty: boolean = isEmpty(prevRipples);
|
||||||
|
const preparedRipples: object = empty ? {} : prevRipples;
|
||||||
|
|
||||||
|
switch (empty) {
|
||||||
|
case true:
|
||||||
|
ArrayConvertToObj(preparedRipples, nextRipples, callback);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case false:
|
||||||
|
// eslint-disable-next-line no-case-declarations
|
||||||
|
const next: object = {};
|
||||||
|
ArrayConvertToObj(next, nextRipples, callback);
|
||||||
|
for (const rippleKey of Object.keys(next)) {
|
||||||
|
if (preparedRipples[rippleKey] == undefined) {
|
||||||
|
preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
|
||||||
|
...next[rippleKey].props,
|
||||||
|
endLifetime: callback.bind(null, next[rippleKey]),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return preparedRipples;
|
||||||
|
}
|
||||||
6
src/primitive-components/ripple/utils/utils.ts
Normal file
6
src/primitive-components/ripple/utils/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default function isEmpty(obj: Object): boolean {
|
||||||
|
for (const _i in obj) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
36
src/primitive-components/switch/switch.tsx
Normal file
36
src/primitive-components/switch/switch.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { forwardRef } from 'react';
|
||||||
|
import { SwitchMainProps } from './switch.types';
|
||||||
|
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch component
|
||||||
|
** description
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
|
||||||
|
({ icon, disabled, selected = false, ...props }, ref) => (
|
||||||
|
<div className={'m3 m3-switch-exp'} ref={ref}>
|
||||||
|
<CheckBoxLayout
|
||||||
|
{...props}
|
||||||
|
className={`m3 ${props.className ?? ''}`.trimEnd()}
|
||||||
|
disabled={disabled}
|
||||||
|
type={'checkbox'}
|
||||||
|
/>
|
||||||
|
<svg>
|
||||||
|
<rect className={'m3 m3-switch-track'} />
|
||||||
|
<circle className={'m3 m3-switch-handler'} />
|
||||||
|
<circle className={'m3 m3-switch-handler-state-layer'} />
|
||||||
|
<g>
|
||||||
|
{icon && !selected && (
|
||||||
|
<text className={'m3 m3-icon-unchecked'}>close</text>
|
||||||
|
)}
|
||||||
|
{icon && (
|
||||||
|
<text className={'m3 m3-icon-checked'}>check</text>
|
||||||
|
)}
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
);
|
||||||
7
src/primitive-components/switch/switch.types.ts
Normal file
7
src/primitive-components/switch/switch.types.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export interface SwitchMainProps extends PropsWithChildren<any> {
|
||||||
|
disabled?: boolean;
|
||||||
|
icon?: boolean;
|
||||||
|
selected?: boolean;
|
||||||
|
}
|
||||||
103
src/primitive-components/text-field/text-field.tsx
Normal file
103
src/primitive-components/text-field/text-field.tsx
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { forwardRef, useState } from 'react';
|
||||||
|
import { bool, string } from 'prop-types';
|
||||||
|
import { type TextFieldInterface } from './text-field.types';
|
||||||
|
|
||||||
|
export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
variant = 'filled',
|
||||||
|
withAfterIcon,
|
||||||
|
withBeforeIcon,
|
||||||
|
supportingText,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const [raised, setRaised] = useState<boolean>(
|
||||||
|
props.placeholder ?? false,
|
||||||
|
);
|
||||||
|
|
||||||
|
const callback = (e: any): void => {
|
||||||
|
if (
|
||||||
|
e.type === 'blur' &&
|
||||||
|
e.target.value.length === 0 &&
|
||||||
|
!props.placeholder
|
||||||
|
) {
|
||||||
|
setRaised(false);
|
||||||
|
} else if (e.type === 'focus') {
|
||||||
|
setRaised(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const iconStyles =
|
||||||
|
withBeforeIcon && withAfterIcon
|
||||||
|
? 'with-before-icon with-after-icon'
|
||||||
|
: withBeforeIcon
|
||||||
|
? 'with-before-icon'
|
||||||
|
: withAfterIcon
|
||||||
|
? 'with-after-icon'
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<div className={`m3 m3-text-field ${variant}`.trimEnd()}>
|
||||||
|
{variant === 'outlined' && (
|
||||||
|
<fieldset>
|
||||||
|
<legend className={raised && 'raised'}>
|
||||||
|
<span>Label</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
)}
|
||||||
|
{withBeforeIcon && (
|
||||||
|
<span className={'m3-icon icon-before'}>
|
||||||
|
{withBeforeIcon && 'search'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={`${props.className ?? ''} ${iconStyles}`.trim()}
|
||||||
|
onBlur={event => {
|
||||||
|
callback(event);
|
||||||
|
if (props.onBlur) {
|
||||||
|
props.onBlur(event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onFocus={event => {
|
||||||
|
callback(event);
|
||||||
|
if (props.onFocus) {
|
||||||
|
props.onFocus(event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className={raised ? 'raised' : ''}>
|
||||||
|
{props.children ?? 'Label'}
|
||||||
|
</label>
|
||||||
|
<span className={'m3-text-field-state-layer'} />
|
||||||
|
{withAfterIcon && (
|
||||||
|
<span className={'m3-icon'}>
|
||||||
|
{withAfterIcon && 'cancel'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{supportingText !== '' && (
|
||||||
|
<span className={'m3-text-field-supporting-text'}>
|
||||||
|
{supportingText}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
TextField.propTypes = {
|
||||||
|
children: string,
|
||||||
|
withBeforeIcon: bool,
|
||||||
|
withAfterIcon: bool,
|
||||||
|
className: string,
|
||||||
|
variant: string,
|
||||||
|
placeholder: string,
|
||||||
|
supportingText: string,
|
||||||
|
};
|
||||||
8
src/primitive-components/text-field/text-field.types.ts
Normal file
8
src/primitive-components/text-field/text-field.types.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
export interface TextFieldInterface extends PropsWithChildren<any> {
|
||||||
|
variant: 'filled' | 'outlined';
|
||||||
|
withAfterIcon?: boolean;
|
||||||
|
withBeforeIcon?: boolean;
|
||||||
|
supportingText?: string;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
31
src/styles/badge.css
Normal file
31
src/styles/badge.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
svg.m3.m3-badge {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--md-sys-color-error);
|
||||||
|
}
|
||||||
|
svg.m3.m3-badge.disable-value {
|
||||||
|
padding: 0;
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
svg.m3.m3-badge.disable-value > text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
svg.m3.m3-badge {
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
svg.m3.m3-badge > text {
|
||||||
|
fill: var(--md-sys-color-on-error);
|
||||||
|
font-size: var(--md-sys-typescale-label-small-font-size);
|
||||||
|
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||||
|
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||||
|
font-optical-sizing: none;
|
||||||
|
alignment-baseline: central;
|
||||||
|
text-anchor: middle;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=badge.css.map */
|
||||||
1
src/styles/badge.css.map
Normal file
1
src/styles/badge.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["badge.sass"],"names":[],"mappings":"AAAA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"badge.css"}
|
||||||
25
src/styles/badge.sass
Normal file
25
src/styles/badge.sass
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
svg.m3.m3-badge
|
||||||
|
position: absolute
|
||||||
|
background-color: var(--md-sys-color-error)
|
||||||
|
&.disable-value
|
||||||
|
padding: 0
|
||||||
|
height: 6px
|
||||||
|
width: 6px
|
||||||
|
border-radius: 3px
|
||||||
|
& > text
|
||||||
|
display: none
|
||||||
|
&
|
||||||
|
border-radius: 8px
|
||||||
|
height: 16px
|
||||||
|
|
||||||
|
& > text
|
||||||
|
fill: var(--md-sys-color-on-error)
|
||||||
|
font-size: var(--md-sys-typescale-label-small-font-size)
|
||||||
|
font-weight: var(--md-sys-typescale-label-small-font-weight)
|
||||||
|
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||||
|
font-optical-sizing: none
|
||||||
|
alignment-baseline: central
|
||||||
|
text-anchor: middle
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
206
src/styles/button.css
Normal file
206
src/styles/button.css
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
button:not(.m3-fab, .m3-icon-button) {
|
||||||
|
transition:
|
||||||
|
background-color,
|
||||||
|
box-shadow,
|
||||||
|
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||||
|
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||||
|
font-size: var(--md-sys-typescale-label-large-font-size);
|
||||||
|
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
||||||
|
line-height: var(--md-sys-typescale-label-large-line-height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||||
|
contain: content;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 100px;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 24px;
|
||||||
|
border: none;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).filled {
|
||||||
|
background-color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).filled,
|
||||||
|
button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||||
|
color: var(--md-sys-color-on-primary);
|
||||||
|
fill: var(--md-sys-color-on-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||||
|
outline-offset: -1px;
|
||||||
|
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).text {
|
||||||
|
padding: 10px 12px !important;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).elevated {
|
||||||
|
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);
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||||
|
background-color: var(--md-sys-color-secondary-container);
|
||||||
|
color: var(--md-sys-color-on-secondary-container);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-on-secondary-container);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button)::before {
|
||||||
|
transition:
|
||||||
|
background-color,
|
||||||
|
box-shadow,
|
||||||
|
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).filled
|
||||||
|
> .m3.m3-ripple-domain
|
||||||
|
> .m3.ripple {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
|
||||||
|
> .m3.m3-ripple-domain
|
||||||
|
> .m3.ripple {
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||||
|
border-color: var(--md-sys-color-primary) !important;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):focus-visible:is(
|
||||||
|
.outlined,
|
||||||
|
.text,
|
||||||
|
.elevated
|
||||||
|
)::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 6px 2px rgba(0, 0, 0, 0.15),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):hover:is(
|
||||||
|
.outlined,
|
||||||
|
.text,
|
||||||
|
.elevated
|
||||||
|
)::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):disabled:is(
|
||||||
|
.filled,
|
||||||
|
.elevated,
|
||||||
|
.tonal,
|
||||||
|
.outlined,
|
||||||
|
.text
|
||||||
|
) {
|
||||||
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-surface) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||||
|
outline: 1px solid
|
||||||
|
color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=button.css.map */
|
||||||
1
src/styles/button.css.map
Normal file
1
src/styles/button.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||||
127
src/styles/button.sass
Normal file
127
src/styles/button.sass
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
@import "mixins/m3-mixins"
|
||||||
|
|
||||||
|
button:not(.m3-fab, .m3-icon-button)
|
||||||
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||||
|
font-size: var(--md-sys-typescale-label-large-font-size)
|
||||||
|
font-weight: var(--md-sys-typescale-label-large-font-weight)
|
||||||
|
line-height: var(--md-sys-typescale-label-large-line-height)
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
&.m3
|
||||||
|
contain: content
|
||||||
|
box-sizing: border-box
|
||||||
|
border-radius: 100px
|
||||||
|
display: inline-flex
|
||||||
|
flex-direction: row
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
text-align: center
|
||||||
|
padding: 10px 24px
|
||||||
|
border: none
|
||||||
|
gap: 8px
|
||||||
|
|
||||||
|
&.filled
|
||||||
|
background-color: var(--md-sys-color-primary)
|
||||||
|
&, & > svg.m3-svg-icon
|
||||||
|
color: var(--md-sys-color-on-primary)
|
||||||
|
fill: var(--md-sys-color-on-primary)
|
||||||
|
|
||||||
|
&.outlined
|
||||||
|
outline-offset: -1px
|
||||||
|
outline: 1px solid var(--md-sys-color-outline) !important
|
||||||
|
background-color: #00000000
|
||||||
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
& > svg.m3-svg-icon
|
||||||
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
&.text
|
||||||
|
padding: 10px 12px !important
|
||||||
|
background-color: #00000000
|
||||||
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
& > svg.m3-svg-icon
|
||||||
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
&.elevated
|
||||||
|
@include elevation-1(false)
|
||||||
|
background-color: var(--md-sys-color-surface-container-low)
|
||||||
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
& > svg.m3-svg-icon
|
||||||
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
&.tonal
|
||||||
|
background-color: var(--md-sys-color-secondary-container)
|
||||||
|
color: var(--md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
|
& > svg.m3-svg-icon
|
||||||
|
fill: var(--md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
|
&::before
|
||||||
|
@include state-layer
|
||||||
|
|
||||||
|
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&:is(.outlined, .text, .elevated)
|
||||||
|
& > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:is(.filled, .tonal)
|
||||||
|
@include elevation-0(true)
|
||||||
|
|
||||||
|
&.elevated
|
||||||
|
@include elevation-1(true)
|
||||||
|
|
||||||
|
&.tonal::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
|
&:focus-visible
|
||||||
|
&.outlined
|
||||||
|
border-color: var(--md-sys-color-primary) !important
|
||||||
|
|
||||||
|
&.filled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&:is(.outlined, .text, .elevated)::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&.tonal::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
&:is(.filled, .tonal)
|
||||||
|
@include elevation-1(false)
|
||||||
|
|
||||||
|
&.elevated
|
||||||
|
@include elevation-2(false)
|
||||||
|
|
||||||
|
&.filled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||||
|
|
||||||
|
&:is(.outlined, .text, .elevated)::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
|
&.tonal::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
|
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
||||||
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||||
|
|
||||||
|
&:is(.filled, .elevated, .tonal)
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
||||||
|
&.elevated
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
&.outlined
|
||||||
|
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|
||||||
190
src/styles/checkbox.css
Normal file
190
src/styles/checkbox.css
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
label.m3.m3-checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||||
|
position: absolute;
|
||||||
|
width: 2.5rem;
|
||||||
|
aspect-ratio: inherit;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.m3.m3-checkbox-ripple-layer {
|
||||||
|
z-index: 20;
|
||||||
|
contain: content;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"].m3.m3-checkbox {
|
||||||
|
appearance: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: content-box;
|
||||||
|
z-index: 10;
|
||||||
|
width: 1.125rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
margin: 0;
|
||||||
|
outline-offset: -0.14rem;
|
||||||
|
border-radius: 0.14rem;
|
||||||
|
outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
|
||||||
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:is(
|
||||||
|
:user-invalid:is(:checked, :indeterminate),
|
||||||
|
.m3.m3-error:is(:checked, :indeterminate)
|
||||||
|
) {
|
||||||
|
outline-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) {
|
||||||
|
outline-color: var(--md-sys-color-error);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:is(
|
||||||
|
:checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||||
|
.m3.m3-error,
|
||||||
|
:disabled
|
||||||
|
),
|
||||||
|
:indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||||
|
.m3.m3-error,
|
||||||
|
:disabled
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
outline-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
|
||||||
|
) {
|
||||||
|
opacity: 38%;
|
||||||
|
border: 2px solid var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
|
||||||
|
:hover,
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:disabled
|
||||||
|
) {
|
||||||
|
opacity: 38%;
|
||||||
|
background-color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox::after {
|
||||||
|
line-height: 1.125rem;
|
||||||
|
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--md-sys-color-on-primary);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:checked::after {
|
||||||
|
content: "done";
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
|
||||||
|
content: "check_indeterminate_small";
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:hover {
|
||||||
|
outline-color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:user-invalid:is(:hover, :indeterminate:hover),
|
||||||
|
.m3.m3-error:hover
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-error) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:user-invalid:is(:active, :indeterminate:active),
|
||||||
|
.m3.m3-error:active
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-error) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:user-invalid:is(:active, :indeterminate:active),
|
||||||
|
.m3.m3-error:active
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer
|
||||||
|
+ span.m3-ripple-domain
|
||||||
|
> .m3.ripple {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-error) 20%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:checked:hover,
|
||||||
|
:indeterminate:hover
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:checked:active,
|
||||||
|
:indeterminate:active
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||||
|
:checked:active,
|
||||||
|
:indeterminate:active
|
||||||
|
)
|
||||||
|
+ span.m3.m3-checkbox-state-layer
|
||||||
|
+ span.m3-ripple-domain
|
||||||
|
> .m3.ripple {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-surface) 20%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
|
||||||
|
+ span.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-surface) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||||
|
+ span.m3.m3-checkbox-state-layer {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-surface) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||||
|
+ span.m3.m3-checkbox-state-layer
|
||||||
|
+ span.m3-ripple-domain
|
||||||
|
> .m3.ripple {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 20%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=checkbox.css.map */
|
||||||
1
src/styles/checkbox.css.map
Normal file
1
src/styles/checkbox.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;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"}
|
||||||
93
src/styles/checkbox.sass
Normal file
93
src/styles/checkbox.sass
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
@import "mixins/m3-mixins"
|
||||||
|
|
||||||
|
label.m3.m3-checkbox-label
|
||||||
|
@include m3-label-mixin
|
||||||
|
& > span.m3.m3-checkbox-state-layer
|
||||||
|
@include m3-state-layer-mixin
|
||||||
|
|
||||||
|
span.m3.m3-checkbox-ripple-layer
|
||||||
|
z-index: 20
|
||||||
|
contain: content
|
||||||
|
border-radius: 50%
|
||||||
|
position: absolute
|
||||||
|
width: 2.5rem
|
||||||
|
height: 2.5rem
|
||||||
|
|
||||||
|
input[type="checkbox"].m3.m3-checkbox
|
||||||
|
appearance: none
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
box-sizing: content-box
|
||||||
|
z-index: 10
|
||||||
|
width: 1.125rem
|
||||||
|
height: 1.125rem
|
||||||
|
margin: 0
|
||||||
|
outline-offset: -.14rem
|
||||||
|
border-radius: .14rem
|
||||||
|
outline: .14rem solid var(--md-sys-color-on-surface-variant)
|
||||||
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
|
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
||||||
|
outline-color: var(--md-sys-color-error)
|
||||||
|
background-color: var(--md-sys-color-error)
|
||||||
|
|
||||||
|
&:is(.m3.m3-error, :user-invalid)
|
||||||
|
outline-color: var(--md-sys-color-error)
|
||||||
|
|
||||||
|
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
|
||||||
|
outline-color: var(--md-sys-color-primary)
|
||||||
|
background-color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
&:is(:hover, &)
|
||||||
|
opacity: 38%
|
||||||
|
border: 2px solid var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
|
&:checked:is(:hover, &)
|
||||||
|
opacity: 38%
|
||||||
|
background-color: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
|
&::after
|
||||||
|
line-height: 1.125rem
|
||||||
|
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||||
|
font-weight: 700
|
||||||
|
font-size: 1.125rem
|
||||||
|
color: var(--md-sys-color-on-primary)
|
||||||
|
|
||||||
|
&:checked::after
|
||||||
|
content: "done"
|
||||||
|
|
||||||
|
&:indeterminate::after
|
||||||
|
content: "check_indeterminate_small"
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
outline-color: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
|
&:not(:disabled)
|
||||||
|
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
|
||||||
|
& + span.m3.m3-checkbox-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
|
||||||
|
|
||||||
|
&: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)
|
||||||
|
& + span.m3-ripple-domain > .m3.ripple
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
|
||||||
|
|
||||||
|
&:is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
|
&:is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
& + span.m3-ripple-domain > .m3.ripple
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
& + span.m3-checkbox-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||||
|
|
||||||
|
&:active + span.m3.m3-checkbox-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
& + span.m3-ripple-domain > .m3.ripple
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||||
|
|
||||||
51
src/styles/css/dark-hc.css
Normal file
51
src/styles/css/dark-hc.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.dark-high-contrast {
|
||||||
|
--md-sys-color-primary: rgb(255 249 251);
|
||||||
|
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary: rgb(0 0 0);
|
||||||
|
--md-sys-color-primary-container: rgb(231 187 248);
|
||||||
|
--md-sys-color-on-primary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-secondary: rgb(255 249 251);
|
||||||
|
--md-sys-color-on-secondary: rgb(0 0 0);
|
||||||
|
--md-sys-color-secondary-container: rgb(216 196 220);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-tertiary: rgb(255 249 249);
|
||||||
|
--md-sys-color-on-tertiary: rgb(0 0 0);
|
||||||
|
--md-sys-color-tertiary-container: rgb(249 187 186);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-error: rgb(255 249 249);
|
||||||
|
--md-sys-color-on-error: rgb(0 0 0);
|
||||||
|
--md-sys-color-error-container: rgb(255 186 177);
|
||||||
|
--md-sys-color-on-error-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-background: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-background: rgb(233 224 231);
|
||||||
|
--md-sys-color-surface: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-surface: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(255 249 251);
|
||||||
|
--md-sys-color-outline: rgb(210 199 210);
|
||||||
|
--md-sys-color-outline-variant: rgb(210 199 210);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-primary: rgb(60 27 77);
|
||||||
|
--md-sys-color-primary-fixed: rgb(248 222 255);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(0 0 0);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(231 187 248);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(39 5 56);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(245 224 248);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(0 0 0);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(216 196 220);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(29 18 34);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(255 224 222);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(0 0 0);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(249 187 186);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(44 11 13);
|
||||||
|
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||||
|
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||||
|
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface-container: rgb(35 30 35);
|
||||||
|
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||||
|
}
|
||||||
51
src/styles/css/dark-mc.css
Normal file
51
src/styles/css/dark-mc.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.dark-medium-contrast {
|
||||||
|
--md-sys-color-primary: rgb(231 187 248);
|
||||||
|
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary: rgb(39 5 56);
|
||||||
|
--md-sys-color-primary-container: rgb(170 130 187);
|
||||||
|
--md-sys-color-on-primary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-secondary: rgb(216 196 220);
|
||||||
|
--md-sys-color-on-secondary: rgb(29 18 34);
|
||||||
|
--md-sys-color-secondary-container: rgb(156 139 161);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-tertiary: rgb(249 187 186);
|
||||||
|
--md-sys-color-on-tertiary: rgb(44 11 13);
|
||||||
|
--md-sys-color-tertiary-container: rgb(186 131 130);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-error: rgb(255 186 177);
|
||||||
|
--md-sys-color-on-error: rgb(55 0 1);
|
||||||
|
--md-sys-color-error-container: rgb(255 84 73);
|
||||||
|
--md-sys-color-on-error-container: rgb(0 0 0);
|
||||||
|
--md-sys-color-background: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-background: rgb(233 224 231);
|
||||||
|
--md-sys-color-surface: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-surface: rgb(255 249 251);
|
||||||
|
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(210 199 210);
|
||||||
|
--md-sys-color-outline: rgb(170 160 170);
|
||||||
|
--md-sys-color-outline-variant: rgb(137 128 138);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(45 40 46);
|
||||||
|
--md-sys-color-inverse-primary: rgb(93 58 109);
|
||||||
|
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(33 0 50);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(74 40 90);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(24 13 29);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(63 49 68);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(37 7 8);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(83 43 43);
|
||||||
|
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||||
|
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||||
|
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface-container: rgb(35 30 35);
|
||||||
|
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||||
|
}
|
||||||
51
src/styles/css/dark.css
Normal file
51
src/styles/css/dark.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.dark {
|
||||||
|
--md-sys-color-primary: rgb(227 183 244);
|
||||||
|
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary: rgb(67 34 84);
|
||||||
|
--md-sys-color-primary-container: rgb(92 57 108);
|
||||||
|
--md-sys-color-on-primary-container: rgb(246 217 255);
|
||||||
|
--md-sys-color-secondary: rgb(212 192 216);
|
||||||
|
--md-sys-color-on-secondary: rgb(57 44 62);
|
||||||
|
--md-sys-color-secondary-container: rgb(80 66 85);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(240 220 244);
|
||||||
|
--md-sys-color-tertiary: rgb(245 183 182);
|
||||||
|
--md-sys-color-on-tertiary: rgb(76 37 37);
|
||||||
|
--md-sys-color-tertiary-container: rgb(102 59 59);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(255 218 217);
|
||||||
|
--md-sys-color-error: rgb(255 180 171);
|
||||||
|
--md-sys-color-on-error: rgb(105 0 5);
|
||||||
|
--md-sys-color-error-container: rgb(147 0 10);
|
||||||
|
--md-sys-color-on-error-container: rgb(255 218 214);
|
||||||
|
--md-sys-color-background: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-background: rgb(233 224 231);
|
||||||
|
--md-sys-color-surface: rgb(22 18 23);
|
||||||
|
--md-sys-color-on-surface: rgb(233 224 231);
|
||||||
|
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(206 195 206);
|
||||||
|
--md-sys-color-outline: rgb(151 142 151);
|
||||||
|
--md-sys-color-outline-variant: rgb(76 68 77);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(52 47 52);
|
||||||
|
--md-sys-color-inverse-primary: rgb(117 80 134);
|
||||||
|
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(45 11 62);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
|
||||||
|
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||||
|
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||||
|
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface-container: rgb(35 30 35);
|
||||||
|
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||||
|
}
|
||||||
51
src/styles/css/light-hc.css
Normal file
51
src/styles/css/light-hc.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.light-high-contrast {
|
||||||
|
--md-sys-color-primary: rgb(52 19 69);
|
||||||
|
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||||
|
--md-sys-color-on-primary: rgb(255 255 255);
|
||||||
|
--md-sys-color-primary-container: rgb(87 53 104);
|
||||||
|
--md-sys-color-on-primary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary: rgb(42 30 47);
|
||||||
|
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-container: rgb(76 62 81);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary: rgb(59 23 24);
|
||||||
|
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-container: rgb(98 55 55);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-error: rgb(78 0 2);
|
||||||
|
--md-sys-color-on-error: rgb(255 255 255);
|
||||||
|
--md-sys-color-error-container: rgb(140 0 9);
|
||||||
|
--md-sys-color-on-error-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-background: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-background: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-surface: rgb(0 0 0);
|
||||||
|
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(40 34 42);
|
||||||
|
--md-sys-color-outline: rgb(72 65 73);
|
||||||
|
--md-sys-color-outline-variant: rgb(72 65 73);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(255 255 255);
|
||||||
|
--md-sys-color-inverse-primary: rgb(251 229 255);
|
||||||
|
--md-sys-color-primary-fixed: rgb(87 53 104);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(63 30 80);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(76 62 81);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(53 40 58);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(98 55 55);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(72 33 34);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||||
|
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||||
|
--md-sys-color-surface-container: rgb(245 235 243);
|
||||||
|
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||||
|
}
|
||||||
51
src/styles/css/light-mc.css
Normal file
51
src/styles/css/light-mc.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.light-medium-contrast {
|
||||||
|
--md-sys-color-primary: rgb(87 53 104);
|
||||||
|
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||||
|
--md-sys-color-on-primary: rgb(255 255 255);
|
||||||
|
--md-sys-color-primary-container: rgb(140 102 157);
|
||||||
|
--md-sys-color-on-primary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary: rgb(76 62 81);
|
||||||
|
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-container: rgb(127 111 132);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary: rgb(98 55 55);
|
||||||
|
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-container: rgb(154 103 103);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-error: rgb(140 0 9);
|
||||||
|
--md-sys-color-on-error: rgb(255 255 255);
|
||||||
|
--md-sys-color-error-container: rgb(218 52 46);
|
||||||
|
--md-sys-color-on-error-container: rgb(255 255 255);
|
||||||
|
--md-sys-color-background: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-background: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-surface: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(72 65 73);
|
||||||
|
--md-sys-color-outline: rgb(100 93 101);
|
||||||
|
--md-sys-color-outline-variant: rgb(129 120 129);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(248 238 246);
|
||||||
|
--md-sys-color-inverse-primary: rgb(227 183 244);
|
||||||
|
--md-sys-color-primary-fixed: rgb(140 102 157);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(114 78 131);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(127 111 132);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(102 87 107);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(154 103 103);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(127 79 79);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||||
|
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||||
|
--md-sys-color-surface-container: rgb(245 235 243);
|
||||||
|
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||||
|
}
|
||||||
51
src/styles/css/light.css
Normal file
51
src/styles/css/light.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.light {
|
||||||
|
--md-sys-color-primary: rgb(117 80 134);
|
||||||
|
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||||
|
--md-sys-color-on-primary: rgb(255 255 255);
|
||||||
|
--md-sys-color-primary-container: rgb(246 217 255);
|
||||||
|
--md-sys-color-on-primary-container: rgb(45 11 62);
|
||||||
|
--md-sys-color-secondary: rgb(104 89 109);
|
||||||
|
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||||
|
--md-sys-color-secondary-container: rgb(240 220 244);
|
||||||
|
--md-sys-color-on-secondary-container: rgb(35 23 40);
|
||||||
|
--md-sys-color-tertiary: rgb(129 82 81);
|
||||||
|
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||||
|
--md-sys-color-tertiary-container: rgb(255 218 217);
|
||||||
|
--md-sys-color-on-tertiary-container: rgb(51 17 18);
|
||||||
|
--md-sys-color-error: rgb(186 26 26);
|
||||||
|
--md-sys-color-on-error: rgb(255 255 255);
|
||||||
|
--md-sys-color-error-container: rgb(255 218 214);
|
||||||
|
--md-sys-color-on-error-container: rgb(65 0 2);
|
||||||
|
--md-sys-color-background: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-background: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface: rgb(255 247 252);
|
||||||
|
--md-sys-color-on-surface: rgb(30 26 31);
|
||||||
|
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||||
|
--md-sys-color-on-surface-variant: rgb(76 68 77);
|
||||||
|
--md-sys-color-outline: rgb(125 116 126);
|
||||||
|
--md-sys-color-outline-variant: rgb(206 195 206);
|
||||||
|
--md-sys-color-shadow: rgb(0 0 0);
|
||||||
|
--md-sys-color-scrim: rgb(0 0 0);
|
||||||
|
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||||
|
--md-sys-color-inverse-on-surface: rgb(248 238 246);
|
||||||
|
--md-sys-color-inverse-primary: rgb(227 183 244);
|
||||||
|
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||||
|
--md-sys-color-on-primary-fixed: rgb(45 11 62);
|
||||||
|
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||||
|
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
|
||||||
|
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||||
|
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
|
||||||
|
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||||
|
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
|
||||||
|
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||||
|
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
|
||||||
|
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||||
|
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
|
||||||
|
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||||
|
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||||
|
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||||
|
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||||
|
--md-sys-color-surface-container: rgb(245 235 243);
|
||||||
|
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||||
|
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||||
|
}
|
||||||
35
src/styles/divider.css
Normal file
35
src/styles/divider.css
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
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: 4px;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical {
|
||||||
|
writing-mode: tb-rl;
|
||||||
|
}
|
||||||
|
hr.m3.m3-divider.vertical,
|
||||||
|
hr.m3.m3-divider.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,
|
||||||
|
hr.m3.m3-divider.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=divider.css.map */
|
||||||
1
src/styles/divider.css.map
Normal file
1
src/styles/divider.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["divider.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI","file":"divider.css"}
|
||||||
26
src/styles/divider.sass
Normal file
26
src/styles/divider.sass
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
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: 4px
|
||||||
|
|
||||||
|
&.vertical
|
||||||
|
writing-mode: tb-rl
|
||||||
|
&, &.full-width
|
||||||
|
height: 100%
|
||||||
|
&.inset
|
||||||
|
align-self: end
|
||||||
|
height: calc(100% - 16px)
|
||||||
|
&.middle-inset
|
||||||
|
height: calc(100% - (2 * 16px))
|
||||||
|
|
||||||
|
&.horizontal
|
||||||
|
&, &.full-width
|
||||||
|
width: 100%
|
||||||
|
&.inset
|
||||||
|
align-self: end
|
||||||
|
width: calc(100% - 16px)
|
||||||
|
&.middle-inset
|
||||||
|
width: calc(100% - (2 * 16px))
|
||||||
31
src/styles/elevation.css
Normal file
31
src/styles/elevation.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.elevation-1 {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.elevation-2 {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 6px 2px rgba(0, 0, 0, 0.15),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.elevation-3 {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.elevation-4 {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.elevation-5 {
|
||||||
|
box-shadow:
|
||||||
|
0 4px 4px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=elevation.css.map */
|
||||||
1
src/styles/elevation.css.map
Normal file
1
src/styles/elevation.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["elevation.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"elevation.css"}
|
||||||
14
src/styles/elevation.sass
Normal file
14
src/styles/elevation.sass
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
.elevation-1
|
||||||
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
||||||
|
|
||||||
|
.elevation-2
|
||||||
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
||||||
|
|
||||||
|
.elevation-3
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
|
||||||
|
|
||||||
|
.elevation-4
|
||||||
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
|
||||||
|
|
||||||
|
.elevation-5
|
||||||
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
||||||
211
src/styles/fabs.css
Normal file
211
src/styles/fabs.css
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
button.m3.m3-fab {
|
||||||
|
transition:
|
||||||
|
background-color,
|
||||||
|
box-shadow,
|
||||||
|
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab > span.m3-icon {
|
||||||
|
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.m3 {
|
||||||
|
contain: content;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab::before {
|
||||||
|
transition:
|
||||||
|
background-color,
|
||||||
|
box-shadow,
|
||||||
|
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.surface {
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.surface:not(.without-elevation) {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.surface > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.primary {
|
||||||
|
background-color: var(--md-sys-color-primary-container);
|
||||||
|
color: var(--md-sys-color-on-primary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.primary:not(.without-elevation) {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.primary > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-on-primary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.secondary {
|
||||||
|
background-color: var(--md-sys-color-secondary-container);
|
||||||
|
color: var(--md-sys-color-on-secondary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.secondary:not(.without-elevation) {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.secondary > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-on-secondary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.tertiary {
|
||||||
|
background-color: var(--md-sys-color-tertiary-container);
|
||||||
|
color: var(--md-sys-color-on-tertiary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.tertiary:not(.without-elevation) {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
|
||||||
|
fill: var(--md-sys-color-on-tertiary-container);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
|
background: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-tertiary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.m3-small-fab {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 11px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.m3-default-fab {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 19px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.m3-large-fab {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 28px;
|
||||||
|
padding: 34.5px;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab.m3-extended-fab {
|
||||||
|
width: auto;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 19px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:not(.without-elevation):is(
|
||||||
|
.surface,
|
||||||
|
.primary,
|
||||||
|
.secondary,
|
||||||
|
.tertiary
|
||||||
|
):hover {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:not(.without-elevation):is(
|
||||||
|
.surface,
|
||||||
|
.primary,
|
||||||
|
.secondary,
|
||||||
|
.tertiary
|
||||||
|
):active {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||||
|
0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:hover.surface::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:hover.primary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary-container) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:hover.secondary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:hover.tertiary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-tertiary-container) 8%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:focus-visible.surface::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-primary) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:focus-visible.primary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-primary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:focus-visible.secondary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-secondary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||||
|
background-color: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--md-sys-color-on-tertiary-container) 12%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=fabs.css.map */
|
||||||
1
src/styles/fabs.css.map
Normal file
1
src/styles/fabs.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}
|
||||||
81
src/styles/fabs.sass
Normal file
81
src/styles/fabs.sass
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
@import "mixins/m3-mixins"
|
||||||
|
|
||||||
|
button.m3.m3-fab
|
||||||
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
|
||||||
|
& > span.m3-icon
|
||||||
|
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||||
|
|
||||||
|
&.m3
|
||||||
|
contain: content
|
||||||
|
box-sizing: border-box
|
||||||
|
display: inline-flex
|
||||||
|
flex-direction: row
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
text-align: center
|
||||||
|
border: none
|
||||||
|
gap: 12px
|
||||||
|
|
||||||
|
&::before
|
||||||
|
@include state-layer
|
||||||
|
|
||||||
|
&.surface
|
||||||
|
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
|
||||||
|
|
||||||
|
&.secondary
|
||||||
|
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
|
&.tertiary
|
||||||
|
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
|
||||||
|
|
||||||
|
&.m3-small-fab
|
||||||
|
@include m3-fab-default(12px, 40px, 40px, 11px)
|
||||||
|
font-size: 24px
|
||||||
|
|
||||||
|
&.m3-default-fab
|
||||||
|
@include m3-fab-default(16px, 56px, 56px, 19px)
|
||||||
|
font-size: 24px
|
||||||
|
|
||||||
|
&.m3-large-fab
|
||||||
|
@include m3-fab-default(28px, 96px, 96px, 34.5px)
|
||||||
|
font-size: 36px
|
||||||
|
|
||||||
|
&.m3-extended-fab
|
||||||
|
@include m3-fab-default(16px, auto, 56px, 19px)
|
||||||
|
font-size: 24px
|
||||||
|
|
||||||
|
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
|
||||||
|
@include elevation-4(false)
|
||||||
|
|
||||||
|
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
|
||||||
|
@include elevation-3(true)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
&.surface::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
|
&.primary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
||||||
|
|
||||||
|
&.secondary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
|
||||||
|
&.tertiary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
||||||
|
|
||||||
|
&:focus-visible
|
||||||
|
&.surface::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&.primary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
||||||
|
|
||||||
|
&.secondary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
|
&.tertiary::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
|
||||||
2235
src/styles/font/MaterialIcons-Regular.codepoints
Normal file
2235
src/styles/font/MaterialIcons-Regular.codepoints
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles/font/MaterialIcons-Regular.ttf
Normal file
BIN
src/styles/font/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
2195
src/styles/font/MaterialIconsOutlined-Regular.codepoints
Normal file
2195
src/styles/font/MaterialIconsOutlined-Regular.codepoints
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles/font/MaterialIconsOutlined-Regular.otf
Normal file
BIN
src/styles/font/MaterialIconsOutlined-Regular.otf
Normal file
Binary file not shown.
2200
src/styles/font/MaterialIconsRound-Regular.codepoints
Normal file
2200
src/styles/font/MaterialIconsRound-Regular.codepoints
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles/font/MaterialIconsRound-Regular.otf
Normal file
BIN
src/styles/font/MaterialIconsRound-Regular.otf
Normal file
Binary file not shown.
2200
src/styles/font/MaterialIconsSharp-Regular.codepoints
Normal file
2200
src/styles/font/MaterialIconsSharp-Regular.codepoints
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles/font/MaterialIconsSharp-Regular.otf
Normal file
BIN
src/styles/font/MaterialIconsSharp-Regular.otf
Normal file
Binary file not shown.
2238
src/styles/font/MaterialIconsTwoTone-Regular.codepoints
Normal file
2238
src/styles/font/MaterialIconsTwoTone-Regular.codepoints
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles/font/MaterialIconsTwoTone-Regular.otf
Normal file
BIN
src/styles/font/MaterialIconsTwoTone-Regular.otf
Normal file
Binary file not shown.
BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf
Normal file
BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf
Normal file
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user