diff --git a/app/components/badges.tsx b/app/components/badges.tsx deleted file mode 100644 index 25ba619..0000000 --- a/app/components/badges.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React from 'react'; -import { Badge } from '../../src/primitive-components/badge/badge'; -import { Divider } from '../../src/primitive-components/divider/divider'; - -export default function Badges() { - return ( -
-

Badges

-
-
-
- -
- -
- -
- -
- 3487 -
- -
- 5 -
- -
- 32 -
- -
- 322342 -
-
-
- {/**/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/* */} - {/*
*/} - {/* 5*/} - {/*
*/} - {/* */} - {/*
*/} - {/* 32*/} - {/*
*/} - {/*
*/} - {/*
*/} -
- ); -} diff --git a/app/components/buttons.tsx b/app/components/buttons.tsx deleted file mode 100644 index 10fdf3c..0000000 --- a/app/components/buttons.tsx +++ /dev/null @@ -1,86 +0,0 @@ -'use client'; - -import React, { useCallback, useState } from 'react'; -import { Button } from '../../src/primitive-components/components'; - -export default function Buttons() { - const [state, setState] = useState(1); - - const callback = useCallback( - () => setState(prevState => prevState + 1), - [state], - ); - - return ( -
-

Buttons

-
-
-

Default buttons

-
- - - - - -
-
-
-

Buttons with icon

-
- - - - - -
-
-
-
- ); -} diff --git a/app/components/checkboxes.tsx b/app/components/checkboxes.tsx deleted file mode 100644 index f1f1981..0000000 --- a/app/components/checkboxes.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'use client'; - -import React from 'react'; -import { Button, Checkbox } from '../../src/primitive-components/components'; - -export default function Checkboxes() { - return ( -
-

Checkboxes

-
-
-
-

Default

-
- - - -
-
-
-

Disabled

-
- - -
-
-
-
-

Errored

-
-
- - - -
-
- - - -
- -
-
-
-
- ); -} diff --git a/app/components/fabs.tsx b/app/components/fabs.tsx deleted file mode 100644 index 0e1b893..0000000 --- a/app/components/fabs.tsx +++ /dev/null @@ -1,221 +0,0 @@ -import React from 'react'; -import { FAB } from '../../src/primitive-components/components'; - -export default function Fabs() { - return ( -
-
-
-

FABs with elevation

-
-
-

Small

-
- - - - -
-
-
-

Default

-
- - - - -
-
-
-

Large

-
- - - - -
-
-
-

Extended

-
- - Label - - - Label - - - Label - - - Label - -
-
-
-
-
-

FABs without elevation

-
-
-

Small

-
- - - - -
-
-
-

Default

-
- - - - -
-
-
-

Large

-
- - - - -
-
-
-

Extended

-
- - Label - - - Label - - - Label - - - Label - -
-
-
-
-
-
- ); -} diff --git a/app/components/icon-buttons.tsx b/app/components/icon-buttons.tsx deleted file mode 100644 index 02940e3..0000000 --- a/app/components/icon-buttons.tsx +++ /dev/null @@ -1,197 +0,0 @@ -'use client'; - -import React from 'react'; -import { IconButton } from '../../src/primitive-components/components'; - -function IconButtons() { - return ( -
-

Icon buttons

-
-
-

Default buttons

-
- - - - -
-

Disabled default buttons

-
- - - - -
-
-
-

Toggle buttons

-
- - - - -
-

Disabled toggle buttons

-
- - - - -
-

Disabled selected toggle buttons

-
- - - - -
-
-
-
- ); -} - -export default IconButtons; diff --git a/app/components/radios.tsx b/app/components/radios.tsx deleted file mode 100644 index 17854c4..0000000 --- a/app/components/radios.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Radio } from '../../src/primitive-components/components'; - -export default function Radios() { - return ( -
-

Radio

-
-
-

Default

-
- - -
-
-
-

Disabled

-
- - -
-
-
-
- ); -} diff --git a/app/components/switches.tsx b/app/components/switches.tsx deleted file mode 100644 index b304cd6..0000000 --- a/app/components/switches.tsx +++ /dev/null @@ -1,100 +0,0 @@ -'use client'; - -import React from 'react'; -import { Switch } from '../../src/primitive-components/components'; - -export default function Switches() { - return ( -
-

Switches

-
-
-

Without icon

-
-
-

Default

- - -
-
-

Disabled

- - -
-
-
-
-

With icon (both)

-
-
-

Default

- - -
-
-

Disabled

- - -
-
-
-
-

With icon (selected)

-
-
-

Default

- - -
-
-

Disabled

- - -
-
-
-
-

With label

-
-
-

Default

- - -
-
-
-
-
- ); -} diff --git a/app/components/text-fields.tsx b/app/components/text-fields.tsx deleted file mode 100644 index 764652e..0000000 --- a/app/components/text-fields.tsx +++ /dev/null @@ -1,1504 +0,0 @@ -import React from 'react'; -import { TextField } from '../../src/primitive-components/input-components/text-field/text-field'; -import { Button } from '../../src/primitive-components/button-components/button/button'; - -export function TextFields() { - return ( -
-

Inputs

-
-
-

Filled Inputs

-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-

Outlined Inputs

-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
- -
-
- - - -
- -
-
- -
-
- -
-
-
-
-
-
-
-
- ); -} diff --git a/app/page.tsx b/app/page.tsx index dfe63eb..d30a79f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,19 +1,11 @@ import React from 'react'; -import testImage1 from './test-images/test-image-1.jpg'; import { Card } from '../src/primitive-components/card/card'; import { Button, - Checkbox, + FAB, IconButton, } from '../src/primitive-components/components'; -import { CardBody } from '../src/primitive-components/card/card-body'; -import { CardMedia } from '../src/primitive-components/card/card-media'; import { CardFooter } from '../src/primitive-components/card/card-footer'; -import { CardHeader } from '../src/primitive-components/card/card-header'; -import { Typography } from '../src/primitive-components/typography/typography'; -import { CardActionArea } from '../src/primitive-components/card/card-action-area'; -import { Slider } from '../src/primitive-components/input-components/slider/slider'; -import { Button } from '../src/primitive-components/button-components/button/button'; import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button'; import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; @@ -34,22 +26,51 @@ export default function Page() { > - + - fin ita la comedia + Label 1 - Label 2 + Not selectable - Label 3 + + Label 3 + + Label 4 + + + + + + + + diff --git a/app/test-images/test-image-1.jpg b/app/test-images/test-image-1.jpg deleted file mode 100644 index 9a464ba..0000000 Binary files a/app/test-images/test-image-1.jpg and /dev/null differ diff --git a/src/primitive-components/button-components/button-layout/button-layout.tsx b/src/primitive-components/button-components/button-layout/button-layout.tsx index 19a28fa..3c327f4 100644 --- a/src/primitive-components/button-components/button-layout/button-layout.tsx +++ b/src/primitive-components/button-components/button-layout/button-layout.tsx @@ -7,11 +7,11 @@ import useRippleEffect from '../../ripple/hooks/useRippleEffect'; import React, { forwardRef, useId, useRef, useState } from 'react'; export const ButtonLayout = forwardRef( - ({ centralRipple = false, ...props }, ref) => { + ({ centralRipple = false, ripple = true, ...props }, ref) => { const [isActive, setIsActive] = useState(false), ripplesRef = useRef(null), buttonId = useId(), - events = useRippleEffect(ripplesRef, setIsActive); + events = useRippleEffect(ripplesRef, setIsActive, ripple); const extraClassStyles = `m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd(); @@ -26,11 +26,13 @@ export const ButtonLayout = forwardRef( ref={ref} > {props.children} - + {ripple && ( + + )} ); }, diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx index 57fc106..c0f19e7 100644 --- a/src/primitive-components/button-components/button/button.tsx +++ b/src/primitive-components/button-components/button/button.tsx @@ -1,6 +1,6 @@ 'use client'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { ButtonProps } from './button.types'; import { bool, oneOf, string } from 'prop-types'; import { ButtonLayout } from '../button-layout/button-layout'; @@ -15,9 +15,10 @@ import { Typography } from '../../typography/typography'; export const Button = forwardRef( ( { - icon = undefined, + ripple = true, className = '', disabled = false, + icon = undefined, variant = 'filled', iconPlace = 'left', centralRipple = false, @@ -31,6 +32,7 @@ export const Button = forwardRef( className={`${variant} ${className}`} disabled={disabled} ref={ref} + ripple={ripple} > & diff --git a/src/primitive-components/button-components/fab/fab.tsx b/src/primitive-components/button-components/fab/fab.tsx index 8e67b83..72f4d43 100644 --- a/src/primitive-components/button-components/fab/fab.tsx +++ b/src/primitive-components/button-components/fab/fab.tsx @@ -44,6 +44,7 @@ export const FAB = forwardRef( {icon} + {size === 'extended' ? ( + {children} + + ); + + const iconProps = { + grade: grade, + fillIcon: fillIcon, + iconSize: iconSize, + opticalSize: opticalSize, + svgSize: svgSize, + type: type, + weight: weight, + }; + return ( { - if (toggled) { + if (selectable) { setSelectedState(state => !state); } props.onClick?.apply(this, props.onClick.arguments); }} ref={ref} > - - + - {children} - - - + {ButtonLabel} + + + + {selectable && ( + <> + {icon} + {ButtonLabel} + + )} + ); }, ); -import { ButtonLayout } from '../button-layout/button-layout'; - -import { ButtonLayoutProps } from '../button-layout/button-layout.types'; SegmentButton.propTypes = { children: string, diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx index 8256ccb..23616ec 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx @@ -7,7 +7,7 @@ import React, { cloneElement, forwardRef, ReactElement } from 'react'; export const SegmentedButtons = forwardRef< HTMLDivElement, SegmentedButtonsProps ->(({ toggled = false, children, ...props }, ref) => { +>(({ selectable = false, density = 0, children, ...props }, ref) => { if (children.length <= 1) { throw 'You must build segmented button with 2 or more button'; } @@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef< (Button: ReactElement, index: number) => { return cloneElement(, { ...Button.props, - toggled: Button.props.toggled ?? toggled, + selectable: Button.props.selectable ?? selectable, key: index, }); }, @@ -24,7 +24,7 @@ export const SegmentedButtons = forwardRef< return (
{SegmentedButtons} diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts index c4cadaa..6842206 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts @@ -3,12 +3,13 @@ import { IconWrapperProps } from '../../icon/icon.types'; export type SegmentedButton = IconWrapperProps & { icon?: string; - toggled?: boolean; + selectable?: boolean; centralRipple?: boolean; }; export interface SegmentedButtons { - toggled?: boolean; + selectable?: boolean; + density?: 0 | -1 | -2 | -3; children?: ReactElement[]; } diff --git a/src/primitive-components/ripple/ripple.types.ts b/src/primitive-components/ripple/ripple.types.ts index e4c40b6..71047c9 100644 --- a/src/primitive-components/ripple/ripple.types.ts +++ b/src/primitive-components/ripple/ripple.types.ts @@ -26,6 +26,7 @@ export interface RippleContainer { } export interface RipplePropsForComponents extends HTMLAttributes { + ripple?: boolean; centralRipple?: boolean; } diff --git a/src/styles/badge.sass b/src/styles/badge.sass index fe35806..d0b6f05 100644 --- a/src/styles/badge.sass +++ b/src/styles/badge.sass @@ -3,23 +3,22 @@ svg.m3.m3-badge background-color: var(--md-sys-color-error) &.disable-value padding: 0 - height: 6px width: 6px + height: 6px border-radius: 3px & > text display: none & - border-radius: 8px height: 16px + border-radius: 8px & > text - fill: var(--md-sys-color-on-error) - font-size: var(--md-sys-typescale-label-small-font-size) - font-weight: var(--md-sys-typescale-label-small-font-weight) - line-height: var(--md-sys-typescale-label-small-line-height) - font-optical-sizing: none - alignment-baseline: central - text-anchor: middle + @include m3-typography-mixin('label-small') + display: flex align-items: center + text-anchor: middle justify-content: center + font-optical-sizing: none + alignment-baseline: central + fill: var(--md-sys-color-on-error) diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass index 534aca2..2cd71d5 100644 --- a/src/styles/button-styles/button.sass +++ b/src/styles/button-styles/button.sass @@ -1,20 +1,11 @@ -input[type="button"].test-button - color: white - &:not(:checked) - background-color: green - &:checked - background-color: blue - button:not(.m3-fab, .m3-icon-button) - width: min-content - height: min-content + @include m3-typography-mixin('label-large') + max-height: 40px - box-sizing: border-box + width: min-content white-space: nowrap - font-size: var(--md-sys-typescale-label-large-font-size) - font-weight: var(--md-sys-typescale-label-large-font-weight) - line-height: var(--md-sys-typescale-label-large-line-height) - font-family: var(--md-sys-typescale-label-large-font-family-name) + height: min-content + box-sizing: border-box transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important &.m3 @@ -32,13 +23,14 @@ button:not(.m3-fab, .m3-icon-button) &.filled background-color: var(--md-sys-color-primary) + &, & > svg.m3-svg-icon fill: var(--md-sys-color-on-primary) color: var(--md-sys-color-on-primary) &.outlined outline-offset: -1px - background-color: #00000000 + background-color: transparent color: var(--md-sys-color-primary) outline: 1px solid var(--md-sys-color-outline) !important @@ -46,8 +38,7 @@ button:not(.m3-fab, .m3-icon-button) fill: var(--md-sys-color-primary) &.text - background-color: #00000000 - padding: 10px 12px !important + background-color: transparent color: var(--md-sys-color-primary) & > svg.m3-svg-icon @@ -55,6 +46,7 @@ button:not(.m3-fab, .m3-icon-button) &.elevated @include elevation-1(false) + color: var(--md-sys-color-primary) background-color: var(--md-sys-color-surface-container-low) @@ -68,17 +60,14 @@ button:not(.m3-fab, .m3-icon-button) & > svg.m3-svg-icon fill: var(--md-sys-color-on-secondary-container) - &::before - @include state-layer - - &.filled > .m3.m3-ripple-domain > .m3.ripple + &.filled > span.m3.m3-ripple-domain > span.m3.ripple background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent) &:is(.outlined, .text, .elevated) - & > .m3.m3-ripple-domain > .m3.ripple + & > span.m3.m3-ripple-domain > span.m3.ripple background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &.tonal > .m3.m3-ripple-domain > .m3.ripple + &.tonal > span.m3.m3-ripple-domain > span.m3.ripple background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) &:active @@ -88,21 +77,31 @@ button:not(.m3-fab, .m3-icon-button) &.elevated @include elevation-1(true) - &.tonal::before - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) + &:not(&:has(span.m3.m3-ripple-domain)) + &.outlined + border-color: var(--md-sys-color-primary) !important + + &.filled + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary)) + + &:is(.outlined, .text, .elevated) + background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) + + &.tonal + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container)) &:focus-visible &.outlined border-color: var(--md-sys-color-primary) !important - &.filled::before - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent) + &.filled + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary)) - &:is(.outlined, .text, .elevated)::before + &:is(.outlined, .text, .elevated) background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &.tonal::before - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) + &.tonal + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container)) &:hover &:is(.filled, .tonal) @@ -111,14 +110,14 @@ button:not(.m3-fab, .m3-icon-button) &.elevated @include elevation-2(false) - &.filled::before - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent) + &.filled + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)) - &:is(.outlined, .text, .elevated)::before + &:is(.outlined, .text, .elevated) background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) - &.tonal::before - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) + &.tonal + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)) &:disabled pointer-events: none diff --git a/src/styles/button-styles/fabs.sass b/src/styles/button-styles/fabs.sass index e69920c..80851ef 100644 --- a/src/styles/button-styles/fabs.sass +++ b/src/styles/button-styles/fabs.sass @@ -1,3 +1,27 @@ +@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0) + width: $width + height: $height + padding: $padding + border-radius: $b-radius + +@mixin m3-fab-colors-palette($bg-color, $color) + &:not(.without-elevation) + @include elevation-3(false) + + color: var($color) + background-color: var($bg-color) + + & > svg.m3-svg-icon + fill: var($color) + + & > span.m3.m3-ripple-domain > span.m3.ripple + background: color-mix(in srgb, var($color) 12%, transparent) + + &:not(&:has(span.m3.m3-ripple-domain)):active + & > span.m3.m3-fab-state-layer + background: color-mix(in srgb, var($color) 20%, transparent) + + button.m3.m3-fab transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important @@ -15,8 +39,8 @@ button.m3.m3-fab border: none gap: 12px - &::before - @include state-layer + & > span.m3.m3-fab-state-layer + @include m3-buttons-state-layer-mixin &.surface @include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary) @@ -53,27 +77,27 @@ button.m3.m3-fab @include elevation-3(true) &:hover - &.surface::before + &.surface > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) - &.primary::before + &.primary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent) - &.secondary::before + &.secondary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) - &.tertiary::before + &.tertiary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent) &:focus-visible - &.surface::before + &.surface > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &.primary::before + &.primary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent) - &.secondary::before + &.secondary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - &.tertiary::before + &.tertiary > span.m3.m3-fab-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent) \ No newline at end of file diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass index ea37af5..7e4d4b0 100644 --- a/src/styles/button-styles/segmented-button.sass +++ b/src/styles/button-styles/segmented-button.sass @@ -1,44 +1,88 @@ +$densities: [0, -1, -2, -3] + +@each $density in $densities + .m3.m3-density-#{$density} + $height: 40px + ($density * 2px) + + & > button.m3.m3-button-segment + height: $height + + &:first-child + border-radius: ($height / 2) 0 0 ($height / 2) + + &:last-child + border-radius: 0 ($height / 2) ($height / 2) 0 + + & > span.m3.m3-button-segment-state-layer + padding-top: 10px + ($density * 1px) + padding-bottom: 10px + ($density * 1px) + +@mixin m3-segmented-button-content-color-mixin($color) + & > svg.m3.m3-svg-icon > text + fill: var($color) + + & > label.m3.m3-typography + color: var($color) + div.m3.m3-segmented-buttons - padding: 0 - height: 40px display: flex + padding: 4px 0 border-radius: 20px box-sizing: border-box & > button.m3.m3-button-segment - width: auto - height: 40px - padding: 10px - min-width: 108px + flex: 1 1 + padding: 0 + width: 100% + min-width: 48px border-radius: 0 margin: 0 -0.5px display: inline-flex background-color: transparent border: 1px solid var(--md-sys-color-outline) - &:first-child - border-radius: 20px 0 0 20px + & > span.m3.m3-ripple-domain + transition: .2s cubic-bezier(0.2, 0, 0, 1) - &:last-child - border-radius: 0 20px 20px 0 + & > span.m3.ripple + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - & > span - color: var(--md-sys-color-on-surface) + & > span.m3.m3-button-segment-state-layer + @include m3-buttons-state-layer-mixin - & > svg - opacity: 0 + box-sizing: border-box - & > text - fill: var(--md-sys-color-on-surface) + & > * + visibility: hidden - &:not(.selected) - & > svg + & > span.m3.m3-button-segment-content-layer + @include center(inline-flex) + @include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface) + + gap: 8px + position: absolute + max-height: inherit + + & > svg.m3.m3-svg-icon display: none - &::after, &::before - content: '' - width: 6px - position: relative + &.selected + + background-color: var(--md-sys-color-secondary-container) + + & > span.m3.m3-button-segment-content-layer + @include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container) + + & > svg.m3.m3-svg-icon + display: initial + + &:hover + & > span.m3.m3-button-segment-state-layer + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) + + &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible) + & > span.m3.m3-button-segment-state-layer + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) &:disabled border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) @@ -46,33 +90,6 @@ div.m3.m3-segmented-buttons & > * opacity: 38% - &.selected - background-color: var(--md-sys-color-secondary-container) - - & > svg - opacity: 1 - - & > span - color: var(--md-sys-color-on-secondary-container) - - & > text - fill: var(--md-sys-color-on-secondary-container) - - & > span.m3.m3-button-segment-state-layer - width: 100% - height: 100% - position: absolute - - & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain - transition: .2s cubic-bezier(0.2, 0, 0, 1) - - &:hover - & > span.m3.m3-button-segment-state-layer - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) - - &:is(&:active, &:focus-visible) - & > span.m3.m3-button-segment-state-layer - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) &:active & > span.m3.m3-ripple-domain > span.m3.ripple diff --git a/src/styles/generics.css b/src/styles/generics.css index 048bae6..624e428 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -1,30 +1,35 @@ -@import url(./themes/tokens.css); -@import url(./themes/colors.module.css); -@import url(./themes/typography.module.css); +@import "./themes/tokens.css"; +@import "./themes/colors.module.css"; +@import "./themes/typography.module.css"; @import "./themes/theme.dark.css" (prefers-color-scheme: dark); @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 { border-radius: 12px !important; - padding: 0px; } + 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; - padding: 0px; } + padding: 0px; +} div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 { padding: 16px; display: block; box-sizing: border-box; - padding: 16px; } + padding: 16px; +} .m3.m3-card-media { width: 100%; display: block; contain: content; position: relative; - box-sizing: border-box; } - .m3.m3-card-media.m3-rounded { - border-radius: 28px; } + box-sizing: border-box; +} +.m3.m3-card-media.m3-rounded { + border-radius: 28px; +} div.m3.m3-card-action-area { display: block; @@ -32,162 +37,203 @@ div.m3.m3-card-action-area { contain: content; position: relative; border-radius: inherit; - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-card-action-area > div.m3.m3-card-action-area-content { - top: 0; - width: 100%; - position: relative; } - div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) { - top: 0; - width: 100%; - height: 100%; - position: absolute; } - div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple { - 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 { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within) > span.m3.m3-card-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } - div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover):is(.m3-card-outlined, .m3-card-filled) { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } - div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover).m3-card-elevated { - box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } - div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) { - box-shadow: none !important; } - div.m3.m3-card-action-area:active.m3-card-elevated { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } - div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-card-action-area > div.m3.m3-card-action-area-content { + top: 0; + width: 100%; + position: relative; +} +div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) { + top: 0; + width: 100%; + height: 100%; + position: absolute; +} +div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within) > span.m3.m3-card-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); +} +div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover):is(.m3-card-outlined, .m3-card-filled) { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover).m3-card-elevated { + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) { + box-shadow: none !important; +} +div.m3.m3-card-action-area:active.m3-card-elevated { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; +} +div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); +} svg.m3.m3-svg-icon > text { text-anchor: middle; dominant-baseline: middle; - alignment-baseline: middle; } + alignment-baseline: middle; +} svg.m3.m3-svg-icon > text.m3-size-12px { width: 12px; aspect-ratio: 1; font-size: 12px; - line-height: 12px; } + line-height: 12px; +} svg.m3.m3-svg-icon > text.m3-size-16px { width: 16px; aspect-ratio: 1; font-size: 16px; - line-height: 16px; } + line-height: 16px; +} svg.m3.m3-svg-icon > text.m3-size-20px { width: 20px; aspect-ratio: 1; font-size: 20px; - line-height: 20px; } + line-height: 20px; +} svg.m3.m3-svg-icon > text.m3-size-24px { width: 24px; aspect-ratio: 1; font-size: 24px; - line-height: 24px; } + line-height: 24px; +} svg.m3.m3-svg-icon > text.m3-size-28px { width: 28px; aspect-ratio: 1; font-size: 28px; - line-height: 28px; } + line-height: 28px; +} svg.m3.m3-svg-icon > text.m3-size-32px { width: 32px; aspect-ratio: 1; font-size: 32px; - line-height: 32px; } + line-height: 32px; +} svg.m3.m3-svg-icon > text.m3-size-36px { width: 36px; aspect-ratio: 1; font-size: 36px; - line-height: 36px; } + line-height: 36px; +} svg.m3.m3-svg-icon > text.m3-size-40px { width: 40px; aspect-ratio: 1; font-size: 40px; - line-height: 40px; } + line-height: 40px; +} svg.m3.m3-svg-icon > text.m3-size-48px { width: 48px; aspect-ratio: 1; font-size: 48px; - line-height: 48px; } + line-height: 48px; +} svg.m3.m3-svg-icon > text.m3-Outlined { - font-family: Material-Symbols-Outlined-Regular; } + font-family: Material-Symbols-Outlined-Regular; +} svg.m3.m3-svg-icon > text.m3-Rounded { - font-family: Material-Symbols-Rounded-Regular; } + font-family: Material-Symbols-Rounded-Regular; +} svg.m3.m3-svg-icon > text.m3-Sharp { - font-family: Material-Symbols-Sharp-Regular; } + font-family: Material-Symbols-Sharp-Regular; +} svg.m3.m3-badge { position: absolute; - background-color: var(--md-sys-color-error); } - svg.m3.m3-badge.disable-value { - padding: 0; - height: 6px; - width: 6px; - border-radius: 3px; } - svg.m3.m3-badge.disable-value > text { - display: none; } - svg.m3.m3-badge { - border-radius: 8px; - height: 16px; } - svg.m3.m3-badge > text { - fill: var(--md-sys-color-on-error); - font-size: var(--md-sys-typescale-label-small-font-size); - font-weight: var(--md-sys-typescale-label-small-font-weight); - line-height: var(--md-sys-typescale-label-small-line-height); - font-optical-sizing: none; - alignment-baseline: central; - text-anchor: middle; - display: flex; - align-items: center; - justify-content: center; } + background-color: var(--md-sys-color-error); +} +svg.m3.m3-badge.disable-value { + padding: 0; + width: 6px; + height: 6px; + border-radius: 3px; +} +svg.m3.m3-badge.disable-value > text { + display: none; +} +svg.m3.m3-badge { + height: 16px; + border-radius: 8px; +} +svg.m3.m3-badge > text { + font-size: var(--md-sys-typescale-label-small-font-size); + font-weight: var(--md-sys-typescale-label-small-font-weight); + line-height: var(--md-sys-typescale-label-small-line-height); + font-family: var(--md-sys-typescale-label-small-font-family-name); + letter-spacing: var(--md-sys-typescale-label-small-letter-spacing); + display: flex; + align-items: center; + text-anchor: middle; + justify-content: center; + font-optical-sizing: none; + alignment-baseline: central; + fill: var(--md-sys-color-on-error); +} @font-face { font-family: Material-Symbols-Rounded-Regular; src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Material-Symbols-Outlined-Regular; src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Material-Symbols-Sharp-Regular; src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Roboto; font-face-name: Thin; font-weight: 100; - src: url("./font/Roboto-Thin.ttf"); } + src: url("./font/Roboto-Thin.ttf"); +} @font-face { font-family: Roboto; font-face-name: Light; font-weight: 300; - src: url("./font/Roboto-Light.ttf"); } + src: url("./font/Roboto-Light.ttf"); +} @font-face { font-family: Roboto; font-face-name: Regular; font-weight: 400; - src: url("./font/Roboto-Regular.ttf"); } + src: url("./font/Roboto-Regular.ttf"); +} @font-face { font-family: Roboto; font-face-name: Medium; font-weight: 500; - src: url("./font/Roboto-Medium.ttf"); } + src: url("./font/Roboto-Medium.ttf"); +} @font-face { font-family: Roboto; font-face-name: Bold; font-weight: 700; - src: url("./font/Roboto-Bold.ttf"); } + src: url("./font/Roboto-Bold.ttf"); +} @font-face { font-family: Roboto; font-face-name: Black; font-weight: 900; - src: url("./font/Roboto-Black.ttf"); } + src: url("./font/Roboto-Black.ttf"); +} .m3.m3-ripple-domain { position: absolute; width: 100%; height: 100%; z-index: 20; - pointer-events: none; } + pointer-events: none; +} .m3.ripple { position: absolute; @@ -202,263 +248,350 @@ svg.m3.m3-badge { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.55s; transition-property: opacity, background-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .m3.ripple.visible { - opacity: 1 !important; } + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} +.m3.ripple.visible { + opacity: 1 !important; +} @keyframes rippleAppearanceAnimation { 0% { - transform: scale3d(0, 0, 0); } + transform: scale3d(0, 0, 0); + } 100% { - transform: scale3d(1, 1, 1); } } + transform: scale3d(1, 1, 1); + } +} hr.m3.m3-divider { border: none; outline: 0.5px solid var(--md-sys-color-outline-variant); position: relative; - margin: 0; } - hr.m3.m3-divider.vertical { - height: auto; - writing-mode: vertical-lr; } - hr.m3.m3-divider.vertical.inset { - margin-inline-start: 16px; } - hr.m3.m3-divider.vertical.middle-inset { - margin-inline: 16px; } - hr.m3.m3-divider.horizontal { - width: auto; - writing-mode: horizontal-tb; } - hr.m3.m3-divider.horizontal.inset { - margin-inline-start: 16px; } - hr.m3.m3-divider.horizontal.middle-inset { - margin-inline: 16px; } + margin: 0; +} +hr.m3.m3-divider.vertical { + height: auto; + writing-mode: vertical-lr; +} +hr.m3.m3-divider.vertical.inset { + margin-inline-start: 16px; +} +hr.m3.m3-divider.vertical.middle-inset { + margin-inline: 16px; +} +hr.m3.m3-divider.horizontal { + width: auto; + writing-mode: horizontal-tb; +} +hr.m3.m3-divider.horizontal.inset { + margin-inline-start: 16px; +} +hr.m3.m3-divider.horizontal.middle-inset { + margin-inline: 16px; +} div.m3.m3-container { display: block; border-radius: 12px; position: relative; contain: content; - transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-container.m3-container-filled { - background-color: var(--md-sys-color-surface-container-highest); } - div.m3.m3-container.m3-container-outlined { - background-color: var(--md-sys-color-surface); - outline-offset: -1px; - outline: 1px solid var(--md-sys-color-outline-variant); } - div.m3.m3-container.m3-container-elevated { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); - background-color: var(--md-sys-color-surface-container-low); } + transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-container.m3-container-filled { + background-color: var(--md-sys-color-surface-container-highest); +} +div.m3.m3-container.m3-container-outlined { + background-color: var(--md-sys-color-surface); + outline-offset: -1px; + outline: 1px solid var(--md-sys-color-outline-variant); +} +div.m3.m3-container.m3-container-elevated { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + background-color: var(--md-sys-color-surface-container-low); +} + +.m3.m3-typography { + position: relative; +} 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; } - 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; } - button.m3.m3-fab::before { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: absolute; - background: #00000000; } - button.m3.m3-fab.surface { - background-color: var(--md-sys-color-surface-container-high); - color: var(--md-sys-color-primary); } - button.m3.m3-fab.surface:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } - button.m3.m3-fab.surface > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); } - button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button.m3.m3-fab.primary { - background-color: var(--md-sys-color-primary-container); - color: var(--md-sys-color-on-primary-container); } - button.m3.m3-fab.primary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } - button.m3.m3-fab.primary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-primary-container); } - button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } - button.m3.m3-fab.secondary { - background-color: var(--md-sys-color-secondary-container); - color: var(--md-sys-color-on-secondary-container); } - button.m3.m3-fab.secondary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } - button.m3.m3-fab.secondary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-secondary-container); } - button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button.m3.m3-fab.tertiary { - background-color: var(--md-sys-color-tertiary-container); - color: var(--md-sys-color-on-tertiary-container); } - button.m3.m3-fab.tertiary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } - button.m3.m3-fab.tertiary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-tertiary-container); } - button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } - button.m3.m3-fab.m3-small-fab { - width: 40px; - height: 40px; - border-radius: 12px; - padding: 11px; - font-size: 24px; } - button.m3.m3-fab.m3-default-fab { - width: 56px; - height: 56px; - border-radius: 16px; - padding: 19px; - font-size: 24px; } - button.m3.m3-fab.m3-large-fab { - width: 96px; - height: 96px; - border-radius: 28px; - padding: 34.5px; - font-size: 36px; } - button.m3.m3-fab.m3-extended-fab { - width: auto; - height: 56px; - border-radius: 16px; - padding: 19px; - font-size: 24px; } - button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); } - 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; } - button.m3.m3-fab:hover.surface::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } - button.m3.m3-fab:hover.primary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); } - button.m3.m3-fab:hover.secondary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } - button.m3.m3-fab:hover.tertiary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); } - button.m3.m3-fab:focus-visible.surface::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button.m3.m3-fab:focus-visible.primary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } - button.m3.m3-fab:focus-visible.secondary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button.m3.m3-fab:focus-visible.tertiary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } - -input[type="button"].test-button { - color: white; } - input[type="button"].test-button:not(:checked) { - background-color: green; } - input[type="button"].test-button:checked { - background-color: blue; } + 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; +} +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; +} +button.m3.m3-fab > span.m3.m3-fab-state-layer { + width: 100%; + height: 100%; + position: absolute; + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; +} +button.m3.m3-fab.surface { + color: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-high); +} +button.m3.m3-fab.surface:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); +} +button.m3.m3-fab.surface > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); +} +button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.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 > span.m3.m3-fab-state-layer { + background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); +} +button.m3.m3-fab.primary { + color: var(--md-sys-color-on-primary-container); + background-color: var(--md-sys-color-primary-container); +} +button.m3.m3-fab.primary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); +} +button.m3.m3-fab.primary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-primary-container); +} +button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.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 > span.m3.m3-fab-state-layer { + background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent); +} +button.m3.m3-fab.secondary { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); +} +button.m3.m3-fab.secondary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); +} +button.m3.m3-fab.secondary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-secondary-container); +} +button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.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 > span.m3.m3-fab-state-layer { + background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); +} +button.m3.m3-fab.tertiary { + color: var(--md-sys-color-on-tertiary-container); + background-color: var(--md-sys-color-tertiary-container); +} +button.m3.m3-fab.tertiary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); +} +button.m3.m3-fab.tertiary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-tertiary-container); +} +button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.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 > span.m3.m3-fab-state-layer { + background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent); +} +button.m3.m3-fab.m3-small-fab { + width: 40px; + height: 40px; + padding: 11px; + border-radius: 12px; + font-size: 24px; +} +button.m3.m3-fab.m3-default-fab { + width: 56px; + height: 56px; + padding: 19px; + border-radius: 16px; + font-size: 24px; +} +button.m3.m3-fab.m3-large-fab { + width: 96px; + height: 96px; + padding: 34.5px; + border-radius: 28px; + font-size: 36px; +} +button.m3.m3-fab.m3-extended-fab { + width: auto; + height: 56px; + padding: 19px; + border-radius: 16px; + font-size: 24px; +} +button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover { + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); +} +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; +} +button.m3.m3-fab:hover.surface > span.m3.m3-fab-state-layer { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); +} button:not(.m3-fab, .m3-icon-button) { - width: min-content; - height: min-content; - max-height: 40px; - box-sizing: border-box; - white-space: nowrap; font-size: var(--md-sys-typescale-label-large-font-size); font-weight: var(--md-sys-typescale-label-large-font-weight); line-height: var(--md-sys-typescale-label-large-line-height); font-family: var(--md-sys-typescale-label-large-font-family-name); - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; } - button:not(.m3-fab, .m3-icon-button).m3 { - gap: 8px; - border: none; - contain: content; - text-align: center; - padding: 10px 24px; - align-items: center; - flex-direction: row; - display: inline-flex; - border-radius: 100px; - box-sizing: border-box; - justify-content: center; } - button:not(.m3-fab, .m3-icon-button).filled { - 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 { - fill: var(--md-sys-color-on-primary); - color: var(--md-sys-color-on-primary); } - button:not(.m3-fab, .m3-icon-button).outlined { - outline-offset: -1px; - background-color: #00000000; - color: var(--md-sys-color-primary); - outline: 1px solid var(--md-sys-color-outline) !important; } - button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).text { - background-color: #00000000; - padding: 10px 12px !important; - color: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).elevated { - 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); - background-color: var(--md-sys-color-surface-container-low); } - button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).tonal { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); } - button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { - fill: var(--md-sys-color-on-secondary-container); } - button:not(.m3-fab, .m3-icon-button)::before { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: absolute; - background: #00000000; } - button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) { - box-shadow: none !important; } - button:not(.m3-fab, .m3-icon-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; } - button:not(.m3-fab, .m3-icon-button):active.tonal::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):focus-visible.outlined { - border-color: var(--md-sys-color-primary) !important; } - button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button:not(.m3-fab, .m3-icon-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); } - button:not(.m3-fab, .m3-icon-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); } - button:not(.m3-fab, .m3-icon-button):hover.filled::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); } - button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } - button:not(.m3-fab, .m3-icon-button):hover.tonal::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } - button:not(.m3-fab, .m3-icon-button):disabled { - pointer-events: none; } - button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) { - 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) { - background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } - button:not(.m3-fab, .m3-icon-button):disabled.elevated { - box-shadow: none; } - button:not(.m3-fab, .m3-icon-button):disabled.outlined { - outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } + 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 { + gap: 8px; + border: none; + contain: content; + text-align: center; + padding: 10px 24px; + align-items: center; + flex-direction: row; + display: inline-flex; + border-radius: 100px; + box-sizing: border-box; + justify-content: center; +} +button:not(.m3-fab, .m3-icon-button).filled { + 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 { + fill: var(--md-sys-color-on-primary); + color: var(--md-sys-color-on-primary); +} +button:not(.m3-fab, .m3-icon-button).outlined { + outline-offset: -1px; + background-color: transparent; + color: var(--md-sys-color-primary); + outline: 1px solid var(--md-sys-color-outline) !important; +} +button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).text { + background-color: transparent; + color: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).elevated { + 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); + background-color: var(--md-sys-color-surface-container-low); +} +button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).tonal { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); +} +button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { + fill: var(--md-sys-color-on-secondary-container); +} +button:not(.m3-fab, .m3-icon-button).filled > span.m3.m3-ripple-domain > span.m3.ripple { + 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 { + 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 { + 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) { + box-shadow: none !important; +} +button:not(.m3-fab, .m3-icon-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; +} +button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).outlined { + 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 { + 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) { + 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 { + 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 { + border-color: var(--md-sys-color-primary) !important; +} +button:not(.m3-fab, .m3-icon-button):focus-visible.filled { + 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) { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} +button:not(.m3-fab, .m3-icon-button):focus-visible.tonal { + 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) { + 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 { + 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 { + 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) { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); +} +button:not(.m3-fab, .m3-icon-button):hover.tonal { + 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 { + pointer-events: none; +} +button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) { + 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) { + background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); +} +button:not(.m3-fab, .m3-icon-button):disabled.elevated { + box-shadow: none; +} +button:not(.m3-fab, .m3-icon-button):disabled.outlined { + outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; +} button.m3.m3-icon-button { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; @@ -472,290 +605,435 @@ button.m3.m3-icon-button { width: 40px; height: 40px; border: none; - padding: 0; } - button.m3.m3-icon-button::before { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - content: ""; - width: 100%; - height: 100%; - position: absolute; } - button.m3.m3-icon-button > span.m3-icon { - z-index: 25; - font-size: 2em; - font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; } - button.m3.m3-icon-button.default { - fill: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - 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); - background-color: #00000000; } - button.m3.m3-icon-button.default.selected.toggled { - fill: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled.toggled { - fill: var(--md-sys-color-primary); - background-color: var(--md-sys-color-surface-container-highest); } - button.m3.m3-icon-button.filled.selected.toggled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.tonal.toggled { - fill: var(--md-sys-color-on-surface-variant); - background-color: var(--md-sys-color-surface-container-highest); } - button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { - fill: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); } - button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { - 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); } - button.m3.m3-icon-button.outlined { - border: 1px solid var(--md-sys-color-outline); - fill: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - button.m3.m3-icon-button.outlined: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; } - button.m3.m3-icon-button.outlined.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); } - button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid #00000000; - 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); } - button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } - button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); } - button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } - button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } + padding: 0; +} +button.m3.m3-icon-button::before { + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + content: ""; + width: 100%; + height: 100%; + position: absolute; +} +button.m3.m3-icon-button > span.m3-icon { + z-index: 25; + font-size: 2em; + font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; +} +button.m3.m3-icon-button.default { + fill: var(--md-sys-color-on-surface-variant); + background-color: rgba(0, 0, 0, 0); +} +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); + background-color: rgba(0, 0, 0, 0); +} +button.m3.m3-icon-button.default.selected.toggled { + fill: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled { + fill: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled.toggled { + fill: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-highest); +} +button.m3.m3-icon-button.filled.selected.toggled { + fill: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.tonal.toggled { + fill: var(--md-sys-color-on-surface-variant); + background-color: var(--md-sys-color-surface-container-highest); +} +button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { + fill: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); +} +button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { + 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); +} +button.m3.m3-icon-button.outlined { + border: 1px solid var(--md-sys-color-outline); + fill: var(--md-sys-color-on-surface-variant); + background-color: rgba(0, 0, 0, 0); +} +button.m3.m3-icon-button.outlined: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: rgba(0, 0, 0, 0); +} +button.m3.m3-icon-button.outlined.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); +} +button.m3.m3-icon-button.outlined.selected.toggled { + 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); +} +button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); +} +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); +} +button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); +} +button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); +} +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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); +} + +.m3.m3-density-0 > button.m3.m3-button-segment { + height: 40px; +} +.m3.m3-density-0 > button.m3.m3-button-segment:first-child { + border-radius: 20px 0 0 20px; +} +.m3.m3-density-0 > button.m3.m3-button-segment:last-child { + 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 { + height: 38px; +} +.m3.m3-density--1 > button.m3.m3-button-segment:first-child { + border-radius: 19px 0 0 19px; +} +.m3.m3-density--1 > button.m3.m3-button-segment:last-child { + border-radius: 0 19px 19px 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 { + height: 36px; +} +.m3.m3-density--2 > button.m3.m3-button-segment:first-child { + border-radius: 18px 0 0 18px; +} +.m3.m3-density--2 > button.m3.m3-button-segment:last-child { + border-radius: 0 18px 18px 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 { + height: 34px; +} +.m3.m3-density--3 > button.m3.m3-button-segment:first-child { + border-radius: 17px 0 0 17px; +} +.m3.m3-density--3 > button.m3.m3-button-segment:last-child { + border-radius: 0 17px 17px 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 { - padding: 0; - height: 40px; display: flex; + padding: 4px 0; border-radius: 20px; - box-sizing: border-box; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment { - width: auto; - height: 40px; - padding: 10px; - min-width: 108px; - border-radius: 0; - margin: 0 -0.5px; - display: inline-flex; - background-color: transparent; - border: 1px solid var(--md-sys-color-outline); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child { - border-radius: 20px 0 0 20px; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child { - border-radius: 0 20px 20px 0; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span { - color: var(--md-sys-color-on-surface); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg { - opacity: 0; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text { - fill: var(--md-sys-color-on-surface); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(.selected) > svg { - display: none; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(.selected)::after, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(.selected)::before { - content: ""; - width: 6px; - position: relative; } - 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:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * { - opacity: 38%; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected { - background-color: var(--md-sys-color-secondary-container); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg { - opacity: 1; } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span { - color: var(--md-sys-color-on-secondary-container); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text { - fill: var(--md-sys-color-on-secondary-container); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer { - width: 100%; - height: 100%; - position: absolute; } - 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 { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer { - 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(&:active, &:focus-visible) > span.m3.m3-button-segment-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } + box-sizing: border-box; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + flex: 1 1; + padding: 0; + width: 100%; + min-width: 48px; + border-radius: 0; + margin: 0 -0.5px; + display: inline-flex; + background-color: transparent; + border: 1px solid var(--md-sys-color-outline); +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain { + 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%; + height: 100%; + position: absolute; + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + box-sizing: border-box; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer > * { + visibility: hidden; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + 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 { + display: none; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected { + background-color: var(--md-sys-color-secondary-container); +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text { + fill: var(--md-sys-color-on-secondary-container); +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > label.m3.m3-typography { + color: var(--md-sys-color-on-secondary-container); +} +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:hover > span.m3.m3-button-segment-state-layer { + 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 { + 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); +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * { + opacity: 38%; +} div.m3.m3-radio-container { width: 20px; height: 20px; align-items: center; display: inline-flex; - justify-content: center; } - div.m3.m3-radio-container + label.m3.m3-radio-label { - margin-inline: 3px; } - div.m3.m3-radio-container > span.m3-checkbox-ripple-layer, div.m3.m3-radio-container span.m3.m3-radio-state-layer { - z-index: 5; - width: 40px; - height: 40px; - aspect-ratio: 1; } - div.m3.m3-radio-container > span.m3.m3-radio-state-layer { - border-radius: 50%; - position: absolute; - pointer-events: none; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-radio-container > input[type="radio"].m3.m3-radio { - margin: 0; - width: 20px; - height: 20px; - aspect-ratio: 1; - cursor: pointer; - appearance: none; - position: absolute; } - div.m3.m3-radio-container > input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, 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 { - 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 { - 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 { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - 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); } - 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 { - 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), &:checked) ~ svg > circle.m3-radio-outline { - stroke-opacity: 38%; - stroke: var(--md-sys-color-on-surface); } - div.m3.m3-radio-container > input[type="radio"].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state { - fill-opacity: 38%; - fill: var(--md-sys-color-on-surface); } - div.m3.m3-radio-container > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline { - 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 { - fill-opacity: 0; - fill: var(--md-sys-color-primary); } - div.m3.m3-radio-container > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-outline { - stroke: var(--md-sys-color-primary); } - 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); } - div.m3.m3-radio-container svg { - margin: 0; - width: 20px; - z-index: 10; - border-radius: 50%; - pointer-events: none; - aspect-ratio: inherit; } - div.m3.m3-radio-container svg > circle { - transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-radio-container svg > circle.m3-radio-outline { - r: 9px; - fill: black; - fill-opacity: 0; - stroke-width: 2px; - stroke: var(--md-sys-color-on-surface-variant); } - div.m3.m3-radio-container svg > circle.m3-radio-state { - r: 5px; } + justify-content: center; +} +div.m3.m3-radio-container + label.m3.m3-radio-label { + margin-inline: 3px; +} +div.m3.m3-radio-container > span.m3-checkbox-ripple-layer, div.m3.m3-radio-container span.m3.m3-radio-state-layer { + z-index: 5; + width: 40px; + height: 40px; + aspect-ratio: 1; +} +div.m3.m3-radio-container > span.m3.m3-radio-state-layer { + border-radius: 50%; + position: absolute; + pointer-events: none; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-radio-container > input[type=radio].m3.m3-radio { + margin: 0; + width: 20px; + height: 20px; + aspect-ratio: 1; + cursor: pointer; + appearance: none; + position: absolute; +} +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, 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 { + 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 { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +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); +} +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 { + 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 { + stroke-opacity: 38%; + stroke: var(--md-sys-color-on-surface); +} +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state { + fill-opacity: 38%; + fill: var(--md-sys-color-on-surface); +} +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline { + 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 { + fill-opacity: 0; + fill: var(--md-sys-color-primary); +} +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline { + stroke: var(--md-sys-color-primary); +} +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); +} +div.m3.m3-radio-container svg { + margin: 0; + width: 20px; + z-index: 10; + border-radius: 50%; + pointer-events: none; + aspect-ratio: inherit; +} +div.m3.m3-radio-container svg > circle { + transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-radio-container svg > circle.m3-radio-outline { + r: 9px; + fill: black; + fill-opacity: 0; + stroke-width: 2px; + stroke: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-radio-container svg > circle.m3-radio-state { + r: 5px; +} div.m3.m3-slider-container { height: 20px; display: flex; - align-items: center; } - div.m3.m3-slider-container > datalist { - display: none; } + align-items: center; +} +div.m3.m3-slider-container > datalist { + display: none; +} -input[type="range"].m3.m3-slider { +input[type=range].m3.m3-slider { margin: 0; appearance: none; border-radius: 2px; margin-inline: 8px; - background: var(--md-sys-color-surface-container-highest); } - input[type="range"].m3.m3-slider:-moz-any(input[type="range"].m3.m3-slider) { - height: 4px; } - input[type="range"].m3.m3-slider:-webkit-any(input[type="range"].m3.m3-slider) { - background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%); } - input[type="range"].m3.m3-slider::-moz-range-track { - height: 4px; - overflow: hidden; - border-radius: 2px; } - input[type="range"].m3.m3-slider::-moz-range-progress { - height: 4px; - overflow: hidden; - border-radius: 2px; - background-color: var(--md-sys-color-primary); } - input[type="range"].m3.m3-slider::-moz-range-thumb { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); - width: 20px; - height: 20px; - appearance: none; - border-radius: 50%; - box-sizing: border-box; - outline: 10px solid transparent; - background: var(--md-sys-color-primary); - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - border: none; } - input[type="range"].m3.m3-slider::-moz-range-thumb:hover { - 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) { - outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - input[type="range"].m3.m3-slider::-webkit-slider-container { - appearance: none; - box-shadow: none; - border-radius: 2px; - min-block-size: 4px; - height: 4px; } - input[type="range"].m3.m3-slider::-webkit-slider-runnable-track { - height: 20px; } - input[type="range"].m3.m3-slider::-webkit-slider-thumb { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); - width: 20px; - height: 20px; - appearance: none; - border-radius: 50%; - box-sizing: border-box; - outline: 10px solid transparent; - background: var(--md-sys-color-primary); - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); } - input[type="range"].m3.m3-slider::-webkit-slider-thumb:hover { - 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) { - outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + background: var(--md-sys-color-surface-container-highest); +} +input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) { + height: 4px; +} +input[type=range].m3.m3-slider:-webkit-any(input[type=range].m3.m3-slider) { + background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%); +} +input[type=range].m3.m3-slider::-moz-range-track { + height: 4px; + overflow: hidden; + border-radius: 2px; +} +input[type=range].m3.m3-slider::-moz-range-progress { + height: 4px; + overflow: hidden; + border-radius: 2px; + background-color: var(--md-sys-color-primary); +} +input[type=range].m3.m3-slider::-moz-range-thumb { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + width: 20px; + height: 20px; + appearance: none; + border-radius: 50%; + box-sizing: border-box; + outline: 10px solid transparent; + background: var(--md-sys-color-primary); + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + border: none; +} +input[type=range].m3.m3-slider::-moz-range-thumb:hover { + 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) { + outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} +input[type=range].m3.m3-slider::-webkit-slider-container { + appearance: none; + box-shadow: none; + border-radius: 2px; + min-block-size: 4px; + height: 4px; +} +input[type=range].m3.m3-slider::-webkit-slider-runnable-track { + height: 20px; +} +input[type=range].m3.m3-slider::-webkit-slider-thumb { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + width: 20px; + height: 20px; + appearance: none; + border-radius: 50%; + box-sizing: border-box; + outline: 10px solid transparent; + background: var(--md-sys-color-primary); + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); +} +input[type=range].m3.m3-slider::-webkit-slider-thumb:hover { + 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) { + outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} div.m3.m3-switch { gap: 20px; @@ -764,110 +1042,146 @@ div.m3.m3-switch { display: flex; align-items: center; justify-content: left; - box-sizing: content-box; } - div.m3.m3-switch > svg { - width: 52px; - height: 32px; - overflow: visible; - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } - div.m3.m3-switch > svg > g { - transform: translate(11.5%, 81%); - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } - div.m3.m3-switch > svg > g > text { - font-size: 20px; - font-family: Material-Symbols-Outlined-Regular, serif; } - div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler { - cy: 50%; - cx: 16px; - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } - div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer { - r: 20px; - fill-opacity: 0; } - div.m3.m3-switch > svg > circle.m3.m3-switch-handler { - r: 8px; } - div.m3.m3-switch > svg > rect.m3.m3-switch-track { - transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - stroke-width: 2px; - border-radius: 16px; - rx: 15px; - width: 50px; - height: 30px; } - div.m3.m3-switch > input.m3 { - margin: 0; - width: 52px; - height: 32px; - cursor: pointer; - appearance: none; - position: absolute; - opacity: 0 !important; } - div.m3.m3-switch > input.m3:disabled { - cursor: not-allowed; } - div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-outline); } - div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g { - transform: translate(50%, 81%); } - div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-on-primary); } - div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked { - fill: var(--md-sys-color-on-primary); } - div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked { - fill: var(--md-sys-color-on-primary-container); } - div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-surface); } - div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler { - r: 12px; } - div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked { - opacity: 0; } - div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) { - cx: calc(100% - 16px); } - div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked { - opacity: 0; } - div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler { - r: 14px; } - div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler { - fill-opacity: 38%; - fill: var(--md-sys-color-on-surface); } - div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-primary-container); } - div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { - fill-opacity: 8%; - fill: var(--md-sys-color-primary); } - div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-on-surface-variant); } - div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { - fill-opacity: 8%; - fill: var(--md-sys-color-on-surface); } - div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { - fill-opacity: 12%; - fill: var(--md-sys-color-primary); } - div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { - fill-opacity: 12%; - fill: var(--md-sys-color-on-surface); } - div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track { - rx: 16px; - width: 52px; - height: 32px; - stroke-width: 0; } - div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track { - x: 1px; - y: 1px; } - div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track { - stroke: var(--md-sys-color-outline); - fill: var(--md-sys-color-surface-container-highest); } - div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track { - fill: var(--md-sys-color-primary); - stroke: var(--md-sys-color-primary); } - div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 { - fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); } - div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track { - stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); - fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); } - div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 { - transform: translateX(38.5%); - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); } - div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track { - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); - stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); } + box-sizing: content-box; +} +div.m3.m3-switch > svg { + width: 52px; + height: 32px; + overflow: visible; + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +div.m3.m3-switch > svg > g { + transform: translate(11.5%, 81%); + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +div.m3.m3-switch > svg > g > text { + font-size: 20px; + font-family: Material-Symbols-Outlined-Regular, serif; +} +div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler { + cy: 50%; + cx: 16px; + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer { + r: 20px; + fill-opacity: 0; +} +div.m3.m3-switch > svg > circle.m3.m3-switch-handler { + r: 8px; +} +div.m3.m3-switch > svg > rect.m3.m3-switch-track { + transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + stroke-width: 2px; + border-radius: 16px; + rx: 15px; + width: 50px; + height: 30px; +} +div.m3.m3-switch > input.m3 { + margin: 0; + width: 52px; + height: 32px; + cursor: pointer; + appearance: none; + position: absolute; + opacity: 0 !important; +} +div.m3.m3-switch > input.m3:disabled { + cursor: not-allowed; +} +div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-outline); +} +div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g { + transform: translate(50%, 81%); +} +div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-on-primary); +} +div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked { + fill: var(--md-sys-color-on-primary); +} +div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked { + fill: var(--md-sys-color-on-primary-container); +} +div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-surface); +} +div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler { + r: 12px; +} +div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked { + opacity: 0; +} +div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) { + cx: calc(100% - 16px); +} +div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked { + opacity: 0; +} +div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler { + r: 14px; +} +div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler { + fill-opacity: 38%; + fill: var(--md-sys-color-on-surface); +} +div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-primary-container); +} +div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { + fill-opacity: 8%; + fill: var(--md-sys-color-primary); +} +div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { + fill-opacity: 8%; + fill: var(--md-sys-color-on-surface); +} +div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { + fill-opacity: 12%; + fill: var(--md-sys-color-primary); +} +div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { + fill-opacity: 12%; + fill: var(--md-sys-color-on-surface); +} +div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track { + rx: 16px; + width: 52px; + height: 32px; + stroke-width: 0; +} +div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track { + x: 1px; + y: 1px; +} +div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track { + stroke: var(--md-sys-color-outline); + fill: var(--md-sys-color-surface-container-highest); +} +div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track { + fill: var(--md-sys-color-primary); + stroke: var(--md-sys-color-primary); +} +div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 { + fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); +} +div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track { + stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); +} +div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 { + transform: translateX(38.5%); + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); +} +div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track { + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); + stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); +} div.m3.m3-checkbox-container { gap: 16px; @@ -876,22 +1190,25 @@ div.m3.m3-checkbox-container { aspect-ratio: 1; position: relative; align-items: center; - justify-content: center; } - div.m3.m3-checkbox-container > span.m3.m3-checkbox-state-layer { - width: 40px; - aspect-ratio: 1; - border-radius: 50%; - position: absolute; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer { - z-index: 20; - width: 2.5rem; - height: 2.5rem; - contain: content; - border-radius: 50%; - position: absolute; } + justify-content: center; +} +div.m3.m3-checkbox-container > span.m3.m3-checkbox-state-layer { + width: 40px; + aspect-ratio: 1; + border-radius: 50%; + position: absolute; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer { + z-index: 20; + width: 2.5rem; + height: 2.5rem; + contain: content; + border-radius: 50%; + position: absolute; +} -input[type="checkbox"].m3.m3-checkbox { +input[type=checkbox].m3.m3-checkbox { z-index: 10; display: flex; width: 1.125rem; @@ -902,236 +1219,320 @@ input[type="checkbox"].m3.m3-checkbox { border-radius: 0.14rem; box-sizing: content-box; justify-content: center; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } - input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state { - position: absolute; - color: var(--md-sys-color-on-surface-variant); - transition: color 0.2s cubic-bezier(0.2, 0, 0, 1); } - input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) { - background: var(--md-sys-color-on-error); } - input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state { - color: var(--md-sys-color-error); } - input[type="checkbox"].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state { - color: var(--md-sys-color-error); } - input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) { - background: var(--md-sys-color-on-primary); } - input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state { - color: var(--md-sys-color-primary); } - input[type="checkbox"].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state { - color: var(--md-sys-color-on-surface); } - input[type="checkbox"].m3.m3-checkbox:disabled ~ *:is(:hover, &, :checked) { - opacity: 38%; } - input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state { - z-index: 10; - display: flex; - font-size: 24px; - font-weight: 700; - line-height: 24px; - align-items: center; - pointer-events: none; - justify-content: center; - font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; } - input[type="checkbox"].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before { - content: "check_box_outline_blank"; } - input[type="checkbox"].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before { - content: "indeterminate_check_box"; } - input[type="checkbox"].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before { - content: "check_box"; - font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } - input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, 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 { - 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 { - 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 { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } - 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); } - 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 { - 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 { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - 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); } - input[type="checkbox"].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state { + position: absolute; + color: var(--md-sys-color-on-surface-variant); + transition: color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) { + background: var(--md-sys-color-on-error); +} +input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state { + color: var(--md-sys-color-error); +} +input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state { + color: var(--md-sys-color-error); +} +input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) { + background: var(--md-sys-color-on-primary); +} +input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state { + color: var(--md-sys-color-primary); +} +input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state { + color: var(--md-sys-color-on-surface); +} +input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) { + opacity: 38%; +} +input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state { + z-index: 10; + display: flex; + font-size: 24px; + font-weight: 700; + line-height: 24px; + align-items: center; + pointer-events: none; + justify-content: center; + font-family: Material-Symbols-Outlined-Regular, sans-serif; + font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; +} +input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before { + content: "check_box_outline_blank"; +} +input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before { + content: "indeterminate_check_box"; +} +input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before { + content: "check_box"; + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; +} +input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, 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 { + 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 { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); +} +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); +} +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 { + 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 { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +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); +} +input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); +} div.m3.m3-text-field { - position: relative; + margin: 0; display: flex; - justify-content: center; + position: relative; flex-direction: column; box-sizing: border-box; - margin: 0; } - div.m3.m3-text-field span.m3-icon.icon-before { - align-self: start; } - div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label { - line-height: var(--md-sys-typescale-body-large-line-height); - font-size: var(--md-sys-typescale-body-large-font-size); } - div.m3.m3-text-field + span.m3-text-field-supporting-text { - display: flex; - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); - color: var(--md-sys-color-on-surface-variant); - margin: 4px 16px 2px 16px; } - div.m3.m3-text-field > label { - padding-inline: 4px; - pointer-events: none; - transform: translate(16px, 0); - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - position: absolute; } - div.m3.m3-text-field > input { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - background-color: transparent; - border: none; } - div.m3.m3-text-field > span.m3-icon { - position: absolute; - align-self: end; - margin: 12px; - width: 24px; - line-height: 24px; - font-size: 24px; - display: inherit; - align-items: center; - justify-content: inherit; - cursor: pointer; - color: var(--md-sys-color-on-surface-variant); - font-family: Material-Symbols-Outlined-Regular, serif; } - div.m3.m3-text-field > span.m3-text-field-state-layer { - width: 100%; - height: 100%; - pointer-events: none; - position: absolute; } - div.m3.m3-text-field > input, div.m3.m3-text-field > label { - color: var(--md-sys-color-on-surface); } - div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder { - color: var(--md-sys-color-on-surface-variant); } - div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { - outline: none; - caret-color: var(--md-sys-color-primary); } - div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text { - opacity: 38%; } - div.m3.m3-text-field.filled { - contain: content; - border-radius: 4px 4px 0 0; } - div.m3.m3-text-field.filled > input { - display: inline-flex; - align-items: center; - box-sizing: border-box; - border-radius: 4px 4px 0 0; - background-color: var(--md-sys-color-surface-container-highest); - box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); } - div.m3.m3-text-field.filled > input.with-after-icon { - padding: 24px 48px 8px 16px; } - div.m3.m3-text-field.filled > input.with-before-icon { - padding: 24px 16px 8px 48px; } - div.m3.m3-text-field.filled > input.with-before-icon + label { - margin-left: 32px; } - div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { - padding: 24px 16px 8px; } - div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { - padding: 24px 48px 8px 48px; } - div.m3.m3-text-field.filled > label.raised { - transform: translate(12px, -12px); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); } - div.m3.m3-text-field.filled > input:required:user-invalid { - caret-color: var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible { - box-shadow: inset 0 -3px 0 var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:required:user-invalid { - box-shadow: inset 0 -1px 0 var(--md-sys-color-error); } - div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text { - color: var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:focus-visible { - outline-offset: 3px; - box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); } - div.m3.m3-text-field.filled > input:focus-visible + label { - color: var(--md-sys-color-primary); } - div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - div.m3.m3-text-field.outlined > fieldset { - margin: 0; - position: absolute; - border-radius: 4px; - pointer-events: none; - padding-inline: 12px; - border: 1px solid var(--md-sys-color-outline); - inset: -7.5px 0px 0px 0px; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-text-field.outlined > fieldset > legend > span { - width: 100%; } - div.m3.m3-text-field.outlined > fieldset > legend { - opacity: 0; - width: 0; - padding: 0; - pointer-events: none; - border: 0 solid transparent; - transition: 0.05s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-text-field.outlined > fieldset > legend.raised { - border-inline-width: 6px; - border-style: solid; - border-color: transparent; - width: auto; - visibility: visible; } - div.m3.m3-text-field.outlined > input { - box-sizing: border-box; - border-radius: 4px; } - div.m3.m3-text-field.outlined > input.with-after-icon { - padding: 16px 48px 16px 16px; } - div.m3.m3-text-field.outlined > input.with-before-icon { - padding: 16px 16px 16px 48px; } - div.m3.m3-text-field.outlined > input.with-before-icon + label { - transform: translate(48px, 0); } - div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { - padding: 16px; } - div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { - padding: 16px 48px; } - div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset { - border: 3px solid var(--md-sys-color-primary); } - div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend { - border-top-width: 0; - border-bottom-width: 0; - border-inline-width: 5.5px; - border-style: solid; - border-color: transparent; } - div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend { - border-top-width: 0; - border-bottom-width: 0; - border-inline-width: 7.5px; - border-style: solid; - border-color: transparent; } - div.m3.m3-text-field.outlined > input:focus-visible + label { - color: var(--md-sys-color-primary); } - div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * { - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); } - div.m3.m3-text-field.outlined > label.raised { - transform: translate(16px, -27px) !important; } - div.m3.m3-text-field.outlined > input:required:user-invalid { - caret-color: var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { - color: var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset { - border: 3px solid var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset { - border: 1px solid var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - border-color: var(--md-sys-color-on-surface); } + justify-content: center; +} +div.m3.m3-text-field span.m3-icon.icon-before { + align-self: start; +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label { + font-size: var(--md-sys-typescale-body-large-font-size); + font-weight: var(--md-sys-typescale-body-large-font-weight); + line-height: var(--md-sys-typescale-body-large-line-height); + font-family: var(--md-sys-typescale-body-large-font-family-name); + letter-spacing: var(--md-sys-typescale-body-large-letter-spacing); +} +div.m3.m3-text-field + span.m3-text-field-supporting-text { + font-size: var(--md-sys-typescale-body-small-font-size); + font-weight: var(--md-sys-typescale-body-small-font-weight); + line-height: var(--md-sys-typescale-body-small-line-height); + font-family: var(--md-sys-typescale-body-small-font-family-name); + letter-spacing: var(--md-sys-typescale-body-small-letter-spacing); + display: flex; + margin: 4px 16px 2px 16px; + color: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field > label { + position: absolute; + padding-inline: 4px; + pointer-events: none; + transform: translate(16px, 0); + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field > input { + border: none; + background-color: transparent; + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field > span.m3-icon { + width: 24px; + margin: 12px; + font-size: 24px; + align-self: end; + cursor: pointer; + display: inherit; + line-height: 24px; + position: absolute; + align-items: center; + justify-content: inherit; + color: var(--md-sys-color-on-surface-variant); + font-family: Material-Symbols-Outlined-Regular, serif; +} +div.m3.m3-text-field > span.m3-text-field-state-layer { + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; +} +div.m3.m3-text-field > input, div.m3.m3-text-field > label { + color: var(--md-sys-color-on-surface); +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder { + color: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { + outline: none; + caret-color: var(--md-sys-color-primary); +} +div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text { + opacity: 38%; +} +div.m3.m3-text-field.filled { + contain: content; + border-radius: 4px 4px 0 0; +} +div.m3.m3-text-field.filled > input { + align-items: center; + display: inline-flex; + box-sizing: border-box; + border-radius: 4px 4px 0 0; + background-color: var(--md-sys-color-surface-container-highest); + box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field.filled > input.with-after-icon { + padding: 24px 48px 8px 16px; +} +div.m3.m3-text-field.filled > input.with-before-icon { + padding: 24px 16px 8px 48px; +} +div.m3.m3-text-field.filled > input.with-before-icon + label { + margin-left: 32px; +} +div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { + padding: 24px 16px 8px; +} +div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { + padding: 24px 48px 8px 48px; +} +div.m3.m3-text-field.filled > label.raised { + font-size: var(--md-sys-typescale-body-small-font-size); + font-weight: var(--md-sys-typescale-body-small-font-weight); + line-height: var(--md-sys-typescale-body-small-line-height); + font-family: var(--md-sys-typescale-body-small-font-family-name); + letter-spacing: var(--md-sys-typescale-body-small-letter-spacing); + transform: translate(12px, -12px); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible { + box-shadow: inset 0 -3px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + box-shadow: inset 0 -1px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:focus-visible { + outline-offset: 3px; + box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +div.m3.m3-text-field.outlined > fieldset { + margin: 0; + position: absolute; + border-radius: 4px; + pointer-events: none; + padding-inline: 12px; + inset: -7.5px 0px 0px 0px; + border: 1px solid var(--md-sys-color-outline); + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend > span { + width: 100%; +} +div.m3.m3-text-field.outlined > fieldset > legend { + width: 0; + opacity: 0; + padding: 0; + pointer-events: none; + border: 0 solid transparent; + transition: 0.05s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend.raised { + width: auto; + visibility: visible; + border-style: solid; + border-inline-width: 6px; + border-color: transparent; +} +div.m3.m3-text-field.outlined > input { + box-sizing: border-box; + border-radius: 4px; +} +div.m3.m3-text-field.outlined > input.with-after-icon { + padding: 16px 48px 16px 16px; +} +div.m3.m3-text-field.outlined > input.with-before-icon { + padding: 16px 16px 16px 48px; +} +div.m3.m3-text-field.outlined > input.with-before-icon + label { + transform: translate(48px, 0); +} +div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { + padding: 16px; +} +div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { + padding: 16px 48px; +} +div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset { + border: 3px solid var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend { + border-top-width: 0; + border-style: solid; + border-bottom-width: 0; + border-color: transparent; + border-inline-width: 5.5px; +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend { + border-top-width: 0; + border-style: solid; + border-bottom-width: 0; + border-color: transparent; + border-inline-width: 7.5px; +} +div.m3.m3-text-field.outlined > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * { + font-size: var(--md-sys-typescale-body-small-font-size); + font-weight: var(--md-sys-typescale-body-small-font-weight); + line-height: var(--md-sys-typescale-body-small-line-height); + font-family: var(--md-sys-typescale-body-small-font-family-name); + letter-spacing: var(--md-sys-typescale-body-small-letter-spacing); +} +div.m3.m3-text-field.outlined > label.raised { + transform: translate(16px, -27px) !important; +} +div.m3.m3-text-field.outlined > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset { + border: 3px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset { + border: 1px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + border-color: var(--md-sys-color-on-surface); +} html { font-family: Roboto, serif; color: var(--md-sys-color-on-surface); - background-color: var(--md-sys-color-surface-container); } + background-color: var(--md-sys-color-surface-container); +} .m3.m3-wrapper { position: relative; display: block; background-color: var(--md-sys-color-surface); - border-radius: 25px; } + border-radius: 25px; +} /*# sourceMappingURL=generics.css.map */ diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 3f76f3c..7e22a3d 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"], -"names": [], -"file": "generics.css" -} +{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAsBQ;AACA;AACA;AACA;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EC7BA;;ADgCA;EC1BA;;AD8BA;EC5CA;;AD+CA;ECzCA;;AD6CI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EFCA;EACA;EACA;EACA;EACA;EEFI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;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;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACvEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACzGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBIA;EACA;EACA;EACA;EACA;;AgBLA;EhBCA;EACA;EACA;EACA;EACA;EgBFI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EhB/EJ;EACA;EACA;EACA;EACA;EgB8EQ;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EhBhLJ;EACA;EACA;EACA;EACA;;AgB+KI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlBzLhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass index 5542f82..4b6af97 100644 --- a/src/styles/input-styles/slider.sass +++ b/src/styles/input-styles/slider.sass @@ -1,3 +1,26 @@ +@mixin input-range-thumb-mixin + @include elevation-1(false) + + &:hover + &::after + content: '1' + + outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) + + &:is(:active, :focus-visible) + outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) + + width: 20px + height: 20px + appearance: none + border-radius: 50% + box-sizing: border-box + outline: 10px solid transparent + background: var(--md-sys-color-primary) + transition: .2s cubic-bezier(0.2, 0, 0, 1) + + + div.m3.m3-slider-container height: 20px display: flex @@ -6,7 +29,6 @@ div.m3.m3-slider-container & > datalist display: none - input[type="range"].m3.m3-slider margin: 0 appearance: none diff --git a/src/styles/input-styles/text-field.sass b/src/styles/input-styles/text-field.sass index 41d438b..12e847d 100644 --- a/src/styles/input-styles/text-field.sass +++ b/src/styles/input-styles/text-field.sass @@ -1,56 +1,55 @@ div.m3.m3-text-field - position: relative + margin: 0 display: flex - justify-content: center + position: relative flex-direction: column box-sizing: border-box - margin: 0 + justify-content: center span.m3-icon.icon-before align-self: start &:is(.filled, .outlined) > input::placeholder, & > input, & > label - line-height: var(--md-sys-typescale-body-large-line-height) - font-size: var(--md-sys-typescale-body-large-font-size) + @include m3-typography-mixin('body-large') & + span.m3-text-field-supporting-text + @include m3-typography-mixin('body-small') + display: flex - line-height: var(--md-sys-typescale-body-small-line-height) - font-size: var(--md-sys-typescale-body-small-font-size) - color: var(--md-sys-color-on-surface-variant) margin: 4px 16px 2px 16px + color: var(--md-sys-color-on-surface-variant) & > label + position: absolute padding-inline: 4px pointer-events: none transform: translate(16px, 0) transition: .2s cubic-bezier(0.2, 0, 0, 1) - position: absolute & > input - transition: .2s cubic-bezier(0.2, 0, 0, 1) - background-color: transparent border: none + background-color: transparent + transition: .2s cubic-bezier(0.2, 0, 0, 1) & > span.m3-icon - position: absolute - align-self: end - margin: 12px width: 24px - line-height: 24px + margin: 12px font-size: 24px + align-self: end + cursor: pointer display: inherit + line-height: 24px + position: absolute align-items: center justify-content: inherit - cursor: pointer color: var(--md-sys-color-on-surface-variant) font-family: Material-Symbols-Outlined-Regular, serif & > span.m3-text-field-state-layer width: 100% height: 100% - pointer-events: none position: absolute + pointer-events: none & > input, & > label color: var(--md-sys-color-on-surface) @@ -86,17 +85,17 @@ div.m3.m3-text-field &.with-after-icon.with-before-icon padding: 24px 48px 8px 48px - display: inline-flex align-items: center + display: inline-flex box-sizing: border-box border-radius: 4px 4px 0 0 background-color: var(--md-sys-color-surface-container-highest) box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant) & > label.raised + @include m3-typography-mixin('body-small') + transform: translate(12px, -12px) - line-height: var(--md-sys-typescale-body-small-line-height) - font-size: var(--md-sys-typescale-body-small-font-size) & > input:required:user-invalid caret-color: var(--md-sys-color-error) @@ -129,27 +128,27 @@ div.m3.m3-text-field border-radius: 4px pointer-events: none padding-inline: 12px - border: 1px solid var(--md-sys-color-outline) inset: -7.5px 0px 0px 0px + border: 1px solid var(--md-sys-color-outline) transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) & > legend > span width: 100% & > legend - opacity: 0 width: 0 + opacity: 0 padding: 0 pointer-events: none border: 0 solid transparent transition: .05s cubic-bezier(0.2, 0, 0, 1) & > legend.raised - border-inline-width: 6px - border-style: solid - border-color: transparent width: auto visibility: visible + border-style: solid + border-inline-width: 6px + border-color: transparent & > input &.with-after-icon @@ -175,24 +174,23 @@ div.m3.m3-text-field &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend border-top-width: 0 - border-bottom-width: 0 - border-inline-width: 5.5px border-style: solid + border-bottom-width: 0 border-color: transparent + border-inline-width: 5.5px &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend border-top-width: 0 - border-bottom-width: 0 - border-inline-width: 7.5px border-style: solid + border-bottom-width: 0 border-color: transparent + border-inline-width: 7.5px & > input:focus-visible + label color: var(--md-sys-color-primary) & > label.raised, & > fieldset > * - line-height: var(--md-sys-typescale-body-small-line-height) - font-size: var(--md-sys-typescale-body-small-font-size) + @include m3-typography-mixin('body-small') & > label.raised transform: translate(16px, -27px) !important diff --git a/src/styles/mixins/m3-mixins.sass b/src/styles/mixins/m3-mixins.sass index fb4db09..f590b9a 100644 --- a/src/styles/mixins/m3-mixins.sass +++ b/src/styles/mixins/m3-mixins.sass @@ -1,3 +1,8 @@ +@mixin center($display) + display: $display + align-items: center + justify-content: center + @mixin m3-checkbox-container-mixin gap: 16px height: 40px @@ -7,6 +12,13 @@ align-items: center justify-content: center +@mixin m3-typography-mixin($type) + font-size: var(--md-sys-typescale-#{$type}-font-size) + font-weight: var(--md-sys-typescale-#{$type}-font-weight) + line-height: var(--md-sys-typescale-#{$type}-line-height) + font-family: var(--md-sys-typescale-#{$type}-font-family-name) + letter-spacing: var(--md-sys-typescale-#{$type}-letter-spacing) + @mixin m3-state-layer-mixin width: 40px aspect-ratio: 1 @@ -14,22 +26,6 @@ position: absolute transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) -@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0) - width: $width - height: $height - border-radius: $b-radius - padding: $padding - -@mixin m3-fab-colors-palette($bg-color, $color) - &:not(.without-elevation) - @include elevation-3(false) - background-color: var($bg-color) - color: var($color) - & > svg.m3-svg-icon - fill: var($color) - & > .m3.m3-ripple-domain > .m3.ripple - background: color-mix(in srgb, var($color) 12%, transparent) - @mixin elevation-0($important) @if $important == true box-shadow: none !important @@ -66,12 +62,8 @@ @else box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) -@mixin state-layer - transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important - content: "" - top: 0 - bottom: 0 - left: 0 - right: 0 +@mixin m3-buttons-state-layer-mixin + width: 100% + height: 100% position: absolute - background: #00000000 + transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important diff --git a/src/styles/typography.sass b/src/styles/typography.sass index e69de29..e18b0fe 100644 --- a/src/styles/typography.sass +++ b/src/styles/typography.sass @@ -0,0 +1,2 @@ +.m3.m3-typography + position: relative