ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.
CHANGED: For optimizing write styles added a few mixins FIXED: Bug with width in segmented-buttons
This commit is contained in:
doryan authored and 
doryan committed
1 parent
f5bf0f92d2
commit
5300c63827
28 files changed
+1628
-3505
No files matched your search
@@ -1,142 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,221 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,197 +0,0 @@
|
||||
'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;
|
||||
@@ -1,34 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
'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
+34
-13
@@ -1,19 +1,11 @@
|
||||
import React from 'react';
|
||||
import testImage1 from './test-images/test-image-1.jpg';
|
||||
import { Card } from '../src/primitive-components/card/card';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FAB,
|
||||
IconButton,
|
||||
} 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 { 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 { 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';
|
||||
|
||||
@@ -34,22 +26,51 @@ export default function Page() {
|
||||
>
|
||||
<Card variant={'outlined'}>
|
||||
<CardFooter>
|
||||
<SegmentedButtons toggled={true}>
|
||||
<SegmentedButtons selectable={true}>
|
||||
<SegmentButton
|
||||
fillIcon={1}
|
||||
icon={'change_history'}
|
||||
>
|
||||
fin ita la comedia
|
||||
Label 1
|
||||
</SegmentButton>
|
||||
<SegmentButton
|
||||
fillIcon={1}
|
||||
icon={'change_history'}
|
||||
iconPlace={'right'}
|
||||
selectable={false}
|
||||
>
|
||||
Label 2
|
||||
Not selectable
|
||||
</SegmentButton>
|
||||
<SegmentButton disabled>Label 3</SegmentButton>
|
||||
<SegmentButton
|
||||
fillIcon={1}
|
||||
icon={'change_history'}
|
||||
iconPlace={'right'}
|
||||
iconSize={48}
|
||||
svgSize={48}
|
||||
>
|
||||
Label 3
|
||||
</SegmentButton>
|
||||
<SegmentButton disabled>Label 4</SegmentButton>
|
||||
</SegmentedButtons>
|
||||
<Button ripple={false}>Filled button</Button>
|
||||
<Button ripple={false} variant={'outlined'}>
|
||||
Outlined button
|
||||
</Button>
|
||||
<Button ripple={false} variant={'elevated'}>
|
||||
Elevated button
|
||||
</Button>
|
||||
<Button ripple={false} variant={'text'}>
|
||||
Text button
|
||||
</Button>
|
||||
<Button ripple={false} variant={'tonal'}>
|
||||
Tonal button
|
||||
</Button>
|
||||
<FAB icon={'edit'} ripple={false}></FAB>
|
||||
<FAB icon={'edit'}></FAB>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
variant={'filled'}
|
||||
></IconButton>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
@@ -7,11 +7,11 @@ import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||
import React, { forwardRef, useId, useRef, useState } from 'react';
|
||||
|
||||
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
||||
({ centralRipple = false, ...props }, ref) => {
|
||||
({ centralRipple = false, ripple = true, ...props }, ref) => {
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
buttonId = useId(),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
events = useRippleEffect(ripplesRef, setIsActive, ripple);
|
||||
|
||||
const extraClassStyles =
|
||||
`m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
|
||||
@@ -26,11 +26,13 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
<RippleEffect
|
||||
callback={setIsActive}
|
||||
central={centralRipple}
|
||||
ref={ripplesRef}
|
||||
/>
|
||||
{ripple && (
|
||||
<RippleEffect
|
||||
callback={setIsActive}
|
||||
central={centralRipple}
|
||||
ref={ripplesRef}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { forwardRef } from 'react';
|
||||
import React, { forwardRef } from 'react';
|
||||
import { ButtonProps } from './button.types';
|
||||
import { bool, oneOf, string } from 'prop-types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
@@ -15,9 +15,10 @@ import { Typography } from '../../typography/typography';
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
icon = undefined,
|
||||
ripple = true,
|
||||
className = '',
|
||||
disabled = false,
|
||||
icon = undefined,
|
||||
variant = 'filled',
|
||||
iconPlace = 'left',
|
||||
centralRipple = false,
|
||||
@@ -31,6 +32,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
className={`${variant} ${className}`}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
ripple={ripple}
|
||||
>
|
||||
<IconWrapper icon={icon} iconPlace={iconPlace}>
|
||||
<Typography
|
||||
|
||||
@@ -5,8 +5,8 @@ export interface ButtonMainProps {
|
||||
icon?: string;
|
||||
children?: string;
|
||||
disabled?: boolean;
|
||||
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
||||
iconPlace?: 'left' | 'right';
|
||||
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
|
||||
}
|
||||
|
||||
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
|
||||
|
||||
@@ -44,6 +44,7 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
||||
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
|
||||
{icon}
|
||||
</Icon>
|
||||
<span className={'m3 m3-fab-state-layer'}></span>
|
||||
{size === 'extended' ? (
|
||||
<Typography
|
||||
className={'label-large'}
|
||||
|
||||
@@ -5,6 +5,14 @@ import React, { forwardRef, useState } from 'react';
|
||||
import { IconWrapper } from '../../icon/icon-wrapper';
|
||||
import { Typography } from '../../typography/typography';
|
||||
import { SegmentedButton } from './segmented-buttons.types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
||||
import { Icon } from '../../components';
|
||||
|
||||
/**
|
||||
* Segment button
|
||||
*/
|
||||
|
||||
export const SegmentButton = forwardRef<
|
||||
HTMLButtonElement,
|
||||
ButtonLayoutProps & SegmentedButton
|
||||
@@ -20,7 +28,7 @@ export const SegmentButton = forwardRef<
|
||||
children,
|
||||
iconSize,
|
||||
opticalSize,
|
||||
toggled = false,
|
||||
selectable = false,
|
||||
iconPlace = 'left',
|
||||
centralRipple = false,
|
||||
...props
|
||||
@@ -31,46 +39,56 @@ export const SegmentButton = forwardRef<
|
||||
const classes =
|
||||
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
|
||||
|
||||
const ButtonLabel = (
|
||||
<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 (
|
||||
<ButtonLayout
|
||||
{...props}
|
||||
centralRipple={centralRipple}
|
||||
className={classes}
|
||||
onClick={() => {
|
||||
if (toggled) {
|
||||
if (selectable) {
|
||||
setSelectedState(state => !state);
|
||||
}
|
||||
props.onClick?.apply(this, props.onClick.arguments);
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<IconWrapper
|
||||
fillIcon={fillIcon}
|
||||
grade={grade}
|
||||
icon={icon}
|
||||
iconPlace={iconPlace}
|
||||
iconSize={iconSize}
|
||||
opticalSize={opticalSize}
|
||||
svgSize={svgSize}
|
||||
type={type}
|
||||
weight={weight}
|
||||
>
|
||||
<Typography
|
||||
className={'label-large'}
|
||||
role={'label'}
|
||||
size={'large'}
|
||||
<span className={'m3 m3-button-segment-content-layer'}>
|
||||
<IconWrapper
|
||||
{...iconProps}
|
||||
icon={icon}
|
||||
iconPlace={iconPlace}
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
</IconWrapper>
|
||||
<span className={'m3 m3-button-segment-state-layer'} />
|
||||
{ButtonLabel}
|
||||
</IconWrapper>
|
||||
</span>
|
||||
<span className={'m3 m3-button-segment-state-layer'}>
|
||||
{selectable && (
|
||||
<>
|
||||
<Icon {...iconProps}>{icon}</Icon>
|
||||
{ButtonLabel}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</ButtonLayout>
|
||||
);
|
||||
},
|
||||
);
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
|
||||
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
||||
|
||||
SegmentButton.propTypes = {
|
||||
children: string,
|
||||
|
||||
@@ -7,7 +7,7 @@ import React, { cloneElement, forwardRef, ReactElement } from 'react';
|
||||
export const SegmentedButtons = forwardRef<
|
||||
HTMLDivElement,
|
||||
SegmentedButtonsProps
|
||||
>(({ toggled = false, children, ...props }, ref) => {
|
||||
>(({ selectable = false, density = 0, children, ...props }, ref) => {
|
||||
if (children.length <= 1) {
|
||||
throw 'You must build segmented button with 2 or more button';
|
||||
}
|
||||
@@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef<
|
||||
(Button: ReactElement, index: number) => {
|
||||
return cloneElement(<SegmentButton />, {
|
||||
...Button.props,
|
||||
toggled: Button.props.toggled ?? toggled,
|
||||
selectable: Button.props.selectable ?? selectable,
|
||||
key: index,
|
||||
});
|
||||
},
|
||||
@@ -24,7 +24,7 @@ export const SegmentedButtons = forwardRef<
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
|
||||
className={`m3 m3-segmented-buttons m3-density-${density} ${props.className ?? ''}`.trimEnd()}
|
||||
ref={ref}
|
||||
>
|
||||
{SegmentedButtons}
|
||||
|
||||
+3
-2
@@ -3,12 +3,13 @@ import { IconWrapperProps } from '../../icon/icon.types';
|
||||
|
||||
export type SegmentedButton = IconWrapperProps & {
|
||||
icon?: string;
|
||||
toggled?: boolean;
|
||||
selectable?: boolean;
|
||||
centralRipple?: boolean;
|
||||
};
|
||||
|
||||
export interface SegmentedButtons {
|
||||
toggled?: boolean;
|
||||
selectable?: boolean;
|
||||
density?: 0 | -1 | -2 | -3;
|
||||
children?: ReactElement<HTMLButtonElement>[];
|
||||
}
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@ export interface RippleContainer {
|
||||
}
|
||||
|
||||
export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
|
||||
ripple?: boolean;
|
||||
centralRipple?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,23 +3,22 @@ svg.m3.m3-badge
|
||||
background-color: var(--md-sys-color-error)
|
||||
&.disable-value
|
||||
padding: 0
|
||||
height: 6px
|
||||
width: 6px
|
||||
height: 6px
|
||||
border-radius: 3px
|
||||
& > text
|
||||
display: none
|
||||
&
|
||||
border-radius: 8px
|
||||
height: 16px
|
||||
border-radius: 8px
|
||||
|
||||
& > text
|
||||
fill: var(--md-sys-color-on-error)
|
||||
font-size: var(--md-sys-typescale-label-small-font-size)
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight)
|
||||
line-height: var(--md-sys-typescale-label-small-line-height)
|
||||
font-optical-sizing: none
|
||||
alignment-baseline: central
|
||||
text-anchor: middle
|
||||
@include m3-typography-mixin('label-small')
|
||||
|
||||
display: flex
|
||||
align-items: center
|
||||
text-anchor: middle
|
||||
justify-content: center
|
||||
font-optical-sizing: none
|
||||
alignment-baseline: central
|
||||
fill: var(--md-sys-color-on-error)
|
||||
@@ -1,20 +1,11 @@
|
||||
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
|
||||
@include m3-typography-mixin('label-large')
|
||||
|
||||
max-height: 40px
|
||||
box-sizing: border-box
|
||||
width: min-content
|
||||
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)
|
||||
height: min-content
|
||||
box-sizing: border-box
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
&.m3
|
||||
@@ -32,13 +23,14 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
|
||||
&.filled
|
||||
background-color: var(--md-sys-color-primary)
|
||||
|
||||
&, & > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&.outlined
|
||||
outline-offset: -1px
|
||||
background-color: #00000000
|
||||
background-color: transparent
|
||||
color: var(--md-sys-color-primary)
|
||||
outline: 1px solid var(--md-sys-color-outline) !important
|
||||
|
||||
@@ -46,8 +38,7 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.text
|
||||
background-color: #00000000
|
||||
padding: 10px 12px !important
|
||||
background-color: transparent
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
@@ -55,6 +46,7 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(false)
|
||||
|
||||
color: var(--md-sys-color-primary)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
|
||||
@@ -68,17 +60,14 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-on-secondary-container)
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
|
||||
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
||||
&.filled > span.m3.m3-ripple-domain > span.m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple
|
||||
& > span.m3.m3-ripple-domain > span.m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
||||
&.tonal > span.m3.m3-ripple-domain > span.m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:active
|
||||
@@ -88,21 +77,31 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
&.elevated
|
||||
@include elevation-1(true)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
&:not(&:has(span.m3.m3-ripple-domain))
|
||||
&.outlined
|
||||
border-color: var(--md-sys-color-primary) !important
|
||||
|
||||
&.filled
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary))
|
||||
|
||||
&:is(.outlined, .text, .elevated)
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||
|
||||
&.tonal
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container))
|
||||
|
||||
&:focus-visible
|
||||
&.outlined
|
||||
border-color: var(--md-sys-color-primary) !important
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
&.filled
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary))
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
&:is(.outlined, .text, .elevated)
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
&.tonal
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container))
|
||||
|
||||
&:hover
|
||||
&:is(.filled, .tonal)
|
||||
@@ -111,14 +110,14 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
&.elevated
|
||||
@include elevation-2(false)
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||
&.filled
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary))
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
&:is(.outlined, .text, .elevated)
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
&.tonal
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container))
|
||||
|
||||
&:disabled
|
||||
pointer-events: none
|
||||
|
||||
@@ -1,3 +1,27 @@
|
||||
@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: var($color)
|
||||
background-color: var($bg-color)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var($color)
|
||||
|
||||
& > span.m3.m3-ripple-domain > span.m3.ripple
|
||||
background: color-mix(in srgb, var($color) 12%, transparent)
|
||||
|
||||
&:not(&:has(span.m3.m3-ripple-domain)):active
|
||||
& > span.m3.m3-fab-state-layer
|
||||
background: color-mix(in srgb, var($color) 20%, transparent)
|
||||
|
||||
|
||||
button.m3.m3-fab
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
@@ -15,8 +39,8 @@ button.m3.m3-fab
|
||||
border: none
|
||||
gap: 12px
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
& > span.m3.m3-fab-state-layer
|
||||
@include m3-buttons-state-layer-mixin
|
||||
|
||||
&.surface
|
||||
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
||||
@@ -53,27 +77,27 @@ button.m3.m3-fab
|
||||
@include elevation-3(true)
|
||||
|
||||
&:hover
|
||||
&.surface::before
|
||||
&.surface > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.primary::before
|
||||
&.primary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
&.secondary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
&.tertiary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
||||
|
||||
&:focus-visible
|
||||
&.surface::before
|
||||
&.surface > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.primary::before
|
||||
&.primary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
&.secondary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
&.tertiary > span.m3.m3-fab-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
|
||||
@@ -1,44 +1,88 @@
|
||||
$densities: [0, -1, -2, -3]
|
||||
|
||||
@each $density in $densities
|
||||
.m3.m3-density-#{$density}
|
||||
$height: 40px + ($density * 2px)
|
||||
|
||||
& > button.m3.m3-button-segment
|
||||
height: $height
|
||||
|
||||
&:first-child
|
||||
border-radius: ($height / 2) 0 0 ($height / 2)
|
||||
|
||||
&:last-child
|
||||
border-radius: 0 ($height / 2) ($height / 2) 0
|
||||
|
||||
& > span.m3.m3-button-segment-state-layer
|
||||
padding-top: 10px + ($density * 1px)
|
||||
padding-bottom: 10px + ($density * 1px)
|
||||
|
||||
@mixin m3-segmented-button-content-color-mixin($color)
|
||||
& > svg.m3.m3-svg-icon > text
|
||||
fill: var($color)
|
||||
|
||||
& > label.m3.m3-typography
|
||||
color: var($color)
|
||||
|
||||
div.m3.m3-segmented-buttons
|
||||
padding: 0
|
||||
height: 40px
|
||||
display: flex
|
||||
padding: 4px 0
|
||||
border-radius: 20px
|
||||
box-sizing: border-box
|
||||
|
||||
& > button.m3.m3-button-segment
|
||||
width: auto
|
||||
height: 40px
|
||||
padding: 10px
|
||||
min-width: 108px
|
||||
flex: 1 1
|
||||
padding: 0
|
||||
width: 100%
|
||||
min-width: 48px
|
||||
border-radius: 0
|
||||
margin: 0 -0.5px
|
||||
display: inline-flex
|
||||
background-color: transparent
|
||||
border: 1px solid var(--md-sys-color-outline)
|
||||
|
||||
&:first-child
|
||||
border-radius: 20px 0 0 20px
|
||||
& > span.m3.m3-ripple-domain
|
||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&:last-child
|
||||
border-radius: 0 20px 20px 0
|
||||
& > span.m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
& > span
|
||||
color: var(--md-sys-color-on-surface)
|
||||
& > span.m3.m3-button-segment-state-layer
|
||||
@include m3-buttons-state-layer-mixin
|
||||
|
||||
& > svg
|
||||
opacity: 0
|
||||
box-sizing: border-box
|
||||
|
||||
& > text
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
& > *
|
||||
visibility: hidden
|
||||
|
||||
&:not(.selected)
|
||||
& > svg
|
||||
& > span.m3.m3-button-segment-content-layer
|
||||
@include center(inline-flex)
|
||||
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
|
||||
|
||||
gap: 8px
|
||||
position: absolute
|
||||
max-height: inherit
|
||||
|
||||
& > svg.m3.m3-svg-icon
|
||||
display: none
|
||||
|
||||
&::after, &::before
|
||||
content: ''
|
||||
width: 6px
|
||||
position: relative
|
||||
&.selected
|
||||
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
|
||||
& > span.m3.m3-button-segment-content-layer
|
||||
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container)
|
||||
|
||||
& > svg.m3.m3-svg-icon
|
||||
display: initial
|
||||
|
||||
&:hover
|
||||
& > span.m3.m3-button-segment-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&:is(&:not(&:has(span.m3.m3-ripple-domain)):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)
|
||||
|
||||
&:disabled
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
|
||||
@@ -46,33 +90,6 @@ div.m3.m3-segmented-buttons
|
||||
& > *
|
||||
opacity: 38%
|
||||
|
||||
&.selected
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
|
||||
& > svg
|
||||
opacity: 1
|
||||
|
||||
& > 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
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
|
||||
& > 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
|
||||
& > span.m3.m3-ripple-domain > span.m3.ripple
|
||||
|
||||
+1317
-916
File diff suppressed because it is too large.
Load diff
@@ -1,7 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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 truncated
|
||||
"sources": ["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],
|
||||
"names": [],
|
||||
"file": "generics.css"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAsBQ;AACA;AACA;AACA;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EC7BA;;ADgCA;EC1BA;;AD8BA;EC5CA;;AD+CA;ECzCA;;AD6CI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EFCA;EACA;EACA;EACA;EACA;EEFI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBJ;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;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;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;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACvEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIRLine truncated
|
||||
@@ -1,3 +1,26 @@
|
||||
@mixin input-range-thumb-mixin
|
||||
@include elevation-1(false)
|
||||
|
||||
&:hover
|
||||
&::after
|
||||
content: '1'
|
||||
|
||||
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
|
||||
height: 20px
|
||||
appearance: none
|
||||
border-radius: 50%
|
||||
box-sizing: border-box
|
||||
outline: 10px solid transparent
|
||||
background: var(--md-sys-color-primary)
|
||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
|
||||
|
||||
div.m3.m3-slider-container
|
||||
height: 20px
|
||||
display: flex
|
||||
@@ -6,7 +29,6 @@ div.m3.m3-slider-container
|
||||
& > datalist
|
||||
display: none
|
||||
|
||||
|
||||
input[type="range"].m3.m3-slider
|
||||
margin: 0
|
||||
appearance: none
|
||||
|
||||
@@ -1,56 +1,55 @@
|
||||
div.m3.m3-text-field
|
||||
position: relative
|
||||
margin: 0
|
||||
display: flex
|
||||
justify-content: center
|
||||
position: relative
|
||||
flex-direction: column
|
||||
box-sizing: border-box
|
||||
margin: 0
|
||||
justify-content: center
|
||||
|
||||
span.m3-icon.icon-before
|
||||
align-self: start
|
||||
|
||||
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
|
||||
line-height: var(--md-sys-typescale-body-large-line-height)
|
||||
font-size: var(--md-sys-typescale-body-large-font-size)
|
||||
@include m3-typography-mixin('body-large')
|
||||
|
||||
& + span.m3-text-field-supporting-text
|
||||
@include m3-typography-mixin('body-small')
|
||||
|
||||
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
|
||||
color: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
& > label
|
||||
position: absolute
|
||||
padding-inline: 4px
|
||||
pointer-events: none
|
||||
transform: translate(16px, 0)
|
||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
position: absolute
|
||||
|
||||
& > input
|
||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
background-color: transparent
|
||||
border: none
|
||||
background-color: transparent
|
||||
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > span.m3-icon
|
||||
position: absolute
|
||||
align-self: end
|
||||
margin: 12px
|
||||
width: 24px
|
||||
line-height: 24px
|
||||
margin: 12px
|
||||
font-size: 24px
|
||||
align-self: end
|
||||
cursor: pointer
|
||||
display: inherit
|
||||
line-height: 24px
|
||||
position: absolute
|
||||
align-items: center
|
||||
justify-content: inherit
|
||||
cursor: pointer
|
||||
color: var(--md-sys-color-on-surface-variant)
|
||||
font-family: Material-Symbols-Outlined-Regular, serif
|
||||
|
||||
& > span.m3-text-field-state-layer
|
||||
width: 100%
|
||||
height: 100%
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
|
||||
& > input, & > label
|
||||
color: var(--md-sys-color-on-surface)
|
||||
@@ -86,17 +85,17 @@ div.m3.m3-text-field
|
||||
&.with-after-icon.with-before-icon
|
||||
padding: 24px 48px 8px 48px
|
||||
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
box-sizing: border-box
|
||||
border-radius: 4px 4px 0 0
|
||||
background-color: var(--md-sys-color-surface-container-highest)
|
||||
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
|
||||
|
||||
& > label.raised
|
||||
@include m3-typography-mixin('body-small')
|
||||
|
||||
transform: translate(12px, -12px)
|
||||
line-height: var(--md-sys-typescale-body-small-line-height)
|
||||
font-size: var(--md-sys-typescale-body-small-font-size)
|
||||
|
||||
& > input:required:user-invalid
|
||||
caret-color: var(--md-sys-color-error)
|
||||
@@ -129,27 +128,27 @@ div.m3.m3-text-field
|
||||
border-radius: 4px
|
||||
pointer-events: none
|
||||
padding-inline: 12px
|
||||
border: 1px solid var(--md-sys-color-outline)
|
||||
inset: -7.5px 0px 0px 0px
|
||||
border: 1px solid var(--md-sys-color-outline)
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > legend > span
|
||||
width: 100%
|
||||
|
||||
& > legend
|
||||
opacity: 0
|
||||
width: 0
|
||||
opacity: 0
|
||||
padding: 0
|
||||
pointer-events: none
|
||||
border: 0 solid transparent
|
||||
transition: .05s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > legend.raised
|
||||
border-inline-width: 6px
|
||||
border-style: solid
|
||||
border-color: transparent
|
||||
width: auto
|
||||
visibility: visible
|
||||
border-style: solid
|
||||
border-inline-width: 6px
|
||||
border-color: transparent
|
||||
|
||||
& > input
|
||||
&.with-after-icon
|
||||
@@ -175,24 +174,23 @@ div.m3.m3-text-field
|
||||
|
||||
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
|
||||
border-top-width: 0
|
||||
border-bottom-width: 0
|
||||
border-inline-width: 5.5px
|
||||
border-style: solid
|
||||
border-bottom-width: 0
|
||||
border-color: transparent
|
||||
border-inline-width: 5.5px
|
||||
|
||||
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
|
||||
border-top-width: 0
|
||||
border-bottom-width: 0
|
||||
border-inline-width: 7.5px
|
||||
border-style: solid
|
||||
border-bottom-width: 0
|
||||
border-color: transparent
|
||||
border-inline-width: 7.5px
|
||||
|
||||
& > input:focus-visible + label
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
& > label.raised, & > fieldset > *
|
||||
line-height: var(--md-sys-typescale-body-small-line-height)
|
||||
font-size: var(--md-sys-typescale-body-small-font-size)
|
||||
@include m3-typography-mixin('body-small')
|
||||
|
||||
& > label.raised
|
||||
transform: translate(16px, -27px) !important
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@mixin center($display)
|
||||
display: $display
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
@mixin m3-checkbox-container-mixin
|
||||
gap: 16px
|
||||
height: 40px
|
||||
@@ -7,6 +12,13 @@
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
@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
|
||||
width: 40px
|
||||
aspect-ratio: 1
|
||||
@@ -14,22 +26,6 @@
|
||||
position: absolute
|
||||
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)
|
||||
@if $important == true
|
||||
box-shadow: none !important
|
||||
@@ -66,12 +62,8 @@
|
||||
@else
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
||||
|
||||
@mixin state-layer
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
content: ""
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
@mixin m3-buttons-state-layer-mixin
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
background: #00000000
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
@@ -0,0 +1,2 @@
|
||||
.m3.m3-typography
|
||||
position: relative
|
||||
Reference in new issue
Block a user