doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Mixins for icon buttons, but it's not completed feature 

FIXED: Styles for segmented-button
This commit is contained in:
doryan04 2024-02-24 23:58:23 +04:00
parent 0219596ed1
commit 91486200f7
22 changed files with 420 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
app/page.tsx
View File

@ -1,6 +1,10 @@
import React from 'react'; import React from 'react';
import { Card } from '../src/primitive-components/card/card'; import { Card } from '../src/primitive-components/card/card';
import { IconButton } from '../src/primitive-components/components'; import {
Button,
FAB,
IconButton,
} from '../src/primitive-components/components';
import { CardFooter } from '../src/primitive-components/card/card-footer'; import { CardFooter } from '../src/primitive-components/card/card-footer';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-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'; import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@ -8,51 +12,80 @@ import { SegmentedButtons } from '../src/primitive-components/button-components/
export default function Page() { export default function Page() {
return ( return (
<main> <main>
<div <Card variant={'outlined'}>
style={{ <CardFooter>
display: 'flex', <Button> Default Button </Button>
flexDirection: 'column', <Button ripple={false}> Default Button </Button>
alignItems: 'center', <FAB icon={'edit'} variant={'secondary'} />
gap: '8px', <FAB icon={'edit'} ripple={false} variant={'secondary'} />
padding: '8px',
}} <IconButton icon={'settings'} variant={'filled'} />
> <IconButton icon={'settings'} variant={'default'} />
<div <IconButton icon={'settings'} variant={'tonal'} />
style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }} <IconButton icon={'settings'} variant={'outlined'} />
>
<Card variant={'outlined'}> <IconButton
<CardFooter> icon={'settings'}
<SegmentedButtons selectable={true}> toggled={{
<SegmentButton selected: 'settings',
fillIcon={1} unselected: 'settings',
icon={'change_history'} }}
> variant={'filled'}
Label 1 />
</SegmentButton> <IconButton
<SegmentButton icon={'settings'}
fillIcon={1} toggled={{
icon={'change_history'} selected: 'settings',
iconPlace={'right'} unselected: 'settings',
selectable={false} }}
> variant={'default'}
Not selectable />
</SegmentButton> <IconButton
<SegmentButton icon={'settings'}
fillIcon={1} toggled={{
icon={'change_history'} selected: 'settings',
iconPlace={'right'} unselected: 'settings',
iconSize={48} }}
svgSize={48} variant={'tonal'}
> />
Label 3 <IconButton
</SegmentButton> icon={'settings'}
<SegmentButton disabled>Label 4</SegmentButton> toggled={{
</SegmentedButtons> selected: 'settings',
<IconButton icon={'settings'} variant={'filled'} /> unselected: 'settings',
</CardFooter> }}
</Card> variant={'outlined'}
</div> />
</div>
<SegmentedButtons density={-2} selectable={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
ripple={false}
>
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
ripple={false}
selectable={false}
>
Not selectable
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
ripple={false}
>
Label 3
</SegmentButton>
<SegmentButton disabled>Label 4</SegmentButton>
</SegmentedButtons>
</CardFooter>
</Card>
</main> </main>
); );
} }

2
src/primitive-components/button-components/button/button.tsx
View File

@ -29,7 +29,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
<ButtonLayout <ButtonLayout
{...props} {...props}
centralRipple={centralRipple} centralRipple={centralRipple}
className={`${variant} ${className}`} className={`m3-common-button ${variant} ${className}`.trimEnd()}
disabled={disabled} disabled={disabled}
ref={ref} ref={ref}
ripple={ripple} ripple={ripple}

1
src/primitive-components/button-components/fab/fab.tsx
View File

@ -44,7 +44,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
<Icon iconSize={sizes[size]} svgSize={sizes[size]}> <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
{icon} {icon}
</Icon> </Icon>
<span className={'m3 m3-fab-state-layer'}></span>
{size === 'extended' ? ( {size === 'extended' ? (
<Typography <Typography
className={'label-large'} className={'label-large'}

10
src/primitive-components/button-components/segmented-buttons/segment-button.tsx
View File

@ -77,13 +77,9 @@ export const SegmentButton = forwardRef<
{ButtonLabel} {ButtonLabel}
</IconWrapper> </IconWrapper>
</span> </span>
<span className={'m3 m3-button-segment-state-layer'}> <span className={'m3 m3-button-segment-frame-layer'}>
{selectable && ( {icon && selectable && <Icon {...iconProps}>{icon}</Icon>}
<> {ButtonLabel}
<Icon {...iconProps}>{icon}</Icon>
{ButtonLabel}
</>
)}
</span> </span>
</ButtonLayout> </ButtonLayout>
); );

12
src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
View File

@ -8,10 +8,13 @@ export const SegmentedButtons = forwardRef<
HTMLDivElement, HTMLDivElement,
SegmentedButtonsProps SegmentedButtonsProps
>(({ selectable = false, density = 0, children, ...props }, ref) => { >(({ selectable = false, density = 0, children, ...props }, ref) => {
if (children.length <= 1) { if (children.length <= 1 && children.length > 5) {
throw 'You must build segmented button with 2 or more button'; throw 'You must build segmented button with 2 or more buttons, but no more 5';
} }
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 />, {
@ -23,10 +26,7 @@ export const SegmentedButtons = forwardRef<
); );
return ( return (
<div <div className={extraClasses} ref={ref}>
className={`m3 m3-segmented-buttons m3-density-${density} ${props.className ?? ''}`.trimEnd()}
ref={ref}
>
{SegmentedButtons} {SegmentedButtons}
</div> </div>
); );

2
src/primitive-components/ripple/hooks/useRippleBuilder.tsx
View File

@ -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 = 550; const RIPPLE_LIFETIME: number = 55000;
const DEBOUNCE: number = 50; const DEBOUNCE: number = 50;
const UseRippleBuilder = ( const UseRippleBuilder = (

4
src/primitive-components/ripple/ripple.tsx
View File

@ -12,12 +12,12 @@ const Ripple = ({
rippleKey, rippleKey,
endLifetime, endLifetime,
}: RippleProps) => { }: RippleProps) => {
const [classes, setClasses] = useState<string>('m3 ripple visible'); const [classes, setClasses] = useState<string>('m3 m3-ripple visible');
const rippleDomainContext = useContext(rippleAreaContext); const rippleDomainContext = useContext(rippleAreaContext);
useLayoutEffect(() => { useLayoutEffect(() => {
if (endLifetime && !rippleDomainContext) { if (endLifetime && !rippleDomainContext) {
setClasses('m3 ripple'); setClasses('m3 m3-ripple');
setTimeout(() => endLifetime(rippleKey), lifetime); setTimeout(() => endLifetime(rippleKey), lifetime);
} }
}, [rippleDomainContext]); }, [rippleDomainContext]);

6
src/styles/button-styles/button.css
View File

@ -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.ripple { button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.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.ripple { button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.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.ripple { button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.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) {

28
src/styles/button-styles/button.sass
View File

@ -1,24 +1,4 @@
button:not(.m3-fab, .m3-icon-button) button.m3.m3-common-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
&.filled &.filled
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)
@ -59,14 +39,14 @@ button:not(.m3-fab, .m3-icon-button)
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container) fill: var(--md-sys-color-on-secondary-container)
&.filled > span.m3.m3-ripple-domain > span.m3.ripple &.filled > span.m3.m3-ripple-domain > span.m3.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)
&:is(.outlined, .text, .elevated) &:is(.outlined, .text, .elevated)
& > span.m3.m3-ripple-domain > span.m3.ripple & > span.m3.m3-ripple-domain > span.m3.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)
&.tonal > span.m3.m3-ripple-domain > span.m3.ripple &.tonal > span.m3.m3-ripple-domain > span.m3.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)
&:active &:active

24
src/styles/button-styles/fabs.sass
View File

@ -14,11 +14,11 @@
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var($color) fill: var($color)
& > span.m3.m3-ripple-domain > span.m3.ripple & > span.m3.m3-ripple-domain > span.m3.m3-ripple
background: color-mix(in srgb, var($color) 12%, transparent) background: color-mix(in srgb, var($color) 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active &:not(&:has(span.m3.m3-ripple-domain)):active
& > span.m3.m3-fab-state-layer &:before
background: color-mix(in srgb, var($color) 20%, transparent) background: color-mix(in srgb, var($color) 20%, transparent)
@ -39,9 +39,11 @@ button.m3.m3-fab
border: none border: none
gap: 12px gap: 12px
& > span.m3.m3-fab-state-layer &:before
@include m3-buttons-state-layer-mixin @include m3-buttons-state-layer-mixin
content: ""
&.surface &.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary) @include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
@ -77,27 +79,27 @@ button.m3.m3-fab
@include elevation-3(true) @include elevation-3(true)
&:hover &:hover
&.surface > span.m3.m3-fab-state-layer &.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.primary > span.m3.m3-fab-state-layer &.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
&.secondary > span.m3.m3-fab-state-layer &.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&.tertiary > span.m3.m3-fab-state-layer &.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
&:focus-visible &:focus-visible
&.surface > span.m3.m3-fab-state-layer &.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.primary > span.m3.m3-fab-state-layer &.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
&.secondary > span.m3.m3-fab-state-layer &.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.tertiary > span.m3.m3-fab-state-layer &.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)

14
src/styles/button-styles/icon-button.css
View File

@ -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.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { 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 {
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.ripple { button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.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.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.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.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.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.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.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.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { 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 {
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.ripple { button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.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 {

142
src/styles/button-styles/icon-button.sass
View File

@ -1,3 +1,39 @@
@mixin m3-icon-button-state-colors($opacity)
&:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
&.filled::before, &.filled.toggled.selected::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
&.filled.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
&.tonal::before, &.tonal.toggled.selected::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
&.tonal.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-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, var($border) $border-opacity, transparent)
@if $fill != none
@if $fill == transparent
fill: $fill
@else
fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)
@if $background != none
@if $background == transparent
background-color: $background
@else
background-color: color-mix(in srgb, var($background) $background-opacity, transparent)
button.m3.m3-icon-button button.m3.m3-icon-button
@include center(inline-flex) @include center(inline-flex)
@ -20,114 +56,78 @@ button.m3.m3-icon-button
& > span.m3-icon & > span.m3-icon
z-index: 25 z-index: 25
font-size: 2em font-size: 24px
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
fill: var(--md-sys-color-on-surface-variant) @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
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
fill: var(--md-sys-color-primary) @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
&:disabled, &.selected:disabled, &.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
&.filled &.filled
& &
fill: var(--md-sys-color-on-primary) @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
background-color: var(--md-sys-color-primary)
&.toggled &:not(.selected).toggled
fill: var(--md-sys-color-primary) @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%)
background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled &.selected.toggled
fill: var(--md-sys-color-on-primary) @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
background-color: var(--md-sys-color-primary)
&.tonal &.tonal
&.toggled &:not(.selected).toggled
fill: var(--md-sys-color-on-surface-variant) @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%)
background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled, & &.selected.toggled, &
fill: var(--md-sys-color-on-secondary-container) @include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%)
background-color: var(--md-sys-color-secondary-container)
&:is(.tonal, .filled, .toggled.selected):disabled &:is(.tonal, .filled, .toggled.selected):disabled
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) @include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&.outlined &.outlined
& &
border: 1px solid var(--md-sys-color-outline) @include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
fill: var(--md-sys-color-on-surface-variant)
background-color: #00000000
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
background-color: #00000000
&.toggled.selected:disabled
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 &.selected.toggled
border: 1px solid #00000000 @include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%)
background-color: var(--md-sys-color-inverse-surface)
fill: var(--md-sys-color-inverse-on-surface) &:disabled
@include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
&.selected.toggled:disabled
@include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
&.filled:not(:disabled) &.filled:not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple &:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.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)
&.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, var(--md-sys-color-primary) 12%, transparent)
&:is(.outlined, .default):not(:disabled) &:is(.outlined, .default):not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple & > 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, var(--md-sys-color-on-surface-variant) 12%, transparent)
&:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple &:not(.outlined).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, var(--md-sys-color-primary) 12%, transparent)
&:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple &:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.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)
&.tonal:not(:disabled) &.tonal:not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple &:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.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)
&.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, var(--md-sys-color-on-surface-variant) 12%, transparent)
&:hover:not(:disabled) &:hover:not(:disabled)
&:is(.default, .outlined)::before @include m3-icon-button-state-colors(8%)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
&.filled::before, &.filled.toggled.selected::before &:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain)))
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent) @include m3-icon-button-state-colors(12%)
&.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)

47
src/styles/button-styles/segmented-button.sass
View File

@ -2,7 +2,7 @@ $densities: [0, -1, -2, -3]
@each $density in $densities @each $density in $densities
.m3.m3-density-#{$density} .m3.m3-density-#{$density}
$height: 40px + ($density * 2px) $height: 40px + ($density * 4px)
& > button.m3.m3-button-segment & > button.m3.m3-button-segment
height: $height height: $height
@ -13,9 +13,7 @@ $densities: [0, -1, -2, -3]
&:last-child &:last-child
border-radius: 0 ($height / 2) ($height / 2) 0 border-radius: 0 ($height / 2) ($height / 2) 0
& > span.m3.m3-button-segment-state-layer padding: 10px + ($density * 2px) 12px
padding-top: 10px + ($density * 1px)
padding-bottom: 10px + ($density * 1px)
@mixin m3-segmented-button-content-color-mixin($color) @mixin m3-segmented-button-content-color-mixin($color)
& > svg.m3.m3-svg-icon > text & > svg.m3.m3-svg-icon > text
@ -24,50 +22,57 @@ $densities: [0, -1, -2, -3]
& > label.m3.m3-typography & > label.m3.m3-typography
color: var($color) color: var($color)
div.m3.m3-segmented-buttons div.m3.m3-segmented-buttons
display: flex width: 100%
padding: 4px 0 padding: 4px 0
border-radius: 20px border-radius: 20px
display: inline-flex
box-sizing: border-box box-sizing: border-box
& > button.m3.m3-button-segment & > button.m3.m3-button-segment
flex: 1 1
padding: 0
width: 100% width: 100%
min-width: 108px min-width: 48px
border-radius: 0 border-radius: 0
margin: 0 -0.5px margin: 0 -0.5px
display: inline-flex display: inline-flex
background-color: transparent background-color: transparent
border: 1px solid var(--md-sys-color-outline) border: 1px solid var(--md-sys-color-outline)
&:before
@include m3-buttons-state-layer-mixin
content: ""
& > span.m3.m3-ripple-domain & > span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
& > span.m3.ripple & > span.m3.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)
& > span.m3.m3-button-segment-state-layer & > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
@include m3-buttons-state-layer-mixin @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 box-sizing: border-box
& > * & > *
visibility: hidden visibility: hidden
& > span.m3.m3-button-segment-content-layer & > 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 position: absolute
max-height: inherit
& > svg.m3.m3-svg-icon & > svg.m3.m3-svg-icon
display: none display: none
&.selected &.selected
background-color: var(--md-sys-color-secondary-container) background-color: var(--md-sys-color-secondary-container)
& > span.m3.m3-button-segment-content-layer & > span.m3.m3-button-segment-content-layer
@ -76,13 +81,13 @@ div.m3.m3-segmented-buttons
& > svg.m3.m3-svg-icon & > svg.m3.m3-svg-icon
display: initial display: initial
&:hover &:not(:disabled):hover
& > span.m3.m3-button-segment-state-layer &:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible) &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
& > span.m3.m3-button-segment-state-layer &:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent)
&:disabled &:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)

12
src/styles/card.sass
View File

@ -10,17 +10,12 @@ $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-media:first-child, & > .m3-card-action-area:first-child > .m3-card-action-area-content > .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
border-radius: 12px !important border-radius: 12px !important
padding: padding-calculating(false) padding: padding-calculating(false)
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
border-radius: 12px !important
padding: padding-calculating(false)
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
display: block
box-sizing: border-box box-sizing: border-box
padding: padding-calculating(true) padding: padding-calculating(true)
@ -28,7 +23,6 @@ div.m3-card-footer, header.m3-card-header, section.m3-card-body, .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
@ -53,7 +47,7 @@ div.m3.m3-card-action-area
height: 100% height: 100%
position: absolute position: absolute
& > .m3.m3-ripple-domain > .m3.ripple & > .m3.m3-ripple-domain > .m3.m3-ripple
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)
&:hover &:hover

354
src/styles/generics.css
View File

@ -3,24 +3,17 @@
@import "./themes/typography.module.css"; @import "./themes/typography.module.css";
@import "./themes/theme.dark.css" (prefers-color-scheme: dark); @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
@import "./themes/theme.light.css" (prefers-color-scheme: light); @import "./themes/theme.light.css" (prefers-color-scheme: light);
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child { div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child {
border-radius: 12px !important;
padding: 0px;
}
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
border-radius: 12px !important; border-radius: 12px !important;
padding: 0px; padding: 0px;
} }
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 {
display: block;
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
} }
.m3.m3-card-media { .m3.m3-card-media {
width: 100%;
display: block; display: block;
contain: content; contain: content;
position: relative; position: relative;
@ -49,7 +42,7 @@ div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple { div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.m3-ripple {
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-card-action-area:hover > span.m3.m3-card-state-layer { div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
@ -234,7 +227,7 @@ svg.m3.m3-badge > text {
pointer-events: none; pointer-events: none;
} }
.m3.ripple { .m3.m3-ripple {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@ -251,7 +244,7 @@ svg.m3.m3-badge > text {
transition-property: opacity, background-color; transition-property: opacity, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
} }
.m3.ripple.visible { .m3.m3-ripple.visible {
opacity: 1 !important; opacity: 1 !important;
} }
@ -331,11 +324,12 @@ button.m3.m3-fab.m3 {
border: none; border: none;
gap: 12px; gap: 12px;
} }
button.m3.m3-fab > span.m3.m3-fab-state-layer { button.m3.m3-fab:before {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
} }
button.m3.m3-fab.surface { button.m3.m3-fab.surface {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
@ -347,10 +341,10 @@ button.m3.m3-fab.surface:not(.without-elevation) {
button.m3.m3-fab.surface > svg.m3-svg-icon { button.m3.m3-fab.surface > svg.m3-svg-icon {
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.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.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
} }
button.m3.m3-fab.primary { button.m3.m3-fab.primary {
@ -363,10 +357,10 @@ button.m3.m3-fab.primary:not(.without-elevation) {
button.m3.m3-fab.primary > svg.m3-svg-icon { button.m3.m3-fab.primary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary-container); fill: var(--md-sys-color-on-primary-container);
} }
button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
} }
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
} }
button.m3.m3-fab.secondary { button.m3.m3-fab.secondary {
@ -379,10 +373,10 @@ button.m3.m3-fab.secondary:not(.without-elevation) {
button.m3.m3-fab.secondary > svg.m3-svg-icon { button.m3.m3-fab.secondary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
} }
button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
} }
button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary {
@ -395,10 +389,10 @@ button.m3.m3-fab.tertiary:not(.without-elevation) {
button.m3.m3-fab.tertiary > svg.m3-svg-icon { button.m3.m3-fab.tertiary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-tertiary-container); fill: var(--md-sys-color-on-tertiary-container);
} }
button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
} }
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
} }
button.m3.m3-fab.m3-small-fab { button.m3.m3-fab.m3-small-fab {
@ -435,162 +429,136 @@ button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .ter
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active { button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
} }
button.m3.m3-fab:hover.surface > span.m3.m3-fab-state-layer { button.m3.m3-fab:hover.surface:before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
} }
button.m3.m3-fab:hover.primary > span.m3.m3-fab-state-layer { button.m3.m3-fab:hover.primary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
} }
button.m3.m3-fab:hover.secondary > span.m3.m3-fab-state-layer { button.m3.m3-fab:hover.secondary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
} }
button.m3.m3-fab:hover.tertiary > span.m3.m3-fab-state-layer { button.m3.m3-fab:hover.tertiary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
} }
button.m3.m3-fab:focus-visible.surface > span.m3.m3-fab-state-layer { button.m3.m3-fab:focus-visible.surface:before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-fab:focus-visible.primary > span.m3.m3-fab-state-layer { button.m3.m3-fab:focus-visible.primary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
} }
button.m3.m3-fab:focus-visible.secondary > span.m3.m3-fab-state-layer { button.m3.m3-fab:focus-visible.secondary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-fab:focus-visible.tertiary > span.m3.m3-fab-state-layer { button.m3.m3-fab:focus-visible.tertiary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
} }
button:not(.m3-fab, .m3-icon-button) { button.m3.m3-common-button.filled {
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);
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
max-height: 40px;
width: min-content;
white-space: nowrap;
height: min-content;
box-sizing: border-box;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
flex-direction: row;
border-radius: 100px;
box-sizing: border-box;
}
button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon { button.m3.m3-common-button.filled, button.m3.m3-common-button.filled > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary); fill: var(--md-sys-color-on-primary);
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined { button.m3.m3-common-button.outlined {
outline-offset: -1px; outline-offset: -1px;
background-color: transparent; background-color: transparent;
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
outline: 1px solid var(--md-sys-color-outline) !important; outline: 1px solid var(--md-sys-color-outline) !important;
} }
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon { button.m3.m3-common-button.outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).text { button.m3.m3-common-button.text {
background-color: transparent; background-color: transparent;
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { button.m3.m3-common-button.text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).elevated { button.m3.m3-common-button.elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
} }
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon { button.m3.m3-common-button.elevated > svg.m3-svg-icon {
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
} }
button:not(.m3-fab, .m3-icon-button).tonal { button.m3.m3-common-button.tonal {
color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
} }
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { button.m3.m3-common-button.tonal > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container); fill: var(--md-sys-color-on-secondary-container);
} }
button:not(.m3-fab, .m3-icon-button).filled > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-common-button.filled > span.m3.m3-ripple-domain > span.m3.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) > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-common-button:is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.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 > span.m3.m3-ripple-domain > span.m3.ripple { button.m3.m3-common-button.tonal > span.m3.m3-ripple-domain > span.m3.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.m3.m3-common-button:active:is(.filled, .tonal) {
box-shadow: none !important; box-shadow: none !important;
} }
button:not(.m3-fab, .m3-icon-button):active.elevated { button.m3.m3-common-button:active.elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
} }
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).outlined { button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).outlined {
border-color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important;
} }
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).filled { button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary)); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary));
} }
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) { button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
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);
} }
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).tonal { button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container)); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container));
} }
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined { button.m3.m3-common-button:focus-visible.outlined {
border-color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important;
} }
button:not(.m3-fab, .m3-icon-button):focus-visible.filled { button.m3.m3-common-button:focus-visible.filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary)); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary));
} }
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated) { button.m3.m3-common-button:focus-visible:is(.outlined, .text, .elevated) {
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:not(.m3-fab, .m3-icon-button):focus-visible.tonal { button.m3.m3-common-button:focus-visible.tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container)); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container));
} }
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) { button.m3.m3-common-button:hover:is(.filled, .tonal) {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
} }
button:not(.m3-fab, .m3-icon-button):hover.elevated { button.m3.m3-common-button:hover.elevated {
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
} }
button:not(.m3-fab, .m3-icon-button):hover.filled { button.m3.m3-common-button:hover.filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
} }
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated) { button.m3.m3-common-button:hover:is(.outlined, .text, .elevated) {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
} }
button:not(.m3-fab, .m3-icon-button):hover.tonal { button.m3.m3-common-button:hover.tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
} }
button:not(.m3-fab, .m3-icon-button):disabled { button.m3.m3-common-button:disabled {
pointer-events: none; pointer-events: none;
} }
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) { button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
} }
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) { button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal) {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
} }
button:not(.m3-fab, .m3-icon-button):disabled.elevated { button.m3.m3-common-button:disabled.elevated {
box-shadow: none; box-shadow: none;
} }
button:not(.m3-fab, .m3-icon-button):disabled.outlined { button.m3.m3-common-button:disabled.outlined {
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
} }
@ -617,83 +585,83 @@ button.m3.m3-icon-button::before {
} }
button.m3.m3-icon-button > span.m3-icon { button.m3.m3-icon-button > span.m3-icon {
z-index: 25; z-index: 25;
font-size: 2em; font-size: 24px;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
} }
button.m3.m3-icon-button.default { button.m3.m3-icon-button.default, button.m3.m3-icon-button.default:not(.selected).toggled {
fill: var(--md-sys-color-on-surface-variant); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: transparent;
}
button.m3.m3-icon-button.default.selected.toggled {
fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
background-color: transparent;
} }
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: transparent;
}
button.m3.m3-icon-button.default.selected.toggled {
fill: var(--md-sys-color-primary);
} }
button.m3.m3-icon-button.filled { button.m3.m3-icon-button.filled {
fill: var(--md-sys-color-on-primary); fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
background-color: var(--md-sys-color-primary); background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
} }
button.m3.m3-icon-button.filled.toggled { button.m3.m3-icon-button.filled:not(.selected).toggled {
fill: var(--md-sys-color-primary); fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
background-color: var(--md-sys-color-surface-container-highest); background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
} }
button.m3.m3-icon-button.filled.selected.toggled { button.m3.m3-icon-button.filled.selected.toggled {
fill: var(--md-sys-color-on-primary); fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
background-color: var(--md-sys-color-primary); background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
} }
button.m3.m3-icon-button.tonal.toggled { button.m3.m3-icon-button.tonal:not(.selected).toggled {
fill: var(--md-sys-color-on-surface-variant); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: var(--md-sys-color-surface-container-highest); background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
} }
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
fill: var(--md-sys-color-on-secondary-container); fill: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 100%, transparent);
background-color: var(--md-sys-color-secondary-container); background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 100%, transparent);
} }
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
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);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
} }
button.m3.m3-icon-button.outlined { button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 100%, transparent);
fill: var(--md-sys-color-on-surface-variant); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: transparent;
}
button.m3.m3-icon-button.outlined.selected.toggled {
border: 0 solid transparent;
fill: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface) 100%, transparent);
} }
button.m3.m3-icon-button.outlined:disabled { button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0); background-color: transparent;
} }
button.m3.m3-icon-button.outlined.toggled.selected:disabled { button.m3.m3-icon-button.outlined.selected.toggled:disabled {
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); fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
} }
button.m3.m3-icon-button.outlined.selected.toggled { button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).selected.toggled, button.m3.m3-icon-button.filled:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface);
fill: var(--md-sys-color-inverse-on-surface);
}
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
} }
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).toggled):not(button.m3.m3-icon-button.filled:not(:disabled).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, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > 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, var(--md-sys-color-on-surface-variant) 12%, transparent);
} }
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).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, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.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.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.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.ripple { button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).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, 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 {
@ -711,24 +679,25 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-b
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before { button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
} }
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
} }
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
} }
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
} }
.m3.m3-density-0 > button.m3.m3-button-segment { .m3.m3-density-0 > button.m3.m3-button-segment {
height: 40px; height: 40px;
padding: 10px 12px;
} }
.m3.m3-density-0 > button.m3.m3-button-segment:first-child { .m3.m3-density-0 > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px;
@ -736,99 +705,87 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
.m3.m3-density-0 > button.m3.m3-button-segment:last-child { .m3.m3-density-0 > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0;
} }
.m3.m3-density-0 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 10px;
padding-bottom: 10px;
}
.m3.m3-density--1 > button.m3.m3-button-segment { .m3.m3-density--1 > button.m3.m3-button-segment {
height: 38px; height: 36px;
padding: 8px 12px;
} }
.m3.m3-density--1 > button.m3.m3-button-segment:first-child { .m3.m3-density--1 > button.m3.m3-button-segment:first-child {
border-radius: 19px 0 0 19px; border-radius: 18px 0 0 18px;
} }
.m3.m3-density--1 > button.m3.m3-button-segment:last-child { .m3.m3-density--1 > button.m3.m3-button-segment:last-child {
border-radius: 0 19px 19px 0; border-radius: 0 18px 18px 0;
}
.m3.m3-density--1 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 9px;
padding-bottom: 9px;
} }
.m3.m3-density--2 > button.m3.m3-button-segment { .m3.m3-density--2 > button.m3.m3-button-segment {
height: 36px; height: 32px;
padding: 6px 12px;
} }
.m3.m3-density--2 > button.m3.m3-button-segment:first-child { .m3.m3-density--2 > button.m3.m3-button-segment:first-child {
border-radius: 18px 0 0 18px; border-radius: 16px 0 0 16px;
} }
.m3.m3-density--2 > button.m3.m3-button-segment:last-child { .m3.m3-density--2 > button.m3.m3-button-segment:last-child {
border-radius: 0 18px 18px 0; border-radius: 0 16px 16px 0;
}
.m3.m3-density--2 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 8px;
padding-bottom: 8px;
} }
.m3.m3-density--3 > button.m3.m3-button-segment { .m3.m3-density--3 > button.m3.m3-button-segment {
height: 34px; height: 28px;
padding: 4px 12px;
} }
.m3.m3-density--3 > button.m3.m3-button-segment:first-child { .m3.m3-density--3 > button.m3.m3-button-segment:first-child {
border-radius: 17px 0 0 17px; border-radius: 14px 0 0 14px;
} }
.m3.m3-density--3 > button.m3.m3-button-segment:last-child { .m3.m3-density--3 > button.m3.m3-button-segment:last-child {
border-radius: 0 17px 17px 0; border-radius: 0 14px 14px 0;
}
.m3.m3-density--3 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 7px;
padding-bottom: 7px;
} }
div.m3.m3-segmented-buttons { div.m3.m3-segmented-buttons {
display: flex; width: 100%;
padding: 4px 0; padding: 4px 0;
border-radius: 20px; border-radius: 20px;
display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment { div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
flex: 1 1;
padding: 0;
width: 100%; width: 100%;
min-width: 108px; min-width: 48px;
border-radius: 0; border-radius: 0;
margin: 0 -0.5px; margin: 0 -0.5px;
display: inline-flex; display: inline-flex;
background-color: transparent; background-color: transparent;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
box-sizing: border-box; content: "";
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer > * { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
visibility: hidden; transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) > svg.m3.m3-svg-icon {
height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer {
box-sizing: border-box;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer > * {
visibility: hidden;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
position: absolute; position: absolute;
max-height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
color: var(--md-sys-color-on-surface);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: none; display: none;
@ -845,11 +802,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: initial; display: initial;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
@ -895,7 +852,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer { div.m3.m3-radio-container > 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-container > 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 { div.m3.m3-radio-container > 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 {
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-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
@ -904,7 +861,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover +
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer { div.m3.m3-radio-container > 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-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ 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, var(--md-sys-color-primary) 20%, transparent);
} }
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
@ -1276,7 +1233,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer { input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
} }
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
} }
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer { input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
@ -1285,7 +1242,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indetermi
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer { input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ 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, var(--md-sys-color-on-surface) 20%, transparent);
} }
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer { input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
@ -1294,7 +1251,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-stat
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer { input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
} }
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ 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, var(--md-sys-color-primary) 20%, transparent);
} }
@ -1536,4 +1493,31 @@ html {
border-radius: 25px; border-radius: 25px;
} }
button:not(.m3-fab, .m3-icon-button) {
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);
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
max-height: 40px;
width: min-content;
white-space: nowrap;
height: min-content;
box-sizing: border-box;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
flex-direction: row;
border-radius: 100px;
box-sizing: border-box;
}
/*# sourceMappingURL=generics.css.map */ /*# sourceMappingURL=generics.css.map */

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

21
src/styles/generics.sass
View File

@ -37,3 +37,24 @@ html
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

6
src/styles/input-styles/checkbox.sass
View File

@ -81,7 +81,7 @@ input[type="checkbox"].m3.m3-checkbox
&: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, var(--md-sys-color-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, var(--md-sys-color-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
@ -90,7 +90,7 @@ input[type="checkbox"].m3.m3-checkbox
&: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, var(--md-sys-color-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, var(--md-sys-color-on-surface) 20%, transparent)
&:hover &:hover
@ -100,6 +100,6 @@ input[type="checkbox"].m3.m3-checkbox
&:active ~ span.m3.m3-checkbox-state-layer &:active ~ span.m3.m3-checkbox-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)
& ~ 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, var(--md-sys-color-primary) 20%, transparent)

4
src/styles/input-styles/radio.css
View File

@ -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.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.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.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.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 {

4
src/styles/input-styles/radio.sass
View File

@ -34,7 +34,7 @@ div.m3.m3-radio-container
&: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, var(--md-sys-color-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, var(--md-sys-color-on-surface) 20%, transparent)
&:hover &:hover
@ -43,7 +43,7 @@ div.m3.m3-radio-container
&:active + span.m3.m3-radio-state-layer &: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)
& ~ 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, var(--md-sys-color-primary) 20%, transparent)
&:disabled &:disabled

4
src/styles/ripple.css
View File

@ -5,7 +5,7 @@
z-index: 20; z-index: 20;
pointer-events: none; } pointer-events: none; }
.m3.ripple { .m3.m3-ripple {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@ -21,7 +21,7 @@
transition-duration: 0.55s; transition-duration: 0.55s;
transition-property: opacity, background-color; transition-property: opacity, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.m3.ripple.visible { .m3.m3-ripple.visible {
opacity: 1 !important; } opacity: 1 !important; }
@keyframes rippleAppearanceAnimation { @keyframes rippleAppearanceAnimation {

2
src/styles/ripple.sass
View File

@ -5,7 +5,7 @@
z-index: 20 z-index: 20
pointer-events: none pointer-events: none
.m3.ripple .m3.m3-ripple
position: absolute position: absolute
overflow: hidden overflow: hidden
pointer-events: none pointer-events: none