Compare commits
No commits in common. "fbadb3d063b69b89128b70072cf18cb7edb3cb39" and "9eb0a1ceca338a3a372b6df64af48ebfa87f48ee" have entirely different histories.
fbadb3d063
...
9eb0a1ceca
|
|
@ -1,22 +1,6 @@
|
||||||
<component name="InspectionProjectProfileManager">
|
<component name="InspectionProjectProfileManager">
|
||||||
<profile version="1.0">
|
<profile version="1.0">
|
||||||
<option name="myName" value="Project Default" />
|
<option name="myName" value="Project Default" />
|
||||||
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
|
|
||||||
<option name="myCustomPropertiesEnabled" value="true" />
|
|
||||||
<option name="myIgnoreVendorSpecificProperties" value="false" />
|
|
||||||
<option name="myCustomPropertiesList">
|
|
||||||
<value>
|
|
||||||
<list size="6">
|
|
||||||
<item index="0" class="java.lang.String" itemvalue="cy" />
|
|
||||||
<item index="1" class="java.lang.String" itemvalue="cx" />
|
|
||||||
<item index="2" class="java.lang.String" itemvalue="r" />
|
|
||||||
<item index="3" class="java.lang.String" itemvalue="rx" />
|
|
||||||
<item index="4" class="java.lang.String" itemvalue="x" />
|
|
||||||
<item index="5" class="java.lang.String" itemvalue="y" />
|
|
||||||
</list>
|
|
||||||
</value>
|
|
||||||
</option>
|
|
||||||
</inspection_tool>
|
|
||||||
<inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
|
<inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
</profile>
|
</profile>
|
||||||
|
|
|
||||||
11
README.md
11
README.md
|
|
@ -9,25 +9,24 @@ This repository is including and will be including components, enumerates in tab
|
||||||
- [x] Icon
|
- [x] Icon
|
||||||
- [x] FAB
|
- [x] FAB
|
||||||
- [X] Radio
|
- [X] Radio
|
||||||
- [X] Segmented
|
- [ ] Segmented (WIP)
|
||||||
- [X] Checkbox
|
- [X] Checkbox
|
||||||
- [x] Text fields
|
- [x] Text fields
|
||||||
- [X] Switches
|
- [X] Switches
|
||||||
|
- [ ] Chips
|
||||||
- [x] Icon
|
- [x] Icon
|
||||||
- [x] Ripple Effect
|
- [x] Ripple Effect
|
||||||
- [X] Dividers
|
- [X] Dividers
|
||||||
- [x] Badges
|
- [x] Badges
|
||||||
- [X] Cards
|
- [ ] Select field
|
||||||
- [X] Typography
|
|
||||||
- [ ] Chips
|
|
||||||
- [ ] Select field (WIP)
|
|
||||||
- [ ] Bottom sheets
|
- [ ] Bottom sheets
|
||||||
|
- [X] Cards
|
||||||
- [ ] Menus
|
- [ ] Menus
|
||||||
- [ ] Navigation
|
- [ ] Navigation
|
||||||
- [ ] Bars
|
- [ ] Bars
|
||||||
- [ ] Drawer
|
- [ ] Drawer
|
||||||
- [ ] Rail
|
- [ ] Rail
|
||||||
- [ ] Sliders (WIP)
|
- [ ] Sliders
|
||||||
- [ ] Snackbar
|
- [ ] Snackbar
|
||||||
- [ ] Tabs
|
- [ ] Tabs
|
||||||
- [ ] Bottom sheets
|
- [ ] Bottom sheets
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Badge } from '../../src/primitive-components/badge/badge';
|
||||||
|
import { Divider } from '../../src/primitive-components/divider/divider';
|
||||||
|
|
||||||
|
export default function Badges() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={'m3 m3-wrapper'}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1> Badges </h1>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '0.5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge />
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge disableValue />
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge disableValue>3487</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>5</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>32</Badge>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '24px',
|
||||||
|
aspectRatio: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge>322342</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/*<Divider orientation={"vertical"} variant={"full-width"}/>*/}
|
||||||
|
{/*<div>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* flexDirection: "column",*/}
|
||||||
|
{/* gap: "0.5em",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge/>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <Divider variant={"inset"}/>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge>5</Badge>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <Divider/>*/}
|
||||||
|
{/* <div style={{*/}
|
||||||
|
{/* width: "24px",*/}
|
||||||
|
{/* aspectRatio: 1,*/}
|
||||||
|
{/* display: "flex",*/}
|
||||||
|
{/* justifyContent: "center",*/}
|
||||||
|
{/* alignItems: "center"*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <Badge>32</Badge>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/*</div>*/}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useCallback, useState } from 'react';
|
||||||
|
import { Button } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
export default function Buttons() {
|
||||||
|
const [state, setState] = useState(1);
|
||||||
|
|
||||||
|
const callback = useCallback(
|
||||||
|
() => setState(prevState => prevState + 1),
|
||||||
|
[state],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1> Buttons </h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '2em',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '150px',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
centralRipple
|
||||||
|
onClick={callback}
|
||||||
|
variant={'filled'}
|
||||||
|
>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button variant={'outlined'}>Label</Button>
|
||||||
|
<Button variant={'tonal'}>Label</Button>
|
||||||
|
<Button variant={'elevated'}>Label</Button>
|
||||||
|
<Button variant={'text'}>Label</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Buttons with icon </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '150px',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button icon={'add'} variant={'filled'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'outlined'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'tonal'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'elevated'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
<Button icon={'add'} variant={'text'}>
|
||||||
|
Label
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Button, Checkbox } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
export default function Checkboxes() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Checkboxes </h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Checkbox centralRipple />
|
||||||
|
<Checkbox defaultChecked />
|
||||||
|
<Checkbox indeterminate={true} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Checkbox disabled />
|
||||||
|
<Checkbox defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Errored </h2>
|
||||||
|
<form
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'row',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox required />
|
||||||
|
<Checkbox defaultChecked required />
|
||||||
|
<Checkbox indeterminate={true} required />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '2em',
|
||||||
|
flexDirection: 'row',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox className={'m3-error'} required />
|
||||||
|
<Checkbox
|
||||||
|
className={'m3-error'}
|
||||||
|
defaultChecked
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
className={'m3-error'}
|
||||||
|
indeterminate={true}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type={'submit'}>Send</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { FAB } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
export default function Fabs() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div>
|
||||||
|
<h1> FABs with elevation</h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Small </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB
|
||||||
|
centralRipple
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} />
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Large </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} size={'large'} />
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Extended </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB elevated icon={'edit'} size={'extended'}>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'primary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'secondary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
elevated
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1> FABs without elevation</h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Small </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'small'} />
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'small'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} />
|
||||||
|
<FAB icon={'edit'} variant={'primary'} />
|
||||||
|
<FAB icon={'edit'} variant={'secondary'} />
|
||||||
|
<FAB icon={'edit'} variant={'tertiary'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Large </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'large'} />
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'primary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'secondary'}
|
||||||
|
/>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'large'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Extended </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<FAB icon={'edit'} size={'extended'}>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'primary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'secondary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
<FAB
|
||||||
|
icon={'edit'}
|
||||||
|
size={'extended'}
|
||||||
|
variant={'tertiary'}
|
||||||
|
>
|
||||||
|
<span className={'label-large'}>Label</span>
|
||||||
|
</FAB>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { IconButton } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
function IconButtons() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1> Icon buttons </h1>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div>
|
||||||
|
<h2> Default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton centralRipple icon={'settings'} />
|
||||||
|
<IconButton icon={'settings'} variant={'filled'} />
|
||||||
|
<IconButton icon={'settings'} variant={'tonal'} />
|
||||||
|
<IconButton icon={'settings'} variant={'outlined'} />
|
||||||
|
</div>
|
||||||
|
<h2> Disabled default buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton disabled icon={'settings'} />
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2> Disabled toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2> Disabled selected toggle buttons </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'filled'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'tonal'}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
disabled
|
||||||
|
icon={'settings'}
|
||||||
|
selected
|
||||||
|
toggled={{
|
||||||
|
selected: 'settings',
|
||||||
|
unselected: 'settings',
|
||||||
|
}}
|
||||||
|
variant={'outlined'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IconButtons;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Radio } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
export default function Radios() {
|
||||||
|
return (
|
||||||
|
<div className={'m3 m3-wrapper'}>
|
||||||
|
<h1> Radio </h1>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '5em',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Radio centralRipple />
|
||||||
|
<Radio defaultChecked />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<div style={{ display: 'flex', gap: '2em' }}>
|
||||||
|
<Radio disabled />
|
||||||
|
<Radio defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Switch } from '../../src/primitive-components/components';
|
||||||
|
|
||||||
|
export default function Switches() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={'m3 m3-wrapper'}
|
||||||
|
style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
|
||||||
|
>
|
||||||
|
<h1> Switches </h1>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> Without icon </h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch />
|
||||||
|
<Switch defaultChecked />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled />
|
||||||
|
<Switch defaultChecked disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> With icon (both)</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch icon />
|
||||||
|
<Switch defaultChecked icon />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled icon />
|
||||||
|
<Switch defaultChecked disabled icon />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> With icon (selected)</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch icon selected />
|
||||||
|
<Switch defaultChecked icon selected />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2> Disabled </h2>
|
||||||
|
<Switch disabled icon selected />
|
||||||
|
<Switch defaultChecked disabled icon selected />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<h2 style={{ margin: 0 }}> With label</h2>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
gap: '2em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2> Default </h2>
|
||||||
|
<Switch icon labelPlacement={'left'} />
|
||||||
|
<Switch icon selected />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
77
app/page.tsx
77
app/page.tsx
|
|
@ -1,32 +1,83 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import testImage1 from './test-images/test-image-1.jpg';
|
||||||
import { Card } from '../src/primitive-components/card/card';
|
import { Card } from '../src/primitive-components/card/card';
|
||||||
|
import { Checkbox } from '../src/primitive-components/components';
|
||||||
|
import { CardBody } from '../src/primitive-components/card/card-body';
|
||||||
|
import { CardMedia } from '../src/primitive-components/card/card-media';
|
||||||
import { CardFooter } from '../src/primitive-components/card/card-footer';
|
import { CardFooter } from '../src/primitive-components/card/card-footer';
|
||||||
|
import { CardHeader } from '../src/primitive-components/card/card-header';
|
||||||
|
import { Typography } from '../src/primitive-components/typography/typography';
|
||||||
|
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
|
||||||
import { Slider } from '../src/primitive-components/input-components/slider/slider';
|
import { Slider } from '../src/primitive-components/input-components/slider/slider';
|
||||||
|
import { Button } from '../src/primitive-components/button-components/button/button';
|
||||||
|
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
|
||||||
|
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<main
|
<main>
|
||||||
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
maxHeight: '256px',
|
flexDirection: 'column',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
gap: '8px',
|
||||||
|
padding: '8px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Card
|
<div style={{ display: 'flex', gap: '8px', maxWidth: '768px' }}>
|
||||||
style={{
|
<Card variant={'outlined'}>
|
||||||
display: 'flex',
|
<CardHeader>
|
||||||
maxWidth: '256px',
|
<Typography.h3> Header-3 </Typography.h3>
|
||||||
minHeight: '256px',
|
</CardHeader>
|
||||||
alignItems: 'flex-end',
|
<CardActionArea>
|
||||||
justifyContent: 'center',
|
<CardMedia src={testImage1.src} type={'img'} />
|
||||||
}}
|
<CardBody>
|
||||||
variant={'outlined'}
|
<p>
|
||||||
>
|
Lorem ipsum dolor sit amet, consecrate
|
||||||
|
adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud
|
||||||
|
exercitation ullamco laboris nisi ut aliquip
|
||||||
|
ex ea commodo consequat. Duis aute irure
|
||||||
|
dolor in reprehenderit in voluptate velit
|
||||||
|
esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non
|
||||||
|
proident, sunt in culpa qui officia deserunt
|
||||||
|
mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
</CardBody>
|
||||||
|
</CardActionArea>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
|
<div className={'flex flex-row gap-3'}>
|
||||||
|
<Button icon={'add'}>Label 1</Button>
|
||||||
|
<Button icon={'add'} iconPlace={'right'}>
|
||||||
|
Label 2
|
||||||
|
</Button>
|
||||||
|
<SegmentedButtons toggled>
|
||||||
|
<SegmentButton
|
||||||
|
fillIcon={1}
|
||||||
|
icon={'change_history'}
|
||||||
|
>
|
||||||
|
Label 1
|
||||||
|
</SegmentButton>
|
||||||
|
<SegmentButton
|
||||||
|
fillIcon={1}
|
||||||
|
icon={'change_history'}
|
||||||
|
iconPlace={'right'}
|
||||||
|
>
|
||||||
|
Label 2
|
||||||
|
</SegmentButton>
|
||||||
|
<SegmentButton disabled>
|
||||||
|
Label 3
|
||||||
|
</SegmentButton>
|
||||||
|
</SegmentedButtons>
|
||||||
<Slider />
|
<Slider />
|
||||||
|
</div>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
|
|
@ -7,11 +7,11 @@ import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||||
import React, { forwardRef, useId, useRef, useState } from 'react';
|
import React, { forwardRef, useId, useRef, useState } from 'react';
|
||||||
|
|
||||||
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
||||||
({ centralRipple = false, ripple = true, ...props }, ref) => {
|
({ centralRipple = false, ...props }, ref) => {
|
||||||
const [isActive, setIsActive] = useState<boolean>(false),
|
const [isActive, setIsActive] = useState<boolean>(false),
|
||||||
ripplesRef = useRef(null),
|
ripplesRef = useRef(null),
|
||||||
buttonId = useId(),
|
buttonId = useId(),
|
||||||
events = useRippleEffect(ripplesRef, setIsActive, ripple);
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
const extraClassStyles =
|
const extraClassStyles =
|
||||||
`m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
|
`m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
|
||||||
|
|
@ -26,13 +26,11 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
{ripple && (
|
|
||||||
<RippleEffect
|
<RippleEffect
|
||||||
callback={setIsActive}
|
callback={setIsActive}
|
||||||
central={centralRipple}
|
central={centralRipple}
|
||||||
ref={ripplesRef}
|
ref={ripplesRef}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { forwardRef } from 'react';
|
import { forwardRef } from 'react';
|
||||||
import { ButtonProps } from './button.types';
|
import { ButtonProps } from './button.types';
|
||||||
import { bool, oneOf, string } from 'prop-types';
|
import { bool, oneOf, string } from 'prop-types';
|
||||||
import { IconWrapper } from '../../icon/icon-wrapper';
|
|
||||||
import { Typography } from '../../typography/typography';
|
|
||||||
import { ButtonLayout } from '../button-layout/button-layout';
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
|
import { IconWrapper } from '../../icon/icon-wrapper';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Button component
|
* Button component
|
||||||
|
|
@ -15,10 +14,9 @@ import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
(
|
(
|
||||||
{
|
{
|
||||||
ripple = true,
|
icon = undefined,
|
||||||
className = '',
|
className = '',
|
||||||
disabled = false,
|
disabled = false,
|
||||||
icon = undefined,
|
|
||||||
variant = 'filled',
|
variant = 'filled',
|
||||||
iconPlace = 'left',
|
iconPlace = 'left',
|
||||||
centralRipple = false,
|
centralRipple = false,
|
||||||
|
|
@ -29,19 +27,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
<ButtonLayout
|
<ButtonLayout
|
||||||
{...props}
|
{...props}
|
||||||
centralRipple={centralRipple}
|
centralRipple={centralRipple}
|
||||||
className={`m3-common-button ${variant} ${className}`.trimEnd()}
|
className={`${variant} ${className}`}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
ripple={ripple}
|
|
||||||
>
|
>
|
||||||
<IconWrapper icon={icon} iconPlace={iconPlace}>
|
<IconWrapper icon={icon} iconPlace={iconPlace}>
|
||||||
<Typography
|
<span className={'label-large'}>{props.children}</span>
|
||||||
className={'label-large'}
|
|
||||||
role={'label'}
|
|
||||||
size={'large'}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</Typography>
|
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
</ButtonLayout>
|
</ButtonLayout>
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ export interface ButtonMainProps {
|
||||||
icon?: string;
|
icon?: string;
|
||||||
children?: string;
|
children?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
iconPlace?: 'left' | 'right';
|
|
||||||
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
||||||
|
iconPlace?: 'left' | 'right';
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
|
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { FABProps } from './fab.types';
|
import { forwardRef } from 'react';
|
||||||
import { Icon } from '../../components';
|
import { Icon } from '../../components';
|
||||||
import React, { forwardRef } from 'react';
|
import { FABProps } from './fab.types';
|
||||||
import { bool, oneOf, string } from 'prop-types';
|
import { bool, oneOf, string } from 'prop-types';
|
||||||
import { Typography } from '../../typography/typography';
|
|
||||||
import { ButtonLayout } from '../button-layout/button-layout';
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -22,7 +21,6 @@ const sizes = {
|
||||||
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
||||||
(
|
(
|
||||||
{
|
{
|
||||||
children,
|
|
||||||
icon = 'edit',
|
icon = 'edit',
|
||||||
className = '',
|
className = '',
|
||||||
size = 'default',
|
size = 'default',
|
||||||
|
|
@ -45,13 +43,7 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
||||||
{icon}
|
{icon}
|
||||||
</Icon>
|
</Icon>
|
||||||
{size === 'extended' ? (
|
{size === 'extended' ? (
|
||||||
<Typography
|
<span className={'label-large'}>{props.children}</span>
|
||||||
className={'label-large'}
|
|
||||||
role={'label'}
|
|
||||||
size={'large'}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Typography>
|
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,7 @@
|
||||||
import { Icon } from '../../components';
|
import { Icon } from '../../components';
|
||||||
import { bool, oneOf, string } from 'prop-types';
|
import { bool, oneOf, string } from 'prop-types';
|
||||||
import { ButtonLayout } from '../button-layout/button-layout';
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
import React, {
|
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
||||||
forwardRef,
|
|
||||||
useImperativeHandle,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
|
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -46,7 +41,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||||
|
|
||||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
const callback = (event: React.MouseEvent<HTMLButtonElement>) => {
|
const callback = event => {
|
||||||
if (toggled) {
|
if (toggled) {
|
||||||
if (toggleIcon.state === 'selected') {
|
if (toggleIcon.state === 'selected') {
|
||||||
toggle('', toggled.unselected ?? 'add_circle');
|
toggle('', toggled.unselected ?? 'add_circle');
|
||||||
|
|
@ -72,9 +67,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
|
fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
|
||||||
iconSize={24}
|
iconSize={28}
|
||||||
svgSize={40}
|
svgSize={40}
|
||||||
type={'rounded'}
|
|
||||||
>
|
>
|
||||||
{toggled ? toggleIcon.icon : icon ? icon : undefined}
|
{toggled ? toggleIcon.icon : icon ? icon : undefined}
|
||||||
</Icon>
|
</Icon>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,12 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { string } from 'prop-types';
|
import { string } from 'prop-types';
|
||||||
import { Icon } from '../../components';
|
|
||||||
import React, { forwardRef, useState } from 'react';
|
import React, { forwardRef, useState } from 'react';
|
||||||
import { IconWrapper } from '../../icon/icon-wrapper';
|
import { IconWrapper } from '../../icon/icon-wrapper';
|
||||||
import { Typography } from '../../typography/typography';
|
|
||||||
import { SegmentedButton } from './segmented-buttons.types';
|
import { SegmentedButton } from './segmented-buttons.types';
|
||||||
import { ButtonLayout } from '../button-layout/button-layout';
|
import { ButtonLayout } from '../button-layout/button-layout';
|
||||||
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
||||||
|
|
||||||
/**
|
|
||||||
* Segment button
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const SegmentButton = forwardRef<
|
export const SegmentButton = forwardRef<
|
||||||
HTMLButtonElement,
|
HTMLButtonElement,
|
||||||
ButtonLayoutProps & SegmentedButton
|
ButtonLayoutProps & SegmentedButton
|
||||||
|
|
@ -25,10 +19,9 @@ export const SegmentButton = forwardRef<
|
||||||
weight,
|
weight,
|
||||||
svgSize,
|
svgSize,
|
||||||
fillIcon,
|
fillIcon,
|
||||||
children,
|
|
||||||
iconSize,
|
iconSize,
|
||||||
opticalSize,
|
opticalSize,
|
||||||
selectable = false,
|
toggled = false,
|
||||||
iconPlace = 'left',
|
iconPlace = 'left',
|
||||||
centralRipple = false,
|
centralRipple = false,
|
||||||
...props
|
...props
|
||||||
|
|
@ -39,21 +32,7 @@ export const SegmentButton = forwardRef<
|
||||||
const classes =
|
const classes =
|
||||||
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
|
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
|
||||||
|
|
||||||
const ButtonLabel = (
|
const _icon = selectedState && icon;
|
||||||
<Typography className={'label-large'} role={'label'} size={'large'}>
|
|
||||||
{children}
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
|
|
||||||
const iconProps = {
|
|
||||||
grade: grade,
|
|
||||||
fillIcon: fillIcon,
|
|
||||||
iconSize: iconSize,
|
|
||||||
opticalSize: opticalSize,
|
|
||||||
svgSize: svgSize,
|
|
||||||
type: type,
|
|
||||||
weight: weight,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ButtonLayout
|
<ButtonLayout
|
||||||
|
|
@ -61,26 +40,27 @@ export const SegmentButton = forwardRef<
|
||||||
centralRipple={centralRipple}
|
centralRipple={centralRipple}
|
||||||
className={classes}
|
className={classes}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (selectable) {
|
if (toggled) {
|
||||||
setSelectedState(state => !state);
|
setSelectedState(state => !state);
|
||||||
}
|
}
|
||||||
props.onClick?.apply(this, props.onClick.arguments);
|
props.onClick?.apply(this, props.onClick.arguments);
|
||||||
}}
|
}}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<span className={'m3 m3-button-segment-content-layer'}>
|
|
||||||
<IconWrapper
|
<IconWrapper
|
||||||
{...iconProps}
|
fillIcon={fillIcon}
|
||||||
icon={icon}
|
grade={grade}
|
||||||
|
icon={_icon}
|
||||||
iconPlace={iconPlace}
|
iconPlace={iconPlace}
|
||||||
|
iconSize={iconSize}
|
||||||
|
opticalSize={opticalSize}
|
||||||
|
svgSize={svgSize}
|
||||||
|
type={type}
|
||||||
|
weight={weight}
|
||||||
>
|
>
|
||||||
{ButtonLabel}
|
<span className={'label-large'}>{props.children}</span>
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
</span>
|
<span className={'m3 m3-button-segment-state-layer'} />
|
||||||
<span className={'m3 m3-button-segment-frame-layer'}>
|
|
||||||
{icon && selectable && <Icon {...iconProps}>{icon}</Icon>}
|
|
||||||
{ButtonLabel}
|
|
||||||
</span>
|
|
||||||
</ButtonLayout>
|
</ButtonLayout>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -7,26 +7,26 @@ import React, { cloneElement, forwardRef, ReactElement } from 'react';
|
||||||
export const SegmentedButtons = forwardRef<
|
export const SegmentedButtons = forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
SegmentedButtonsProps
|
SegmentedButtonsProps
|
||||||
>(({ selectable = false, density = 0, children, ...props }, ref) => {
|
>(({ toggled = false, children, ...props }, ref) => {
|
||||||
if (children.length <= 1 && children.length > 5) {
|
if (children.length <= 1) {
|
||||||
throw 'You must build segmented button with 2 or more buttons, but no more 5';
|
throw 'You must build segmented button with 2 or more button';
|
||||||
}
|
}
|
||||||
|
|
||||||
const extraClasses =
|
|
||||||
`m3 m3-segmented-buttons m3-density-${density} m3-button-segments-amount-${children.length} ${props.className ?? ''}`.trimEnd();
|
|
||||||
|
|
||||||
const SegmentedButtons: Array<ReactElement> = children.map(
|
const SegmentedButtons: Array<ReactElement> = children.map(
|
||||||
(Button: ReactElement, index: number) => {
|
(Button: ReactElement, index: number) => {
|
||||||
return cloneElement(<SegmentButton />, {
|
return cloneElement(<SegmentButton />, {
|
||||||
...Button.props,
|
...Button.props,
|
||||||
selectable: Button.props.selectable ?? selectable,
|
toggled: toggled,
|
||||||
key: index,
|
key: index,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={extraClasses} ref={ref}>
|
<div
|
||||||
|
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
{SegmentedButtons}
|
{SegmentedButtons}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
import { HTMLAttributes, ReactElement } from 'react';
|
import { HTMLAttributes, ReactElement } from 'react';
|
||||||
import { IconWrapperProps } from '../../icon/icon.types';
|
import { IconProps, IconWrapperProps } from '../../icon/icon.types';
|
||||||
|
|
||||||
export type SegmentedButton = IconWrapperProps & {
|
export type SegmentedButton = IconWrapperProps & {
|
||||||
icon?: string;
|
icon?: string;
|
||||||
selectable?: boolean;
|
toggled?: boolean;
|
||||||
centralRipple?: boolean;
|
centralRipple?: boolean;
|
||||||
|
children?: string | ReactElement<IconProps>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface SegmentedButtons {
|
export interface SegmentedButtons {
|
||||||
selectable?: boolean;
|
toggled?: boolean;
|
||||||
density?: 0 | -1 | -2 | -3;
|
|
||||||
children?: ReactElement<HTMLButtonElement>[];
|
children?: ReactElement<HTMLButtonElement>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,7 @@ export type IconWrapperProps = IconPlacement &
|
||||||
icon?: string;
|
icon?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type IconProps = SVGProps<SVGSVGElement> & GeneralIconProps;
|
export type IconProps = SVGProps<SVGSVGElement> &
|
||||||
|
GeneralIconProps & {
|
||||||
|
children?: string | undefined;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
import { bool } from 'prop-types';
|
import { bool } from 'prop-types';
|
||||||
import { CheckboxProps } from './checkbox.types';
|
import { CheckboxProps } from './checkbox.types';
|
||||||
import { RippleEffect } from '../../ripple/ripple-effect';
|
import { RippleEffect } from '../../ripple/ripple-effect';
|
||||||
import { InputLayout } from '../input-layout/input-layout';
|
|
||||||
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||||
|
import { InputLayout } from '../input-layout/input-layout';
|
||||||
import {
|
import {
|
||||||
forwardRef,
|
forwardRef,
|
||||||
useEffect,
|
useEffect,
|
||||||
|
|
@ -19,7 +19,7 @@ import {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||||
({ centralRipple = true, ...props }, ref) => {
|
({ centralRipple, ...props }, ref) => {
|
||||||
const [isActive, setIsActive] = useState<boolean>(false),
|
const [isActive, setIsActive] = useState<boolean>(false),
|
||||||
[checked, setChecked] = useState<boolean>(props.checked ?? false),
|
[checked, setChecked] = useState<boolean>(props.checked ?? false),
|
||||||
ripplesRef = useRef(null),
|
ripplesRef = useRef(null),
|
||||||
|
|
@ -27,7 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||||
events = useRippleEffect(ripplesRef, setIsActive);
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
const extraClassStyles =
|
const extraClassStyles =
|
||||||
`m3 m3-checkbox-container ${isActive === true ? 'visible' : ''}`.trimEnd();
|
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
|
||||||
|
|
||||||
useImperativeHandle(ref, () => checkboxRef.current);
|
useImperativeHandle(ref, () => checkboxRef.current);
|
||||||
|
|
||||||
|
|
@ -36,7 +36,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||||
}, [checkboxRef.current?.checked]);
|
}, [checkboxRef.current?.checked]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...events} className={extraClassStyles}>
|
<label {...events} className={extraClassStyles}>
|
||||||
<InputLayout
|
<InputLayout
|
||||||
{...props}
|
{...props}
|
||||||
indeterminate={props.indeterminate}
|
indeterminate={props.indeterminate}
|
||||||
|
|
@ -51,7 +51,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||||
className={'m3-checkbox-ripple-layer'}
|
className={'m3-checkbox-ripple-layer'}
|
||||||
ref={ripplesRef}
|
ref={ripplesRef}
|
||||||
/>
|
/>
|
||||||
</div>
|
{props.children}
|
||||||
|
</label>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -6,3 +6,7 @@ export interface InputLayoutProps
|
||||||
typeInput?: string;
|
typeInput?: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface LabelPlacement {
|
||||||
|
labelPlacement?: 'left' | 'right';
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
|
||||||
events = useRippleEffect(ripplesRef, setIsActive);
|
events = useRippleEffect(ripplesRef, setIsActive);
|
||||||
|
|
||||||
const extraClassStyles =
|
const extraClassStyles =
|
||||||
`m3 m3-radio-container ${isActive === true ? 'visible' : ''}`.trimEnd();
|
`m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...events} className={extraClassStyles}>
|
<div {...events} className={extraClassStyles}>
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,16 @@
|
||||||
'use client';
|
import React, { forwardRef, HTMLAttributes } from 'react';
|
||||||
|
|
||||||
import { Typography } from '../../typography/typography';
|
|
||||||
import { InputLayout } from '../input-layout/input-layout';
|
import { InputLayout } from '../input-layout/input-layout';
|
||||||
import React, {
|
|
||||||
ChangeEvent,
|
|
||||||
forwardRef,
|
|
||||||
HTMLProps,
|
|
||||||
InputHTMLAttributes,
|
|
||||||
useId,
|
|
||||||
useLayoutEffect,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
|
|
||||||
interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
||||||
options?: number[];
|
|
||||||
}
|
|
||||||
|
|
||||||
function fractionCalc(current: number | string, max: number | string): number {
|
|
||||||
const _current = isNaN(parseInt(current as string))
|
|
||||||
? 50
|
|
||||||
: parseInt(current as string);
|
|
||||||
const _max = isNaN(parseInt(max as string)) ? 100 : parseInt(max as string);
|
|
||||||
|
|
||||||
return (_current / _max) * 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
function gradientStyle(value: number): string {
|
|
||||||
return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setWebkitProgressSlider(
|
|
||||||
element: SliderProps | HTMLProps<HTMLInputElement>,
|
|
||||||
isChrome: boolean,
|
|
||||||
) {
|
|
||||||
if (isChrome) {
|
|
||||||
const initialFraction = fractionCalc(
|
|
||||||
(element.value as string) ?? (element.defaultValue as string),
|
|
||||||
element.max as string,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (element.style === undefined) {
|
|
||||||
element.style = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
element.style.background = gradientStyle(initialFraction);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
|
|
||||||
({ options, ...props }, ref) => {
|
|
||||||
const sliderId = useId();
|
|
||||||
const isChrome = useRef<boolean>(
|
|
||||||
navigator.userAgent.indexOf('AppleWebKit') != -1,
|
|
||||||
);
|
|
||||||
const [value, setValue] = useState(props.defaultValue ?? 50);
|
|
||||||
const [mounted, setMounted] = useState<boolean>(false);
|
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!mounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setWebkitProgressSlider(props, isChrome.current);
|
|
||||||
|
|
||||||
|
export const Slider = forwardRef<
|
||||||
|
HTMLInputElement,
|
||||||
|
HTMLAttributes<HTMLInputElement>
|
||||||
|
>((props, ref) => {
|
||||||
return (
|
return (
|
||||||
<div className={'m3 m3-slider-container'}>
|
|
||||||
<InputLayout
|
<InputLayout
|
||||||
{...props}
|
|
||||||
className={props.className}
|
className={props.className}
|
||||||
list={sliderId}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
props.onChange?.apply(this, props?.onChange?.prototype);
|
|
||||||
setValue(event.target.value);
|
|
||||||
setWebkitProgressSlider(
|
|
||||||
event.target as unknown as HTMLProps<HTMLInputElement>,
|
|
||||||
isChrome.current,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
style={{
|
|
||||||
...props.style,
|
|
||||||
background: `linear-gradient(to right, var(--md-sys-color-primary) ${progress}%, var(--md-sys-color-surface-container-highest) ${progress}%)`,
|
|
||||||
}}
|
|
||||||
type={'range'}
|
type={'range'}
|
||||||
typeInput={'slider'}
|
typeInput={'slider'}
|
||||||
/>
|
/>
|
||||||
{options && (
|
|
||||||
<datalist id={sliderId}>
|
|
||||||
{options.map((option, index) => (
|
|
||||||
<option key={index} value={option} />
|
|
||||||
))}
|
|
||||||
</datalist>
|
|
||||||
)}
|
|
||||||
<div className={'m3 m3-slider-label'}>
|
|
||||||
<Typography role={'label'} size={'small'}>
|
|
||||||
{value}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,17 @@ import { bool } from 'prop-types';
|
||||||
import React, { forwardRef } from 'react';
|
import React, { forwardRef } from 'react';
|
||||||
import { SwitchMainProps } from './switch.types';
|
import { SwitchMainProps } from './switch.types';
|
||||||
import { InputLayout } from '../input-layout/input-layout';
|
import { InputLayout } from '../input-layout/input-layout';
|
||||||
|
import { LabelPlacement } from '../input-layout/input-layout.types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Switch component
|
* Switch component
|
||||||
** description
|
** description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
|
export const Switch = forwardRef<
|
||||||
({ icon, selected = false, ...props }, ref) => (
|
HTMLInputElement,
|
||||||
<>
|
SwitchMainProps & LabelPlacement
|
||||||
|
>(({ icon, selected = false, ...props }, ref) => (
|
||||||
<div className={'m3 m3-switch'}>
|
<div className={'m3 m3-switch'}>
|
||||||
<InputLayout
|
<InputLayout
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -26,19 +28,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
|
||||||
<circle className={'m3 m3-switch-handler-state-layer'} />
|
<circle className={'m3 m3-switch-handler-state-layer'} />
|
||||||
<g>
|
<g>
|
||||||
{icon && !selected && (
|
{icon && !selected && (
|
||||||
<text className={'m3 m3-icon-unchecked'}>
|
<text className={'m3 m3-icon-unchecked'}>close</text>
|
||||||
close
|
|
||||||
</text>
|
|
||||||
)}
|
|
||||||
{icon && (
|
|
||||||
<text className={'m3 m3-icon-checked'}>check</text>
|
|
||||||
)}
|
)}
|
||||||
|
{icon && <text className={'m3 m3-icon-checked'}>check</text>}
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</>
|
));
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
Switch.propTypes = {
|
Switch.propTypes = {
|
||||||
icon: bool,
|
icon: bool,
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import { baseDOMRect, RippleContainer } from '../ripple.types';
|
||||||
import isEmpty, { rippleSizeCalculator } from '../utils/utils';
|
import isEmpty, { rippleSizeCalculator } from '../utils/utils';
|
||||||
import { InteractionEventsType } from './useRippleEffect';
|
import { InteractionEventsType } from './useRippleEffect';
|
||||||
|
|
||||||
const RIPPLE_LIFETIME: number = 55000;
|
const RIPPLE_LIFETIME: number = 550;
|
||||||
const DEBOUNCE: number = 50;
|
const DEBOUNCE: number = 50;
|
||||||
|
|
||||||
const UseRippleBuilder = (
|
const UseRippleBuilder = (
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,12 @@ const Ripple = ({
|
||||||
rippleKey,
|
rippleKey,
|
||||||
endLifetime,
|
endLifetime,
|
||||||
}: RippleProps) => {
|
}: RippleProps) => {
|
||||||
const [classes, setClasses] = useState<string>('m3 m3-ripple visible');
|
const [classes, setClasses] = useState<string>('m3 ripple visible');
|
||||||
const rippleDomainContext = useContext(rippleAreaContext);
|
const rippleDomainContext = useContext(rippleAreaContext);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (endLifetime && !rippleDomainContext) {
|
if (endLifetime && !rippleDomainContext) {
|
||||||
setClasses('m3 m3-ripple');
|
setClasses('m3 ripple');
|
||||||
setTimeout(() => endLifetime(rippleKey), lifetime);
|
setTimeout(() => endLifetime(rippleKey), lifetime);
|
||||||
}
|
}
|
||||||
}, [rippleDomainContext]);
|
}, [rippleDomainContext]);
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,6 @@ export interface RippleContainer {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
|
export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
|
||||||
ripple?: boolean;
|
|
||||||
centralRipple?: boolean;
|
centralRipple?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,76 @@
|
||||||
import { createElement, forwardRef } from 'react';
|
import { forwardRef, HTMLAttributes } from 'react';
|
||||||
import { getTypographyRole } from './utils/get-typography-role';
|
|
||||||
import {
|
|
||||||
TypographyProps,
|
|
||||||
Typography as TypographyTargetRef,
|
|
||||||
} from './typography.types';
|
|
||||||
|
|
||||||
export const Typography = forwardRef<TypographyTargetRef, TypographyProps>(
|
export const Typography = {
|
||||||
({ size, role, children, ...props }, ref) => {
|
h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
const typeElement = getTypographyRole(role, size);
|
(props, ref) => {
|
||||||
|
return (
|
||||||
const extraClasses =
|
<h1
|
||||||
`m3 m3-typography ${size && role ? `${role}-${size}` : ''}`.trimEnd();
|
className={`m3 m3-typography display-hero ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
return createElement(
|
>
|
||||||
typeElement,
|
{props.children}
|
||||||
{
|
</h1>
|
||||||
...props,
|
|
||||||
ref: ref,
|
|
||||||
className: extraClasses,
|
|
||||||
},
|
|
||||||
children,
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
),
|
||||||
|
h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
(props, ref) => {
|
||||||
|
return (
|
||||||
|
<h2
|
||||||
|
className={`m3 m3-typography display-large ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h2>
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
(props, ref) => {
|
||||||
|
return (
|
||||||
|
<h3
|
||||||
|
className={`m3 m3-typography headline-medium ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h3>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
(props, ref) => {
|
||||||
|
return (
|
||||||
|
<h4
|
||||||
|
className={`m3 m3-typography headline-small ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h4>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
(props, ref) => {
|
||||||
|
return (
|
||||||
|
<h5
|
||||||
|
className={`m3 m3-typography title-medium ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
(props, ref) => {
|
||||||
|
return (
|
||||||
|
<h6
|
||||||
|
className={`m3 m3-typography title-small ${props.className}`}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h6>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { HTMLAttributes } from 'react';
|
|
||||||
|
|
||||||
export type Typography =
|
|
||||||
| HTMLLabelElement
|
|
||||||
| HTMLHeadingElement
|
|
||||||
| HTMLSpanElement
|
|
||||||
| HTMLParagraphElement;
|
|
||||||
|
|
||||||
export type TypographySize = 'hero' | 'xl' | 'small' | 'medium' | 'large';
|
|
||||||
|
|
||||||
export type TypographyRole =
|
|
||||||
| 'display'
|
|
||||||
| 'headline'
|
|
||||||
| 'title'
|
|
||||||
| 'body'
|
|
||||||
| 'label';
|
|
||||||
|
|
||||||
export interface TypographyProps extends HTMLAttributes<Typography> {
|
|
||||||
size: TypographySize;
|
|
||||||
role: TypographyRole;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
import { TypographyRole, TypographySize } from '../typography.types';
|
|
||||||
|
|
||||||
export function getTypographyRole(role: TypographyRole, size: TypographySize) {
|
|
||||||
switch (role) {
|
|
||||||
case 'display':
|
|
||||||
return 'h1';
|
|
||||||
case 'headline':
|
|
||||||
switch (size) {
|
|
||||||
case 'large' || 'hero' || 'xl':
|
|
||||||
return 'h2';
|
|
||||||
case 'medium':
|
|
||||||
return 'h3';
|
|
||||||
case 'small':
|
|
||||||
return 'h4';
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'title':
|
|
||||||
switch (size) {
|
|
||||||
case 'large' || 'hero' || 'xl':
|
|
||||||
return 'h4';
|
|
||||||
case 'medium':
|
|
||||||
return 'h5';
|
|
||||||
case 'small':
|
|
||||||
return 'h6';
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'body':
|
|
||||||
return 'p';
|
|
||||||
case 'label':
|
|
||||||
return 'label';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,25 +1,25 @@
|
||||||
svg.m3.m3-badge
|
svg.m3.m3-badge
|
||||||
position: absolute
|
position: absolute
|
||||||
background-color: $error
|
background-color: var(--md-sys-color-error)
|
||||||
|
|
||||||
&.disable-value
|
&.disable-value
|
||||||
padding: 0
|
padding: 0
|
||||||
width: 6px
|
|
||||||
height: 6px
|
height: 6px
|
||||||
|
width: 6px
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
|
|
||||||
& > text
|
& > text
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
&
|
&
|
||||||
height: 16px
|
|
||||||
border-radius: 8px
|
border-radius: 8px
|
||||||
|
height: 16px
|
||||||
|
|
||||||
& > text
|
& > text
|
||||||
@include center(flex)
|
fill: var(--md-sys-color-on-error)
|
||||||
@include m3-typography-mixin('label-small')
|
font-size: var(--md-sys-typescale-label-small-font-size)
|
||||||
|
font-weight: var(--md-sys-typescale-label-small-font-weight)
|
||||||
fill: $on-error
|
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||||
text-anchor: middle
|
|
||||||
font-optical-sizing: none
|
font-optical-sizing: none
|
||||||
alignment-baseline: central
|
alignment-baseline: central
|
||||||
|
text-anchor: middle
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
|
|
||||||
|
|
@ -70,13 +70,13 @@ button:not(.m3-fab, .m3-icon-button)::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||||
}
|
}
|
||||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,85 @@
|
||||||
button.m3.m3-common-button
|
input[type="button"].test-button
|
||||||
|
color: white
|
||||||
|
&:not(:checked)
|
||||||
|
background-color: green
|
||||||
|
&:checked
|
||||||
|
background-color: blue
|
||||||
|
|
||||||
|
button:not(.m3-fab, .m3-icon-button)
|
||||||
|
width: min-content
|
||||||
|
height: min-content
|
||||||
|
max-height: 40px
|
||||||
|
box-sizing: border-box
|
||||||
|
white-space: nowrap
|
||||||
|
font-size: var(--md-sys-typescale-label-large-font-size)
|
||||||
|
font-weight: var(--md-sys-typescale-label-large-font-weight)
|
||||||
|
line-height: var(--md-sys-typescale-label-large-line-height)
|
||||||
|
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||||
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
|
||||||
|
&.m3
|
||||||
|
gap: 8px
|
||||||
|
border: none
|
||||||
|
contain: content
|
||||||
|
text-align: center
|
||||||
|
padding: 10px 24px
|
||||||
|
align-items: center
|
||||||
|
flex-direction: row
|
||||||
|
display: inline-flex
|
||||||
|
border-radius: 100px
|
||||||
|
box-sizing: border-box
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
&.filled
|
&.filled
|
||||||
background-color: $primary
|
background-color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&, & > svg.m3-svg-icon
|
&, & > svg.m3-svg-icon
|
||||||
fill: $on-primary
|
fill: var(--md-sys-color-on-primary)
|
||||||
color: $on-primary
|
color: var(--md-sys-color-on-primary)
|
||||||
|
|
||||||
&.outlined
|
&.outlined
|
||||||
color: $primary
|
|
||||||
outline-offset: -1px
|
outline-offset: -1px
|
||||||
background-color: transparent
|
background-color: #00000000
|
||||||
outline: 1px solid $outline !important
|
color: var(--md-sys-color-primary)
|
||||||
|
outline: 1px solid var(--md-sys-color-outline) !important
|
||||||
|
|
||||||
& > svg.m3-svg-icon
|
& > svg.m3-svg-icon
|
||||||
fill: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&.text
|
&.text
|
||||||
color: $primary
|
background-color: #00000000
|
||||||
background-color: transparent
|
padding: 10px 12px !important
|
||||||
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
& > svg.m3-svg-icon
|
& > svg.m3-svg-icon
|
||||||
fill: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&.elevated
|
&.elevated
|
||||||
@include elevation-1(false)
|
@include elevation-1(false)
|
||||||
|
color: var(--md-sys-color-primary)
|
||||||
color: $primary
|
background-color: var(--md-sys-color-surface-container-low)
|
||||||
background-color: $surface-container-low
|
|
||||||
|
|
||||||
& > svg.m3-svg-icon
|
& > svg.m3-svg-icon
|
||||||
fill: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&.tonal
|
&.tonal
|
||||||
color: $on-secondary-container
|
color: var(--md-sys-color-on-secondary-container)
|
||||||
background-color: $secondary-container
|
background-color: var(--md-sys-color-secondary-container)
|
||||||
|
|
||||||
& > svg.m3-svg-icon
|
& > svg.m3-svg-icon
|
||||||
fill: $on-secondary-container
|
fill: var(--md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
&.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
&::before
|
||||||
background: color-mix(in srgb, $on-primary 12%, transparent)
|
@include state-layer
|
||||||
|
|
||||||
|
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
|
||||||
&:is(.outlined, .text, .elevated)
|
&:is(.outlined, .text, .elevated)
|
||||||
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
& > .m3.m3-ripple-domain > .m3.ripple
|
||||||
background: color-mix(in srgb, $primary 12%, transparent)
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
&.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
||||||
background: color-mix(in srgb, $on-secondary-container 12%, transparent)
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
&:is(.filled, .tonal)
|
&:is(.filled, .tonal)
|
||||||
|
|
@ -56,31 +88,21 @@ button.m3.m3-common-button
|
||||||
&.elevated
|
&.elevated
|
||||||
@include elevation-1(true)
|
@include elevation-1(true)
|
||||||
|
|
||||||
&:not(&:has(span.m3.m3-ripple-domain))
|
&.tonal::before
|
||||||
&.outlined
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
border-color: $primary !important
|
|
||||||
|
|
||||||
&.filled
|
|
||||||
background-color: color-mix(in srgb, $on-primary 20%, $primary)
|
|
||||||
|
|
||||||
&:is(.outlined, .text, .elevated)
|
|
||||||
background-color: color-mix(in srgb, $primary 20%, transparent)
|
|
||||||
|
|
||||||
&.tonal
|
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 20%, $secondary-container)
|
|
||||||
|
|
||||||
&:focus-visible
|
&:focus-visible
|
||||||
&.outlined
|
&.outlined
|
||||||
border-color: $primary !important
|
border-color: var(--md-sys-color-primary) !important
|
||||||
|
|
||||||
&.filled
|
&.filled::before
|
||||||
background-color: color-mix(in srgb, $on-primary 12%, $primary)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
|
||||||
&:is(.outlined, .text, .elevated)
|
&:is(.outlined, .text, .elevated)::before
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
&.tonal
|
&.tonal::before
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 12%, $secondary-container)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:is(.filled, .tonal)
|
&:is(.filled, .tonal)
|
||||||
|
|
@ -89,26 +111,26 @@ button.m3.m3-common-button
|
||||||
&.elevated
|
&.elevated
|
||||||
@include elevation-2(false)
|
@include elevation-2(false)
|
||||||
|
|
||||||
&.filled
|
&.filled::before
|
||||||
background-color: color-mix(in srgb, $on-primary 8%, $primary)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||||
|
|
||||||
&:is(.outlined, .text, .elevated)
|
&:is(.outlined, .text, .elevated)::before
|
||||||
background-color: color-mix(in srgb, $primary 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
&.tonal
|
&.tonal::before
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 8%, $secondary-container)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
|
||||||
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
||||||
color: color-mix(in srgb, $on-surface 38%, transparent)
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||||
|
|
||||||
&:is(.filled, .elevated, .tonal)
|
&:is(.filled, .elevated, .tonal)
|
||||||
background: color-mix(in srgb, $on-surface 12%, transparent)
|
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
||||||
&.elevated
|
&.elevated
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
|
||||||
&.outlined
|
&.outlined
|
||||||
outline: 1px solid color-mix(in srgb, $on-surface 12%, transparent) !important
|
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,34 @@
|
||||||
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
|
|
||||||
width: $width
|
|
||||||
height: $height
|
|
||||||
padding: $padding
|
|
||||||
border-radius: $b-radius
|
|
||||||
|
|
||||||
@mixin m3-fab-colors-palette($bg-color, $color)
|
|
||||||
&:not(.without-elevation)
|
|
||||||
@include elevation-3(false)
|
|
||||||
|
|
||||||
color: $color
|
|
||||||
background-color: $bg-color
|
|
||||||
|
|
||||||
& > svg.m3-svg-icon
|
|
||||||
fill: $color
|
|
||||||
|
|
||||||
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
||||||
background: color-mix(in srgb, $color 12%, transparent)
|
|
||||||
|
|
||||||
&:not(&:has(span.m3.m3-ripple-domain)):active
|
|
||||||
&::before
|
|
||||||
background: color-mix(in srgb, $color 20%, transparent)
|
|
||||||
|
|
||||||
|
|
||||||
button.m3.m3-fab
|
button.m3.m3-fab
|
||||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
|
||||||
& > span.m3-icon
|
& > span.m3-icon
|
||||||
font-family: Material-Symbols-Rounded-Regular, sans-serif
|
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||||
|
|
||||||
&.m3
|
&.m3
|
||||||
gap: 12px
|
|
||||||
border: none
|
|
||||||
contain: content
|
contain: content
|
||||||
text-align: center
|
|
||||||
align-items: center
|
|
||||||
flex-direction: row
|
|
||||||
display: inline-flex
|
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
|
display: inline-flex
|
||||||
|
flex-direction: row
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
text-align: center
|
||||||
|
border: none
|
||||||
|
gap: 12px
|
||||||
|
|
||||||
&::before
|
&::before
|
||||||
@include m3-buttons-state-layer-mixin
|
@include state-layer
|
||||||
|
|
||||||
content: ""
|
|
||||||
|
|
||||||
&.surface
|
&.surface
|
||||||
@include m3-fab-colors-palette($surface-container-high, $primary)
|
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
||||||
|
|
||||||
&.primary
|
&.primary
|
||||||
@include m3-fab-colors-palette($primary-container, $on-primary-container)
|
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
|
||||||
|
|
||||||
&.secondary
|
&.secondary
|
||||||
@include m3-fab-colors-palette($secondary-container, $on-secondary-container)
|
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
&.tertiary
|
&.tertiary
|
||||||
@include m3-fab-colors-palette($tertiary-container, $on-tertiary-container)
|
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
|
||||||
|
|
||||||
&.m3-small-fab
|
&.m3-small-fab
|
||||||
@include m3-fab-default(12px, 40px, 40px, 11px)
|
@include m3-fab-default(12px, 40px, 40px, 11px)
|
||||||
|
|
@ -79,27 +53,27 @@ button.m3.m3-fab
|
||||||
@include elevation-3(true)
|
@include elevation-3(true)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&.surface:before
|
&.surface::before
|
||||||
background-color: color-mix(in srgb, $primary 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
&.primary:before
|
&.primary::before
|
||||||
background-color: color-mix(in srgb, $on-primary-container 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
||||||
|
|
||||||
&.secondary:before
|
&.secondary::before
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
|
||||||
&.tertiary:before
|
&.tertiary::before
|
||||||
background-color: color-mix(in srgb, $on-tertiary-container 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
||||||
|
|
||||||
&:focus-visible
|
&:focus-visible
|
||||||
&.surface:before
|
&.surface::before
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
&.primary:before
|
&.primary::before
|
||||||
background-color: color-mix(in srgb, $on-primary-container 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
||||||
|
|
||||||
&.secondary:before
|
&.secondary::before
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
&.tertiary:before
|
&.tertiary::before
|
||||||
background-color: color-mix(in srgb, $on-tertiary-container 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
|
||||||
|
|
@ -79,25 +79,25 @@ button.m3.m3-icon-button.outlined.selected.toggled {
|
||||||
background-color: var(--md-sys-color-inverse-surface);
|
background-color: var(--md-sys-color-inverse-surface);
|
||||||
fill: var(--md-sys-color-inverse-on-surface);
|
fill: var(--md-sys-color-inverse-on-surface);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.m3-ripple {
|
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
}
|
}
|
||||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,16 @@
|
||||||
@mixin m3-icon-button-state-colors($opacity)
|
|
||||||
&:is(.default, .outlined)::before
|
|
||||||
background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
|
|
||||||
|
|
||||||
&.outlined.selected.toggled::before
|
|
||||||
background-color: color-mix(in srgb, $inverse-on-surface $opacity, transparent)
|
|
||||||
|
|
||||||
&.filled::before,
|
|
||||||
&.filled.selected.toggled::before
|
|
||||||
background-color: color-mix(in srgb, $on-primary $opacity, transparent)
|
|
||||||
|
|
||||||
&.filled:not(.selected).toggled::before,
|
|
||||||
&.default.selected.toggled::before
|
|
||||||
background-color: color-mix(in srgb, $primary $opacity, transparent)
|
|
||||||
|
|
||||||
&.tonal::before,
|
|
||||||
&.tonal.selected.toggled::before
|
|
||||||
background-color: color-mix(in srgb, $on-secondary-container $opacity, transparent)
|
|
||||||
|
|
||||||
&.tonal.toggled::before
|
|
||||||
background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
|
|
||||||
|
|
||||||
@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
|
|
||||||
@if $border != none
|
|
||||||
@if $border == transparent
|
|
||||||
border: 0 solid transparent
|
|
||||||
@else
|
|
||||||
border: 1px solid color-mix(in srgb, $border $border-opacity, transparent)
|
|
||||||
|
|
||||||
@if $fill != none
|
|
||||||
@if $fill == transparent
|
|
||||||
fill: $fill
|
|
||||||
@else
|
|
||||||
fill: color-mix(in srgb, $fill $fill-opacity, transparent)
|
|
||||||
|
|
||||||
@if $background != none
|
|
||||||
@if $background == transparent
|
|
||||||
background-color: $background
|
|
||||||
@else
|
|
||||||
background-color: color-mix(in srgb, $background $background-opacity, transparent)
|
|
||||||
|
|
||||||
|
|
||||||
button.m3.m3-icon-button
|
button.m3.m3-icon-button
|
||||||
@include center(inline-flex)
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
|
||||||
padding: 0
|
|
||||||
width: 40px
|
|
||||||
height: 40px
|
|
||||||
border: none
|
|
||||||
contain: content
|
contain: content
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
position: relative
|
position: relative
|
||||||
|
display: inline-flex
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
border: none
|
||||||
|
padding: 0
|
||||||
|
|
||||||
&::before
|
&::before
|
||||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
|
@ -62,80 +21,114 @@ button.m3.m3-icon-button
|
||||||
|
|
||||||
& > span.m3-icon
|
& > span.m3-icon
|
||||||
z-index: 25
|
z-index: 25
|
||||||
font-size: 24px
|
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
|
||||||
|
|
||||||
&.default
|
&.default
|
||||||
&, &:not(.selected).toggled
|
&
|
||||||
@include m3-icon-color-palette(none, none, $on-surface-variant, 100%, transparent, 0%)
|
fill: var(--md-sys-color-on-surface-variant)
|
||||||
|
background-color: #00000000
|
||||||
|
|
||||||
|
&:disabled, &.selected:disabled, &.selected.toggled:disabled
|
||||||
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
|
||||||
|
background-color: #00000000
|
||||||
|
|
||||||
&.selected.toggled
|
&.selected.toggled
|
||||||
@include m3-icon-color-palette(none, none, $primary, 100%, transparent, 0%)
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:disabled,
|
|
||||||
&.selected:disabled,
|
|
||||||
&.selected.toggled:disabled
|
|
||||||
@include m3-icon-color-palette(none, none, $on-surface-variant, 38%, transparent, 0%)
|
|
||||||
|
|
||||||
&.filled
|
&.filled
|
||||||
&
|
&
|
||||||
@include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
|
fill: var(--md-sys-color-on-primary)
|
||||||
|
background-color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:not(.selected).toggled
|
&.toggled
|
||||||
@include m3-icon-color-palette(none, none, $primary, 100%, $surface-container-highest, 100%)
|
fill: var(--md-sys-color-primary)
|
||||||
|
background-color: var(--md-sys-color-surface-container-highest)
|
||||||
|
|
||||||
&.selected.toggled
|
&.selected.toggled
|
||||||
@include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
|
fill: var(--md-sys-color-on-primary)
|
||||||
|
background-color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&.tonal
|
&.tonal
|
||||||
&:not(.selected).toggled
|
&.toggled
|
||||||
@include m3-icon-color-palette(none, none, $on-surface-variant, 100%, $surface-container-highest, 100%)
|
fill: var(--md-sys-color-on-surface-variant)
|
||||||
|
background-color: var(--md-sys-color-surface-container-highest)
|
||||||
|
|
||||||
&.selected.toggled, &
|
&.selected.toggled, &
|
||||||
@include m3-icon-color-palette(none, none, $on-secondary-container, 100%, $secondary-container, 100%)
|
fill: var(--md-sys-color-on-secondary-container)
|
||||||
|
background-color: var(--md-sys-color-secondary-container)
|
||||||
|
|
||||||
&:is(.tonal, .filled, .toggled.selected):disabled
|
&:is(.tonal, .filled, .toggled.selected):disabled
|
||||||
@include m3-icon-color-palette(none, none, $on-surface, 38%, $on-surface, 12%)
|
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)
|
||||||
|
|
||||||
&.outlined
|
&.outlined
|
||||||
&
|
&
|
||||||
@include m3-icon-color-palette($outline, 100%, $on-surface-variant, 100%, transparent, 0%)
|
border: 1px solid var(--md-sys-color-outline)
|
||||||
|
fill: var(--md-sys-color-on-surface-variant)
|
||||||
&.selected.toggled
|
background-color: #00000000
|
||||||
@include m3-icon-color-palette(transparent, 0%, $inverse-on-surface, 100%, $inverse-surface, 100%)
|
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
@include m3-icon-color-palette($outline, 12%, $on-surface-variant, 38%, transparent, 0%)
|
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: #00000000
|
||||||
|
|
||||||
&.selected.toggled:disabled
|
&.toggled.selected:disabled
|
||||||
@include m3-icon-color-palette(none, 0%, $on-surface, 38%, $on-surface, 12%)
|
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)
|
||||||
|
|
||||||
|
&.selected.toggled
|
||||||
|
border: 1px solid #00000000
|
||||||
|
background-color: var(--md-sys-color-inverse-surface)
|
||||||
|
fill: var(--md-sys-color-inverse-on-surface)
|
||||||
|
|
||||||
&.filled:not(:disabled)
|
&.filled:not(:disabled)
|
||||||
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
background-color: color-mix(in srgb, $on-primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
|
||||||
|
|
||||||
&:is(.outlined, .default):not(:disabled)
|
&:is(.outlined, .default):not(:disabled)
|
||||||
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
& > .m3.m3-ripple-domain > .m3.ripple
|
||||||
background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||||
|
|
||||||
&:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
&:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
&:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
&:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||||||
background-color: color-mix(in srgb, $inverse-on-surface 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
|
||||||
|
|
||||||
&.tonal:not(:disabled)
|
&.tonal:not(:disabled)
|
||||||
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||||
background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
|
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
@include m3-icon-button-state-colors(8%)
|
&:is(.default, .outlined)::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||||||
|
|
||||||
&:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain)))
|
&.filled::before, &.filled.toggled.selected::before
|
||||||
@include m3-icon-button-state-colors(12%)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||||
|
&.filled.toggled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
|
&.tonal::before, &.tonal.toggled.selected::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
&.tonal.toggled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||||||
|
|
||||||
|
&:focus-visible:not(:disabled)
|
||||||
|
&:is(.default, .outlined)::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||||
|
|
||||||
|
&.filled::before, &.filled.toggled.selected::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||||
|
&.filled.toggled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
|
||||||
|
&.tonal::before, &.tonal.toggled.selected::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
&.tonal.toggled::before
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,65 @@
|
||||||
$densities: [0, -1, -2, -3]
|
div.m3.m3-segmented-buttons
|
||||||
|
padding: 0
|
||||||
@each $density in $densities
|
height: 40px
|
||||||
.m3.m3-density-#{$density}
|
display: flex
|
||||||
$height: 40px + ($density * 4px)
|
flex-direction: row
|
||||||
|
border-radius: 20px
|
||||||
|
box-sizing: border-box
|
||||||
|
border-collapse: collapse
|
||||||
|
|
||||||
& > button.m3.m3-button-segment
|
& > button.m3.m3-button-segment
|
||||||
height: $height
|
height: 40px
|
||||||
|
display: flex
|
||||||
|
min-width: 108px
|
||||||
|
border-radius: 0
|
||||||
|
width: max-content
|
||||||
|
padding-inline: 10px
|
||||||
|
margin: 0 -0.5px 0 -0.5px
|
||||||
|
background-color: transparent
|
||||||
|
border: 1px solid var(--md-sys-color-outline)
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
border-radius: ($height / 2) 0 0 ($height / 2)
|
border-radius: 20px 0 0 20px
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-radius: 0 ($height / 2) ($height / 2) 0
|
border-radius: 0 20px 20px 0
|
||||||
|
|
||||||
padding: 10px + ($density * 2px) 12px
|
& > span
|
||||||
|
color: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
@mixin m3-segmented-button-content-color-mixin($color)
|
& > svg > text
|
||||||
& > svg.m3.m3-svg-icon > text
|
fill: var(--md-sys-color-on-surface)
|
||||||
fill: $color
|
|
||||||
|
|
||||||
& > label.m3.m3-typography
|
|
||||||
color: $color
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
div.m3.m3-segmented-buttons
|
|
||||||
width: 100%
|
|
||||||
padding: 4px 0
|
|
||||||
border-radius: 20px
|
|
||||||
display: inline-flex
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
& > button.m3.m3-button-segment
|
|
||||||
width: 100%
|
|
||||||
min-width: 48px
|
|
||||||
border-radius: 0
|
|
||||||
margin: 0 -0.5px
|
|
||||||
display: inline-flex
|
|
||||||
border: 1px solid $outline
|
|
||||||
background-color: transparent
|
|
||||||
|
|
||||||
&::before
|
|
||||||
@include m3-buttons-state-layer-mixin
|
|
||||||
|
|
||||||
content: ""
|
|
||||||
|
|
||||||
& > span.m3.m3-ripple-domain
|
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
||||||
|
|
||||||
& > span.m3.m3-ripple
|
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
|
|
||||||
|
|
||||||
& > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
|
|
||||||
@include center(inline-flex)
|
|
||||||
|
|
||||||
gap: 8px
|
|
||||||
height: inherit
|
|
||||||
|
|
||||||
& > svg.m3.m3-svg-icon
|
|
||||||
height: inherit
|
|
||||||
|
|
||||||
& > span.m3.m3-button-segment-frame-layer
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
& > *
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
& > span.m3.m3-button-segment-content-layer
|
|
||||||
@include m3-segmented-button-content-color-mixin($on-surface)
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
|
|
||||||
& > svg.m3.m3-svg-icon
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&.selected
|
|
||||||
background-color: $secondary-container
|
|
||||||
|
|
||||||
& > span.m3.m3-button-segment-content-layer
|
|
||||||
@include m3-segmented-button-content-color-mixin($on-secondary-container)
|
|
||||||
|
|
||||||
& > svg.m3.m3-svg-icon
|
|
||||||
display: initial
|
|
||||||
|
|
||||||
&:not(:disabled):hover
|
|
||||||
&::before
|
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 8%, transparent)
|
|
||||||
|
|
||||||
&:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
|
|
||||||
&::before
|
|
||||||
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
|
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
border: 1px solid color-mix(in srgb, $outline 12%, transparent)
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
|
||||||
|
|
||||||
& > *
|
& > *
|
||||||
opacity: 38%
|
opacity: 38%
|
||||||
|
|
||||||
|
&.selected
|
||||||
|
background-color: var(--md-sys-color-secondary-container)
|
||||||
|
|
||||||
|
& > span
|
||||||
|
color: var(--md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
|
& > text
|
||||||
|
fill: var(--md-sys-color-on-secondary-container)
|
||||||
|
|
||||||
|
& > span.m3.m3-button-segment-state-layer
|
||||||
|
position: absolute
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
|
||||||
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
& > span.m3.m3-button-segment-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||||
|
|
||||||
|
&:is(&:active, &:focus-visible)
|
||||||
|
& > span.m3.m3-button-segment-state-layer
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
& > span.m3.m3-ripple-domain > span.m3.ripple
|
& > span.m3.m3-ripple-domain > span.m3.ripple
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@import 'mixins/m3-mixins'
|
@import 'mixins/m3-mixins'
|
||||||
@import './css/colors-variables'
|
|
||||||
|
|
||||||
$padding: 16px
|
$padding: 16px
|
||||||
|
|
||||||
|
|
@ -11,19 +10,25 @@ $padding: 16px
|
||||||
|
|
||||||
div.m3.m3-card
|
div.m3.m3-card
|
||||||
& > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
|
& > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
|
||||||
& > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child,
|
& > .m3-card-media:first-child,
|
||||||
& > .m3-card-media:first-child
|
& > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
|
||||||
|
padding: padding-calculating(false)
|
||||||
border-radius: 12px !important
|
border-radius: 12px !important
|
||||||
|
|
||||||
|
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
|
||||||
padding: padding-calculating(false)
|
padding: padding-calculating(false)
|
||||||
border-radius: 12px !important
|
border-radius: 12px !important
|
||||||
|
|
||||||
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
|
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
|
||||||
|
padding: padding-calculating(true)
|
||||||
|
display: block
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
|
|
||||||
.m3.m3-card-media
|
.m3.m3-card-media
|
||||||
&.m3-rounded
|
&.m3-rounded
|
||||||
border-radius: 12px + padding-calculating(true)
|
border-radius: 12px + padding-calculating(true)
|
||||||
|
|
||||||
|
width: 100%
|
||||||
display: block
|
display: block
|
||||||
contain: content
|
contain: content
|
||||||
position: relative
|
position: relative
|
||||||
|
|
@ -47,17 +52,15 @@ div.m3.m3-card-action-area
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
position: absolute
|
position: absolute
|
||||||
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
& > .m3.m3-ripple-domain > .m3.m3-ripple
|
|
||||||
background-color: color-mix(in srgb, $on-surface 12%, transparent)
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
& > span.m3.m3-card-state-layer
|
& > span.m3.m3-card-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||||
|
|
||||||
&:is(&:focus, &:focus-visible, &:focus-within)
|
&:is(&:focus, &:focus-visible, &:focus-within)
|
||||||
& > span.m3.m3-card-state-layer
|
& > span.m3.m3-card-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
||||||
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
|
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
|
||||||
&:is(.m3-card-outlined, .m3-card-filled)
|
&:is(.m3-card-outlined, .m3-card-filled)
|
||||||
|
|
@ -75,4 +78,7 @@ div.m3.m3-card-action-area
|
||||||
|
|
||||||
&:not(&:has(span.m3.m3-ripple-domain))
|
&:not(&:has(span.m3.m3-ripple-domain))
|
||||||
& > span.m3.m3-card-state-layer
|
& > span.m3.m3-card-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
||||||
|
& > span.m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
@import "mixins/m3-mixins"
|
@import "mixins/m3-mixins"
|
||||||
@import './css/colors-variables'
|
|
||||||
|
|
||||||
div.m3.m3-container
|
div.m3.m3-container
|
||||||
display: block
|
display: block
|
||||||
contain: content
|
|
||||||
position: relative
|
|
||||||
border-radius: 12px
|
border-radius: 12px
|
||||||
|
position: relative
|
||||||
|
contain: content
|
||||||
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
&.m3-container-filled
|
&.m3-container-filled
|
||||||
background-color: $surface-container-highest
|
background-color: var(--md-sys-color-surface-container-highest)
|
||||||
|
|
||||||
&.m3-container-outlined
|
&.m3-container-outlined
|
||||||
|
background-color: var(--md-sys-color-surface)
|
||||||
outline-offset: -1px
|
outline-offset: -1px
|
||||||
background-color: $surface
|
outline: 1px solid var(--md-sys-color-outline-variant)
|
||||||
outline: 1px solid $outline-variant
|
|
||||||
|
|
||||||
&.m3-container-elevated
|
&.m3-container-elevated
|
||||||
@include elevation-1(false)
|
@include elevation-1(false)
|
||||||
|
background-color: var(--md-sys-color-surface-container-low)
|
||||||
background-color: $surface-container-low
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
/*# sourceMappingURL=colors-variables.css.map */
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors-variables.css"}
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
$primary: var(--md-sys-color-primary)
|
|
||||||
$on-primary: var(--md-sys-color-on-primary)
|
|
||||||
$primary-container: var(--md-sys-color-primary-container)
|
|
||||||
$on-primary-container: var(--md-sys-color-on-primary-container)
|
|
||||||
|
|
||||||
$inverse-primary: var(--md-sys-color-inverse-primary)
|
|
||||||
$primary-fixed: var(--md-sys-color-primary-fixed)
|
|
||||||
$on-primary-fixed: var(--md-sys-color-on-primary-fixed)
|
|
||||||
$primary-fixed-dim: var(--md-sys-color-primary-fixed-dim)
|
|
||||||
$on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant)
|
|
||||||
|
|
||||||
$secondary: var(--md-sys-color-secondary)
|
|
||||||
$on-secondary: var(--md-sys-color-on-secondary)
|
|
||||||
$secondary-container: var(--md-sys-color-secondary-container)
|
|
||||||
$on-secondary-container: var(--md-sys-color-on-secondary-container)
|
|
||||||
|
|
||||||
$secondary-fixed: var(--md-sys-color-secondary-fixed)
|
|
||||||
$on-secondary-fixed: var(--md-sys-color-on-secondary-fixed)
|
|
||||||
$secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim)
|
|
||||||
$on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant)
|
|
||||||
|
|
||||||
$tertiary: var(--md-sys-color-tertiary)
|
|
||||||
$on-tertiary: var(--md-sys-color-on-tertiary)
|
|
||||||
$tertiary-container: var(--md-sys-color-tertiary-container)
|
|
||||||
$on-tertiary-container: var(--md-sys-color-on-tertiary-container)
|
|
||||||
|
|
||||||
$tertiary-fixed: var(--md-sys-color-tertiary-fixed)
|
|
||||||
$on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed)
|
|
||||||
$tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim)
|
|
||||||
$on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant)
|
|
||||||
|
|
||||||
$error: var(--md-sys-color-error)
|
|
||||||
$on-error: var(--md-sys-color-on-error)
|
|
||||||
$error-container: var(--md-sys-color-error-container)
|
|
||||||
$on-error-container: var(--md-sys-color-on-error-container)
|
|
||||||
|
|
||||||
$background: var(--md-sys-color-background)
|
|
||||||
$on-background: var(--md-sys-color-on-background)
|
|
||||||
|
|
||||||
$surface: var(--md-sys-color-surface)
|
|
||||||
$on-surface: var(--md-sys-color-on-surface)
|
|
||||||
$surface-variant: var(--md-sys-color-surface-variant)
|
|
||||||
$on-surface-variant: var(--md-sys-color-on-surface-variant)
|
|
||||||
|
|
||||||
$surface-dim: var(--md-sys-color-surface-dim)
|
|
||||||
$surface-bright: var(--md-sys-color-surface-bright)
|
|
||||||
$surface-container-lowest: var(--md-sys-color-surface-container-lowest)
|
|
||||||
$surface-container-low: var(--md-sys-color-surface-container-low)
|
|
||||||
$surface-container: var(--md-sys-color-surface-container)
|
|
||||||
$surface-container-high: var(--md-sys-color-surface-container-high)
|
|
||||||
$surface-container-highest: var(--md-sys-color-surface-container-highest)
|
|
||||||
|
|
||||||
$surface-tint: var(--md-sys-color-surface-tint)
|
|
||||||
$inverse-surface: var(--md-sys-color-inverse-surface)
|
|
||||||
$inverse-on-surface: var(--md-sys-color-inverse-on-surface)
|
|
||||||
|
|
||||||
$outline: var(--md-sys-color-outline)
|
|
||||||
$outline-variant: var(--md-sys-color-outline-variant)
|
|
||||||
|
|
||||||
$shadow: var(--md-sys-color-shadow)
|
|
||||||
$scrim: var(--md-sys-color-scrim)
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
@import './css/colors-variables'
|
|
||||||
|
|
||||||
hr.m3.m3-divider
|
hr.m3.m3-divider
|
||||||
border: none
|
border: none
|
||||||
outline: 0.5px solid $outline-variant
|
outline: 0.5px solid var(--md-sys-color-outline-variant)
|
||||||
position: relative
|
position: relative
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,56 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Material-Symbols-Rounded-Regular;
|
font-family: Material-Symbols-Rounded-Regular;
|
||||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
|
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-face {
|
||||||
font-family: Material-Symbols-Rounded-Regular;
|
font-family: Material-Symbols-Outlined-Regular;
|
||||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
|
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-face {
|
||||||
font-family: Material-Symbols-Sharp-Regular;
|
font-family: Material-Symbols-Sharp-Regular;
|
||||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
|
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-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Thin;
|
font-face-name: Thin;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
src: url("./font/Roboto-Thin.ttf"); }
|
src: url("./font/Roboto-Thin.ttf");
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Light;
|
font-face-name: Light;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
src: url("./font/Roboto-Light.ttf"); }
|
src: url("./font/Roboto-Light.ttf");
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Regular;
|
font-face-name: Regular;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url("./font/Roboto-Regular.ttf"); }
|
src: url("./font/Roboto-Regular.ttf");
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Medium;
|
font-face-name: Medium;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
src: url("./font/Roboto-Medium.ttf"); }
|
src: url("./font/Roboto-Medium.ttf");
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Bold;
|
font-face-name: Bold;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: url("./font/Roboto-Bold.ttf"); }
|
src: url("./font/Roboto-Bold.ttf");
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto, system-ui;
|
font-family: Roboto;
|
||||||
font-face-name: Black;
|
font-face-name: Black;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
src: url("./font/Roboto-Black.ttf"); }
|
src: url("./font/Roboto-Black.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=fonts.css.map */
|
/*# sourceMappingURL=fonts.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA","file":"fonts.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": ";EAIQ,WAAW,EAAE,gCAAwC;EACrD,GAAG,EAAE,6DAAqE;EAC1E,GAAG,EAAE,+EAAuF;;EAF5F,WAAW,EAAE,iCAAwC;EACrD,GAAG,EAAE,8DAAqE;EAC1E,GAAG,EAAE,gFAAuF;;EAF5F,WAAW,EAAE,8BAAwC;EACrD,GAAG,EAAE,2DAAqE;EAC1E,GAAG,EAAE,6EAAuF;;EAM5F,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,OAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,gCAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,MAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,+BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC",
|
|
||||||
"sources": ["fonts.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "fonts.css"
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -30,30 +30,12 @@ html
|
||||||
color: var(--md-sys-color-on-surface)
|
color: var(--md-sys-color-on-surface)
|
||||||
background-color: var(--md-sys-color-surface-container)
|
background-color: var(--md-sys-color-surface-container)
|
||||||
|
|
||||||
|
.m3
|
||||||
|
user-select: none
|
||||||
|
|
||||||
.m3.m3-wrapper
|
.m3.m3-wrapper
|
||||||
position: relative
|
position: relative
|
||||||
display: block
|
display: block
|
||||||
background-color: var(--md-sys-color-surface)
|
background-color: var(--md-sys-color-surface)
|
||||||
border-radius: 25px
|
border-radius: 25px
|
||||||
|
|
||||||
button:not(.m3-fab, .m3-icon-button)
|
|
||||||
@include m3-typography-mixin('label-large')
|
|
||||||
|
|
||||||
max-height: 40px
|
|
||||||
width: min-content
|
|
||||||
white-space: nowrap
|
|
||||||
height: min-content
|
|
||||||
box-sizing: border-box
|
|
||||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
|
||||||
|
|
||||||
&.m3
|
|
||||||
@include center(inline-flex)
|
|
||||||
|
|
||||||
gap: 8px
|
|
||||||
border: none
|
|
||||||
contain: content
|
|
||||||
text-align: center
|
|
||||||
padding: 10px 24px
|
|
||||||
flex-direction: row
|
|
||||||
border-radius: 100px
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,69 @@
|
||||||
svg.m3.m3-svg-icon > text {
|
svg.m3.m3-svg-icon > text {
|
||||||
|
alignment-baseline: central;
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
dominant-baseline: middle;
|
}
|
||||||
alignment-baseline: middle; }
|
|
||||||
svg.m3.m3-svg-icon > text.m3-size-12px {
|
svg.m3.m3-svg-icon > text.m3-size-12px {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 12px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 12px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-16px {
|
svg.m3.m3-svg-icon > text.m3-size-16px {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 16px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-20px {
|
svg.m3.m3-svg-icon > text.m3-size-20px {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 20px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 20px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-24px {
|
svg.m3.m3-svg-icon > text.m3-size-24px {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 24px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 24px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-28px {
|
svg.m3.m3-svg-icon > text.m3-size-28px {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 28px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
line-height: 28px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-32px {
|
svg.m3.m3-svg-icon > text.m3-size-32px {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 32px;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 32px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-36px {
|
svg.m3.m3-svg-icon > text.m3-size-36px {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 36px;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
line-height: 36px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-40px {
|
svg.m3.m3-svg-icon > text.m3-size-40px {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 40px;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: 40px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-size-48px {
|
svg.m3.m3-svg-icon > text.m3-size-48px {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
line-height: 48px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 48px; }
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-Outlined {
|
svg.m3.m3-svg-icon > text.m3-Outlined {
|
||||||
font-family: Material-Symbols-Rounded-Regular; }
|
font-family: Material-Symbols-Outlined-Regular;
|
||||||
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-Rounded {
|
svg.m3.m3-svg-icon > text.m3-Rounded {
|
||||||
font-family: Material-Symbols-Rounded-Regular; }
|
font-family: Material-Symbols-Rounded-Regular;
|
||||||
|
}
|
||||||
svg.m3.m3-svg-icon > text.m3-Sharp {
|
svg.m3.m3-svg-icon > text.m3-Sharp {
|
||||||
font-family: Material-Symbols-Sharp-Regular; }
|
font-family: Material-Symbols-Sharp-Regular;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=icon.css.map */
|
/*# sourceMappingURL=icon.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI","file":"icon.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAII,yBAAQ;EACJ,WAAW,EAAE,MAAM;EACnB,iBAAiB,EAAE,MAAM;EACzB,kBAAkB,EAAE,MAAM;AAG1B,sCAAyB;EACrB,KAAK,EAVZ,IAAI;EAWG,YAAY,EAAE,CAAC;EACf,SAAS,EAZhB,IAAI;EAaG,WAAW,EAblB,IAAI;AASD,sCAAyB;EACrB,KAAK,EAVN,IAAI;EAWH,YAAY,EAAE,CAAC;EACf,SAAS,EAZV,IAAI;EAaH,WAAW,EAbZ,IAAI;AASP,sCAAyB;EACrB,KAAK,EAVA,IAAI;EAWT,YAAY,EAAE,CAAC;EACf,SAAS,EAZJ,IAAI;EAaT,WAAW,EAbN,IAAI;AASb,sCAAyB;EACrB,KAAK,EAVM,IAAI;EAWf,YAAY,EAAE,CAAC;EACf,SAAS,EAZE,IAAI;EAaf,WAAW,EAbA,IAAI;AASnB,sCAAyB;EACrB,KAAK,EAVY,IAAI;EAWrB,YAAY,EAAE,CAAC;EACf,SAAS,EAZQ,IAAI;EAarB,WAAW,EAbM,IAAI;AASzB,sCAAyB;EACrB,KAAK,EAVkB,IAAI;EAW3B,YAAY,EAAE,CAAC;EACf,SAAS,EAZc,IAAI;EAa3B,WAAW,EAbY,IAAI;AAS/B,sCAAyB;EACrB,KAAK,EAVwB,IAAI;EAWjC,YAAY,EAAE,CAAC;EACf,SAAS,EAZoB,IAAI;EAajC,WAAW,EAbkB,IAAI;AASrC,sCAAyB;EACrB,KAAK,EAV8B,IAAI;EAWvC,YAAY,EAAE,CAAC;EACf,SAAS,EAZ0B,IAAI;EAavC,WAAW,EAbwB,IAAI;AAS3C,sCAAyB;EACrB,KAAK,EAVoC,IAAI;EAW7C,YAAY,EAAE,CAAC;EACf,SAAS,EAZgC,IAAI;EAa7C,WAAW,EAb8B,IAAI;AAgBjD,qCAAoB;EAChB,WAAW,EAAE,iCAAiC;AADlD,oCAAoB;EAChB,WAAW,EAAE,gCAAiC;AADlD,kCAAoB;EAChB,WAAW,EAAE,8BAAiC",
|
|
||||||
"sources": ["icon.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "icon.css"
|
|
||||||
}
|
|
||||||
|
|
@ -3,9 +3,8 @@ svg.m3.m3-svg-icon
|
||||||
$types: ["Outlined", "Rounded", "Sharp"]
|
$types: ["Outlined", "Rounded", "Sharp"]
|
||||||
|
|
||||||
& > text
|
& > text
|
||||||
|
alignment-baseline: central
|
||||||
text-anchor: middle
|
text-anchor: middle
|
||||||
dominant-baseline: middle
|
|
||||||
alignment-baseline: middle
|
|
||||||
|
|
||||||
@each $size in $sizes
|
@each $size in $sizes
|
||||||
& > text.m3-size-#{$size}
|
& > text.m3-size-#{$size}
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -1,12 +1,11 @@
|
||||||
@import '../css/colors-variables'
|
label.m3.m3-checkbox-label
|
||||||
|
@include m3-label-mixin
|
||||||
div.m3.m3-checkbox-container
|
width: 18px
|
||||||
@include m3-checkbox-container-mixin
|
height: 18px
|
||||||
|
|
||||||
& > span.m3.m3-checkbox-state-layer
|
& > span.m3.m3-checkbox-state-layer
|
||||||
@include m3-state-layer-mixin
|
@include m3-state-layer-mixin
|
||||||
|
|
||||||
& > span.m3.m3-checkbox-ripple-layer
|
span.m3.m3-checkbox-ripple-layer
|
||||||
z-index: 20
|
z-index: 20
|
||||||
width: 2.5rem
|
width: 2.5rem
|
||||||
height: 2.5rem
|
height: 2.5rem
|
||||||
|
|
@ -15,55 +14,55 @@ div.m3.m3-checkbox-container
|
||||||
position: absolute
|
position: absolute
|
||||||
|
|
||||||
input[type="checkbox"].m3.m3-checkbox
|
input[type="checkbox"].m3.m3-checkbox
|
||||||
@include center(flex)
|
margin: 0
|
||||||
|
|
||||||
z-index: 10
|
z-index: 10
|
||||||
|
display: flex
|
||||||
width: 1.125rem
|
width: 1.125rem
|
||||||
height: 1.125rem
|
height: 1.125rem
|
||||||
appearance: none
|
appearance: none
|
||||||
position: absolute
|
position: absolute
|
||||||
|
align-items: center
|
||||||
border-radius: .14rem
|
border-radius: .14rem
|
||||||
box-sizing: content-box
|
box-sizing: content-box
|
||||||
|
justify-content: center
|
||||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
& ~ span.m3-checkbox-state
|
& ~ span.m3-checkbox-state
|
||||||
position: absolute
|
|
||||||
color: $on-surface-variant
|
|
||||||
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
color: var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
||||||
& ~ span.m3-checkbox-state
|
& ~ span.m3-checkbox-state
|
||||||
color: $error
|
color: var(--md-sys-color-error)
|
||||||
|
background: var(--md-sys-color-on-error)
|
||||||
background: $on-error
|
|
||||||
|
|
||||||
&:is(:user-invalid, .m3.m3-error):not(:checked)
|
&:is(:user-invalid, .m3.m3-error):not(:checked)
|
||||||
& ~ span.m3-checkbox-state
|
& ~ span.m3-checkbox-state
|
||||||
color: $error
|
color: var(--md-sys-color-error)
|
||||||
|
|
||||||
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
|
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
|
||||||
& ~ span.m3-checkbox-state
|
& ~ span.m3-checkbox-state
|
||||||
color: $primary
|
color: var(--md-sys-color-primary)
|
||||||
|
background: var(--md-sys-color-on-primary)
|
||||||
background: $on-primary
|
|
||||||
|
|
||||||
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
|
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
|
||||||
color: $on-surface
|
color: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
&:disabled ~ *
|
&:disabled ~ *
|
||||||
&:is(:hover, &, :checked)
|
&:is(:hover, &, :checked)
|
||||||
opacity: 38%
|
opacity: 38%
|
||||||
|
|
||||||
& ~ span.m3-checkbox-state
|
& ~ span.m3-checkbox-state
|
||||||
@include center(flex)
|
|
||||||
|
|
||||||
z-index: 10
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 700
|
|
||||||
line-height: 24px
|
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
z-index: 10
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
line-height: 24px
|
||||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||||
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
|
font-weight: 700
|
||||||
|
font-size: 24px
|
||||||
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
|
||||||
|
|
||||||
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
|
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
|
||||||
content: "check_box_outline_blank"
|
content: "check_box_outline_blank"
|
||||||
|
|
@ -73,35 +72,31 @@ input[type="checkbox"].m3.m3-checkbox
|
||||||
|
|
||||||
&:checked ~ span.m3-checkbox-state::before
|
&:checked ~ span.m3-checkbox-state::before
|
||||||
content: "check_box"
|
content: "check_box"
|
||||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
|
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
|
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
|
||||||
& ~ span.m3.m3-checkbox-state-layer
|
& ~ span.m3.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $error 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
|
||||||
|
|
||||||
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
|
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $error 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
|
||||||
|
& ~ span.m3-ripple-domain > .m3.ripple
|
||||||
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
|
||||||
background-color: color-mix(in srgb, $error 20%, transparent)
|
|
||||||
|
|
||||||
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
|
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $primary 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
|
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
& ~ span.m3-ripple-domain > .m3.ripple
|
||||||
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||||
background-color: color-mix(in srgb, $on-surface 20%, transparent)
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
& ~ span.m3-checkbox-state-layer
|
& ~ span.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||||
|
|
||||||
&:active ~ span.m3.m3-checkbox-state-layer
|
&:active ~ span.m3.m3-checkbox-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
& ~ span.m3-ripple-domain > .m3.ripple
|
||||||
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||||
background-color: color-mix(in srgb, $primary 20%, transparent)
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + s
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
div.m3.m3-radio > 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);
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
}
|
}
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
div.m3.m3-radio > 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);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||||
}
|
}
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||||
|
|
@ -41,7 +41,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
div.m3.m3-radio > 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);
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||||
}
|
}
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
div.m3.m3-radio > 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);
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||||
}
|
}
|
||||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,16 @@
|
||||||
@import '../css/colors-variables'
|
div.m3.m3-radio
|
||||||
|
|
||||||
div.m3.m3-radio-container
|
|
||||||
@include center(inline-flex)
|
|
||||||
|
|
||||||
width: 20px
|
width: 20px
|
||||||
height: 20px
|
height: 20px
|
||||||
|
align-items: center
|
||||||
& + label.m3.m3-radio-label
|
display: inline-flex
|
||||||
margin-inline: 3px
|
justify-content: center
|
||||||
|
|
||||||
& > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
|
& > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
|
||||||
z-index: 5
|
z-index: 5
|
||||||
width: 40px
|
|
||||||
height: 40px
|
|
||||||
aspect-ratio: 1
|
|
||||||
|
|
||||||
& > span.m3.m3-radio-state-layer
|
& > span.m3.m3-radio-state-layer
|
||||||
|
width: 40px
|
||||||
|
aspect-ratio: 1
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
position: absolute
|
position: absolute
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
|
@ -32,49 +27,47 @@ div.m3.m3-radio-container
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
&:checked:hover + span.m3.m3-radio-state-layer
|
&:checked:hover + span.m3.m3-radio-state-layer
|
||||||
background-color: color-mix(in srgb, $primary 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
|
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
|
||||||
background-color: color-mix(in srgb, $primary 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||||
|
& ~ span.m3-ripple-domain > .m3.ripple
|
||||||
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||||
background-color: color-mix(in srgb, $on-surface 20%, transparent)
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
& + span.m3.m3-radio-state-layer
|
& + span.m3.m3-radio-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||||
|
|
||||||
&:active + span.m3.m3-radio-state-layer
|
&:active + span.m3.m3-radio-state-layer
|
||||||
background-color: color-mix(in srgb, $on-surface 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
& ~ span.m3-ripple-domain > .m3.ripple
|
||||||
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||||
background-color: color-mix(in srgb, $primary 20%, transparent)
|
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
&:is(:not(:checked), &:checked) ~ svg
|
&:is(:not(:checked), &:checked) ~ svg
|
||||||
& > circle.m3-radio-outline
|
& > circle.m3-radio-outline
|
||||||
stroke-opacity: 38%
|
stroke-opacity: 38%
|
||||||
stroke: $on-surface
|
stroke: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
&:checked ~ svg > circle.m3-radio-state
|
&:checked ~ svg > circle.m3-radio-state
|
||||||
fill-opacity: 38%
|
fill-opacity: 38%
|
||||||
fill: $on-surface
|
fill: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
&:not(:checked) ~ svg
|
&:not(:checked) ~ svg
|
||||||
& > circle.m3-radio-outline
|
& > circle.m3-radio-outline
|
||||||
stroke: $on-surface-variant
|
stroke: var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
& > circle.m3-radio-state
|
& > circle.m3-radio-state
|
||||||
fill: $primary
|
|
||||||
fill-opacity: 0
|
fill-opacity: 0
|
||||||
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:checked ~ svg
|
&:checked ~ svg
|
||||||
& > circle.m3-radio-outline
|
& > circle.m3-radio-outline
|
||||||
stroke: $primary
|
stroke: var(--md-sys-color-primary)
|
||||||
|
|
||||||
& > circle.m3-radio-state
|
& > circle.m3-radio-state
|
||||||
fill: $primary
|
|
||||||
fill-opacity: 1
|
fill-opacity: 1
|
||||||
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
svg
|
svg
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
@ -92,7 +85,7 @@ div.m3.m3-radio-container
|
||||||
fill: black
|
fill: black
|
||||||
fill-opacity: 0
|
fill-opacity: 0
|
||||||
stroke-width: 2px
|
stroke-width: 2px
|
||||||
stroke: $on-surface-variant
|
stroke: var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
&.m3-radio-state
|
&.m3-radio-state
|
||||||
r: 5px
|
r: 5px
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,3 @@
|
||||||
/*
|
|
||||||
Error: Undefined mixin 'input-range-thumb-mixin'.
|
|
||||||
on line 35 of slider.sass, in `input-range-thumb-mixin'
|
|
||||||
from line 35 of slider.sass
|
|
||||||
|
|
||||||
30: overflow: hidden
|
|
||||||
31: border-radius: 2px
|
|
||||||
32: background-color: var(--md-sys-color-primary)
|
|
||||||
33:
|
|
||||||
34: &::-moz-range-thumb
|
|
||||||
35: @include input-range-thumb-mixin
|
|
||||||
36:
|
|
||||||
37: border: none
|
|
||||||
38:
|
|
||||||
39: &::-webkit-slider-container
|
|
||||||
40: appearance: none
|
|
||||||
|
|
||||||
Backtrace:
|
/*# sourceMappingURL=slider.css.map */
|
||||||
slider.sass:35:in `input-range-thumb-mixin'
|
|
||||||
slider.sass:35
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:348:in `block in visit_mixin'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `block in with_mixin'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `with_mixin'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:346:in `visit_mixin'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `map'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `visit_children'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `block in visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:157:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:10:in `visit'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:36:in `css_tree'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:389:in `_render_with_sourcemap'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:307:in `render_with_sourcemap'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:387:in `run'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:63:in `process_result'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:50:in `parse'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:18:in `parse!'
|
|
||||||
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/bin/sass:13:in `<top (required)>'
|
|
||||||
/usr/bin/sass:23:in `load'
|
|
||||||
/usr/bin/sass:23:in `<main>'
|
|
||||||
*/
|
|
||||||
body:before {
|
|
||||||
white-space: pre;
|
|
||||||
font-family: monospace;
|
|
||||||
content: "Error: Undefined mixin 'input-range-thumb-mixin'.\A on line 35 of slider.sass, in `input-range-thumb-mixin'\A from line 35 of slider.sass\A \A 30: overflow: hidden\A 31: border-radius: 2px\A 32: background-color: var(--md-sys-color-primary)\A 33: \A 34: &::-moz-range-thumb\A 35: @include input-range-thumb-mixin\A 36: \A 37: border: none\A 38: \A 39: &::-webkit-slider-container\A 40: appearance: none"; }
|
|
||||||
|
|
|
||||||
|
|
@ -1,123 +1,31 @@
|
||||||
@use 'sass:math'
|
|
||||||
@import '../css/colors-variables'
|
|
||||||
|
|
||||||
@mixin input-range-thumb-mixin
|
|
||||||
@include elevation-1(false)
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content: '1'
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
|
|
||||||
|
|
||||||
&:is(:active, :focus-visible)
|
|
||||||
outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
|
|
||||||
|
|
||||||
width: 20px
|
|
||||||
height: 20px
|
|
||||||
appearance: none
|
|
||||||
border-radius: 50%
|
|
||||||
box-sizing: border-box
|
|
||||||
outline: 10px solid transparent
|
|
||||||
background: $primary
|
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
||||||
|
|
||||||
div.m3.m3-slider-container
|
|
||||||
height: 20px
|
|
||||||
display: flex
|
|
||||||
position: relative
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
& > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
& > div.m3.m3-slider-label
|
|
||||||
@include center(inline-flex)
|
|
||||||
|
|
||||||
top: -10px
|
|
||||||
opacity: 0
|
|
||||||
width: 28px
|
|
||||||
position: absolute
|
|
||||||
pointer-events: none
|
|
||||||
height: 14px * math.sqrt(2) + 14px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
top: 0
|
|
||||||
content: ""
|
|
||||||
width: 28px
|
|
||||||
rotate: 45deg
|
|
||||||
aspect-ratio: 1
|
|
||||||
position: absolute
|
|
||||||
border-radius: 14px 14px 0 14px
|
|
||||||
background-color: $primary
|
|
||||||
|
|
||||||
& > label.m3.m3-typography
|
|
||||||
display: inline
|
|
||||||
font-weight: 500
|
|
||||||
margin-top: -5px
|
|
||||||
position: absolute
|
|
||||||
font-size: 12px !important
|
|
||||||
color: $on-primary
|
|
||||||
|
|
||||||
& > datalist
|
|
||||||
display: none
|
|
||||||
|
|
||||||
input[type="range"].m3.m3-slider
|
input[type="range"].m3.m3-slider
|
||||||
margin: 0
|
height: 4px
|
||||||
appearance: none
|
appearance: none
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
background: $surface-container-highest
|
background-color: var(--md-sys-color-surface-container-highest)
|
||||||
|
overflow: visible
|
||||||
&:-moz-any(&)
|
|
||||||
height: 4px
|
|
||||||
|
|
||||||
&:-webkit-any(&)
|
|
||||||
background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
|
|
||||||
|
|
||||||
&::-moz-range-track
|
|
||||||
height: 4px
|
|
||||||
overflow: hidden
|
|
||||||
border-radius: 2px
|
|
||||||
|
|
||||||
&::-moz-range-progress
|
|
||||||
height: 4px
|
|
||||||
overflow: hidden
|
|
||||||
border-radius: 2px
|
|
||||||
background-color: $primary
|
|
||||||
|
|
||||||
&::-moz-range-thumb
|
|
||||||
@include input-range-thumb-mixin
|
|
||||||
|
|
||||||
border: none
|
|
||||||
|
|
||||||
&::-webkit-slider-container
|
&::-webkit-slider-container
|
||||||
height: 4px
|
margin-inline: -8px
|
||||||
appearance: none
|
|
||||||
box-shadow: none
|
|
||||||
border-radius: 2px
|
|
||||||
min-block-size: 4px
|
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track
|
|
||||||
height: 4px
|
|
||||||
|
|
||||||
&::-webkit-slider-thumb
|
&::-webkit-slider-thumb
|
||||||
@include elevation-1(false)
|
@include elevation-1(false)
|
||||||
|
|
||||||
|
&::after
|
||||||
|
width: 40px
|
||||||
|
aspect-ratio: 1
|
||||||
|
background-color: transparent
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||||
|
|
||||||
&:is(:active, :focus-visible)
|
|
||||||
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
||||||
|
|
||||||
width: 20px
|
width: 20px
|
||||||
aspect-ratio: 1
|
aspect-ratio: 1
|
||||||
appearance: none
|
appearance: none
|
||||||
|
overflow: visible
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
margin-top: -8px
|
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
outline: 10px solid transparent
|
|
||||||
background: var(--md-sys-color-primary)
|
background: var(--md-sys-color-primary)
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,113 +1,225 @@
|
||||||
div.m3.m3-switch {
|
div.m3.m3-switch {
|
||||||
gap: 20px;
|
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
height: 32px;
|
box-sizing: content-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: center;
|
||||||
box-sizing: content-box; }
|
|
||||||
div.m3.m3-switch > svg {
|
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
}
|
||||||
|
div.m3.m3-switch > svg {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
width: 52px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
div.m3.m3-switch > svg > g {
|
div.m3.m3-switch > svg > g {
|
||||||
transform: translate(11.5%, 81%);
|
transform: translate(11.5%, 81%);
|
||||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
div.m3.m3-switch > svg > g > text {
|
div.m3.m3-switch > svg > g > text {
|
||||||
|
font-family: Material-Symbols-Outlined-Regular;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: Material-Symbols-Outlined-Regular, serif; }
|
}
|
||||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
|
||||||
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
||||||
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
cy: 50%;
|
cy: 50%;
|
||||||
cx: 16px;
|
cx: 16px;
|
||||||
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
}
|
||||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
|
||||||
r: 20px;
|
r: 20px;
|
||||||
fill-opacity: 0; }
|
fill-opacity: 0;
|
||||||
|
}
|
||||||
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
||||||
r: 8px; }
|
r: 8px;
|
||||||
|
}
|
||||||
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
|
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
|
||||||
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
rx: 15px;
|
rx: 15px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 30px; }
|
height: 30px;
|
||||||
|
}
|
||||||
div.m3.m3-switch > input.m3 {
|
div.m3.m3-switch > input.m3 {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
opacity: 0 !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0 !important; }
|
}
|
||||||
div.m3.m3-switch > input.m3:disabled {
|
div.m3.m3-switch > input.m3:disabled {
|
||||||
cursor: not-allowed; }
|
cursor: not-allowed;
|
||||||
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
}
|
||||||
fill: var(--md-sys-color-outline); }
|
div.m3.m3-switch
|
||||||
|
> input.m3:not(:checked, :disabled)
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
fill: var(--md-sys-color-outline);
|
||||||
|
}
|
||||||
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
|
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
|
||||||
transform: translate(50%, 81%); }
|
transform: translate(50%, 81%);
|
||||||
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
}
|
||||||
fill: var(--md-sys-color-on-primary); }
|
div.m3.m3-switch
|
||||||
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
> input.m3:checked:not(:disabled)
|
||||||
fill: var(--md-sys-color-on-primary); }
|
+ svg
|
||||||
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
> circle.m3.m3-switch-handler {
|
||||||
fill: var(--md-sys-color-on-primary-container); }
|
fill: var(--md-sys-color-on-primary);
|
||||||
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
}
|
||||||
fill: var(--md-sys-color-surface); }
|
div.m3.m3-switch
|
||||||
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
|
> input.m3:not(:disabled)
|
||||||
r: 12px; }
|
+ svg
|
||||||
|
> g
|
||||||
|
> text.m3.m3-icon-unchecked {
|
||||||
|
fill: var(--md-sys-color-on-primary);
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:not(:disabled)
|
||||||
|
+ svg
|
||||||
|
> g
|
||||||
|
> text.m3.m3-icon-checked {
|
||||||
|
fill: var(--md-sys-color-on-primary-container);
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:checked:disabled
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
fill: var(--md-sys-color-surface);
|
||||||
|
}
|
||||||
|
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler,
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3
|
||||||
|
+ svg:has(text.m3.m3-icon-unchecked)
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
r: 12px;
|
||||||
|
}
|
||||||
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
||||||
opacity: 0; }
|
opacity: 0;
|
||||||
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
}
|
||||||
cx: calc(100% - 16px); }
|
div.m3.m3-switch
|
||||||
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
> input.m3:checked
|
||||||
opacity: 0; }
|
+ svg
|
||||||
div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler {
|
> circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
||||||
r: 14px; }
|
cx: calc(100% - 16px);
|
||||||
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:not(:checked)
|
||||||
|
+ svg
|
||||||
|
> g
|
||||||
|
> text.m3.m3-icon-checked {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:is(
|
||||||
|
div.m3.m3-switch > input.m3:checked,
|
||||||
|
div.m3.m3-switch > input.m3
|
||||||
|
):not(:disabled):active
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
r: 14px;
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:not(:checked):disabled
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
fill: var(--md-sys-color-on-surface);
|
||||||
fill-opacity: 38%;
|
fill-opacity: 38%;
|
||||||
fill: var(--md-sys-color-on-surface); }
|
}
|
||||||
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
|
div.m3.m3-switch
|
||||||
fill: var(--md-sys-color-primary-container); }
|
> input.m3:hover:not(:disabled):checked
|
||||||
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
fill: var(--md-sys-color-primary-container);
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:hover:not(:disabled):checked
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler-state-layer {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
fill-opacity: 8%;
|
fill-opacity: 8%;
|
||||||
fill: var(--md-sys-color-primary); }
|
}
|
||||||
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
|
div.m3.m3-switch
|
||||||
fill: var(--md-sys-color-on-surface-variant); }
|
> input.m3:hover:not(:disabled):not(:checked)
|
||||||
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler {
|
||||||
|
fill: var(--md-sys-color-on-surface-variant);
|
||||||
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> 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%;
|
fill-opacity: 8%;
|
||||||
fill: var(--md-sys-color-on-surface); }
|
}
|
||||||
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
div.m3.m3-switch
|
||||||
|
> input.m3:active:not(:disabled):checked
|
||||||
|
+ svg
|
||||||
|
> circle.m3.m3-switch-handler-state-layer {
|
||||||
|
fill: var(--md-sys-color-primary);
|
||||||
fill-opacity: 12%;
|
fill-opacity: 12%;
|
||||||
fill: var(--md-sys-color-primary); }
|
}
|
||||||
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
div.m3.m3-switch
|
||||||
|
> 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%;
|
fill-opacity: 12%;
|
||||||
fill: var(--md-sys-color-on-surface); }
|
}
|
||||||
div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
|
div.m3.m3-switch
|
||||||
|
> input.m3:is(:checked, :checked:disabled)
|
||||||
|
+ svg
|
||||||
|
> rect.m3.m3-switch-track {
|
||||||
rx: 16px;
|
rx: 16px;
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
stroke-width: 0; }
|
stroke-width: 0;
|
||||||
div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> input.m3:is(
|
||||||
|
div.m3.m3-switch > input.m3:not(:checked),
|
||||||
|
div.m3.m3-switch > input.m3:not(:checked):disabled
|
||||||
|
)
|
||||||
|
+ svg
|
||||||
|
> rect.m3.m3-switch-track {
|
||||||
x: 1px;
|
x: 1px;
|
||||||
y: 1px; }
|
y: 1px;
|
||||||
|
}
|
||||||
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
|
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
|
||||||
stroke: var(--md-sys-color-outline);
|
stroke: var(--md-sys-color-outline);
|
||||||
fill: var(--md-sys-color-surface-container-highest); }
|
fill: var(--md-sys-color-surface-container-highest);
|
||||||
|
}
|
||||||
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
|
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
|
||||||
|
stroke: var(--md-sys-color-primary);
|
||||||
fill: var(--md-sys-color-primary);
|
fill: var(--md-sys-color-primary);
|
||||||
stroke: var(--md-sys-color-primary); }
|
}
|
||||||
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
|
div.m3.m3-switch > 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 > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
||||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
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 > input.m3:checked:disabled + svg > g > text.m3 {
|
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
|
||||||
transform: translateX(38.5%);
|
transform: translateX(38.5%);
|
||||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||||
div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
|
}
|
||||||
|
div.m3.m3-switch
|
||||||
|
> 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);
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); }
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=swtich.css.map */
|
/*# sourceMappingURL=swtich.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA","file":"swtich.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAAA,gBAAgB;EACZ,GAAG,EAAE,IAAI;EACT,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,WAAW;EAEvB,sBAAO;IACH,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,4CAA2C;IAEvD,0BAAK;MACD,SAAS,EAAE,qBAAqB;MAChC,UAAU,EAAE,4CAA2C;MACvD,iCAAQ;QACJ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,wCAAuC;IAE5D,sHAA4E;MACxE,EAAE,EAAE,GAAG;MACP,EAAE,EAAE,IAAI;MACR,UAAU,EAAE,4CAA2C;IAE3D,gEAA2C;MACvC,CAAC,EAAE,IAAI;MACP,YAAY,EAAE,CAAC;IAEnB,oDAA+B;MAC3B,CAAC,EAAE,GAAG;IAEV,gDAA2B;MACvB,UAAU,EAAE,iDAAgD;MAC5D,YAAY,EAAE,GAAG;MACjB,aAAa,EAAE,IAAI;MACnB,EAAE,EAAE,IAAI;MACR,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;EAEpB,2BAAY;IACR,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,YAAY;IAErB,oCAAU;MACN,MAAM,EAAE,WAAW;IAGnB,wFAA+B;MAC3B,IAAI,EAAE,2BAA2B;IAGrC,4DAAK;MACD,SAAS,EAAE,mBAAmB;IAElC,sFAA+B;MAC3B,IAAI,EAAE,8BAA8B;IAGxC,gFAAiC;MAC7B,IAAI,EAAE,8BAA8B;IAExC,8EAA+B;MAC3B,IAAI,EAAE,wCAAwC;IAEtD,gFAAsD;MAClD,IAAI,EAAE,2BAA2B;IAErC,uKAA8C;MAE1C,CAAC,EAAE,IAAI;IAGP,yEAAiC;MAC7B,OAAO,EAAE,CAAC;IAEd,4GAAoE;MAChE,EAAE,EAAE,iBAAiB;IAGzB,6EAA+B;MAC3B,OAAO,EAAE,CAAC;IAElB,sGAA4E;MACxE,CAAC,EAAE,IAAI;IAEX,sFAA4D;MACxD,YAAY,EAAE,GAAG;MACjB,IAAI,EAAE,8BAA8B;IAIhC,4FAA+B;MAC3B,IAAI,EAAE,qCAAqC;IAE/C,wGAA2C;MACvC,YAAY,EAAE,EAAE;MAChB,IAAI,EAAE,2BAA2B;IAGrC,kGAA+B;MAC3B,IAAI,EAAE,sCAAsC;IAEhD,8GAA2C;MACvC,YAAY,EAAE,EAAE;MAChB,IAAI,EAAE,8BAA8B;IAG5C,yGAAyD;MACrD,YAAY,EAAE,GAAG;MACjB,IAAI,EAAE,2BAA2B;IAErC,+GAA+D;MAC3D,YAAY,EAAE,GAAG;MACjB,IAAI,EAAE,8BAA8B;IAE5C,2FAAiE;MAC7D,EAAE,EAAE,IAAI;MACR,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,YAAY,EAAE,CAAC;IAEnB,yGAA+E;MAC3E,CAAC,EAAE,GAAG;MACN,CAAC,EAAE,GAAG;IAEV,yEAA+C;MAC3C,MAAM,EAAE,2BAA2B;MACnC,IAAI,EAAE,6CAA6C;IAEvD,mEAAyC;MACrC,IAAI,EAAE,2BAA2B;MACjC,MAAM,EAAE,2BAA2B;IAGnC,wDAAe;MACX,IAAI,EAAE,kFAAkF;IAE5F,oEAA2B;MACvB,MAAM,EAAE,mEAAmE;MAC3E,IAAI,EAAE,wEAAwE;IAGlF,gEAAe;MACX,SAAS,EAAE,iBAAiB;MAC5B,IAAI,EAAE,mEAAmE;IAE7E,4EAA2B;MACvB,IAAI,EAAE,mEAAmE;MACzE,MAAM,EAAE,kEAAkE",
|
|
||||||
"sources": ["swtich.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "swtich.css"
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +1,30 @@
|
||||||
@import '../css/colors-variables'
|
|
||||||
|
|
||||||
div.m3.m3-switch
|
div.m3.m3-switch
|
||||||
gap: 20px
|
|
||||||
margin: 4px
|
margin: 4px
|
||||||
height: 32px
|
gap: 20px
|
||||||
|
box-sizing: content-box
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: left
|
justify-content: center
|
||||||
box-sizing: content-box
|
|
||||||
|
|
||||||
& > svg
|
|
||||||
width: 52px
|
width: 52px
|
||||||
height: 32px
|
height: 32px
|
||||||
|
|
||||||
|
& > svg
|
||||||
overflow: visible
|
overflow: visible
|
||||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||||
|
width: 52px
|
||||||
|
height: 32px
|
||||||
|
|
||||||
& > g
|
& > g
|
||||||
transform: translate(11.5%, 81%)
|
transform: translate(11.5%, 81%)
|
||||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||||
& > text
|
& > text
|
||||||
font-size: 20px
|
|
||||||
font-family: Material-Symbols-Outlined-Regular
|
font-family: Material-Symbols-Outlined-Regular
|
||||||
|
font-size: 20px
|
||||||
|
|
||||||
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
|
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
|
||||||
|
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||||
cy: 50%
|
cy: 50%
|
||||||
cx: 16px
|
cx: 16px
|
||||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
||||||
|
|
||||||
& > circle.m3.m3-switch-handler-state-layer
|
& > circle.m3.m3-switch-handler-state-layer
|
||||||
r: 20px
|
r: 20px
|
||||||
|
|
@ -43,37 +42,37 @@ div.m3.m3-switch
|
||||||
height: 30px
|
height: 30px
|
||||||
|
|
||||||
& > input.m3
|
& > input.m3
|
||||||
|
cursor: pointer
|
||||||
|
appearance: none
|
||||||
|
opacity: 0 !important
|
||||||
margin: 0
|
margin: 0
|
||||||
width: 52px
|
width: 52px
|
||||||
height: 32px
|
height: 32px
|
||||||
cursor: pointer
|
|
||||||
appearance: none
|
|
||||||
position: absolute
|
position: absolute
|
||||||
opacity: 0 !important
|
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
|
|
||||||
&:not(:checked, :disabled) + svg
|
&:not(:checked, :disabled) + svg
|
||||||
& > circle.m3.m3-switch-handler
|
& > circle.m3.m3-switch-handler
|
||||||
fill: $outline
|
fill: var(--md-sys-color-outline)
|
||||||
|
|
||||||
&:checked:not(:disabled) + svg
|
&:checked:not(:disabled) + svg
|
||||||
& > g
|
& > g
|
||||||
transform: translate(50%, 81%)
|
transform: translate(50%, 81%)
|
||||||
|
|
||||||
& > circle.m3.m3-switch-handler
|
& > circle.m3.m3-switch-handler
|
||||||
fill: $on-primary
|
fill: var(--md-sys-color-on-primary)
|
||||||
|
|
||||||
&:not(:disabled) + svg
|
&:not(:disabled) + svg
|
||||||
& > g > text.m3.m3-icon-unchecked
|
& > g > text.m3.m3-icon-unchecked
|
||||||
fill: $on-primary
|
fill: var(--md-sys-color-on-primary)
|
||||||
|
|
||||||
& > g > text.m3.m3-icon-checked
|
& > g > text.m3.m3-icon-checked
|
||||||
fill: $on-primary-container
|
fill: var(--md-sys-color-on-primary-container)
|
||||||
|
|
||||||
&:checked:disabled + svg > circle.m3.m3-switch-handler
|
&:checked:disabled + svg > circle.m3.m3-switch-handler
|
||||||
fill: $surface
|
fill: var(--md-sys-color-surface)
|
||||||
|
|
||||||
&:checked + svg > circle.m3.m3-switch-handler,
|
&:checked + svg > circle.m3.m3-switch-handler,
|
||||||
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
|
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
|
||||||
|
|
@ -94,34 +93,34 @@ div.m3.m3-switch
|
||||||
r: 14px
|
r: 14px
|
||||||
|
|
||||||
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
|
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
|
||||||
|
fill: var(--md-sys-color-on-surface)
|
||||||
fill-opacity: 38%
|
fill-opacity: 38%
|
||||||
fill: $on-surface
|
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
&:checked + svg
|
&:checked + svg
|
||||||
& > circle.m3.m3-switch-handler
|
& > circle.m3.m3-switch-handler
|
||||||
fill: $primary-container
|
fill: var(--md-sys-color-primary-container)
|
||||||
|
|
||||||
& > circle.m3.m3-switch-handler-state-layer
|
& > circle.m3.m3-switch-handler-state-layer
|
||||||
fill: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
fill-opacity: 8%
|
fill-opacity: 8%
|
||||||
|
|
||||||
&:not(:checked) + svg
|
&:not(:checked) + svg
|
||||||
& > circle.m3.m3-switch-handler
|
& > circle.m3.m3-switch-handler
|
||||||
fill: $on-surface-variant
|
fill: var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
& > circle.m3.m3-switch-handler-state-layer
|
& > circle.m3.m3-switch-handler-state-layer
|
||||||
|
fill: var(--md-sys-color-on-surface)
|
||||||
fill-opacity: 8%
|
fill-opacity: 8%
|
||||||
fill: $on-surface
|
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
&:checked + svg > circle.m3.m3-switch-handler-state-layer
|
&:checked + svg > circle.m3.m3-switch-handler-state-layer
|
||||||
fill: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
fill-opacity: 12%
|
fill-opacity: 12%
|
||||||
|
|
||||||
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
|
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
|
||||||
|
fill: var(--md-sys-color-on-surface)
|
||||||
fill-opacity: 12%
|
fill-opacity: 12%
|
||||||
fill: $on-surface
|
|
||||||
|
|
||||||
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
|
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
|
||||||
rx: 16px
|
rx: 16px
|
||||||
|
|
@ -134,26 +133,26 @@ div.m3.m3-switch
|
||||||
y: 1px
|
y: 1px
|
||||||
|
|
||||||
&:not(:checked) + svg > rect.m3.m3-switch-track
|
&:not(:checked) + svg > rect.m3.m3-switch-track
|
||||||
stroke: $outline
|
stroke: var(--md-sys-color-outline)
|
||||||
fill: $surface-container-highest
|
fill: var(--md-sys-color-surface-container-highest)
|
||||||
|
|
||||||
&:checked + svg > rect.m3.m3-switch-track
|
&:checked + svg > rect.m3.m3-switch-track
|
||||||
fill: $primary
|
stroke: var(--md-sys-color-primary)
|
||||||
stroke: $primary
|
fill: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:disabled + svg
|
&:disabled + svg
|
||||||
& > g > text.m3
|
& > g > text.m3
|
||||||
fill: color-mix(in srgb, $surface-container-highest 38%, transparent)
|
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
|
||||||
|
|
||||||
& > rect.m3.m3-switch-track
|
& > rect.m3.m3-switch-track
|
||||||
stroke: color-mix(in srgb, $on-surface 12%, transparent)
|
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
fill: color-mix(in srgb, $surface-variant 12%, transparent)
|
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent)
|
||||||
|
|
||||||
&:checked:disabled + svg
|
&:checked:disabled + svg
|
||||||
& > g > text.m3
|
& > g > text.m3
|
||||||
transform: translateX(38.5%)
|
transform: translateX(38.5%)
|
||||||
fill: color-mix(in srgb, $on-surface 38%, transparent)
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||||
|
|
||||||
& > rect.m3.m3-switch-track
|
& > rect.m3.m3-switch-track
|
||||||
fill: color-mix(in srgb, $on-surface 12%, transparent)
|
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
|
||||||
stroke: color-mix(in srgb, $on-surface 0%, transparent)
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
@ -1,73 +1,66 @@
|
||||||
@import '../css/colors-variables'
|
|
||||||
|
|
||||||
@mixin m3-text-field-fieldset-legend
|
|
||||||
border-top-width: 0
|
|
||||||
border-style: solid
|
|
||||||
border-bottom-width: 0
|
|
||||||
border-color: transparent
|
|
||||||
|
|
||||||
div.m3.m3-text-field
|
div.m3.m3-text-field
|
||||||
margin: 0
|
|
||||||
display: flex
|
|
||||||
position: relative
|
position: relative
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
justify-content: center
|
margin: 0
|
||||||
|
|
||||||
span.m3-icon.icon-before
|
span.m3-icon.icon-before
|
||||||
align-self: start
|
align-self: start
|
||||||
|
|
||||||
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
|
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
|
||||||
@include m3-typography-mixin('body-large')
|
line-height: var(--md-sys-typescale-body-large-line-height)
|
||||||
|
font-size: var(--md-sys-typescale-body-large-font-size)
|
||||||
|
|
||||||
& + span.m3-text-field-supporting-text
|
& + span.m3-text-field-supporting-text
|
||||||
@include m3-typography-mixin('body-small')
|
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
|
line-height: var(--md-sys-typescale-body-small-line-height)
|
||||||
|
font-size: var(--md-sys-typescale-body-small-font-size)
|
||||||
|
color: var(--md-sys-color-on-surface-variant)
|
||||||
margin: 4px 16px 2px 16px
|
margin: 4px 16px 2px 16px
|
||||||
color: $on-surface-variant
|
|
||||||
|
|
||||||
& > label
|
& > label
|
||||||
position: absolute
|
|
||||||
padding-inline: 4px
|
padding-inline: 4px
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
transform: translate(16px, 0)
|
transform: translate(16px, 0)
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
position: absolute
|
||||||
|
|
||||||
& > input
|
& > input
|
||||||
border: none
|
|
||||||
background-color: transparent
|
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
background-color: transparent
|
||||||
|
border: none
|
||||||
|
|
||||||
& > span.m3-icon
|
& > span.m3-icon
|
||||||
width: 24px
|
|
||||||
margin: 12px
|
|
||||||
font-size: 24px
|
|
||||||
align-self: end
|
|
||||||
cursor: pointer
|
|
||||||
display: inherit
|
|
||||||
line-height: 24px
|
|
||||||
position: absolute
|
position: absolute
|
||||||
|
align-self: end
|
||||||
|
margin: 12px
|
||||||
|
width: 24px
|
||||||
|
line-height: 24px
|
||||||
|
font-size: 24px
|
||||||
|
display: inherit
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: inherit
|
justify-content: inherit
|
||||||
color: $on-surface-variant
|
cursor: pointer
|
||||||
|
color: var(--md-sys-color-on-surface-variant)
|
||||||
font-family: Material-Symbols-Outlined-Regular, serif
|
font-family: Material-Symbols-Outlined-Regular, serif
|
||||||
|
|
||||||
& > span.m3-text-field-state-layer
|
& > span.m3-text-field-state-layer
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
position: absolute
|
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
position: absolute
|
||||||
|
|
||||||
& > input, & > label
|
& > input, & > label
|
||||||
color: $on-surface
|
color: var(--md-sys-color-on-surface)
|
||||||
|
|
||||||
&:is(.filled, .outlined) > input::placeholder
|
&:is(.filled, .outlined) > input::placeholder
|
||||||
color: $on-surface-variant
|
color: var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
&:is(.filled, .outlined) > input:focus-visible
|
&:is(.filled, .outlined) > input:focus-visible
|
||||||
outline: none
|
outline: none
|
||||||
caret-color: $primary
|
caret-color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:is(.filled, .outlined):has(input:disabled)
|
&:is(.filled, .outlined):has(input:disabled)
|
||||||
& > *, & + span.m3-text-field-supporting-text
|
& > *, & + span.m3-text-field-supporting-text
|
||||||
|
|
@ -93,41 +86,41 @@ div.m3.m3-text-field
|
||||||
&.with-after-icon.with-before-icon
|
&.with-after-icon.with-before-icon
|
||||||
padding: 24px 48px 8px 48px
|
padding: 24px 48px 8px 48px
|
||||||
|
|
||||||
align-items: center
|
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
|
align-items: center
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
border-radius: 4px 4px 0 0
|
border-radius: 4px 4px 0 0
|
||||||
background-color: $surface-container-highest
|
background-color: var(--md-sys-color-surface-container-highest)
|
||||||
box-shadow: inset 0 -1px 0 $on-surface-variant
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
|
||||||
|
|
||||||
& > label.raised
|
& > label.raised
|
||||||
@include m3-typography-mixin('body-small')
|
|
||||||
|
|
||||||
transform: translate(12px, -12px)
|
transform: translate(12px, -12px)
|
||||||
|
line-height: var(--md-sys-typescale-body-small-line-height)
|
||||||
|
font-size: var(--md-sys-typescale-body-small-font-size)
|
||||||
|
|
||||||
& > input:required:user-invalid
|
& > input:required:user-invalid
|
||||||
caret-color: $error
|
caret-color: var(--md-sys-color-error)
|
||||||
|
|
||||||
&:focus-visible
|
&:focus-visible
|
||||||
box-shadow: inset 0 -3px 0 $error
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
|
||||||
&
|
&
|
||||||
box-shadow: inset 0 -1px 0 $error
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
|
||||||
|
|
||||||
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
||||||
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
||||||
color: $error
|
color: var(--md-sys-color-error)
|
||||||
|
|
||||||
& > input:focus-visible
|
& > input:focus-visible
|
||||||
outline-offset: 3px
|
outline-offset: 3px
|
||||||
box-shadow: inset 0 -3px 0 $primary
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
|
||||||
|
|
||||||
& > input:focus-visible + label
|
& > input:focus-visible + label
|
||||||
color: $primary
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
& > input:not(:disabled) ~ span.m3-text-field-state-layer
|
& > input:not(:disabled) ~ span.m3-text-field-state-layer
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
background-color: color-mix(in srgb, $on-surface 8%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||||
|
|
||||||
&.outlined
|
&.outlined
|
||||||
& > fieldset
|
& > fieldset
|
||||||
|
|
@ -136,27 +129,27 @@ div.m3.m3-text-field
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
padding-inline: 12px
|
padding-inline: 12px
|
||||||
|
border: 1px solid var(--md-sys-color-outline)
|
||||||
inset: -7.5px 0px 0px 0px
|
inset: -7.5px 0px 0px 0px
|
||||||
border: 1px solid $outline
|
|
||||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
& > legend > span
|
& > legend > span
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
& > legend
|
& > legend
|
||||||
width: 0
|
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
width: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
border: 0 solid transparent
|
border: 0 solid transparent
|
||||||
transition: .05s cubic-bezier(0.2, 0, 0, 1)
|
transition: .05s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
& > legend.raised
|
& > legend.raised
|
||||||
|
border-inline-width: 6px
|
||||||
|
border-style: solid
|
||||||
|
border-color: transparent
|
||||||
width: auto
|
width: auto
|
||||||
visibility: visible
|
visibility: visible
|
||||||
border-style: solid
|
|
||||||
border-inline-width: 6px
|
|
||||||
border-color: transparent
|
|
||||||
|
|
||||||
& > input
|
& > input
|
||||||
&.with-after-icon
|
&.with-after-icon
|
||||||
|
|
@ -178,41 +171,46 @@ div.m3.m3-text-field
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
|
||||||
&:has(input:focus-visible) > fieldset
|
&:has(input:focus-visible) > fieldset
|
||||||
border: 3px solid $primary
|
border: 3px solid var(--md-sys-color-primary)
|
||||||
|
|
||||||
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
|
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
|
||||||
@include m3-text-field-fieldset-legend
|
border-top-width: 0
|
||||||
|
border-bottom-width: 0
|
||||||
border-inline-width: 5.5px
|
border-inline-width: 5.5px
|
||||||
|
border-style: solid
|
||||||
|
border-color: transparent
|
||||||
|
|
||||||
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
|
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
|
||||||
@include m3-text-field-fieldset-legend
|
border-top-width: 0
|
||||||
|
border-bottom-width: 0
|
||||||
border-inline-width: 7.5px
|
border-inline-width: 7.5px
|
||||||
|
border-style: solid
|
||||||
|
border-color: transparent
|
||||||
|
|
||||||
& > input:focus-visible + label
|
& > input:focus-visible + label
|
||||||
color: $primary
|
color: var(--md-sys-color-primary)
|
||||||
|
|
||||||
& > label.raised, & > fieldset > *
|
& > label.raised, & > fieldset > *
|
||||||
@include m3-typography-mixin('body-small')
|
line-height: var(--md-sys-typescale-body-small-line-height)
|
||||||
|
font-size: var(--md-sys-typescale-body-small-font-size)
|
||||||
|
|
||||||
& > label.raised
|
& > label.raised
|
||||||
transform: translate(16px, -27px) !important
|
transform: translate(16px, -27px) !important
|
||||||
|
|
||||||
& > input:required:user-invalid
|
& > input:required:user-invalid
|
||||||
caret-color: $error
|
caret-color: var(--md-sys-color-error)
|
||||||
|
|
||||||
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
||||||
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
||||||
color: $error
|
color: var(--md-sys-color-error)
|
||||||
|
|
||||||
&:has(input:required:user-invalid) > fieldset
|
&:has(input:required:user-invalid) > fieldset
|
||||||
border: 3px solid $error
|
border: 3px solid var(--md-sys-color-error)
|
||||||
|
|
||||||
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
|
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
|
||||||
border: 1px solid $error
|
border: 1px solid var(--md-sys-color-error)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
|
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
|
||||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
border-color: $on-surface
|
border-color: var(--md-sys-color-on-surface)
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,3 +1 @@
|
||||||
|
|
||||||
|
|
||||||
/*# sourceMappingURL=m3-mixins.css.map */
|
/*# sourceMappingURL=m3-mixins.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"m3-mixins.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "",
|
|
||||||
"sources": [],
|
|
||||||
"names": [],
|
|
||||||
"file": "m3-mixins.css"
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +1,33 @@
|
||||||
@mixin center($display)
|
@mixin m3-label-mixin
|
||||||
display: $display
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
|
|
||||||
@mixin m3-checkbox-container-mixin
|
|
||||||
gap: 16px
|
|
||||||
height: 40px
|
|
||||||
display: flex
|
display: flex
|
||||||
aspect-ratio: 1
|
|
||||||
position: relative
|
position: relative
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
aspect-ratio: 1
|
||||||
@mixin m3-typography-mixin($type)
|
|
||||||
font-size: var(--md-sys-typescale-#{$type}-font-size)
|
|
||||||
font-weight: var(--md-sys-typescale-#{$type}-font-weight)
|
|
||||||
line-height: var(--md-sys-typescale-#{$type}-line-height)
|
|
||||||
font-family: var(--md-sys-typescale-#{$type}-font-family-name)
|
|
||||||
letter-spacing: var(--md-sys-typescale-#{$type}-letter-spacing)
|
|
||||||
|
|
||||||
@mixin m3-state-layer-mixin
|
@mixin m3-state-layer-mixin
|
||||||
width: 40px
|
|
||||||
aspect-ratio: 1
|
|
||||||
border-radius: 50%
|
|
||||||
position: absolute
|
position: absolute
|
||||||
|
width: 2.5rem
|
||||||
|
aspect-ratio: inherit
|
||||||
|
border-radius: 50%
|
||||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||||
|
|
||||||
|
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
|
||||||
|
width: $width
|
||||||
|
height: $height
|
||||||
|
border-radius: $b-radius
|
||||||
|
padding: $padding
|
||||||
|
|
||||||
|
@mixin m3-fab-colors-palette($bg-color, $color)
|
||||||
|
&:not(.without-elevation)
|
||||||
|
@include elevation-3(false)
|
||||||
|
background-color: var($bg-color)
|
||||||
|
color: var($color)
|
||||||
|
& > svg.m3-svg-icon
|
||||||
|
fill: var($color)
|
||||||
|
& > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
background: color-mix(in srgb, var($color) 12%, transparent)
|
||||||
|
|
||||||
@mixin elevation-0($important)
|
@mixin elevation-0($important)
|
||||||
@if $important == true
|
@if $important == true
|
||||||
box-shadow: none !important
|
box-shadow: none !important
|
||||||
|
|
@ -62,8 +64,12 @@
|
||||||
@else
|
@else
|
||||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
||||||
|
|
||||||
@mixin m3-buttons-state-layer-mixin
|
@mixin state-layer
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
position: absolute
|
|
||||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||||
|
content: ""
|
||||||
|
top: 0
|
||||||
|
bottom: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
position: absolute
|
||||||
|
background: #00000000
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
pointer-events: none; }
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.m3.m3-ripple {
|
.m3.ripple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
@ -14,20 +15,26 @@
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation-duration: 0.55s;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-name: rippleAppearanceAnimation;
|
animation-name: rippleAppearanceAnimation;
|
||||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition-duration: 0.55s;
|
animation-duration: 0.55s;
|
||||||
transition-property: opacity, background-color;
|
transition:
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
opacity,
|
||||||
.m3.m3-ripple.visible {
|
background,
|
||||||
opacity: 1 !important; }
|
background-color,
|
||||||
|
0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.m3.ripple.visible {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes rippleAppearanceAnimation {
|
@keyframes rippleAppearanceAnimation {
|
||||||
0% {
|
0% {
|
||||||
transform: scale3d(0, 0, 0); }
|
transform: scale3d(0, 0, 0);
|
||||||
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: scale3d(1, 1, 1); } }
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=ripple.css.map */
|
/*# sourceMappingURL=ripple.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":["ripple.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE","file":"ripple.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAAA,oBAAoB;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,cAAc,EAAE,IAAI;;AAEtB,UAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,EAAE;EACX,YAAY,EAAE,CAAC;EACf,aAAa,EAAE,GAAG;EAElB,kBAAkB,EAAE,KAAI;EACxB,yBAAyB,EAAE,CAAC;EAC5B,cAAc,EAAE,yBAAyB;EACzC,yBAAyB,EAAE,4BAA4B;EAEvD,mBAAmB,EAAE,KAAI;EACzB,mBAAmB,EAAE,yBAAyB;EAC9C,0BAA0B,EAAE,4BAA4B;EAExD,kBAAS;IACP,OAAO,EAAE,YAAY;;;;IAIrB,SAAS,EAAE,gBAAgB;;IAE3B,SAAS,EAAE,gBAAgB",
|
|
||||||
"sources": ["ripple.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "ripple.css"
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,19 @@
|
||||||
.m3.m3-ripple-domain
|
.m3.m3-ripple-domain
|
||||||
width: 100%
|
|
||||||
z-index: 20
|
|
||||||
height: 100%
|
|
||||||
position: absolute
|
position: absolute
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
z-index: 20
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
|
||||||
.m3.m3-ripple
|
.m3.ripple
|
||||||
|
position: absolute
|
||||||
|
overflow: hidden
|
||||||
|
pointer-events: none
|
||||||
|
transform-origin: center
|
||||||
opacity: 0
|
opacity: 0
|
||||||
z-index: 20
|
z-index: 20
|
||||||
aspect-ratio: 1
|
aspect-ratio: 1
|
||||||
overflow: hidden
|
|
||||||
position: absolute
|
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
pointer-events: none
|
|
||||||
transform-origin: center
|
|
||||||
|
|
||||||
animation-duration: .55s
|
|
||||||
animation-iteration-count: 1
|
|
||||||
animation-name: rippleAppearanceAnimation
|
animation-name: rippleAppearanceAnimation
|
||||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||||
animation-duration: .55s
|
animation-duration: .55s
|
||||||
|
|
@ -28,6 +25,5 @@
|
||||||
@keyframes rippleAppearanceAnimation
|
@keyframes rippleAppearanceAnimation
|
||||||
0%
|
0%
|
||||||
transform: scale3d(0, 0, 0)
|
transform: scale3d(0, 0, 0)
|
||||||
|
|
||||||
100%
|
100%
|
||||||
transform: scale3d(1, 1, 1)
|
transform: scale3d(1, 1, 1)
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
/*# sourceMappingURL=typography.css.map */
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"version": 3,
|
|
||||||
"mappings": "",
|
|
||||||
"sources": [],
|
|
||||||
"names": [],
|
|
||||||
"file": "typography.css"
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
.m3.m3-typography
|
|
||||||
position: relative
|
|
||||||
Loading…
Reference in New Issue