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

ADDED: Color variables for convenient codding styles

This commit is contained in:
doryan04 2024-02-26 23:17:05 +04:00
parent 33bd4f57a6
commit 74b97fa4a9
21 changed files with 397 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/page.tsx
View File

@ -5,8 +5,24 @@ import { Slider } from '../src/primitive-components/input-components/slider/slid
export default function Page() { export default function Page() {
return ( return (
<main> <main
<Card variant={'outlined'}> style={{
display: 'flex',
maxHeight: '256px',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Card
style={{
display: 'flex',
maxWidth: '256px',
minHeight: '256px',
alignItems: 'flex-end',
justifyContent: 'center',
}}
variant={'outlined'}
>
<CardFooter> <CardFooter>
<Slider /> <Slider />
</CardFooter> </CardFooter>

70
src/primitive-components/input-components/slider/slider.tsx
View File

@ -5,9 +5,11 @@ import { InputLayout } from '../input-layout/input-layout';
import React, { import React, {
ChangeEvent, ChangeEvent,
forwardRef, forwardRef,
HTMLProps,
InputHTMLAttributes, InputHTMLAttributes,
useId, useId,
useLayoutEffect, useLayoutEffect,
useRef,
useState, useState,
} from 'react'; } from 'react';
@ -28,48 +30,45 @@ function gradientStyle(value: number): string {
return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`; return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`;
} }
function setWebkitProgressSlider(
element: SliderProps | HTMLProps<HTMLInputElement>,
isChrome: boolean,
) {
if (isChrome) {
const initialFraction = fractionCalc(
(element.value as string) ?? (element.defaultValue as string),
element.max as string,
);
if (element.style === undefined) {
element.style = {};
}
element.style.background = gradientStyle(initialFraction);
}
}
export const Slider = forwardRef<HTMLInputElement, SliderProps>( export const Slider = forwardRef<HTMLInputElement, SliderProps>(
({ options, ...props }, ref) => { ({ options, ...props }, ref) => {
const sliderId = useId(); const sliderId = useId();
const [isChrome, setIsChrome] = useState<boolean>(false); const isChrome = useRef<boolean>(
navigator.userAgent.indexOf('AppleWebKit') != -1,
);
const [value, setValue] = useState(props.defaultValue ?? 50); const [value, setValue] = useState(props.defaultValue ?? 50);
const [mounted, setMounted] = useState<boolean>(false);
useLayoutEffect(() => { useLayoutEffect(() => {
setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1); setMounted(true);
}, []); }, []);
if (isChrome) { if (!mounted) {
const initialFraction = fractionCalc( return;
(props.value as string) ?? (props.defaultValue as string),
props.max as string,
);
if (props.style === undefined) {
props.style = {};
} }
props.style.background = gradientStyle(initialFraction); setWebkitProgressSlider(props, isChrome.current);
}
const webkitProgress = (event: ChangeEvent<HTMLInputElement>) => {
if (isChrome) {
const fraction = fractionCalc(
(event.target.value as string) ??
(event.target.defaultValue as string),
event.target.max,
);
event.target.style.background = gradientStyle(fraction);
}
};
return ( return (
<div className={'m3 m3-slider-container'}> <div className={'m3 m3-slider-container'}>
<div className={'m3 m3-slider-label'}>
<Typography role={'label'} size={'small'}>
{value}
</Typography>
</div>
<InputLayout <InputLayout
{...props} {...props}
className={props.className} className={props.className}
@ -77,10 +76,10 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
onChange={(event: ChangeEvent<HTMLInputElement>) => { onChange={(event: ChangeEvent<HTMLInputElement>) => {
props.onChange?.apply(this, props?.onChange?.prototype); props.onChange?.apply(this, props?.onChange?.prototype);
setValue(event.target.value); setValue(event.target.value);
setWebkitProgressSlider(
if (isChrome) { event.target as unknown as HTMLProps<HTMLInputElement>,
webkitProgress(event); isChrome.current,
} );
}} }}
ref={ref} ref={ref}
type={'range'} type={'range'}
@ -93,6 +92,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
))} ))}
</datalist> </datalist>
)} )}
<div className={'m3 m3-slider-label'}>
<Typography role={'label'} size={'small'}>
{value}
</Typography>
</div>
</div> </div>
); );
}, },

7
src/styles/badge.sass
View File

@ -1,13 +1,16 @@
svg.m3.m3-badge svg.m3.m3-badge
position: absolute position: absolute
background-color: var(--md-sys-color-error) background-color: $error
&.disable-value &.disable-value
padding: 0 padding: 0
width: 6px width: 6px
height: 6px height: 6px
border-radius: 3px border-radius: 3px
& > text & > text
display: none display: none
& &
height: 16px height: 16px
border-radius: 8px border-radius: 8px
@ -16,7 +19,7 @@ svg.m3.m3-badge
@include center(flex) @include center(flex)
@include m3-typography-mixin('label-small') @include m3-typography-mixin('label-small')
fill: $on-error
text-anchor: middle text-anchor: middle
font-optical-sizing: none font-optical-sizing: none
alignment-baseline: central alignment-baseline: central
fill: var(--md-sys-color-on-error)

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

@ -1,53 +1,53 @@
button.m3.m3-common-button button.m3.m3-common-button
&.filled &.filled
background-color: var(--md-sys-color-primary) background-color: $primary
&, & > svg.m3-svg-icon &, & > svg.m3-svg-icon
fill: var(--md-sys-color-on-primary) fill: $on-primary
color: var(--md-sys-color-on-primary) color: $on-primary
&.outlined &.outlined
color: $primary
outline-offset: -1px outline-offset: -1px
background-color: transparent background-color: transparent
color: var(--md-sys-color-primary) outline: 1px solid $outline !important
outline: 1px solid var(--md-sys-color-outline) !important
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var(--md-sys-color-primary) fill: $primary
&.text &.text
color: $primary
background-color: transparent background-color: transparent
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var(--md-sys-color-primary) fill: $primary
&.elevated &.elevated
@include elevation-1(false) @include elevation-1(false)
color: var(--md-sys-color-primary) color: $primary
background-color: var(--md-sys-color-surface-container-low) background-color: $surface-container-low
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var(--md-sys-color-primary) fill: $primary
&.tonal &.tonal
color: var(--md-sys-color-on-secondary-container) color: $on-secondary-container
background-color: var(--md-sys-color-secondary-container) background-color: $secondary-container
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container) fill: $on-secondary-container
&.filled > span.m3.m3-ripple-domain > span.m3.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, $on-primary 12%, transparent)
&:is(.outlined, .text, .elevated) &:is(.outlined, .text, .elevated)
& > span.m3.m3-ripple-domain > span.m3.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, $primary 12%, transparent)
&.tonal > span.m3.m3-ripple-domain > span.m3.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, $on-secondary-container 12%, transparent)
&:active &:active
&:is(.filled, .tonal) &:is(.filled, .tonal)
@ -58,29 +58,29 @@ button.m3.m3-common-button
&:not(&:has(span.m3.m3-ripple-domain)) &:not(&:has(span.m3.m3-ripple-domain))
&.outlined &.outlined
border-color: var(--md-sys-color-primary) !important border-color: $primary !important
&.filled &.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, $on-primary 20%, $primary)
&:is(.outlined, .text, .elevated) &:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) background-color: color-mix(in srgb, $primary 20%, transparent)
&.tonal &.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, $on-secondary-container 20%, $secondary-container)
&:focus-visible &:focus-visible
&.outlined &.outlined
border-color: var(--md-sys-color-primary) !important border-color: $primary !important
&.filled &.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, $on-primary 12%, $primary)
&:is(.outlined, .text, .elevated) &:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, $primary 12%, transparent)
&.tonal &.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, $on-secondary-container 12%, $secondary-container)
&:hover &:hover
&:is(.filled, .tonal) &:is(.filled, .tonal)
@ -90,25 +90,25 @@ button.m3.m3-common-button
@include elevation-2(false) @include elevation-2(false)
&.filled &.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, $on-primary 8%, $primary)
&:is(.outlined, .text, .elevated) &:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, $primary 8%, transparent)
&.tonal &.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, $on-secondary-container 8%, $secondary-container)
&:disabled &:disabled
pointer-events: none pointer-events: none
&:is(.filled, .elevated, .tonal, .outlined, .text) &:is(.filled, .elevated, .tonal, .outlined, .text)
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) color: color-mix(in srgb, $on-surface 38%, transparent)
&:is(.filled, .elevated, .tonal) &:is(.filled, .elevated, .tonal)
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) background: color-mix(in srgb, $on-surface 12%, transparent)
&.elevated &.elevated
box-shadow: none box-shadow: none
&.outlined &.outlined
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important outline: 1px solid color-mix(in srgb, $on-surface 12%, transparent) !important

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

@ -8,18 +8,18 @@
&:not(.without-elevation) &:not(.without-elevation)
@include elevation-3(false) @include elevation-3(false)
color: var($color) color: $color
background-color: var($bg-color) background-color: $bg-color
& > svg.m3-svg-icon & > svg.m3-svg-icon
fill: var($color) fill: $color
& > span.m3.m3-ripple-domain > span.m3.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, $color 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active &:not(&:has(span.m3.m3-ripple-domain)):active
&::before &::before
background: color-mix(in srgb, var($color) 20%, transparent) background: color-mix(in srgb, $color 20%, transparent)
button.m3.m3-fab button.m3.m3-fab
@ -29,15 +29,15 @@ button.m3.m3-fab
font-family: Material-Symbols-Rounded-Regular, sans-serif font-family: Material-Symbols-Rounded-Regular, sans-serif
&.m3 &.m3
contain: content
box-sizing: border-box
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
text-align: center
border: none
gap: 12px gap: 12px
border: none
contain: content
text-align: center
align-items: center
flex-direction: row
display: inline-flex
box-sizing: border-box
justify-content: center
&::before &::before
@include m3-buttons-state-layer-mixin @include m3-buttons-state-layer-mixin
@ -45,16 +45,16 @@ button.m3.m3-fab
content: "" content: ""
&.surface &.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary) @include m3-fab-colors-palette($surface-container-high, $primary)
&.primary &.primary
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container) @include m3-fab-colors-palette($primary-container, $on-primary-container)
&.secondary &.secondary
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container) @include m3-fab-colors-palette($secondary-container, $on-secondary-container)
&.tertiary &.tertiary
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container) @include m3-fab-colors-palette($tertiary-container, $on-tertiary-container)
&.m3-small-fab &.m3-small-fab
@include m3-fab-default(12px, 40px, 40px, 11px) @include m3-fab-default(12px, 40px, 40px, 11px)
@ -80,26 +80,26 @@ button.m3.m3-fab
&:hover &:hover
&.surface:before &.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, $primary 8%, transparent)
&.primary:before &.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent) background-color: color-mix(in srgb, $on-primary-container 8%, transparent)
&.secondary:before &.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) background-color: color-mix(in srgb, $on-secondary-container 8%, transparent)
&.tertiary:before &.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent) background-color: color-mix(in srgb, $on-tertiary-container 8%, transparent)
&:focus-visible &:focus-visible
&.surface:before &.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, $primary 12%, transparent)
&.primary:before &.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent) background-color: color-mix(in srgb, $on-primary-container 12%, transparent)
&.secondary:before &.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&.tertiary:before &.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent) background-color: color-mix(in srgb, $on-tertiary-container 12%, transparent)

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

@ -1,43 +1,43 @@
@mixin m3-icon-button-state-colors($opacity) @mixin m3-icon-button-state-colors($opacity)
&:is(.default, .outlined)::before &:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent) background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
&.outlined.selected.toggled::before &.outlined.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent) background-color: color-mix(in srgb, $inverse-on-surface $opacity, transparent)
&.filled::before, &.filled::before,
&.filled.selected.toggled::before &.filled.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent) background-color: color-mix(in srgb, $on-primary $opacity, transparent)
&.filled:not(.selected).toggled::before, &.filled:not(.selected).toggled::before,
&.default.selected.toggled::before &.default.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent) background-color: color-mix(in srgb, $primary $opacity, transparent)
&.tonal::before, &.tonal::before,
&.tonal.selected.toggled::before &.tonal.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent) background-color: color-mix(in srgb, $on-secondary-container $opacity, transparent)
&.tonal.toggled::before &.tonal.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent) background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity) @mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
@if $border != none @if $border != none
@if $border == transparent @if $border == transparent
border: 0 solid transparent border: 0 solid transparent
@else @else
border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent) border: 1px solid color-mix(in srgb, $border $border-opacity, transparent)
@if $fill != none @if $fill != none
@if $fill == transparent @if $fill == transparent
fill: $fill fill: $fill
@else @else
fill: color-mix(in srgb, var($fill) $fill-opacity, transparent) fill: color-mix(in srgb, $fill $fill-opacity, transparent)
@if $background != none @if $background != none
@if $background == transparent @if $background == transparent
background-color: $background background-color: $background
@else @else
background-color: color-mix(in srgb, var($background) $background-opacity, transparent) background-color: color-mix(in srgb, $background $background-opacity, transparent)
button.m3.m3-icon-button button.m3.m3-icon-button
@ -67,72 +67,72 @@ button.m3.m3-icon-button
&.default &.default
&, &:not(.selected).toggled &, &:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%) @include m3-icon-color-palette(none, none, $on-surface-variant, 100%, transparent, 0%)
&.selected.toggled &.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%) @include m3-icon-color-palette(none, none, $primary, 100%, transparent, 0%)
&:disabled, &:disabled,
&.selected:disabled, &.selected:disabled,
&.selected.toggled:disabled &.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%) @include m3-icon-color-palette(none, none, $on-surface-variant, 38%, transparent, 0%)
&.filled &.filled
& &
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%) @include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
&:not(.selected).toggled &:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%) @include m3-icon-color-palette(none, none, $primary, 100%, $surface-container-highest, 100%)
&.selected.toggled &.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%) @include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
&.tonal &.tonal
&:not(.selected).toggled &:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%) @include m3-icon-color-palette(none, none, $on-surface-variant, 100%, $surface-container-highest, 100%)
&.selected.toggled, & &.selected.toggled, &
@include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%) @include m3-icon-color-palette(none, none, $on-secondary-container, 100%, $secondary-container, 100%)
&:is(.tonal, .filled, .toggled.selected):disabled &:is(.tonal, .filled, .toggled.selected):disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%) @include m3-icon-color-palette(none, none, $on-surface, 38%, $on-surface, 12%)
&.outlined &.outlined
& &
@include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%) @include m3-icon-color-palette($outline, 100%, $on-surface-variant, 100%, transparent, 0%)
&.selected.toggled &.selected.toggled
@include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%) @include m3-icon-color-palette(transparent, 0%, $inverse-on-surface, 100%, $inverse-surface, 100%)
&:disabled &:disabled
@include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%) @include m3-icon-color-palette($outline, 12%, $on-surface-variant, 38%, transparent, 0%)
&.selected.toggled:disabled &.selected.toggled:disabled
@include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%) @include m3-icon-color-palette(none, 0%, $on-surface, 38%, $on-surface, 12%)
&.filled:not(:disabled) &.filled:not(:disabled)
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.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, $on-primary 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, $primary 12%, transparent)
&:is(.outlined, .default):not(:disabled) &:is(.outlined, .default):not(:disabled)
& > span.m3.m3-ripple-domain > span.m3.m3-ripple & > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
&:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.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, $primary 12%, transparent)
&:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.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, $inverse-on-surface 12%, transparent)
&.tonal:not(:disabled) &.tonal:not(:disabled)
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.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-secondary-container) 12%, transparent) background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
&:hover:not(:disabled) &:hover:not(:disabled)
@include m3-icon-button-state-colors(8%) @include m3-icon-button-state-colors(8%)

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

@ -17,10 +17,10 @@ $densities: [0, -1, -2, -3]
@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
fill: var($color) fill: $color
& > label.m3.m3-typography & > label.m3.m3-typography
color: var($color) color: $color
@ -37,8 +37,8 @@ div.m3.m3-segmented-buttons
border-radius: 0 border-radius: 0
margin: 0 -0.5px margin: 0 -0.5px
display: inline-flex display: inline-flex
border: 1px solid $outline
background-color: transparent background-color: transparent
border: 1px solid var(--md-sys-color-outline)
&::before &::before
@include m3-buttons-state-layer-mixin @include m3-buttons-state-layer-mixin
@ -49,7 +49,7 @@ div.m3.m3-segmented-buttons
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
& > span.m3.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, $on-secondary-container 12%, transparent)
& > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) & > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
@include center(inline-flex) @include center(inline-flex)
@ -67,7 +67,7 @@ div.m3.m3-segmented-buttons
visibility: hidden visibility: hidden
& > span.m3.m3-button-segment-content-layer & > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface) @include m3-segmented-button-content-color-mixin($on-surface)
position: absolute position: absolute
@ -75,24 +75,24 @@ div.m3.m3-segmented-buttons
display: none display: none
&.selected &.selected
background-color: var(--md-sys-color-secondary-container) background-color: $secondary-container
& > span.m3.m3-button-segment-content-layer & > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container) @include m3-segmented-button-content-color-mixin($on-secondary-container)
& > svg.m3.m3-svg-icon & > svg.m3.m3-svg-icon
display: initial display: initial
&:not(:disabled):hover &:not(:disabled):hover
&::before &::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) background-color: color-mix(in srgb, $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)
&::before &::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&:disabled &:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) border: 1px solid color-mix(in srgb, $outline 12%, transparent)
& > * & > *
opacity: 38% opacity: 38%

9
src/styles/card.sass
View File

@ -1,4 +1,5 @@
@import 'mixins/m3-mixins' @import 'mixins/m3-mixins'
@import './css/colors-variables'
$padding: 16px $padding: 16px
@ -48,15 +49,15 @@ div.m3.m3-card-action-area
position: absolute position: absolute
& > .m3.m3-ripple-domain > .m3.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, $on-surface 12%, transparent)
&:hover &:hover
& > span.m3.m3-card-state-layer & > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, $on-surface 8%, transparent)
&:is(&:focus, &:focus-visible, &:focus-within) &:is(&:focus, &:focus-visible, &:focus-within)
& > span.m3.m3-card-state-layer & > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) background-color: color-mix(in srgb, $on-surface 12%, transparent)
&:is(&:focus, &:focus-visible, &:focus-within, &:hover) &:is(&:focus, &:focus-visible, &:focus-within, &:hover)
&:is(.m3-card-outlined, .m3-card-filled) &:is(.m3-card-outlined, .m3-card-filled)
@ -74,4 +75,4 @@ div.m3.m3-card-action-area
&:not(&:has(span.m3.m3-ripple-domain)) &:not(&:has(span.m3.m3-ripple-domain))
& > span.m3.m3-card-state-layer & > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) background-color: color-mix(in srgb, $on-surface 12%, transparent)

14
src/styles/container.sass
View File

@ -1,20 +1,22 @@
@import "mixins/m3-mixins" @import "mixins/m3-mixins"
@import './css/colors-variables'
div.m3.m3-container div.m3.m3-container
display: block display: block
border-radius: 12px
position: relative
contain: content contain: content
position: relative
border-radius: 12px
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1) transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
&.m3-container-filled &.m3-container-filled
background-color: var(--md-sys-color-surface-container-highest) background-color: $surface-container-highest
&.m3-container-outlined &.m3-container-outlined
background-color: var(--md-sys-color-surface)
outline-offset: -1px outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline-variant) background-color: $surface
outline: 1px solid $outline-variant
&.m3-container-elevated &.m3-container-elevated
@include elevation-1(false) @include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)
background-color: $surface-container-low

3
src/styles/css/colors-variables.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=colors-variables.css.map */

1
src/styles/css/colors-variables.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors-variables.css"}

61
src/styles/css/colors-variables.sass Normal file
View File

@ -0,0 +1,61 @@
$primary: var(--md-sys-color-primary)
$on-primary: var(--md-sys-color-on-primary)
$primary-container: var(--md-sys-color-primary-container)
$on-primary-container: var(--md-sys-color-on-primary-container)
$inverse-primary: var(--md-sys-color-inverse-primary)
$primary-fixed: var(--md-sys-color-primary-fixed)
$on-primary-fixed: var(--md-sys-color-on-primary-fixed)
$primary-fixed-dim: var(--md-sys-color-primary-fixed-dim)
$on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant)
$secondary: var(--md-sys-color-secondary)
$on-secondary: var(--md-sys-color-on-secondary)
$secondary-container: var(--md-sys-color-secondary-container)
$on-secondary-container: var(--md-sys-color-on-secondary-container)
$secondary-fixed: var(--md-sys-color-secondary-fixed)
$on-secondary-fixed: var(--md-sys-color-on-secondary-fixed)
$secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim)
$on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant)
$tertiary: var(--md-sys-color-tertiary)
$on-tertiary: var(--md-sys-color-on-tertiary)
$tertiary-container: var(--md-sys-color-tertiary-container)
$on-tertiary-container: var(--md-sys-color-on-tertiary-container)
$tertiary-fixed: var(--md-sys-color-tertiary-fixed)
$on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed)
$tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim)
$on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant)
$error: var(--md-sys-color-error)
$on-error: var(--md-sys-color-on-error)
$error-container: var(--md-sys-color-error-container)
$on-error-container: var(--md-sys-color-on-error-container)
$background: var(--md-sys-color-background)
$on-background: var(--md-sys-color-on-background)
$surface: var(--md-sys-color-surface)
$on-surface: var(--md-sys-color-on-surface)
$surface-variant: var(--md-sys-color-surface-variant)
$on-surface-variant: var(--md-sys-color-on-surface-variant)
$surface-dim: var(--md-sys-color-surface-dim)
$surface-bright: var(--md-sys-color-surface-bright)
$surface-container-lowest: var(--md-sys-color-surface-container-lowest)
$surface-container-low: var(--md-sys-color-surface-container-low)
$surface-container: var(--md-sys-color-surface-container)
$surface-container-high: var(--md-sys-color-surface-container-high)
$surface-container-highest: var(--md-sys-color-surface-container-highest)
$surface-tint: var(--md-sys-color-surface-tint)
$inverse-surface: var(--md-sys-color-inverse-surface)
$inverse-on-surface: var(--md-sys-color-inverse-on-surface)
$outline: var(--md-sys-color-outline)
$outline-variant: var(--md-sys-color-outline-variant)
$shadow: var(--md-sys-color-shadow)
$scrim: var(--md-sys-color-scrim)

4
src/styles/divider.sass
View File

@ -1,6 +1,8 @@
@import './css/colors-variables'
hr.m3.m3-divider hr.m3.m3-divider
border: none border: none
outline: 0.5px solid var(--md-sys-color-outline-variant) outline: 0.5px solid $outline-variant
position: relative position: relative
margin: 0 margin: 0

79
src/styles/generics.css
View File

@ -162,10 +162,10 @@ svg.m3.m3-badge > text {
line-height: var(--md-sys-typescale-label-small-line-height); line-height: var(--md-sys-typescale-label-small-line-height);
font-family: var(--md-sys-typescale-label-small-font-family-name); font-family: var(--md-sys-typescale-label-small-font-family-name);
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing); letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
fill: var(--md-sys-color-on-error);
text-anchor: middle; text-anchor: middle;
font-optical-sizing: none; font-optical-sizing: none;
alignment-baseline: central; alignment-baseline: central;
fill: var(--md-sys-color-on-error);
} }
@font-face { @font-face {
@ -220,22 +220,22 @@ svg.m3.m3-badge > text {
src: url("./font/Roboto-Black.ttf"); src: url("./font/Roboto-Black.ttf");
} }
.m3.m3-ripple-domain { .m3.m3-ripple-domain {
position: absolute;
width: 100%; width: 100%;
height: 100%;
z-index: 20; z-index: 20;
height: 100%;
position: absolute;
pointer-events: none; pointer-events: none;
} }
.m3.m3-ripple { .m3.m3-ripple {
position: absolute;
overflow: hidden;
pointer-events: none;
transform-origin: center;
opacity: 0; opacity: 0;
z-index: 20; z-index: 20;
aspect-ratio: 1; aspect-ratio: 1;
overflow: hidden;
position: absolute;
border-radius: 50%; border-radius: 50%;
pointer-events: none;
transform-origin: center;
animation-duration: 0.55s; animation-duration: 0.55s;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-name: rippleAppearanceAnimation; animation-name: rippleAppearanceAnimation;
@ -285,17 +285,17 @@ hr.m3.m3-divider.horizontal.middle-inset {
div.m3.m3-container { div.m3.m3-container {
display: block; display: block;
border-radius: 12px;
position: relative;
contain: content; contain: content;
position: relative;
border-radius: 12px;
transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
} }
div.m3.m3-container.m3-container-filled { div.m3.m3-container.m3-container-filled {
background-color: var(--md-sys-color-surface-container-highest); background-color: var(--md-sys-color-surface-container-highest);
} }
div.m3.m3-container.m3-container-outlined { div.m3.m3-container.m3-container-outlined {
background-color: var(--md-sys-color-surface);
outline-offset: -1px; outline-offset: -1px;
background-color: var(--md-sys-color-surface);
outline: 1px solid var(--md-sys-color-outline-variant); outline: 1px solid var(--md-sys-color-outline-variant);
} }
div.m3.m3-container.m3-container-elevated { div.m3.m3-container.m3-container-elevated {
@ -314,15 +314,15 @@ button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Rounded-Regular, sans-serif; font-family: Material-Symbols-Rounded-Regular, sans-serif;
} }
button.m3.m3-fab.m3 { button.m3.m3-fab.m3 {
contain: content;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
border: none;
gap: 12px; gap: 12px;
border: none;
contain: content;
text-align: center;
align-items: center;
flex-direction: row;
display: inline-flex;
box-sizing: border-box;
justify-content: center;
} }
button.m3.m3-fab::before { button.m3.m3-fab::before {
width: 100%; width: 100%;
@ -462,17 +462,17 @@ button.m3.m3-common-button.filled, button.m3.m3-common-button.filled > svg.m3-sv
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
button.m3.m3-common-button.outlined { button.m3.m3-common-button.outlined {
color: var(--md-sys-color-primary);
outline-offset: -1px; outline-offset: -1px;
background-color: transparent; background-color: transparent;
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.m3.m3-common-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.m3.m3-common-button.text { button.m3.m3-common-button.text {
background-color: transparent;
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
background-color: transparent;
} }
button.m3.m3-common-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);
@ -758,8 +758,8 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
border-radius: 0; border-radius: 0;
margin: 0 -0.5px; margin: 0 -0.5px;
display: inline-flex; display: inline-flex;
background-color: transparent;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
background-color: transparent;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before { div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before {
width: 100%; width: 100%;
@ -888,15 +888,15 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg >
stroke: var(--md-sys-color-on-surface-variant); stroke: var(--md-sys-color-on-surface-variant);
} }
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
fill-opacity: 0;
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
fill-opacity: 0;
} }
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-primary); stroke: var(--md-sys-color-primary);
} }
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state { div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
fill-opacity: 1;
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
fill-opacity: 1;
} }
div.m3.m3-radio-container svg { div.m3.m3-radio-container svg {
margin: 0; margin: 0;
@ -923,16 +923,25 @@ div.m3.m3-radio-container svg > circle.m3-radio-state {
div.m3.m3-slider-container { div.m3.m3-slider-container {
height: 20px; height: 20px;
display: flex; display: flex;
position: relative;
align-items: center; align-items: center;
} }
div.m3.m3-slider-container div.m3.m3-slider-label { div.m3.m3-slider-container > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label {
opacity: 1;
}
div.m3.m3-slider-container > div.m3.m3-slider-label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: -10px;
opacity: 0;
width: 28px;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
height: 33.7989898732px;
} }
div.m3.m3-slider-container div.m3.m3-slider-label::before { div.m3.m3-slider-container > div.m3.m3-slider-label::before {
top: 0;
content: ""; content: "";
width: 28px; width: 28px;
rotate: 45deg; rotate: 45deg;
@ -941,9 +950,10 @@ div.m3.m3-slider-container div.m3.m3-slider-label::before {
border-radius: 14px 14px 0 14px; border-radius: 14px 14px 0 14px;
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary);
} }
div.m3.m3-slider-container div.m3.m3-slider-label > label.m3.m3-typography { div.m3.m3-slider-container > div.m3.m3-slider-label > label.m3.m3-typography {
display: inline; display: inline;
font-weight: 500; font-weight: 500;
margin-top: -5px;
position: absolute; position: absolute;
font-size: 12px !important; font-size: 12px !important;
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
@ -956,7 +966,6 @@ input[type=range].m3.m3-slider {
margin: 0; margin: 0;
appearance: none; appearance: none;
border-radius: 2px; border-radius: 2px;
margin-inline: 8px;
background: var(--md-sys-color-surface-container-highest); background: var(--md-sys-color-surface-container-highest);
} }
input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) { input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) {
@ -988,12 +997,12 @@ input[type=range].m3.m3-slider::-moz-range-thumb {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
border: none; border: none;
} }
input[type=range].m3.m3-slider::-moz-range-thumb::after {
content: "1";
}
input[type=range].m3.m3-slider::-moz-range-thumb:hover { input[type=range].m3.m3-slider::-moz-range-thumb:hover {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
} }
input[type=range].m3.m3-slider::-moz-range-thumb:hover::after {
content: "1";
}
input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) { input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
@ -1018,12 +1027,12 @@ input[type=range].m3.m3-slider::-webkit-slider-thumb {
background: var(--md-sys-color-primary); background: var(--md-sys-color-primary);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1); transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
} }
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
content: "1";
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover { input[type=range].m3.m3-slider::-webkit-slider-thumb:hover {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
} }
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
content: "1";
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible) { input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
@ -1124,8 +1133,8 @@ div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-sw
fill: var(--md-sys-color-primary-container); fill: var(--md-sys-color-primary-container);
} }
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 8%;
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
fill-opacity: 8%;
} }
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler { div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant); fill: var(--md-sys-color-on-surface-variant);
@ -1135,8 +1144,8 @@ div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3
fill: var(--md-sys-color-on-surface); fill: var(--md-sys-color-on-surface);
} }
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%;
fill: var(--md-sys-color-primary); fill: var(--md-sys-color-primary);
fill-opacity: 12%;
} }
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%; fill-opacity: 12%;

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

File diff suppressed because one or more lines are too long

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

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-checkbox-container div.m3.m3-checkbox-container
@include m3-checkbox-container-mixin @include m3-checkbox-container-mixin
@ -26,27 +28,27 @@ input[type="checkbox"].m3.m3-checkbox
& ~ span.m3-checkbox-state & ~ span.m3-checkbox-state
position: absolute position: absolute
color: var(--md-sys-color-on-surface-variant) color: $on-surface-variant
transition: color .2s cubic-bezier(0.2, 0, 0, 1) transition: color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
& ~ span.m3-checkbox-state & ~ span.m3-checkbox-state
color: var(--md-sys-color-error) color: $error
background: var(--md-sys-color-on-error) background: $on-error
&:is(:user-invalid, .m3.m3-error):not(:checked) &:is(:user-invalid, .m3.m3-error):not(:checked)
& ~ span.m3-checkbox-state & ~ span.m3-checkbox-state
color: var(--md-sys-color-error) color: $error
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
& ~ span.m3-checkbox-state & ~ span.m3-checkbox-state
color: var(--md-sys-color-primary) color: $primary
background: var(--md-sys-color-on-primary) background: $on-primary
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state &:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
color: var(--md-sys-color-on-surface) color: $on-surface
&:disabled ~ * &:disabled ~ *
&:is(:hover, &, :checked) &:is(:hover, &, :checked)
@ -76,30 +78,30 @@ input[type="checkbox"].m3.m3-checkbox
&:not(:disabled) &:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
& ~ span.m3.m3-checkbox-state-layer & ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent) background-color: color-mix(in srgb, $error 8%, transparent)
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) background-color: color-mix(in srgb, $error 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple & ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent) background-color: color-mix(in srgb, $error 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple & ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent) background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover &:hover
& ~ span.m3-checkbox-state-layer & ~ span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, $on-surface 8%, transparent)
&: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, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple & ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) background-color: color-mix(in srgb, $primary 20%, transparent)

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

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-radio-container div.m3.m3-radio-container
@include center(inline-flex) @include center(inline-flex)
@ -30,47 +32,49 @@ div.m3.m3-radio-container
&:not(:disabled) &:not(:disabled)
&:checked:hover + span.m3.m3-radio-state-layer &:checked:hover + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple & ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent) background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover &:hover
& + span.m3.m3-radio-state-layer & + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, $on-surface 8%, transparent)
&: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, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple & ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) background-color: color-mix(in srgb, $primary 20%, transparent)
&:disabled &:disabled
&:is(:not(:checked), &:checked) ~ svg &:is(:not(:checked), &:checked) ~ svg
& > circle.m3-radio-outline & > circle.m3-radio-outline
stroke-opacity: 38% stroke-opacity: 38%
stroke: var(--md-sys-color-on-surface) stroke: $on-surface
&:checked ~ svg > circle.m3-radio-state &:checked ~ svg > circle.m3-radio-state
fill-opacity: 38% fill-opacity: 38%
fill: var(--md-sys-color-on-surface) fill: $on-surface
&:not(:checked) ~ svg &:not(:checked) ~ svg
& > circle.m3-radio-outline & > circle.m3-radio-outline
stroke: var(--md-sys-color-on-surface-variant) stroke: $on-surface-variant
& > circle.m3-radio-state & > circle.m3-radio-state
fill: $primary
fill-opacity: 0 fill-opacity: 0
fill: var(--md-sys-color-primary)
&:checked ~ svg &:checked ~ svg
& > circle.m3-radio-outline & > circle.m3-radio-outline
stroke: var(--md-sys-color-primary) stroke: $primary
& > circle.m3-radio-state & > circle.m3-radio-state
fill: $primary
fill-opacity: 1 fill-opacity: 1
fill: var(--md-sys-color-primary)
svg svg
margin: 0 margin: 0
@ -88,7 +92,7 @@ div.m3.m3-radio-container
fill: black fill: black
fill-opacity: 0 fill-opacity: 0
stroke-width: 2px stroke-width: 2px
stroke: var(--md-sys-color-on-surface-variant) stroke: $on-surface-variant
&.m3-radio-state &.m3-radio-state
r: 5px r: 5px

35
src/styles/input-styles/slider.sass
View File

@ -1,14 +1,17 @@
@use 'sass:math'
@import '../css/colors-variables'
@mixin input-range-thumb-mixin @mixin input-range-thumb-mixin
@include elevation-1(false) @include elevation-1(false)
&:hover
&::after &::after
content: '1' content: '1'
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) &:hover
outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
&:is(:active, :focus-visible) &:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
width: 20px width: 20px
height: 20px height: 20px
@ -16,34 +19,45 @@
border-radius: 50% border-radius: 50%
box-sizing: border-box box-sizing: border-box
outline: 10px solid transparent outline: 10px solid transparent
background: var(--md-sys-color-primary) background: $primary
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
div.m3.m3-slider-container div.m3.m3-slider-container
height: 20px height: 20px
display: flex display: flex
position: relative
align-items: center align-items: center
div.m3.m3-slider-label & > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
opacity: 1
& > div.m3.m3-slider-label
@include center(inline-flex) @include center(inline-flex)
top: -10px
opacity: 0
width: 28px
position: absolute position: absolute
pointer-events: none pointer-events: none
height: 14px * math.sqrt(2) + 14px
&::before &::before
top: 0
content: "" content: ""
width: 28px width: 28px
rotate: 45deg rotate: 45deg
aspect-ratio: 1 aspect-ratio: 1
position: absolute position: absolute
border-radius: 14px 14px 0 14px border-radius: 14px 14px 0 14px
background-color: var(--md-sys-color-primary) background-color: $primary
& > label.m3.m3-typography & > label.m3.m3-typography
display: inline display: inline
font-weight: 500 font-weight: 500
margin-top: -5px
position: absolute position: absolute
font-size: 12px !important font-size: 12px !important
color: var(--md-sys-color-on-primary) color: $on-primary
& > datalist & > datalist
display: none display: none
@ -52,14 +66,13 @@ input[type="range"].m3.m3-slider
margin: 0 margin: 0
appearance: none appearance: none
border-radius: 2px border-radius: 2px
margin-inline: 8px background: $surface-container-highest
background: var(--md-sys-color-surface-container-highest)
&:-moz-any(&) &:-moz-any(&)
height: 4px height: 4px
&:-webkit-any(&) &:-webkit-any(&)
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%) background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
&::-moz-range-track &::-moz-range-track
height: 4px height: 4px
@ -70,7 +83,7 @@ input[type="range"].m3.m3-slider
height: 4px height: 4px
overflow: hidden overflow: hidden
border-radius: 2px border-radius: 2px
background-color: var(--md-sys-color-primary) background-color: $primary
&::-moz-range-thumb &::-moz-range-thumb
@include input-range-thumb-mixin @include input-range-thumb-mixin

46
src/styles/input-styles/swtich.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-switch div.m3.m3-switch
gap: 20px gap: 20px
margin: 4px margin: 4px
@ -54,24 +56,24 @@ div.m3.m3-switch
&:not(:checked, :disabled) + svg &:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler & > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline) fill: $outline
&:checked:not(:disabled) + svg &:checked:not(:disabled) + svg
& > g & > g
transform: translate(50%, 81%) transform: translate(50%, 81%)
& > circle.m3.m3-switch-handler & > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary) fill: $on-primary
&:not(:disabled) + svg &:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked & > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary) fill: $on-primary
& > g > text.m3.m3-icon-checked & > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container) fill: $on-primary-container
&:checked:disabled + svg > circle.m3.m3-switch-handler &:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface) fill: $surface
&:checked + svg > circle.m3.m3-switch-handler, &:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler & + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
@ -93,33 +95,33 @@ div.m3.m3-switch
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill-opacity: 38% fill-opacity: 38%
fill: var(--md-sys-color-on-surface) fill: $on-surface
&:hover:not(:disabled) &:hover:not(:disabled)
&:checked + svg &:checked + svg
& > circle.m3.m3-switch-handler & > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container) fill: $primary-container
& > circle.m3.m3-switch-handler-state-layer & > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 8% fill-opacity: 8%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg &:not(:checked) + svg
& > circle.m3.m3-switch-handler & > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant) fill: $on-surface-variant
& > circle.m3.m3-switch-handler-state-layer & > circle.m3.m3-switch-handler-state-layer
fill-opacity: 8% fill-opacity: 8%
fill: var(--md-sys-color-on-surface) fill: $on-surface
&:active:not(:disabled) &:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer &:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 12% fill-opacity: 12%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill-opacity: 12% fill-opacity: 12%
fill: var(--md-sys-color-on-surface) fill: $on-surface
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px rx: 16px
@ -132,26 +134,26 @@ div.m3.m3-switch
y: 1px y: 1px
&:not(:checked) + svg > rect.m3.m3-switch-track &:not(:checked) + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-outline) stroke: $outline
fill: var(--md-sys-color-surface-container-highest) fill: $surface-container-highest
&:checked + svg > rect.m3.m3-switch-track &:checked + svg > rect.m3.m3-switch-track
fill: var(--md-sys-color-primary) fill: $primary
stroke: var(--md-sys-color-primary) stroke: $primary
&:disabled + svg &:disabled + svg
& > g > text.m3 & > g > text.m3
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent) fill: color-mix(in srgb, $surface-container-highest 38%, transparent)
& > rect.m3.m3-switch-track & > rect.m3.m3-switch-track
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) stroke: color-mix(in srgb, $on-surface 12%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent) fill: color-mix(in srgb, $surface-variant 12%, transparent)
&:checked:disabled + svg &:checked:disabled + svg
& > g > text.m3 & > g > text.m3
transform: translateX(38.5%) transform: translateX(38.5%)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) fill: color-mix(in srgb, $on-surface 38%, transparent)
& > rect.m3.m3-switch-track & > rect.m3.m3-switch-track
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) fill: color-mix(in srgb, $on-surface 12%, transparent)
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent) stroke: color-mix(in srgb, $on-surface 0%, transparent)

46
src/styles/input-styles/text-field.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
@mixin m3-text-field-fieldset-legend @mixin m3-text-field-fieldset-legend
border-top-width: 0 border-top-width: 0
border-style: solid border-style: solid
@ -23,7 +25,7 @@ div.m3.m3-text-field
display: flex display: flex
margin: 4px 16px 2px 16px margin: 4px 16px 2px 16px
color: var(--md-sys-color-on-surface-variant) color: $on-surface-variant
& > label & > label
position: absolute position: absolute
@ -48,7 +50,7 @@ div.m3.m3-text-field
position: absolute position: absolute
align-items: center align-items: center
justify-content: inherit justify-content: inherit
color: var(--md-sys-color-on-surface-variant) color: $on-surface-variant
font-family: Material-Symbols-Outlined-Regular, serif font-family: Material-Symbols-Outlined-Regular, serif
& > span.m3-text-field-state-layer & > span.m3-text-field-state-layer
@ -58,14 +60,14 @@ div.m3.m3-text-field
pointer-events: none pointer-events: none
& > input, & > label & > input, & > label
color: var(--md-sys-color-on-surface) color: $on-surface
&:is(.filled, .outlined) > input::placeholder &:is(.filled, .outlined) > input::placeholder
color: var(--md-sys-color-on-surface-variant) color: $on-surface-variant
&:is(.filled, .outlined) > input:focus-visible &:is(.filled, .outlined) > input:focus-visible
outline: none outline: none
caret-color: var(--md-sys-color-primary) caret-color: $primary
&:is(.filled, .outlined):has(input:disabled) &:is(.filled, .outlined):has(input:disabled)
& > *, & + span.m3-text-field-supporting-text & > *, & + span.m3-text-field-supporting-text
@ -95,8 +97,8 @@ div.m3.m3-text-field
display: inline-flex display: inline-flex
box-sizing: border-box box-sizing: border-box
border-radius: 4px 4px 0 0 border-radius: 4px 4px 0 0
background-color: var(--md-sys-color-surface-container-highest) background-color: $surface-container-highest
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant) box-shadow: inset 0 -1px 0 $on-surface-variant
& > label.raised & > label.raised
@include m3-typography-mixin('body-small') @include m3-typography-mixin('body-small')
@ -104,28 +106,28 @@ div.m3.m3-text-field
transform: translate(12px, -12px) transform: translate(12px, -12px)
& > input:required:user-invalid & > input:required:user-invalid
caret-color: var(--md-sys-color-error) caret-color: $error
&:focus-visible &:focus-visible
box-shadow: inset 0 -3px 0 var(--md-sys-color-error) box-shadow: inset 0 -3px 0 $error
& &
box-shadow: inset 0 -1px 0 var(--md-sys-color-error) box-shadow: inset 0 -1px 0 $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error) color: $error
& > input:focus-visible & > input:focus-visible
outline-offset: 3px outline-offset: 3px
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary) box-shadow: inset 0 -3px 0 $primary
& > input:focus-visible + label & > input:focus-visible + label
color: var(--md-sys-color-primary) color: $primary
&:hover &:hover
& > input:not(:disabled) ~ span.m3-text-field-state-layer & > input:not(:disabled) ~ span.m3-text-field-state-layer
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) background-color: color-mix(in srgb, $on-surface 8%, transparent)
&.outlined &.outlined
& > fieldset & > fieldset
@ -135,7 +137,7 @@ div.m3.m3-text-field
pointer-events: none pointer-events: none
padding-inline: 12px padding-inline: 12px
inset: -7.5px 0px 0px 0px inset: -7.5px 0px 0px 0px
border: 1px solid var(--md-sys-color-outline) border: 1px solid $outline
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > legend > span & > legend > span
@ -176,7 +178,7 @@ div.m3.m3-text-field
border-radius: 4px border-radius: 4px
&:has(input:focus-visible) > fieldset &:has(input:focus-visible) > fieldset
border: 3px solid var(--md-sys-color-primary) border: 3px solid $primary
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
@include m3-text-field-fieldset-legend @include m3-text-field-fieldset-legend
@ -189,7 +191,7 @@ div.m3.m3-text-field
border-inline-width: 7.5px border-inline-width: 7.5px
& > input:focus-visible + label & > input:focus-visible + label
color: var(--md-sys-color-primary) color: $primary
& > label.raised, & > fieldset > * & > label.raised, & > fieldset > *
@include m3-typography-mixin('body-small') @include m3-typography-mixin('body-small')
@ -198,19 +200,19 @@ div.m3.m3-text-field
transform: translate(16px, -27px) !important transform: translate(16px, -27px) !important
& > input:required:user-invalid & > input:required:user-invalid
caret-color: var(--md-sys-color-error) caret-color: $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error) color: $error
&:has(input:required:user-invalid) > fieldset &:has(input:required:user-invalid) > fieldset
border: 3px solid var(--md-sys-color-error) border: 3px solid $error
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset &:has(input:required:user-invalid:not(:focus-visible)) > fieldset
border: 1px solid var(--md-sys-color-error) border: 1px solid $error
&:hover &:hover
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset &:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
transition: .2s cubic-bezier(0.2, 0, 0, 1) transition: .2s cubic-bezier(0.2, 0, 0, 1)
border-color: var(--md-sys-color-on-surface) border-color: $on-surface

13
src/styles/ripple.sass
View File

@ -1,19 +1,19 @@
.m3.m3-ripple-domain .m3.m3-ripple-domain
position: absolute
width: 100% width: 100%
height: 100%
z-index: 20 z-index: 20
height: 100%
position: absolute
pointer-events: none pointer-events: none
.m3.m3-ripple .m3.m3-ripple
position: absolute
overflow: hidden
pointer-events: none
transform-origin: center
opacity: 0 opacity: 0
z-index: 20 z-index: 20
aspect-ratio: 1 aspect-ratio: 1
overflow: hidden
position: absolute
border-radius: 50% border-radius: 50%
pointer-events: none
transform-origin: center
animation-duration: .55s animation-duration: .55s
animation-iteration-count: 1 animation-iteration-count: 1
@ -30,5 +30,6 @@
@keyframes rippleAppearanceAnimation @keyframes rippleAppearanceAnimation
0% 0%
transform: scale3d(0, 0, 0) transform: scale3d(0, 0, 0)
100% 100%
transform: scale3d(1, 1, 1) transform: scale3d(1, 1, 1)