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

Compare commits

base: doryan:91486200f7b18eca5a2c5eae35c7ecc1fc92eb09
Branches Tags
doryan:main
doryan:experimental
...
compare: doryan:33bd4f57a679bf61f098e11d7d66c8b2e5cf0ba2
Branches Tags
doryan:main
doryan:experimental

2 Commits
91486200f7 ... 33bd4f57a6

Author SHA1 Message Date
doryan04 33bd4f57a6 ADDED: slider label but it's not done 2024-02-25 19:52:36 +04:00
doryan04 1410861afb FIXED: Normalized colors in icon-buttons, typography color in night-mode 2024-02-25 00:37:57 +04:00
13 changed files with 158 additions and 124 deletions
Show Stats Expand all files Collapse all files

79
app/page.tsx
View File

@ -1,89 +1,14 @@
import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import {
Button,
FAB,
IconButton,
} from '../src/primitive-components/components';
import { CardFooter } from '../src/primitive-components/card/card-footer';
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 { Slider } from '../src/primitive-components/input-components/slider/slider';
export default function Page() {
return (
<main>
<Card variant={'outlined'}>
<CardFooter>
<Button> Default Button </Button>
<Button ripple={false}> Default Button </Button>
<FAB icon={'edit'} variant={'secondary'} />
<FAB icon={'edit'} ripple={false} variant={'secondary'} />
<IconButton icon={'settings'} variant={'filled'} />
<IconButton icon={'settings'} variant={'default'} />
<IconButton icon={'settings'} variant={'tonal'} />
<IconButton icon={'settings'} variant={'outlined'} />
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'default'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'outlined'}
/>
<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>
<Slider />
</CardFooter>
</Card>
</main>

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

@ -3,9 +3,9 @@
import React, { forwardRef } from 'react';
import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography';
import { ButtonLayout } from '../button-layout/button-layout';
/**
* Button component

12
src/primitive-components/button-components/icon-button/icon-button.tsx
View File

@ -3,7 +3,12 @@
import { Icon } from '../../components';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import React, {
forwardRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
/**
@ -41,7 +46,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
const buttonRef = useRef<HTMLButtonElement>(null);
const callback = event => {
const callback = (event: React.MouseEvent<HTMLButtonElement>) => {
if (toggled) {
if (toggleIcon.state === 'selected') {
toggle('', toggled.unselected ?? 'add_circle');
@ -67,8 +72,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
>
<Icon
fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
iconSize={28}
iconSize={24}
svgSize={40}
type={'rounded'}
>
{toggled ? toggleIcon.icon : icon ? icon : undefined}
</Icon>

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

@ -1,13 +1,13 @@
'use client';
import { string } from 'prop-types';
import { Icon } from '../../components';
import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography';
import { SegmentedButton } from './segmented-buttons.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
import { Icon } from '../../components';
/**
* Segment button

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

@ -1,5 +1,6 @@
'use client';
import { Typography } from '../../typography/typography';
import { InputLayout } from '../input-layout/input-layout';
import React, {
ChangeEvent,
@ -14,33 +15,71 @@ interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
options?: number[];
}
function fractionCalc(current: number | string, max: number | string): number {
const _current = isNaN(parseInt(current as string))
? 50
: parseInt(current as string);
const _max = isNaN(parseInt(max as string)) ? 100 : parseInt(max as string);
return (_current / _max) * 100;
}
function gradientStyle(value: number): string {
return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`;
}
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
({ options, ...props }, ref) => {
const sliderId = useId();
const [isChrome, setIsChrome] = useState<boolean>(false);
const [value, setValue] = useState(props.defaultValue ?? 50);
useLayoutEffect(() => {
setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1);
}, []);
if (isChrome) {
const initialFraction = fractionCalc(
(props.value as string) ?? (props.defaultValue as string),
props.max as string,
);
if (props.style === undefined) {
props.style = {};
}
props.style.background = gradientStyle(initialFraction);
}
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 (
<div className={'m3 m3-slider-container'}>
<div className={'m3 m3-slider-label'}>
<Typography role={'label'} size={'small'}>
{value}
</Typography>
</div>
<InputLayout
{...props}
className={props.className}
list={sliderId}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
props.onChange?.apply(this, props?.onChange?.prototype);
setValue(event.target.value);
if (isChrome) {
const fraction =
(parseInt(event.target.value) /
parseInt(event.target.max)) *
100;
event.target.style.background = `linear-gradient(\
to right, var(--md-sys-color-primary) ${fraction}%, \
var(--md-sys-color-surface-container-highest) ${fraction}%\
)`;
webkitProgress(event);
}
}}
ref={ref}

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

@ -18,7 +18,7 @@
background: color-mix(in srgb, var($color) 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active
&:before
&::before
background: color-mix(in srgb, var($color) 20%, transparent)
@ -26,7 +26,7 @@ button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
& > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-family: Material-Symbols-Rounded-Regular, sans-serif
&.m3
contain: content
@ -39,7 +39,7 @@ button.m3.m3-fab
border: none
gap: 12px
&:before
&::before
@include m3-buttons-state-layer-mixin
content: ""

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

@ -2,13 +2,19 @@
&: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
&.outlined.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
&.filled::before,
&.filled.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
&.filled.toggled::before
&.filled:not(.selected).toggled::before,
&.default.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
&.tonal::before, &.tonal.toggled.selected::before
&.tonal::before,
&.tonal.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
&.tonal.toggled::before
@ -66,7 +72,9 @@ button.m3.m3-icon-button
&.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
&:disabled, &.selected:disabled, &.selected.toggled:disabled
&:disabled,
&.selected:disabled,
&.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
&.filled
@ -120,7 +128,7 @@ button.m3.m3-icon-button
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
&.tonal:not(:disabled)
&:is(&.selected.toggled, &):not(&.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)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple

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

@ -40,7 +40,7 @@ div.m3.m3-segmented-buttons
background-color: transparent
border: 1px solid var(--md-sys-color-outline)
&:before
&::before
@include m3-buttons-state-layer-mixin
content: ""
@ -67,6 +67,8 @@ div.m3.m3-segmented-buttons
visibility: hidden
& > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
position: absolute
& > svg.m3.m3-svg-icon
@ -82,12 +84,12 @@ div.m3.m3-segmented-buttons
display: initial
&:not(:disabled):hover
&:before
&::before
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)
&:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent)
&::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)

2
src/styles/fonts.css
View File

@ -3,7 +3,7 @@
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
font-family: Material-Symbols-Outlined-Regular;
font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {

69
src/styles/generics.css
View File

@ -311,7 +311,7 @@ button.m3.m3-fab {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-family: Material-Symbols-Rounded-Regular, sans-serif;
}
button.m3.m3-fab.m3 {
contain: content;
@ -324,7 +324,7 @@ button.m3.m3-fab.m3 {
border: none;
gap: 12px;
}
button.m3.m3-fab:before {
button.m3.m3-fab::before {
width: 100%;
height: 100%;
position: absolute;
@ -344,7 +344,7 @@ button.m3.m3-fab.surface > svg.m3-svg-icon {
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);
}
button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
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);
}
button.m3.m3-fab.primary {
@ -360,7 +360,7 @@ button.m3.m3-fab.primary > svg.m3-svg-icon {
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);
}
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
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);
}
button.m3.m3-fab.secondary {
@ -376,7 +376,7 @@ button.m3.m3-fab.secondary > svg.m3-svg-icon {
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);
}
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
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);
}
button.m3.m3-fab.tertiary {
@ -392,7 +392,7 @@ button.m3.m3-fab.tertiary > svg.m3-svg-icon {
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);
}
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
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);
}
button.m3.m3-fab.m3-small-fab {
@ -658,7 +658,7 @@ button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).t
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);
}
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 {
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)) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-icon-button.tonal:not(:disabled):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 {
@ -667,13 +667,16 @@ button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
button.m3.m3-icon-button:hover:not(:disabled).outlined.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
button.m3.m3-icon-button:hover:not(:disabled).filled:not(.selected).toggled::before, button.m3.m3-icon-button:hover:not(:disabled).default.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
@ -682,13 +685,16 @@ button.m3.m3-icon-button:hover: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))):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
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 {
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))).outlined.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
}
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.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
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 {
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:not(.selected).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))).default.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
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 {
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.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
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 {
@ -755,7 +761,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
background-color: transparent;
border: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before {
width: 100%;
height: 100%;
position: absolute;
@ -787,6 +793,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-se
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
position: absolute;
}
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 {
display: none;
}
@ -802,11 +814,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 {
display: initial;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
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);
}
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) 20%, 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)::before {
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:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
@ -913,6 +925,29 @@ div.m3.m3-slider-container {
display: flex;
align-items: center;
}
div.m3.m3-slider-container div.m3.m3-slider-label {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
pointer-events: none;
}
div.m3.m3-slider-container div.m3.m3-slider-label::before {
content: "";
width: 28px;
rotate: 45deg;
aspect-ratio: 1;
position: absolute;
border-radius: 14px 14px 0 14px;
background-color: var(--md-sys-color-primary);
}
div.m3.m3-slider-container div.m3.m3-slider-label > label.m3.m3-typography {
display: inline;
font-weight: 500;
position: absolute;
font-size: 12px !important;
color: var(--md-sys-color-on-primary);
}
div.m3.m3-slider-container > datalist {
display: none;
}

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

File diff suppressed because one or more lines are too long

2
src/styles/icon.css
View File

@ -48,7 +48,7 @@ svg.m3.m3-svg-icon > text.m3-size-48px {
font-size: 48px;
line-height: 48px; }
svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular; }
font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Sharp {

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

@ -19,13 +19,32 @@
background: var(--md-sys-color-primary)
transition: .2s cubic-bezier(0.2, 0, 0, 1)
div.m3.m3-slider-container
height: 20px
display: flex
align-items: center
div.m3.m3-slider-label
@include center(inline-flex)
position: absolute
pointer-events: none
&::before
content: ""
width: 28px
rotate: 45deg
aspect-ratio: 1
position: absolute
border-radius: 14px 14px 0 14px
background-color: var(--md-sys-color-primary)
& > label.m3.m3-typography
display: inline
font-weight: 500
position: absolute
font-size: 12px !important
color: var(--md-sys-color-on-primary)
& > datalist
display: none