Compare commits
No commits in common. "26584d54823331652f2d0f368a3c39575b521be2" and "e14630ab42089c559cb5871bc267678b08c17c21" have entirely different histories.
26584d5482
...
e14630ab42
|
|
@ -0,0 +1,8 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
insert_final_newline = true
|
||||
|
|
@ -0,0 +1 @@
|
|||
build/
|
||||
95
.eslintrc.js
95
.eslintrc.js
|
|
@ -1,95 +0,0 @@
|
|||
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',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "./node_modules/gts/"
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="EslintConfiguration">
|
||||
<option name="fix-on-save" value="true" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<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" />
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" filepath="$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
module.exports = {
|
||||
arrowParens: 'avoid',
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
tabWidth: 4,
|
||||
endOfLine: 'auto',
|
||||
};
|
||||
...require('gts/.prettierrc.json')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
# React/Next.js Material You UI kit (pre-alpha)
|
||||
|
||||
This repository is including and will be including components, enumerates in table:
|
||||
|
||||
- [x] Buttons
|
||||
- [x] Default
|
||||
- [x] Icon
|
||||
|
|
@ -31,19 +29,12 @@ This repository is including and will be including components, enumerates in tab
|
|||
- [ ] Bottom app bars
|
||||
~~and including preview page for test.~~
|
||||
Preview page on stage WIP.
|
||||
|
||||
# Status
|
||||
|
||||
Nowadays, this UI kit have base kinds of components and you could make everything. For example - general forms (without select field and etc.)
|
||||
|
||||
# Roadmap
|
||||
|
||||
1. Full implementation components;
|
||||
2. Release NPM package;
|
||||
3. Custom theaming.
|
||||
|
||||
## Did you find the bug? Make sure to [leave an issue](https://github.com/doryan04/DSS/issues/new) in case of any problems.
|
||||
|
||||
## 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)
|
||||
|
||||
### Check out actual news on Telegram. [https://t.me/doryanProjects](https://t.me/doryanProjects)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { Badge } from '../../src/primitive-components/badge/badge';
|
||||
import { Divider } from '../../src/primitive-components/divider/divider';
|
||||
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' }}
|
||||
style={{display: 'flex', flexDirection: 'row'}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Button } from '../../src/primitive-components/material-you-components';
|
||||
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],
|
||||
[state]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<h1> Buttons </h1>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div
|
||||
|
|
@ -26,13 +26,13 @@ export default function Buttons() {
|
|||
}}
|
||||
>
|
||||
<Button
|
||||
centralRipple
|
||||
onClick={callback}
|
||||
variant={'filled'}
|
||||
onClick={callback}
|
||||
centralRipple
|
||||
>
|
||||
Label + {state}
|
||||
</Button>
|
||||
<Button variant={'outlined'}>Label</Button>
|
||||
<Button variant={'elevated'} />
|
||||
<Button variant={'tonal'}>Label</Button>
|
||||
<Button variant={'elevated'}>Label</Button>
|
||||
<Button variant={'text'}>Label</Button>
|
||||
|
|
@ -48,19 +48,19 @@ export default function Buttons() {
|
|||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<Button icon={'add'} variant={'filled'}>
|
||||
<Button variant={'filled'} icon={'add'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'outlined'}>
|
||||
<Button variant={'outlined'} icon={'add'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'tonal'}>
|
||||
<Button variant={'tonal'} icon={'add'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'elevated'}>
|
||||
<Button variant={'elevated'} icon={'add'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'text'}>
|
||||
<Button variant={'text'} icon={'add'}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function Checkboxes() {
|
|||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<Checkbox centralRipple />
|
||||
<Checkbox defaultChecked />
|
||||
<Checkbox indeterminate={true} />
|
||||
|
|
@ -36,9 +36,9 @@ export default function Checkboxes() {
|
|||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<Checkbox disabled />
|
||||
<Checkbox defaultChecked disabled />
|
||||
<Checkbox disabled defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,8 +59,8 @@ export default function Checkboxes() {
|
|||
}}
|
||||
>
|
||||
<Checkbox required />
|
||||
<Checkbox defaultChecked required />
|
||||
<Checkbox indeterminate={true} required />
|
||||
<Checkbox required defaultChecked />
|
||||
<Checkbox required indeterminate={true} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -69,16 +69,16 @@ export default function Checkboxes() {
|
|||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
<Checkbox className={'m3-error'} required />
|
||||
<Checkbox required className={'m3-error'} />
|
||||
<Checkbox
|
||||
className={'m3-error'}
|
||||
defaultChecked
|
||||
required
|
||||
defaultChecked
|
||||
className={'m3-error'}
|
||||
/>
|
||||
<Checkbox
|
||||
className={'m3-error'}
|
||||
indeterminate={true}
|
||||
required
|
||||
indeterminate={true}
|
||||
className={'m3-error'}
|
||||
/>
|
||||
</div>
|
||||
<Button type={'submit'}>Send</Button>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { FAB } from '../../src/primitive-components/material-you-components';
|
||||
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 style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
|
||||
<div>
|
||||
<h1> FABs with elevation</h1>
|
||||
<div
|
||||
|
|
@ -17,105 +17,105 @@ export default function Fabs() {
|
|||
>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
centralRipple
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
variant={'primary'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
variant={'secondary'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
variant={'tertiary'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB elevated icon={'edit'} />
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB icon={'edit'} elevated />
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
variant={'primary'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
variant={'secondary'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
variant={'tertiary'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB elevated icon={'edit'} size={'large'} />
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB size={'large'} icon={'edit'} />
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'primary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'secondary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'tertiary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB elevated icon={'edit'} size={'extended'}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB size={'extended'} icon={'edit'} elevated>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'primary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'secondary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
elevated
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'tertiary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
elevated
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
|
|
@ -135,79 +135,78 @@ export default function Fabs() {
|
|||
>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB icon={'edit'} size={'small'} />
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
variant={'primary'}
|
||||
/>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
variant={'secondary'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
/>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'small'}
|
||||
variant={'tertiary'}
|
||||
size={'small'}
|
||||
icon={'edit'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB icon={'edit'} />
|
||||
<FAB icon={'edit'} variant={'primary'} />
|
||||
<FAB icon={'edit'} variant={'secondary'} />
|
||||
<FAB icon={'edit'} variant={'tertiary'} />
|
||||
<FAB variant={'primary'} icon={'edit'} />
|
||||
<FAB variant={'secondary'} icon={'edit'} />
|
||||
<FAB variant={'tertiary'} icon={'edit'} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB icon={'edit'} size={'large'} />
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB size={'large'} icon={'edit'} />
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'primary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
/>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'secondary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
/>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'large'}
|
||||
variant={'tertiary'}
|
||||
size={'large'}
|
||||
icon={'edit'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<FAB icon={'edit'} size={'extended'}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<FAB size={'extended'} icon={'edit'}>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'primary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'secondary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
<FAB
|
||||
icon={'edit'}
|
||||
size={'extended'}
|
||||
variant={'tertiary'}
|
||||
size={'extended'}
|
||||
icon={'edit'}
|
||||
>
|
||||
<span className={'label-large'}>Label</span>
|
||||
</FAB>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { IconButton } from '../../src/primitive-components/material-you-components';
|
||||
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 style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div
|
||||
|
|
@ -17,7 +17,7 @@ function IconButtons() {
|
|||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton centralRipple icon={'settings'} />
|
||||
<IconButton icon={'settings'} centralRipple />
|
||||
<IconButton icon={'settings'} variant={'filled'} />
|
||||
<IconButton icon={'settings'} variant={'tonal'} />
|
||||
<IconButton icon={'settings'} variant={'outlined'} />
|
||||
|
|
@ -30,21 +30,21 @@ function IconButtons() {
|
|||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton disabled icon={'settings'} />
|
||||
<IconButton icon={'settings'} disabled />
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'filled'}
|
||||
disabled
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'tonal'}
|
||||
disabled
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'outlined'}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,27 +66,27 @@ function IconButtons() {
|
|||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'outlined'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h2> Disabled toggle buttons </h2>
|
||||
|
|
@ -98,39 +98,39 @@ function IconButtons() {
|
|||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'outlined'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<h2> Disabled selected toggle buttons </h2>
|
||||
|
|
@ -142,43 +142,43 @@ function IconButtons() {
|
|||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
selected
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
selected
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
selected
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'outlined'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
disabled
|
||||
selected
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Radio } from '../../src/primitive-components/material-you-components';
|
||||
import {Radio} from '../../src/primitive-components/material-you-components';
|
||||
|
||||
export default function Radios() {
|
||||
return (
|
||||
|
|
@ -16,16 +16,16 @@ export default function Radios() {
|
|||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<Radio centralRipple />
|
||||
<Radio defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<div style={{display: 'flex', gap: '2em'}}>
|
||||
<Radio disabled />
|
||||
<Radio defaultChecked disabled />
|
||||
<Radio disabled defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Switch } from '../../src/primitive-components/material-you-components';
|
||||
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' }}
|
||||
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', gap: '2em'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>
|
||||
<h2 style={{margin: 0}}> Without icon </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -29,12 +27,12 @@ export default function Switches() {
|
|||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled />
|
||||
<Switch defaultChecked disabled />
|
||||
<Switch disabled defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> With icon (both)</h2>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>
|
||||
<h2 style={{margin: 0}}> With icon (both)</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -51,12 +49,12 @@ export default function Switches() {
|
|||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled icon />
|
||||
<Switch defaultChecked disabled icon />
|
||||
<Switch disabled defaultChecked icon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> With icon (selected)</h2>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>
|
||||
<h2 style={{margin: 0}}> With icon (selected)</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -67,13 +65,13 @@ export default function Switches() {
|
|||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch icon selected />
|
||||
<Switch defaultChecked icon selected />
|
||||
<Switch selected icon />
|
||||
<Switch selected defaultChecked icon />
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled icon selected />
|
||||
<Switch defaultChecked disabled icon selected />
|
||||
<Switch selected disabled icon />
|
||||
<Switch selected disabled defaultChecked icon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,7 @@
|
|||
import '../src/styles/generics.css';
|
||||
import { Metadata, Viewport } from 'next';
|
||||
import '../src/styles/button.css';
|
||||
import '../src/styles/ripple.css';
|
||||
import {Metadata, Viewport} from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
|
|
@ -13,11 +15,7 @@ export const viewport: Viewport = {
|
|||
userScalable: false,
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
export default function RootLayout({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Fragment } from 'react';
|
||||
import {Fragment} from 'react';
|
||||
import Fabs from './components/fabs';
|
||||
import Badges from './components/badges';
|
||||
import IconButtons from './components/icon-buttons';
|
||||
|
|
@ -6,7 +6,7 @@ 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';
|
||||
import {TextFields} from './components/text-fields';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
|
|
@ -4,38 +4,27 @@
|
|||
"dev": "next dev --turbo",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "lint",
|
||||
"lint": "gts lint",
|
||||
"clean": "gts clean",
|
||||
"compile": "tsc",
|
||||
"fix": "gts fix",
|
||||
"prepare": "npm run compile",
|
||||
"pretest": "npm run compile",
|
||||
"posttest": "npm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"install": "^0.13.0",
|
||||
"next": "latest",
|
||||
"npm": "^10.4.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/eslint-plugin-next": "^14.1.0",
|
||||
"@types/node": "20.8.2",
|
||||
"@types/react": "18.2.33",
|
||||
"@types/react-dom": "18.2.14",
|
||||
"@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",
|
||||
"gts": "^5.2.0",
|
||||
"typescript": "~5.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
console.log('Try npm run lint/fix!');
|
||||
|
||||
const longString =
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';
|
||||
|
||||
const trailing = 'Semicolon';
|
||||
|
||||
const why = {am: 'I tabbed?'};
|
||||
|
||||
const iWish = "I didn't have a trailing space...";
|
||||
|
||||
const sicilian = true;
|
||||
|
||||
const vizzini = sicilian ? !sicilian : sicilian;
|
||||
|
||||
const re = /foo {3}bar/;
|
||||
|
||||
export function doSomeStuff(
|
||||
withThis: string,
|
||||
andThat: string,
|
||||
andThose: string[]
|
||||
) {
|
||||
//function on one line
|
||||
if (!andThose.length) {
|
||||
return false;
|
||||
}
|
||||
console.log(withThis);
|
||||
console.log(andThat);
|
||||
console.dir(andThose);
|
||||
console.log(longString, trailing, why, iWish, vizzini, re);
|
||||
return;
|
||||
}
|
||||
// TODO: more examples
|
||||
|
|
@ -1,23 +1,28 @@
|
|||
import { BadgeProps } from './badges.types';
|
||||
import { bool, number, string } from 'prop-types';
|
||||
import React, { forwardRef } from 'react';
|
||||
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
|
||||
import {bool, number, string} from 'prop-types';
|
||||
|
||||
const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
|
||||
{ disableValue = false, ...props },
|
||||
ref,
|
||||
) {
|
||||
interface BadgeProps extends PropsWithChildren<any> {
|
||||
disableValue?: boolean;
|
||||
}
|
||||
|
||||
const Badge = forwardRef(
|
||||
({disableValue = false, ...props}: BadgeProps, ref: ForwardedRef<any>) => {
|
||||
const digitLength = props.children
|
||||
? 16 + (props.children.length - 1) * 6
|
||||
: 6,
|
||||
disableValueClassName =
|
||||
disableValue || (!props.children ?? true) ? 'disable-value' : '';
|
||||
disableValue || (!props.children ?? true)
|
||||
? 'disable-value'
|
||||
: '';
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
|
||||
ref={ref}
|
||||
width={`${digitLength}px`}
|
||||
className={`m3 m3-badge ${
|
||||
'' ?? props.className
|
||||
}${disableValueClassName}`.trimEnd()}
|
||||
>
|
||||
{props.children && (
|
||||
<text x={'50%'} y={'50%'}>
|
||||
|
|
@ -26,7 +31,8 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
|
|||
)}
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Badge.propTypes = {
|
||||
children: number,
|
||||
|
|
@ -34,4 +40,4 @@ Badge.propTypes = {
|
|||
disableValue: bool,
|
||||
};
|
||||
|
||||
export { Badge };
|
||||
export {Badge};
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
|
||||
export interface BadgeProps extends PropsWithChildren<any> {
|
||||
disableValue?: boolean;
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { IRippleProps } from '../ripple/ripple.types';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import {RippleArea} from '../ripple/ripple-area';
|
||||
import React, {
|
||||
forwardRef,
|
||||
PropsWithChildren,
|
||||
|
|
@ -10,17 +8,23 @@ import React, {
|
|||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import {IRippleProps} from '../ripple/ripple.types';
|
||||
|
||||
const ButtonLayout = forwardRef<
|
||||
HTMLButtonElement,
|
||||
PropsWithChildren<any> & IRippleProps
|
||||
>(function ButtonBase({ centralRipple = false, ...props }, ref) {
|
||||
const ButtonLayout = forwardRef(
|
||||
(
|
||||
{
|
||||
centralRipple = false,
|
||||
...props
|
||||
}: PropsWithChildren<any> & IRippleProps,
|
||||
ref
|
||||
) => {
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
buttonId = useId(),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
|
||||
const { variant, disabled, className } = props;
|
||||
const {variant, disabled, className} = props;
|
||||
|
||||
const classes = className
|
||||
? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
|
||||
|
|
@ -30,19 +34,20 @@ const ButtonLayout = forwardRef<
|
|||
<button
|
||||
{...props}
|
||||
{...events}
|
||||
ref={ref}
|
||||
id={buttonId}
|
||||
className={classes}
|
||||
disabled={disabled}
|
||||
id={buttonId}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
<RippleArea
|
||||
callback={setIsActive}
|
||||
central={centralRipple}
|
||||
ref={ripplesRef}
|
||||
central={centralRipple}
|
||||
callback={setIsActive}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
export { ButtonLayout };
|
||||
export {ButtonLayout};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
import {PropsWithChildren} from 'react';
|
||||
|
||||
type ToggleButtonType = {
|
||||
type toggleButtonType = {
|
||||
selected: string;
|
||||
unselected: string;
|
||||
};
|
||||
|
||||
export interface ButtonMainProps extends PropsWithChildren<any> {
|
||||
export interface buttonMainProps extends PropsWithChildren<any> {
|
||||
disabled?: boolean;
|
||||
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
||||
}
|
||||
|
|
@ -17,9 +17,9 @@ export interface FABMainProps extends PropsWithChildren<any> {
|
|||
variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
|
||||
}
|
||||
|
||||
export interface IconButtonMainProps extends PropsWithChildren<any> {
|
||||
export interface iconButtonMainProps extends PropsWithChildren<any> {
|
||||
icon: string;
|
||||
toggled?: false | ToggleButtonType;
|
||||
toggled?: false | toggleButtonType;
|
||||
disabled?: boolean;
|
||||
variant?: 'default' | 'filled' | 'tonal' | 'outlined';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
'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';
|
||||
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
|
||||
>(
|
||||
export const Button = forwardRef(
|
||||
(
|
||||
{ centralRipple = false, variant, disabled = false, icon, ...props },
|
||||
ref,
|
||||
{
|
||||
centralRipple = false,
|
||||
variant,
|
||||
disabled,
|
||||
icon,
|
||||
...props
|
||||
}: buttonMainProps & IRippleProps,
|
||||
ref
|
||||
) => (
|
||||
<ButtonLayout
|
||||
{...props}
|
||||
centralRipple={centralRipple}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
disabled={disabled}
|
||||
centralRipple={centralRipple}
|
||||
variant={variant ? variant : 'filled'}
|
||||
>
|
||||
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
|
||||
<span className={'label-large'}>{props.children}</span>
|
||||
</ButtonLayout>
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
'use client';
|
||||
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import { CheckboxLayoutProps } from './checkbox-layout.types';
|
||||
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 {
|
||||
export const CheckBoxLayout = forwardRef(
|
||||
(
|
||||
{indeterminate, typeInput, type, ...props}: CheckboxLayoutProps,
|
||||
ref
|
||||
): JSX.Element => {
|
||||
const checkboxRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -31,8 +27,9 @@ export const CheckBoxLayout = forwardRef(function CheckBoxBase(
|
|||
<input
|
||||
ref={checkboxRef}
|
||||
{...props}
|
||||
className={classes.trimEnd()}
|
||||
type={type}
|
||||
className={classes.trimEnd()}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
import {PropsWithChildren} from 'react';
|
||||
|
||||
export interface CheckboxLayoutProps extends PropsWithChildren<any> {
|
||||
indeterminate?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
'use client';
|
||||
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { IRippleProps } from '../ripple/ripple.types';
|
||||
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 {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
|
||||
import {
|
||||
forwardRef,
|
||||
PropsWithChildren,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
|
|
@ -18,18 +15,17 @@ import {
|
|||
** description
|
||||
*/
|
||||
|
||||
export const Checkbox = forwardRef<
|
||||
HTMLInputElement,
|
||||
PropsWithChildren<any> & IRippleProps
|
||||
>(({ centralRipple, ...props }, ref) => {
|
||||
export const Checkbox = forwardRef(
|
||||
({centralRipple, ...props}: any & IRippleProps, 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 classes = `m3 m3-checkbox-label ${
|
||||
isActive === true ? 'visible' : ''
|
||||
}`.trimEnd();
|
||||
const indeterminate = (props.indeterminate === true).toString();
|
||||
|
||||
useImperativeHandle(ref, () => checkboxRef.current);
|
||||
|
|
@ -42,18 +38,19 @@ export const Checkbox = forwardRef<
|
|||
<label {...events} className={classes}>
|
||||
<CheckBoxLayout
|
||||
{...props}
|
||||
indeterminate={indeterminate}
|
||||
ref={checkboxRef}
|
||||
indeterminate={indeterminate}
|
||||
type={'checkbox'}
|
||||
/>
|
||||
<span className={'m3 m3-checkbox-state-layer'} />
|
||||
<RippleArea
|
||||
callback={setIsActive}
|
||||
central={centralRipple}
|
||||
className={'m3-checkbox-ripple-layer'}
|
||||
ref={ripplesRef}
|
||||
central={centralRipple}
|
||||
callback={setIsActive}
|
||||
/>
|
||||
{props.children}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,25 @@
|
|||
import React, { forwardRef, PropsWithChildren } from 'react';
|
||||
import React, {ForwardedRef, 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) => (
|
||||
const Divider = forwardRef(
|
||||
(
|
||||
{orientation, variant, ...props}: DividerProps,
|
||||
ref: ForwardedRef<any>
|
||||
) => {
|
||||
return (
|
||||
<hr
|
||||
{...props}
|
||||
className={`m3 m3-divider ${orientation ?? 'horizontal'} ${variant ?? 'full-width'}`.trimEnd()}
|
||||
ref={ref}
|
||||
className={`m3 m3-divider ${orientation ?? 'horizontal'} ${
|
||||
variant ?? 'full-width'
|
||||
}`.trimEnd()}
|
||||
/>
|
||||
),
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export { Divider };
|
||||
export {Divider};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
'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';
|
||||
import {forwardRef} from 'react';
|
||||
import {FABMainProps} from '../button-layout/button.types';
|
||||
import {ButtonLayout} from '../button-layout/button-layout';
|
||||
import {IRippleProps} from '../ripple/ripple.types';
|
||||
import {Icon} from '../material-you-components';
|
||||
|
||||
/**
|
||||
* FABs component
|
||||
|
|
@ -18,7 +16,7 @@ const sizes = {
|
|||
extended: 24,
|
||||
};
|
||||
|
||||
export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
|
||||
export const FAB = forwardRef(
|
||||
(
|
||||
{
|
||||
variant,
|
||||
|
|
@ -28,16 +26,17 @@ export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
|
|||
size = 'default',
|
||||
elevated,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
}: FABMainProps & IRippleProps,
|
||||
ref
|
||||
) => (
|
||||
<ButtonLayout
|
||||
{...props}
|
||||
centralRipple={centralRipple}
|
||||
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
centralRipple={centralRipple}
|
||||
variant={variant ? variant : 'surface'}
|
||||
className={`m3-fab m3-${size}-fab ${
|
||||
!(elevated ?? false) && 'without-elevation'
|
||||
}`}
|
||||
>
|
||||
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
|
||||
{icon}
|
||||
|
|
@ -48,5 +47,5 @@ export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
|
|||
<></>
|
||||
)}
|
||||
</ButtonLayout>
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
'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 {ButtonLayout} from '../button-layout/button-layout';
|
||||
import {iconButtonMainProps} from '../button-layout/button.types';
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
|
@ -12,16 +7,15 @@ import {
|
|||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {IRippleProps} from '../ripple/ripple.types';
|
||||
import {Icon} from '../material-you-components';
|
||||
|
||||
/**
|
||||
* Icon button-layout component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const IconButton = forwardRef<
|
||||
HTMLButtonElement,
|
||||
IconButtonMainProps & IRippleProps
|
||||
>(
|
||||
export const IconButton = forwardRef(
|
||||
(
|
||||
{
|
||||
icon,
|
||||
|
|
@ -31,11 +25,11 @@ export const IconButton = forwardRef<
|
|||
toggled = false,
|
||||
centralRipple,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
}: iconButtonMainProps & IRippleProps,
|
||||
ref
|
||||
) => {
|
||||
const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
|
||||
state: selected == true ? 'selected' : 'unselected',
|
||||
const [toggleIcon, setToggleIcon] = useState<any>({
|
||||
state: selected === true ? 'selected' : 'unselected',
|
||||
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
|
||||
});
|
||||
|
||||
|
|
@ -50,37 +44,35 @@ export const IconButton = forwardRef<
|
|||
|
||||
const callback = useCallback(() => {
|
||||
if (toggled) {
|
||||
if (toggleIcon.state === 'selected') {
|
||||
if (toggleIcon.state === 'selected')
|
||||
toggle('', toggled.unselected ?? 'add_circle');
|
||||
} else {
|
||||
toggle('selected', toggled.selected ?? 'add_circle');
|
||||
}
|
||||
}
|
||||
if (props.onClick) {
|
||||
props.onClick();
|
||||
else toggle('selected', toggled.selected ?? 'add_circle');
|
||||
}
|
||||
if (props.onClick) props.onClick();
|
||||
}, [toggleIcon]);
|
||||
|
||||
useImperativeHandle(ref, () => buttonRef.current);
|
||||
useImperativeHandle(ref, () => buttonRef);
|
||||
|
||||
return (
|
||||
<ButtonLayout
|
||||
{...props}
|
||||
centralRipple={centralRipple}
|
||||
className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
|
||||
disabled={disabled}
|
||||
onClick={callback}
|
||||
ref={buttonRef}
|
||||
onClick={callback}
|
||||
centralRipple={centralRipple}
|
||||
disabled={disabled}
|
||||
className={`m3-icon-button ${toggleIcon.state} ${
|
||||
toggled ? 'toggled' : ''
|
||||
}`.trimEnd()}
|
||||
variant={variant ? variant : 'default'}
|
||||
>
|
||||
<Icon
|
||||
fill={toggleIcon.state === 'selected' ? 1 : 0}
|
||||
iconSize={28}
|
||||
svgSize={40}
|
||||
iconSize={28}
|
||||
fill={toggleIcon.state === 'selected' ? 1 : 0}
|
||||
>
|
||||
{toggled ? toggleIcon.icon : icon ? icon : undefined}
|
||||
</Icon>
|
||||
</ButtonLayout>
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
export type toggleIconType = {
|
||||
state: string;
|
||||
icon: string;
|
||||
};
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import { IconProps } from './icon.types';
|
||||
import { bool, number, string } from 'prop-types';
|
||||
import React, { ForwardedRef, forwardRef } from 'react';
|
||||
import React, {ForwardedRef, forwardRef} from 'react';
|
||||
import {IconProps} from './icon.types';
|
||||
import {bool, number, string} from 'prop-types';
|
||||
|
||||
const Icon = forwardRef(function Icon(
|
||||
const Icon = forwardRef(
|
||||
(
|
||||
{
|
||||
grade = 0,
|
||||
weight = 500,
|
||||
|
|
@ -13,22 +14,26 @@ const Icon = forwardRef(function Icon(
|
|||
type = 'outlined',
|
||||
...props
|
||||
}: IconProps,
|
||||
ref: ForwardedRef<any>,
|
||||
) {
|
||||
ref: ForwardedRef<any>
|
||||
) => {
|
||||
const fontVariation = {
|
||||
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
|
||||
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}
|
||||
className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
|
||||
width={svgSize}
|
||||
height={svgSize}
|
||||
>
|
||||
<text
|
||||
className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
|
||||
className={`m3-${
|
||||
type[0].toUpperCase() + type.slice(1)
|
||||
} m3-size-${iconSize}px`}
|
||||
style={fontVariation}
|
||||
x={'50%'}
|
||||
y={'50%'}
|
||||
|
|
@ -37,7 +42,8 @@ const Icon = forwardRef(function Icon(
|
|||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Icon.propTypes = {
|
||||
fill: bool,
|
||||
|
|
@ -50,4 +56,4 @@ Icon.propTypes = {
|
|||
opticalSize: number,
|
||||
};
|
||||
|
||||
export { Icon };
|
||||
export {Icon};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
import {PropsWithChildren} from 'react';
|
||||
|
||||
export interface IconProps extends PropsWithChildren<any> {
|
||||
fill?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,13 +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';
|
||||
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';
|
||||
|
|
|
|||
|
|
@ -1,38 +1,36 @@
|
|||
'use client';
|
||||
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { IRippleProps } from '../ripple/ripple.types';
|
||||
import {RippleArea} from '../ripple/ripple-area';
|
||||
import {forwardRef, useRef, useState} from 'react';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||
import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
|
||||
import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
|
||||
import {IRippleProps} from '../ripple/ripple.types';
|
||||
|
||||
/**
|
||||
* Radio component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const Radio = forwardRef<
|
||||
HTMLInputElement,
|
||||
PropsWithChildren<HTMLElement> & IRippleProps
|
||||
>(({ centralRipple, ...props }, ref) => {
|
||||
export const Radio = forwardRef(
|
||||
({centralRipple, ...props}: any & IRippleProps, ref) => {
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
|
||||
const classes =
|
||||
`m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
|
||||
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}
|
||||
central={centralRipple}
|
||||
callback={setIsActive}
|
||||
/>
|
||||
{props.children}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
|
||||
interface RippleEventHandlers {
|
||||
onBlur: React.FocusEventHandler;
|
||||
|
|
@ -12,20 +12,32 @@ interface RippleEventHandlers {
|
|||
onTouchStart: React.TouchEventHandler;
|
||||
}
|
||||
|
||||
const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
|
||||
export type EventHandlerType<T> =
|
||||
| React.FocusEvent<T>
|
||||
| React.DragEvent<T>
|
||||
| React.MouseEvent<T>
|
||||
| React.TouchEvent<T>;
|
||||
|
||||
interface RefImperativeType {
|
||||
current: {
|
||||
start: (event: EventHandlerType<Element>, callback: () => void) => void;
|
||||
stop: (event: EventHandlerType<Element>, callback: () => void) => void;
|
||||
};
|
||||
}
|
||||
|
||||
const UseRippleEffect = (
|
||||
ref: RefImperativeType,
|
||||
callback: () => void
|
||||
): undefined | RippleEventHandlers => {
|
||||
const [mounted, setMounted] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) {
|
||||
setMounted(true);
|
||||
}
|
||||
if (!mounted) setMounted(true);
|
||||
});
|
||||
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
if (!mounted) return;
|
||||
|
||||
const { start, stop } = ref.current;
|
||||
const {start, stop} = ref.current;
|
||||
|
||||
return {
|
||||
onBlur: event => stop(event, callback),
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
'use client';
|
||||
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useId,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
import { Ripple } from './ripple';
|
||||
import { Ripples } from './ripple';
|
||||
import { RippleAreaProps } from './ripple.types';
|
||||
import {Ripple} from './ripple';
|
||||
import {Ripples} from './ripple';
|
||||
import {RippleAreaProps} from './ripple.types';
|
||||
|
||||
const TIMEOUT: number = 550;
|
||||
const TIMEOUT = 550;
|
||||
const rippleAreaContext = React.createContext(false);
|
||||
|
||||
const RippleArea = forwardRef(function RippleArea(
|
||||
{ central = false, callback, ...props }: RippleAreaProps,
|
||||
ref,
|
||||
) {
|
||||
const RippleArea = forwardRef(
|
||||
({central = false, callback, ...props}: RippleAreaProps, ref) => {
|
||||
const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
|
||||
rippleDomain = useRef<any>(null),
|
||||
clicked = useRef<boolean>(false),
|
||||
|
|
@ -52,50 +50,53 @@ const RippleArea = forwardRef(function RippleArea(
|
|||
rippleSizeX: number =
|
||||
Math.max(
|
||||
Math.abs(rippleDomainChar.width - rippleX),
|
||||
rippleX,
|
||||
rippleX
|
||||
) *
|
||||
2 +
|
||||
2,
|
||||
rippleSizeY: number =
|
||||
Math.max(
|
||||
Math.abs(rippleDomainChar.height - rippleY),
|
||||
rippleY,
|
||||
rippleY
|
||||
) *
|
||||
2 +
|
||||
2,
|
||||
rippleS: number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
|
||||
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}
|
||||
rippleS={rippleS}
|
||||
key={uniqueKey.current}
|
||||
lifetime={TIMEOUT}
|
||||
/>,
|
||||
];
|
||||
}
|
||||
} else {
|
||||
const old = [...prevRipples];
|
||||
old.push(
|
||||
<Ripple
|
||||
key={uniqueKey.current}
|
||||
lifetime={TIMEOUT}
|
||||
rippleS={rippleS}
|
||||
rippleX={rippleX}
|
||||
rippleY={rippleY}
|
||||
/>,
|
||||
rippleS={rippleS}
|
||||
key={uniqueKey.current}
|
||||
lifetime={TIMEOUT}
|
||||
/>
|
||||
);
|
||||
return old;
|
||||
}
|
||||
});
|
||||
|
||||
uniqueKey.current += 1;
|
||||
},
|
||||
[],
|
||||
[]
|
||||
);
|
||||
|
||||
const stop = useCallback((_event: any, cb: (state: boolean) => void) => {
|
||||
const stop = useCallback(
|
||||
(_event: any, cb: (state: boolean) => void) => {
|
||||
clicked.current = false;
|
||||
cb(clicked.current);
|
||||
|
||||
|
|
@ -107,7 +108,9 @@ const RippleArea = forwardRef(function RippleArea(
|
|||
}
|
||||
return prevRipples;
|
||||
});
|
||||
}, []);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
|
|
@ -115,9 +118,8 @@ const RippleArea = forwardRef(function RippleArea(
|
|||
start,
|
||||
stop,
|
||||
}),
|
||||
[start, stop],
|
||||
[start, stop]
|
||||
);
|
||||
|
||||
return (
|
||||
<span className={classes} id={uniqueId} ref={rippleDomain}>
|
||||
<rippleAreaContext.Provider value={clicked.current}>
|
||||
|
|
@ -125,6 +127,7 @@ const RippleArea = forwardRef(function RippleArea(
|
|||
</rippleAreaContext.Provider>
|
||||
</span>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
export { rippleAreaContext, RippleArea };
|
||||
export {rippleAreaContext, RippleArea};
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
'use client';
|
||||
|
||||
import isEmpty from './utils/utils';
|
||||
import { rippleProps } from './ripple.types';
|
||||
import { rippleAreaContext } from './ripple-area';
|
||||
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,
|
||||
useEffect,
|
||||
forwardRef,
|
||||
useContext,
|
||||
useCallback,
|
||||
ForwardedRef,
|
||||
useTransition,
|
||||
JSX,
|
||||
} from 'react';
|
||||
|
||||
const Ripples = forwardRef(function Ripples(
|
||||
props: any,
|
||||
ref: ForwardedRef<any>,
|
||||
) {
|
||||
const Ripples = forwardRef((props: any, ref: ForwardedRef<any>) => {
|
||||
const [ripples, setRipples] = useState({});
|
||||
const firstRender = useRef<boolean>(true);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
|
@ -30,7 +27,7 @@ const Ripples = forwardRef(function Ripples(
|
|||
}
|
||||
|
||||
setRipples(state => {
|
||||
const children = { ...state };
|
||||
const children = {...state};
|
||||
delete children[child.key];
|
||||
return children;
|
||||
});
|
||||
|
|
@ -44,7 +41,7 @@ const Ripples = forwardRef(function Ripples(
|
|||
firstRender.current = false;
|
||||
} else {
|
||||
setRipples(
|
||||
RippleEffectBuild(props.children, LifetimeEnd, ripples),
|
||||
RippleEffectBuild(props.children, LifetimeEnd, ripples)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -54,11 +51,8 @@ const Ripples = forwardRef(function Ripples(
|
|||
return <>{Object.values(ripples)}</>;
|
||||
});
|
||||
|
||||
const Ripple = forwardRef(function Ripple(
|
||||
props: rippleProps,
|
||||
ref: ForwardedRef<any>,
|
||||
) {
|
||||
const { rippleX, rippleY, rippleS, endLifetime, lifetime } = props;
|
||||
const Ripple = forwardRef((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');
|
||||
|
|
@ -83,4 +77,4 @@ const Ripple = forwardRef(function Ripple(
|
|||
);
|
||||
});
|
||||
|
||||
export { Ripple, Ripples };
|
||||
export {Ripple, Ripples};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Dispatch, SetStateAction } from 'react';
|
||||
import {Dispatch, SetStateAction, PropsWithChildren} from 'react';
|
||||
|
||||
export interface IRippleProps extends PropsWithChildren<any> {
|
||||
export interface IRippleProps {
|
||||
centralRipple?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -13,9 +13,7 @@ export type rippleProps = {
|
|||
rippleX: number;
|
||||
rippleY: number;
|
||||
rippleS: number;
|
||||
endLifetime?: () => void;
|
||||
endLifetime?: any;
|
||||
lifetime: number;
|
||||
key?: number;
|
||||
};
|
||||
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { cloneElement, ReactElement } from 'react';
|
||||
import {cloneElement, ReactElement} from 'react';
|
||||
|
||||
export default function ArrayConvertToObj(
|
||||
obj: Object,
|
||||
nextChildren: ReactElement[],
|
||||
callback: (child: any) => void,
|
||||
callback: (child: any) => void
|
||||
): void {
|
||||
Object.values(nextChildren).forEach(
|
||||
(child: JSX.Element) =>
|
||||
(obj[child.key] = cloneElement(child, {
|
||||
...child.props,
|
||||
endLifetime: callback.bind(null, child),
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
import ArrayConvertToObj from './array-convert-to-obj';
|
||||
import { cloneElement, ReactElement } from 'react';
|
||||
import isEmpty from './utils';
|
||||
import {cloneElement, ReactElement} from 'react';
|
||||
import ArrayConvertToObj from './array-convert-to-obj';
|
||||
|
||||
export default function RippleEffectBuild(
|
||||
nextRipples: ReactElement[],
|
||||
callback: (child: any) => void,
|
||||
prevRipples?: any | null,
|
||||
prevRipples?: any | null
|
||||
) {
|
||||
const next: object = {};
|
||||
const empty: boolean = isEmpty(prevRipples);
|
||||
const preparedRipples: object = empty ? {} : prevRipples;
|
||||
|
||||
console.log(preparedRipples);
|
||||
|
||||
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) {
|
||||
if (preparedRipples[rippleKey] === undefined) {
|
||||
preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
|
||||
...next[rippleKey].props,
|
||||
endLifetime: callback.bind(null, next[rippleKey]),
|
||||
|
|
@ -29,6 +30,5 @@ export default function RippleEffectBuild(
|
|||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return preparedRipples;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
export default function isEmpty(obj: Object): boolean {
|
||||
for (const _i in obj) {
|
||||
return false;
|
||||
}
|
||||
for (const _i in obj) return false;
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
'use client';
|
||||
|
||||
import React, { forwardRef } from 'react';
|
||||
import { SwitchMainProps } from './switch.types';
|
||||
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||
import React, {ForwardedRef, 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}>
|
||||
export const Switch = forwardRef(
|
||||
(
|
||||
{icon, disabled, selected = false, ...props}: switchMainProps,
|
||||
ref: ForwardedRef<HTMLInputElement>
|
||||
) => (
|
||||
<div className={'m3 m3-switch-exp'}>
|
||||
<CheckBoxLayout
|
||||
{...props}
|
||||
className={`m3 ${props.className ?? ''}`.trimEnd()}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
type={'checkbox'}
|
||||
disabled={disabled}
|
||||
className={`m3 ${props.className ?? ''}`.trimEnd()}
|
||||
/>
|
||||
<svg>
|
||||
<rect className={'m3 m3-switch-track'} />
|
||||
|
|
@ -32,5 +34,5 @@ export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
import {PropsWithChildren} from 'react';
|
||||
|
||||
export interface SwitchMainProps extends PropsWithChildren<any> {
|
||||
export interface switchMainProps extends PropsWithChildren<any> {
|
||||
disabled?: boolean;
|
||||
icon?: boolean;
|
||||
selected?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,26 @@
|
|||
'use client';
|
||||
|
||||
import React, { forwardRef, useState } from 'react';
|
||||
import { bool, string } from 'prop-types';
|
||||
import { type TextFieldInterface } from './text-field.types';
|
||||
import React, {useState} from 'react';
|
||||
import {bool, string} from 'prop-types';
|
||||
import {type TextFieldInterface} from './text-field.types';
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
|
||||
(
|
||||
{
|
||||
export function TextField({
|
||||
variant = 'filled',
|
||||
withAfterIcon,
|
||||
withBeforeIcon,
|
||||
supportingText,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [raised, setRaised] = useState<boolean>(
|
||||
props.placeholder ?? false,
|
||||
);
|
||||
}: TextFieldInterface) {
|
||||
const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
|
||||
|
||||
const callback = (e: any): void => {
|
||||
const callback = (e: any) => {
|
||||
if (
|
||||
e.type === 'blur' &&
|
||||
e.target.value.length === 0 &&
|
||||
!props.placeholder
|
||||
) {
|
||||
)
|
||||
setRaised(false);
|
||||
} else if (e.type === 'focus') {
|
||||
setRaised(true);
|
||||
}
|
||||
else if (e.type === 'focus') setRaised(true);
|
||||
};
|
||||
|
||||
const iconStyles =
|
||||
|
|
@ -56,20 +48,15 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
|
|||
</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);
|
||||
}
|
||||
if (props.onFocus) props.onFocus(event);
|
||||
}}
|
||||
onBlur={event => {
|
||||
callback(event);
|
||||
if (props.onBlur) props.onBlur(event);
|
||||
}}
|
||||
/>
|
||||
<label className={raised ? 'raised' : ''}>
|
||||
|
|
@ -82,15 +69,14 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
|
|||
</span>
|
||||
)}
|
||||
</div>
|
||||
{supportingText !== '' && (
|
||||
{supportingText && (
|
||||
<span className={'m3-text-field-supporting-text'}>
|
||||
{supportingText}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
TextField.propTypes = {
|
||||
children: string,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PropsWithChildren } from 'react';
|
||||
import {PropsWithChildren} from 'react';
|
||||
|
||||
export interface TextFieldInterface extends PropsWithChildren<any> {
|
||||
variant: 'filled' | 'outlined';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
button:not(.m3-fab, .m3-icon-button) {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
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);
|
||||
|
|
@ -25,8 +22,7 @@ button:not(.m3-fab, .m3-icon-button).m3 {
|
|||
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 {
|
||||
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);
|
||||
}
|
||||
|
|
@ -48,9 +44,7 @@ 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);
|
||||
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);
|
||||
}
|
||||
|
|
@ -65,10 +59,7 @@ 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;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -77,130 +68,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
|
|||
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).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 {
|
||||
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
|
||||
);
|
||||
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;
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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: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
|
||||
);
|
||||
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);
|
||||
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);
|
||||
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
|
||||
);
|
||||
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: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
|
||||
);
|
||||
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
|
||||
) {
|
||||
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
|
||||
);
|
||||
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;
|
||||
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ span.m3.m3-checkbox-ripple-layer {
|
|||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox {
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -37,154 +37,67 @@ input[type="checkbox"].m3.m3-checkbox {
|
|||
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)
|
||||
) {
|
||||
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) {
|
||||
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
|
||||
)
|
||||
) {
|
||||
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
|
||||
) {
|
||||
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
|
||||
) {
|
||||
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 {
|
||||
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 {
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
|
||||
input[type=checkbox].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:hover {
|
||||
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(: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 {
|
||||
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(: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: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 {
|
||||
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):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):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 {
|
||||
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
|
||||
);
|
||||
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 */
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@ hr.m3.m3-divider {
|
|||
hr.m3.m3-divider.vertical {
|
||||
writing-mode: tb-rl;
|
||||
}
|
||||
hr.m3.m3-divider.vertical,
|
||||
hr.m3.m3-divider.vertical.full-width {
|
||||
hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
|
||||
height: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.vertical.inset {
|
||||
|
|
@ -20,8 +19,7 @@ hr.m3.m3-divider.vertical.inset {
|
|||
hr.m3.m3-divider.vertical.middle-inset {
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
hr.m3.m3-divider.horizontal,
|
||||
hr.m3.m3-divider.horizontal.full-width {
|
||||
hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
hr.m3.m3-divider.horizontal.inset {
|
||||
|
|
|
|||
|
|
@ -1,31 +1,21 @@
|
|||
.elevation-1 {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow:
|
||||
0 2px 6px 2px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow:
|
||||
0 4px 4px 0 rgba(0, 0, 0, 0.3),
|
||||
0 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||||
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,8 +1,5 @@
|
|||
button.m3.m3-fab {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
|
|
@ -19,10 +16,7 @@ button.m3.m3-fab.m3 {
|
|||
gap: 12px;
|
||||
}
|
||||
button.m3.m3-fab::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -36,9 +30,7 @@ button.m3.m3-fab.surface {
|
|||
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);
|
||||
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);
|
||||
|
|
@ -51,57 +43,39 @@ button.m3.m3-fab.primary {
|
|||
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);
|
||||
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
|
||||
);
|
||||
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);
|
||||
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
|
||||
);
|
||||
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);
|
||||
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
|
||||
);
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
|
|
@ -131,81 +105,35 @@ button.m3.m3-fab.m3-extended-fab {
|
|||
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):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: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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
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
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fabs.css.map */
|
||||
|
|
|
|||
|
|
@ -6,32 +6,23 @@ The recommended way to use the Material Icons font is by linking to the web font
|
|||
|
||||
```html
|
||||
<!-- https://material.io/resources/icons/?style=baseline -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=outline -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=round -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=sharp -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=twotone -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
|
||||
rel="stylesheet">
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
@font-face {
|
||||
font-family: Material-Symbols-Rounded-Regular;
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
|
||||
format("woff2");
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Symbols-Outlined-Regular;
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
|
||||
format("woff2");
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Symbols-Sharp-Regular;
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
|
||||
format("woff2");
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,8 +1,5 @@
|
|||
button.m3.m3-icon-button {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
|
@ -16,10 +13,7 @@ button.m3.m3-icon-button {
|
|||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -28,24 +22,14 @@ button.m3.m3-icon-button::before {
|
|||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 500,
|
||||
"GRAD" 0,
|
||||
"opsz" 48;
|
||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled,
|
||||
button.m3.m3-icon-button.default.selected:disabled,
|
||||
button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
|
|
@ -67,18 +51,13 @@ button.m3.m3-icon-button.tonal.toggled {
|
|||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled,
|
||||
button.m3.m3-icon-button.tonal {
|
||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
|
|
@ -86,183 +65,70 @@ button.m3.m3-icon-button.outlined {
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
|
||||
.outlined
|
||||
).toggled.selected
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
|
||||
.default
|
||||
).toggled.selected
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-inverse-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(
|
||||
.default,
|
||||
.outlined
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
|
||||
|
||||
/*# sourceMappingURL=m3-mixins.css.map */
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
|||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
input[type="radio"].m3.m3-radio {
|
||||
input[type=radio].m3.m3-radio {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -26,90 +26,44 @@ input[type="radio"].m3.m3-radio {
|
|||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio::after {
|
||||
input[type=radio].m3.m3-radio::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
input[type=radio].m3.m3-radio:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked {
|
||||
input[type=radio].m3.m3-radio:checked {
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked::after {
|
||||
input[type=radio].m3.m3-radio:checked::after {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
input[type=radio].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 38%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 20%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 20%,
|
||||
transparent
|
||||
);
|
||||
input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
||||
|
|
|
|||
|
|
@ -18,11 +18,7 @@
|
|||
animation-name: rippleAppearanceAnimation;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation-duration: 0.55s;
|
||||
transition:
|
||||
opacity,
|
||||
background,
|
||||
background-color,
|
||||
0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.m3.ripple.visible {
|
||||
opacity: 1 !important;
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ div.m3.m3-switch-exp > svg > g > text {
|
|||
font-family: Material-Symbols-Outlined-Regular;
|
||||
font-size: 20px;
|
||||
}
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
|
||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
cy: 50%;
|
||||
cx: 16px;
|
||||
|
|
@ -54,136 +53,72 @@ div.m3.m3-switch-exp > input.m3 {
|
|||
div.m3.m3-switch-exp > input.m3:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:not(:checked, :disabled)
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-outline);
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
|
||||
transform: translate(50%, 81%);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:checked:not(:disabled)
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:not(:disabled)
|
||||
+ svg
|
||||
> g
|
||||
> text.m3.m3-icon-unchecked {
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:not(:disabled)
|
||||
+ svg
|
||||
> g
|
||||
> text.m3.m3-icon-checked {
|
||||
div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:checked:disabled
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-surface);
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler,
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3
|
||||
+ svg:has(text.m3.m3-icon-unchecked)
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
|
||||
r: 12px;
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||
opacity: 0;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:checked
|
||||
+ svg
|
||||
> circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||
cx: calc(100% - 16px);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:not(:checked)
|
||||
+ svg
|
||||
> g
|
||||
> text.m3.m3-icon-checked {
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
||||
opacity: 0;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:is(
|
||||
div.m3.m3-switch-exp > input.m3:checked,
|
||||
div.m3.m3-switch-exp > input.m3
|
||||
):not(:disabled):active
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
|
||||
r: 14px;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:not(:checked):disabled
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 38%;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:hover:not(:disabled):checked
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-primary-container);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:hover:not(:disabled):checked
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-primary);
|
||||
fill-opacity: 8%;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:hover:not(:disabled):not(:checked)
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler {
|
||||
div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:hover:not(:disabled):not(:checked)
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 8%;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:active:not(:disabled):checked
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch-exp > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-primary);
|
||||
fill-opacity: 12%;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:active:not(:disabled):not(:checked)
|
||||
+ svg
|
||||
> circle.m3.m3-switch-handler-state-layer {
|
||||
div.m3.m3-switch-exp > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
fill-opacity: 12%;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:is(:checked, :checked:disabled)
|
||||
+ svg
|
||||
> rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch-exp > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
|
||||
rx: 16px;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
stroke-width: 0;
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:is(
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked),
|
||||
div.m3.m3-switch-exp > input.m3:not(:checked):disabled
|
||||
)
|
||||
+ svg
|
||||
> rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
|
||||
x: 1px;
|
||||
y: 1px;
|
||||
}
|
||||
|
|
@ -196,28 +131,17 @@ div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
|
|||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-surface-container-highest) 38%,
|
||||
transparent
|
||||
);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
|
||||
transform: translateX(38.5%);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
div.m3.m3-switch-exp
|
||||
> input.m3:checked:disabled
|
||||
+ svg
|
||||
> rect.m3.m3-switch-track {
|
||||
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ div.m3.m3-text-field {
|
|||
div.m3.m3-text-field span.m3-icon.icon-before {
|
||||
align-self: start;
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
|
||||
div.m3.m3-text-field > input,
|
||||
div.m3.m3-text-field > label {
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
||||
line-height: var(--md-sys-typescale-body-large-line-height);
|
||||
font-size: var(--md-sys-typescale-body-large-font-size);
|
||||
}
|
||||
|
|
@ -54,8 +52,7 @@ div.m3.m3-text-field > span.m3-text-field-state-layer {
|
|||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-text-field > input,
|
||||
div.m3.m3-text-field > label {
|
||||
div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
|
||||
|
|
@ -65,9 +62,7 @@ div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
|
|||
outline: none;
|
||||
caret-color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
|
||||
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
|
||||
opacity: 38%;
|
||||
}
|
||||
div.m3.m3-text-field.filled {
|
||||
|
|
@ -111,10 +106,7 @@ div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
|
|||
div.m3.m3-text-field.filled > input:required:user-invalid {
|
||||
box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled:has(input:required:user-invalid)
|
||||
> *:not(input):nth-last-child(-n + 3),
|
||||
div.m3.m3-text-field.filled:has(input:required:user-invalid)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:focus-visible {
|
||||
|
|
@ -124,15 +116,9 @@ div.m3.m3-text-field.filled > input:focus-visible {
|
|||
div.m3.m3-text-field.filled > input:focus-visible + label {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.filled:hover
|
||||
> input:not(:disabled)
|
||||
~ span.m3-text-field-state-layer {
|
||||
div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > fieldset {
|
||||
margin: 0;
|
||||
|
|
@ -184,22 +170,14 @@ div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
|
|||
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
|
||||
border: 3px solid var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:not(
|
||||
div.m3.m3-text-field.outlined:has(label.raised)
|
||||
):has(input:focus-visible)
|
||||
> fieldset
|
||||
> legend {
|
||||
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-inline-width: 5.5px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
div.m3.m3-text-field.outlined:not(
|
||||
div.m3.m3-text-field.outlined:has(input:focus-visible)
|
||||
):has(label.raised)
|
||||
> fieldset
|
||||
> legend {
|
||||
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-inline-width: 7.5px;
|
||||
|
|
@ -209,8 +187,7 @@ div.m3.m3-text-field.outlined:not(
|
|||
div.m3.m3-text-field.outlined > input:focus-visible + label {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > label.raised,
|
||||
div.m3.m3-text-field.outlined > fieldset > * {
|
||||
div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
|
||||
line-height: var(--md-sys-typescale-body-small-line-height);
|
||||
font-size: var(--md-sys-typescale-body-small-font-size);
|
||||
}
|
||||
|
|
@ -220,30 +197,16 @@ div.m3.m3-text-field.outlined > label.raised {
|
|||
div.m3.m3-text-field.outlined > input:required:user-invalid {
|
||||
caret-color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
|
||||
> *:not(input):nth-last-child(-n + 3),
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
|
||||
border: 3px solid var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(
|
||||
input:required:user-invalid:not(:focus-visible)
|
||||
)
|
||||
> fieldset {
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
|
||||
border: 1px solid var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:hover:not(
|
||||
div.m3.m3-text-field.outlined:hover:has(
|
||||
input:disabled,
|
||||
input:focus-visible,
|
||||
label.raised,
|
||||
input:required:user-invalid
|
||||
)
|
||||
)
|
||||
> fieldset {
|
||||
div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
border-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
--md-sys-typescale-body-large-font-weight: 400;
|
||||
--md-sys-typescale-body-large-font-size: 16px;
|
||||
--md-sys-typescale-body-large-line-height: 24px;
|
||||
--md-sys-typescale-body-large-letter-spacing: 0.5px;
|
||||
--md-sys-typescale-body-large-letter-spacing: 0.50px;
|
||||
/* body - medium */
|
||||
--md-sys-typescale-body-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-body-medium-font-family-style: Regular;
|
||||
|
|
@ -61,28 +61,28 @@
|
|||
--md-sys-typescale-body-small-font-weight: 400;
|
||||
--md-sys-typescale-body-small-font-size: 12px;
|
||||
--md-sys-typescale-body-small-line-height: 16px;
|
||||
--md-sys-typescale-body-small-letter-spacing: 0.4px;
|
||||
--md-sys-typescale-body-small-letter-spacing: 0.40px;
|
||||
/* label - large */
|
||||
--md-sys-typescale-label-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-large-font-family-style: Medium;
|
||||
--md-sys-typescale-label-large-font-weight: 500;
|
||||
--md-sys-typescale-label-large-font-size: 14px;
|
||||
--md-sys-typescale-label-large-line-height: 20px;
|
||||
--md-sys-typescale-label-large-letter-spacing: 0.1px;
|
||||
--md-sys-typescale-label-large-letter-spacing: 0.10px;
|
||||
/* label - medium */
|
||||
--md-sys-typescale-label-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-medium-font-family-style: Medium;
|
||||
--md-sys-typescale-label-medium-font-weight: 500;
|
||||
--md-sys-typescale-label-medium-font-size: 12px;
|
||||
--md-sys-typescale-label-medium-line-height: 16px;
|
||||
--md-sys-typescale-label-medium-letter-spacing: 0.5px;
|
||||
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
|
||||
/* label - small */
|
||||
--md-sys-typescale-label-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-small-font-family-style: Medium;
|
||||
--md-sys-typescale-label-small-font-weight: 500;
|
||||
--md-sys-typescale-label-small-font-size: 11px;
|
||||
--md-sys-typescale-label-small-line-height: 16px;
|
||||
--md-sys-typescale-label-small-letter-spacing: 0.5px;
|
||||
--md-sys-typescale-label-small-letter-spacing: 0.50px;
|
||||
/* title - large */
|
||||
--md-sys-typescale-title-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-title-large-font-family-style: Regular;
|
||||
|
|
@ -103,5 +103,5 @@
|
|||
--md-sys-typescale-title-small-font-weight: 500;
|
||||
--md-sys-typescale-title-small-font-size: 14px;
|
||||
--md-sys-typescale-title-small-line-height: 20px;
|
||||
--md-sys-typescale-title-small-letter-spacing: 0.1px;
|
||||
--md-sys-typescale-title-small-letter-spacing: 0.10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.display-large {
|
||||
.display-large{
|
||||
font-family: var(--md-sys-typescale-display-large-font-family-name);
|
||||
font-style: var(--md-sys-typescale-display-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-large-font-weight);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
text-transform: var(--md-sys-typescale-display-large-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
|
||||
}
|
||||
.display-medium {
|
||||
.display-medium{
|
||||
font-family: var(--md-sys-typescale-display-medium-font-family-name);
|
||||
font-style: var(--md-sys-typescale-display-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-medium-font-weight);
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
text-transform: var(--md-sys-typescale-display-medium-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
|
||||
}
|
||||
.display-small {
|
||||
.display-small{
|
||||
font-family: var(--md-sys-typescale-display-small-font-family-name);
|
||||
font-style: var(--md-sys-typescale-display-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-small-font-weight);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
text-transform: var(--md-sys-typescale-display-small-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
|
||||
}
|
||||
.headline-large {
|
||||
.headline-large{
|
||||
font-family: var(--md-sys-typescale-headline-large-font-family-name);
|
||||
font-style: var(--md-sys-typescale-headline-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-large-font-weight);
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
text-transform: var(--md-sys-typescale-headline-large-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
|
||||
}
|
||||
.headline-medium {
|
||||
.headline-medium{
|
||||
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
|
||||
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
|
||||
}
|
||||
.headline-small {
|
||||
.headline-small{
|
||||
font-family: var(--md-sys-typescale-headline-small-font-family-name);
|
||||
font-style: var(--md-sys-typescale-headline-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-small-font-weight);
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
text-transform: var(--md-sys-typescale-headline-small-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
|
||||
}
|
||||
.body-large {
|
||||
.body-large{
|
||||
font-family: var(--md-sys-typescale-body-large-font-family-name);
|
||||
font-style: var(--md-sys-typescale-body-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-large-font-weight);
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
text-transform: var(--md-sys-typescale-body-large-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
|
||||
}
|
||||
.body-medium {
|
||||
.body-medium{
|
||||
font-family: var(--md-sys-typescale-body-medium-font-family-name);
|
||||
font-style: var(--md-sys-typescale-body-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-medium-font-weight);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
text-transform: var(--md-sys-typescale-body-medium-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
|
||||
}
|
||||
.body-small {
|
||||
.body-small{
|
||||
font-family: var(--md-sys-typescale-body-small-font-family-name);
|
||||
font-style: var(--md-sys-typescale-body-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-small-font-weight);
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
text-transform: var(--md-sys-typescale-body-small-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
|
||||
}
|
||||
.label-large {
|
||||
.label-large{
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
font-style: var(--md-sys-typescale-label-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
text-transform: var(--md-sys-typescale-label-large-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
|
||||
}
|
||||
.label-medium {
|
||||
.label-medium{
|
||||
font-family: var(--md-sys-typescale-label-medium-font-family-name);
|
||||
font-style: var(--md-sys-typescale-label-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-medium-font-weight);
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
text-transform: var(--md-sys-typescale-label-medium-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
|
||||
}
|
||||
.label-small {
|
||||
.label-small{
|
||||
font-family: var(--md-sys-typescale-label-small-font-family-name);
|
||||
font-style: var(--md-sys-typescale-label-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
text-transform: var(--md-sys-typescale-label-small-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
|
||||
}
|
||||
.title-large {
|
||||
.title-large{
|
||||
font-family: var(--md-sys-typescale-title-large-font-family-name);
|
||||
font-style: var(--md-sys-typescale-title-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-large-font-weight);
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
text-transform: var(--md-sys-typescale-title-large-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
|
||||
}
|
||||
.title-medium {
|
||||
.title-medium{
|
||||
font-family: var(--md-sys-typescale-title-medium-font-family-name);
|
||||
font-style: var(--md-sys-typescale-title-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-medium-font-weight);
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
text-transform: var(--md-sys-typescale-title-medium-text-transform);
|
||||
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
|
||||
}
|
||||
.title-small {
|
||||
.title-small{
|
||||
font-family: var(--md-sys-typescale-title-small-font-family-name);
|
||||
font-style: var(--md-sys-typescale-title-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-small-font-weight);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
{
|
||||
"extends": "./node_modules/gts/tsconfig-google.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"rootDir": ".",
|
||||
"outDir": "build",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
|
|
@ -25,12 +20,8 @@
|
|||
]
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"src/**/*.ts",
|
||||
"test/**/*.ts",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue