diff --git a/app/page.tsx b/app/page.tsx index 8533424..62d2174 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { Card } from '../src/primitive-components/card/card'; -import { IconButton } from '../src/primitive-components/components'; +import { + Button, + FAB, + IconButton, +} from '../src/primitive-components/components'; import { CardFooter } from '../src/primitive-components/card/card-footer'; import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button'; import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; @@ -8,51 +12,80 @@ import { SegmentedButtons } from '../src/primitive-components/button-components/ export default function Page() { return (
-
-
- - - - - Label 1 - - - Not selectable - - - Label 3 - - Label 4 - - - - -
-
+ + + + + + + + + + + + + + + + + + + + Label 1 + + + Not selectable + + + Label 3 + + Label 4 + + +
); } diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx index c0f19e7..1b0b612 100644 --- a/src/primitive-components/button-components/button/button.tsx +++ b/src/primitive-components/button-components/button/button.tsx @@ -29,7 +29,7 @@ export const Button = forwardRef( ( {icon} - {size === 'extended' ? ( - - {selectable && ( - <> - {icon} - {ButtonLabel} - - )} + + {icon && selectable && {icon}} + {ButtonLabel} ); 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 23616ec..4b914a2 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx @@ -8,10 +8,13 @@ export const SegmentedButtons = forwardRef< HTMLDivElement, SegmentedButtonsProps >(({ selectable = false, density = 0, children, ...props }, ref) => { - if (children.length <= 1) { - throw 'You must build segmented button with 2 or more button'; + if (children.length <= 1 && children.length > 5) { + throw 'You must build segmented button with 2 or more buttons, but no more 5'; } + const extraClasses = + `m3 m3-segmented-buttons m3-density-${density} m3-button-segments-amount-${children.length} ${props.className ?? ''}`.trimEnd(); + const SegmentedButtons: Array = children.map( (Button: ReactElement, index: number) => { return cloneElement(, { @@ -23,10 +26,7 @@ export const SegmentedButtons = forwardRef< ); return ( -
+
{SegmentedButtons}
); diff --git a/src/primitive-components/ripple/hooks/useRippleBuilder.tsx b/src/primitive-components/ripple/hooks/useRippleBuilder.tsx index 366c245..9821fce 100644 --- a/src/primitive-components/ripple/hooks/useRippleBuilder.tsx +++ b/src/primitive-components/ripple/hooks/useRippleBuilder.tsx @@ -12,7 +12,7 @@ import { baseDOMRect, RippleContainer } from '../ripple.types'; import isEmpty, { rippleSizeCalculator } from '../utils/utils'; import { InteractionEventsType } from './useRippleEffect'; -const RIPPLE_LIFETIME: number = 550; +const RIPPLE_LIFETIME: number = 55000; const DEBOUNCE: number = 50; const UseRippleBuilder = ( diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx index d03d98c..4179076 100644 --- a/src/primitive-components/ripple/ripple.tsx +++ b/src/primitive-components/ripple/ripple.tsx @@ -12,12 +12,12 @@ const Ripple = ({ rippleKey, endLifetime, }: RippleProps) => { - const [classes, setClasses] = useState('m3 ripple visible'); + const [classes, setClasses] = useState('m3 m3-ripple visible'); const rippleDomainContext = useContext(rippleAreaContext); useLayoutEffect(() => { if (endLifetime && !rippleDomainContext) { - setClasses('m3 ripple'); + setClasses('m3 m3-ripple'); setTimeout(() => endLifetime(rippleKey), lifetime); } }, [rippleDomainContext]); diff --git a/src/styles/button-styles/button.css b/src/styles/button-styles/button.css index e1d57e4..d093578 100644 --- a/src/styles/button-styles/button.css +++ b/src/styles/button-styles/button.css @@ -70,13 +70,13 @@ button:not(.m3-fab, .m3-icon-button)::before { position: absolute; background: rgba(0, 0, 0, 0); } -button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple { +button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple { +button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple { +button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) { diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass index 8423a79..2f636c4 100644 --- a/src/styles/button-styles/button.sass +++ b/src/styles/button-styles/button.sass @@ -1,24 +1,4 @@ -button:not(.m3-fab, .m3-icon-button) - @include m3-typography-mixin('label-large') - - max-height: 40px - width: min-content - white-space: nowrap - height: min-content - box-sizing: border-box - transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important - - &.m3 - @include center(inline-flex) - - gap: 8px - border: none - contain: content - text-align: center - padding: 10px 24px - flex-direction: row - border-radius: 100px - box-sizing: border-box +button.m3.m3-common-button &.filled background-color: var(--md-sys-color-primary) @@ -59,14 +39,14 @@ button:not(.m3-fab, .m3-icon-button) & > svg.m3-svg-icon fill: var(--md-sys-color-on-secondary-container) - &.filled > span.m3.m3-ripple-domain > span.m3.ripple + &.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent) &:is(.outlined, .text, .elevated) - & > span.m3.m3-ripple-domain > span.m3.ripple + & > span.m3.m3-ripple-domain > span.m3.m3-ripple background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &.tonal > span.m3.m3-ripple-domain > span.m3.ripple + &.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) &:active diff --git a/src/styles/button-styles/fabs.sass b/src/styles/button-styles/fabs.sass index 80851ef..b62be38 100644 --- a/src/styles/button-styles/fabs.sass +++ b/src/styles/button-styles/fabs.sass @@ -14,11 +14,11 @@ & > svg.m3-svg-icon fill: var($color) - & > span.m3.m3-ripple-domain > span.m3.ripple + & > span.m3.m3-ripple-domain > span.m3.m3-ripple background: color-mix(in srgb, var($color) 12%, transparent) &:not(&:has(span.m3.m3-ripple-domain)):active - & > span.m3.m3-fab-state-layer + &:before background: color-mix(in srgb, var($color) 20%, transparent) @@ -39,9 +39,11 @@ button.m3.m3-fab border: none gap: 12px - & > span.m3.m3-fab-state-layer + &:before @include m3-buttons-state-layer-mixin + content: "" + &.surface @include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary) @@ -77,27 +79,27 @@ button.m3.m3-fab @include elevation-3(true) &:hover - &.surface > span.m3.m3-fab-state-layer + &.surface:before background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) - &.primary > span.m3.m3-fab-state-layer + &.primary:before background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent) - &.secondary > span.m3.m3-fab-state-layer + &.secondary:before background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) - &.tertiary > span.m3.m3-fab-state-layer + &.tertiary:before background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent) &:focus-visible - &.surface > span.m3.m3-fab-state-layer + &.surface:before background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &.primary > span.m3.m3-fab-state-layer + &.primary:before background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent) - &.secondary > span.m3.m3-fab-state-layer + &.secondary:before background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - &.tertiary > span.m3.m3-fab-state-layer + &.tertiary:before background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent) \ No newline at end of file diff --git a/src/styles/button-styles/icon-button.css b/src/styles/button-styles/icon-button.css index a991580..4bf3509 100644 --- a/src/styles/button-styles/icon-button.css +++ b/src/styles/button-styles/icon-button.css @@ -79,25 +79,25 @@ button.m3.m3-icon-button.outlined.selected.toggled { 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 { +button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } -button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); } -button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { diff --git a/src/styles/button-styles/icon-button.sass b/src/styles/button-styles/icon-button.sass index 713ccc9..f4936ae 100644 --- a/src/styles/button-styles/icon-button.sass +++ b/src/styles/button-styles/icon-button.sass @@ -1,3 +1,39 @@ +@mixin m3-icon-button-state-colors($opacity) + &:is(.default, .outlined)::before + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent) + + &.filled::before, &.filled.toggled.selected::before + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent) + + &.filled.toggled::before + background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent) + + &.tonal::before, &.tonal.toggled.selected::before + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent) + + &.tonal.toggled::before + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent) + +@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity) + @if $border != none + @if $border == transparent + border: 0 solid transparent + @else + border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent) + + @if $fill != none + @if $fill == transparent + fill: $fill + @else + fill: color-mix(in srgb, var($fill) $fill-opacity, transparent) + + @if $background != none + @if $background == transparent + background-color: $background + @else + background-color: color-mix(in srgb, var($background) $background-opacity, transparent) + + button.m3.m3-icon-button @include center(inline-flex) @@ -20,114 +56,78 @@ button.m3.m3-icon-button & > span.m3-icon z-index: 25 - font-size: 2em + font-size: 24px font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48 &.default - & - fill: var(--md-sys-color-on-surface-variant) - background-color: #00000000 - - &:disabled, &.selected:disabled, &.selected.toggled:disabled - fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent) - background-color: #00000000 + &, &:not(.selected).toggled + @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%) &.selected.toggled - fill: var(--md-sys-color-primary) + @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%) + + &:disabled, &.selected:disabled, &.selected.toggled:disabled + @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%) &.filled & - fill: var(--md-sys-color-on-primary) - background-color: var(--md-sys-color-primary) + @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%) - &.toggled - fill: var(--md-sys-color-primary) - background-color: var(--md-sys-color-surface-container-highest) + &:not(.selected).toggled + @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%) &.selected.toggled - fill: var(--md-sys-color-on-primary) - background-color: var(--md-sys-color-primary) + @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%) &.tonal - &.toggled - fill: var(--md-sys-color-on-surface-variant) - background-color: var(--md-sys-color-surface-container-highest) + &:not(.selected).toggled + @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%) &.selected.toggled, & - fill: var(--md-sys-color-on-secondary-container) - background-color: var(--md-sys-color-secondary-container) + @include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%) &: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) + @include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%) &.outlined & - border: 1px solid var(--md-sys-color-outline) - fill: var(--md-sys-color-on-surface-variant) - background-color: #00000000 - - &:disabled - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) - fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent) - background-color: #00000000 - - &.toggled.selected:disabled - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent) - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) + @include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%) &.selected.toggled - border: 1px solid #00000000 - background-color: var(--md-sys-color-inverse-surface) - fill: var(--md-sys-color-inverse-on-surface) + @include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%) + + &:disabled + @include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%) + + &.selected.toggled:disabled + @include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%) &.filled:not(:disabled) - & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple + &:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent) - &.toggled > .m3.m3-ripple-domain > .m3.ripple + + &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) &:is(.outlined, .default):not(:disabled) - & > .m3.m3-ripple-domain > .m3.ripple + & > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) - &:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple + &:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple + &:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent) &.tonal:not(:disabled) - & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple + &:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - &.toggled > .m3.m3-ripple-domain > .m3.ripple + + &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) &:hover:not(:disabled) - &:is(.default, .outlined)::before - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent) + @include m3-icon-button-state-colors(8%) - &.filled::before, &.filled.toggled.selected::before - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent) - &.filled.toggled::before - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) - - &.tonal::before, &.tonal.toggled.selected::before - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) - &.tonal.toggled::before - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent) - - &:focus-visible:not(:disabled) - &:is(.default, .outlined)::before - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) - - &.filled::before, &.filled.toggled.selected::before - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent) - &.filled.toggled::before - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - - &.tonal::before, &.tonal.toggled.selected::before - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - &.tonal.toggled::before - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) + &:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain))) + @include m3-icon-button-state-colors(12%) diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass index 0acb85b..4da502b 100644 --- a/src/styles/button-styles/segmented-button.sass +++ b/src/styles/button-styles/segmented-button.sass @@ -2,7 +2,7 @@ $densities: [0, -1, -2, -3] @each $density in $densities .m3.m3-density-#{$density} - $height: 40px + ($density * 2px) + $height: 40px + ($density * 4px) & > button.m3.m3-button-segment height: $height @@ -13,9 +13,7 @@ $densities: [0, -1, -2, -3] &: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) + padding: 10px + ($density * 2px) 12px @mixin m3-segmented-button-content-color-mixin($color) & > svg.m3.m3-svg-icon > text @@ -24,50 +22,57 @@ $densities: [0, -1, -2, -3] & > label.m3.m3-typography color: var($color) + + div.m3.m3-segmented-buttons - display: flex + width: 100% padding: 4px 0 border-radius: 20px + display: inline-flex box-sizing: border-box & > button.m3.m3-button-segment - flex: 1 1 - padding: 0 width: 100% - min-width: 108px + min-width: 48px border-radius: 0 margin: 0 -0.5px display: inline-flex background-color: transparent border: 1px solid var(--md-sys-color-outline) + &:before + @include m3-buttons-state-layer-mixin + + content: "" + & > span.m3.m3-ripple-domain transition: .2s cubic-bezier(0.2, 0, 0, 1) - & > span.m3.ripple + & > span.m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) - & > span.m3.m3-button-segment-state-layer - @include m3-buttons-state-layer-mixin + & > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) + @include center(inline-flex) + gap: 8px + height: inherit + + & > svg.m3.m3-svg-icon + height: inherit + + & > span.m3.m3-button-segment-frame-layer box-sizing: border-box & > * visibility: hidden & > 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 &.selected - background-color: var(--md-sys-color-secondary-container) & > span.m3.m3-button-segment-content-layer @@ -76,13 +81,13 @@ div.m3.m3-segmented-buttons & > svg.m3.m3-svg-icon display: initial - &:hover - & > span.m3.m3-button-segment-state-layer + &:not(:disabled):hover + &:before background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible) - & > span.m3.m3-button-segment-state-layer - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) + &:before + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent) &:disabled border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) diff --git a/src/styles/card.sass b/src/styles/card.sass index 1d55299..ab5f45d 100644 --- a/src/styles/card.sass +++ b/src/styles/card.sass @@ -10,25 +10,19 @@ $padding: 16px div.m3.m3-card & > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, - & > .m3-card-media:first-child, - & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child + & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, + & > .m3-card-media:first-child + border-radius: 12px !important padding: padding-calculating(false) border-radius: 12px !important -div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child - padding: padding-calculating(false) - border-radius: 12px !important - div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 - padding: padding-calculating(true) - display: block box-sizing: border-box .m3.m3-card-media &.m3-rounded border-radius: 12px + padding-calculating(true) - width: 100% display: block contain: content position: relative @@ -52,7 +46,9 @@ div.m3.m3-card-action-area width: 100% height: 100% position: absolute - transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) + + & > .m3.m3-ripple-domain > .m3.m3-ripple + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) &:hover & > span.m3.m3-card-state-layer diff --git a/src/styles/generics.css b/src/styles/generics.css index 5162cfb..ef9669e 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -3,25 +3,17 @@ @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; -} - -div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child { +div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child { border-radius: 12px !important; padding: 0px; } div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 { - padding: 16px; - display: block; box-sizing: border-box; padding: 16px; } .m3.m3-card-media { - width: 100%; display: block; contain: content; position: relative; @@ -50,7 +42,7 @@ div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) height: 100%; position: absolute; } -div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple { +div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer { @@ -235,7 +227,7 @@ svg.m3.m3-badge > text { pointer-events: none; } -.m3.ripple { +.m3.m3-ripple { position: absolute; overflow: hidden; pointer-events: none; @@ -250,7 +242,7 @@ svg.m3.m3-badge > text { transition-property: opacity, background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.m3.ripple.visible { +.m3.m3-ripple.visible { opacity: 1 !important; } @@ -330,11 +322,12 @@ button.m3.m3-fab.m3 { border: none; gap: 12px; } -button.m3.m3-fab > span.m3.m3-fab-state-layer { +button.m3.m3-fab:before { width: 100%; height: 100%; position: absolute; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + content: ""; } button.m3.m3-fab.surface { color: var(--md-sys-color-primary); @@ -346,10 +339,10 @@ button.m3.m3-fab.surface:not(.without-elevation) { 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 { +button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { +button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before { background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } button.m3.m3-fab.primary { @@ -362,10 +355,10 @@ button.m3.m3-fab.primary:not(.without-elevation) { 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 { +button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } -button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { +button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent); } button.m3.m3-fab.secondary { @@ -378,10 +371,10 @@ button.m3.m3-fab.secondary:not(.without-elevation) { 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 { +button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { +button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); } button.m3.m3-fab.tertiary { @@ -394,10 +387,10 @@ button.m3.m3-fab.tertiary:not(.without-elevation) { 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 { +button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } -button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer { +button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before { background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent); } button.m3.m3-fab.m3-small-fab { @@ -434,162 +427,136 @@ button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .ter button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; } -button.m3.m3-fab:hover.surface > span.m3.m3-fab-state-layer { +button.m3.m3-fab:hover.surface:before { background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } -button.m3.m3-fab:hover.primary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:hover.primary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); } -button.m3.m3-fab:hover.secondary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:hover.secondary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } -button.m3.m3-fab:hover.tertiary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:hover.tertiary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); } -button.m3.m3-fab:focus-visible.surface > span.m3.m3-fab-state-layer { +button.m3.m3-fab:focus-visible.surface:before { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-fab:focus-visible.primary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:focus-visible.primary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } -button.m3.m3-fab:focus-visible.secondary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:focus-visible.secondary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button.m3.m3-fab:focus-visible.tertiary > span.m3.m3-fab-state-layer { +button.m3.m3-fab:focus-visible.tertiary:before { background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button) { - font-size: var(--md-sys-typescale-label-large-font-size); - font-weight: var(--md-sys-typescale-label-large-font-weight); - line-height: var(--md-sys-typescale-label-large-line-height); - font-family: var(--md-sys-typescale-label-large-font-family-name); - letter-spacing: var(--md-sys-typescale-label-large-letter-spacing); - max-height: 40px; - width: min-content; - white-space: nowrap; - height: min-content; - box-sizing: border-box; - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; -} -button:not(.m3-fab, .m3-icon-button).m3 { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - border: none; - contain: content; - text-align: center; - padding: 10px 24px; - flex-direction: row; - border-radius: 100px; - box-sizing: border-box; -} -button:not(.m3-fab, .m3-icon-button).filled { +button.m3.m3-common-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 { +button.m3.m3-common-button.filled, button.m3.m3-common-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 { +button.m3.m3-common-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 { +button.m3.m3-common-button.outlined > svg.m3-svg-icon { fill: var(--md-sys-color-primary); } -button:not(.m3-fab, .m3-icon-button).text { +button.m3.m3-common-button.text { background-color: transparent; color: var(--md-sys-color-primary); } -button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { +button.m3.m3-common-button.text > svg.m3-svg-icon { fill: var(--md-sys-color-primary); } -button:not(.m3-fab, .m3-icon-button).elevated { +button.m3.m3-common-button.elevated { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); 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 { +button.m3.m3-common-button.elevated > svg.m3-svg-icon { fill: var(--md-sys-color-primary); } -button:not(.m3-fab, .m3-icon-button).tonal { +button.m3.m3-common-button.tonal { color: var(--md-sys-color-on-secondary-container); background-color: var(--md-sys-color-secondary-container); } -button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { +button.m3.m3-common-button.tonal > svg.m3-svg-icon { fill: var(--md-sys-color-on-secondary-container); } -button:not(.m3-fab, .m3-icon-button).filled > span.m3.m3-ripple-domain > span.m3.ripple { +button.m3.m3-common-button.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.ripple { +button.m3.m3-common-button:is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button).tonal > span.m3.m3-ripple-domain > span.m3.ripple { +button.m3.m3-common-button.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) { +button.m3.m3-common-button:active:is(.filled, .tonal) { box-shadow: none !important; } -button:not(.m3-fab, .m3-icon-button):active.elevated { +button.m3.m3-common-button:active.elevated { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } -button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).outlined { +button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).outlined { border-color: var(--md-sys-color-primary) !important; } -button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).filled { +button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).filled { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary)); } -button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) { +button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) { background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } -button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).tonal { +button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).tonal { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container)); } -button:not(.m3-fab, .m3-icon-button):focus-visible.outlined { +button.m3.m3-common-button:focus-visible.outlined { border-color: var(--md-sys-color-primary) !important; } -button:not(.m3-fab, .m3-icon-button):focus-visible.filled { +button.m3.m3-common-button:focus-visible.filled { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary)); } -button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated) { +button.m3.m3-common-button:focus-visible:is(.outlined, .text, .elevated) { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button):focus-visible.tonal { +button.m3.m3-common-button:focus-visible.tonal { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container)); } -button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) { +button.m3.m3-common-button:hover:is(.filled, .tonal) { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } -button:not(.m3-fab, .m3-icon-button):hover.elevated { +button.m3.m3-common-button:hover.elevated { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } -button:not(.m3-fab, .m3-icon-button):hover.filled { +button.m3.m3-common-button:hover.filled { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)); } -button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated) { +button.m3.m3-common-button:hover:is(.outlined, .text, .elevated) { background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } -button:not(.m3-fab, .m3-icon-button):hover.tonal { +button.m3.m3-common-button:hover.tonal { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); } -button:not(.m3-fab, .m3-icon-button):disabled { +button.m3.m3-common-button:disabled { pointer-events: none; } -button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) { +button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal, .outlined, .text) { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); } -button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) { +button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal) { background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } -button:not(.m3-fab, .m3-icon-button):disabled.elevated { +button.m3.m3-common-button:disabled.elevated { box-shadow: none; } -button:not(.m3-fab, .m3-icon-button):disabled.outlined { +button.m3.m3-common-button:disabled.outlined { outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } @@ -616,83 +583,83 @@ button.m3.m3-icon-button::before { } button.m3.m3-icon-button > span.m3-icon { z-index: 25; - font-size: 2em; + font-size: 24px; 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, button.m3.m3-icon-button.default:not(.selected).toggled { + fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent); + background-color: transparent; +} +button.m3.m3-icon-button.default.selected.toggled { + fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent); + background-color: transparent; } button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { 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); + background-color: transparent; } button.m3.m3-icon-button.filled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); + fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent); } -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:not(.selected).toggled { + fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent); } button.m3.m3-icon-button.filled.selected.toggled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); + fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent); } -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:not(.selected).toggled { + fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent); } button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { - fill: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); + fill: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 100%, transparent); } button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { 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); + border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 100%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent); + background-color: transparent; +} +button.m3.m3-icon-button.outlined.selected.toggled { + border: 0 solid transparent; + fill: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 100%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface) 100%, transparent); } button.m3.m3-icon-button.outlined:disabled { 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); + background-color: transparent; } -button.m3.m3-icon-button.outlined.toggled.selected:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); +button.m3.m3-icon-button.outlined.selected.toggled: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.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 { +button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).selected.toggled, button.m3.m3-icon-button.filled:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } -button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).toggled):not(button.m3.m3-icon-button.filled:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); } -button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { +button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { @@ -710,24 +677,25 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-b button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); } -button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before { +button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } -button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before { +button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled.selected::before { background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } -button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before { +button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before { +button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled.selected::before { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } -button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { +button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before { background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } .m3.m3-density-0 > button.m3.m3-button-segment { height: 40px; + padding: 10px 12px; } .m3.m3-density-0 > button.m3.m3-button-segment:first-child { border-radius: 20px 0 0 20px; @@ -735,99 +703,87 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { .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; + height: 36px; + padding: 8px 12px; } .m3.m3-density--1 > button.m3.m3-button-segment:first-child { - border-radius: 19px 0 0 19px; + border-radius: 18px 0 0 18px; } .m3.m3-density--1 > button.m3.m3-button-segment:last-child { - 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; + border-radius: 0 18px 18px 0; } .m3.m3-density--2 > button.m3.m3-button-segment { - height: 36px; + height: 32px; + padding: 6px 12px; } .m3.m3-density--2 > button.m3.m3-button-segment:first-child { - border-radius: 18px 0 0 18px; + border-radius: 16px 0 0 16px; } .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; + border-radius: 0 16px 16px 0; } .m3.m3-density--3 > button.m3.m3-button-segment { - height: 34px; + height: 28px; + padding: 4px 12px; } .m3.m3-density--3 > button.m3.m3-button-segment:first-child { - border-radius: 17px 0 0 17px; + border-radius: 14px 0 0 14px; } .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; + border-radius: 0 14px 14px 0; } div.m3.m3-segmented-buttons { - display: flex; + width: 100%; padding: 4px 0; border-radius: 20px; + display: inline-flex; box-sizing: border-box; } div.m3.m3-segmented-buttons > button.m3.m3-button-segment { - flex: 1 1; - padding: 0; width: 100%; - min-width: 108px; + 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 { +div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before { 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; + content: ""; } -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-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-button-segment-content-layer { +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.m3-ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; + height: inherit; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) > svg.m3.m3-svg-icon { + height: inherit; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer { + box-sizing: border-box; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer > * { + visibility: hidden; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer { position: absolute; - 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; @@ -844,11 +800,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3- div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon { display: initial; } -div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer { +div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } -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:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); } div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled { border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); @@ -894,7 +850,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); } div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer { @@ -903,7 +859,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } -div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { +div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } 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 { @@ -1275,7 +1231,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, : input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); } -input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { +input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent); } input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer { @@ -1284,7 +1240,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indetermi input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { +input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); } input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer { @@ -1293,7 +1249,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-stat input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } -input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple { +input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } @@ -1535,4 +1491,31 @@ html { border-radius: 25px; } +button:not(.m3-fab, .m3-icon-button) { + font-size: var(--md-sys-typescale-label-large-font-size); + font-weight: var(--md-sys-typescale-label-large-font-weight); + line-height: var(--md-sys-typescale-label-large-line-height); + font-family: var(--md-sys-typescale-label-large-font-family-name); + letter-spacing: var(--md-sys-typescale-label-large-letter-spacing); + max-height: 40px; + width: min-content; + white-space: nowrap; + height: min-content; + box-sizing: border-box; + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; +} +button:not(.m3-fab, .m3-icon-button).m3 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border: none; + contain: content; + text-align: center; + padding: 10px 24px; + flex-direction: row; + border-radius: 100px; + box-sizing: border-box; +} + /*# sourceMappingURL=generics.css.map */ diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 17753f9..7c15334 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1 @@ -{"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":"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ACA;EACA;EWhBQ;;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;EZCI;EACA;EACA;EYAA;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;;;ACtEhB;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;EfbI,SecgB;EfbhB;EACA;EecA;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;EfrDA,SesDoB;EfrDpB;EACA;EesDI;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;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;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;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;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;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{"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":"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AAzDR;EACI;;AAEJ;EACI;;AA0DQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC/FhB;EZCI;EACA;EACA;EYAA;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;;;ACtEhB;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;EfbI,SecgB;EfbhB;EACA;EecA;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;EfrDA,SesDoB;EfrDpB;EACA;EesDI;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;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;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;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;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;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EExBI;EACA;EACA;EACA;EACA;EFuBA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEhDA,SFiDoB;EEhDpB;EACA;EFiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/generics.sass b/src/styles/generics.sass index 6df67c4..5285447 100644 --- a/src/styles/generics.sass +++ b/src/styles/generics.sass @@ -36,3 +36,24 @@ html background-color: var(--md-sys-color-surface) border-radius: 25px +button:not(.m3-fab, .m3-icon-button) + @include m3-typography-mixin('label-large') + + max-height: 40px + width: min-content + white-space: nowrap + height: min-content + box-sizing: border-box + transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important + + &.m3 + @include center(inline-flex) + + gap: 8px + border: none + contain: content + text-align: center + padding: 10px 24px + flex-direction: row + border-radius: 100px + box-sizing: border-box diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass index 7e61228..e57feb9 100644 --- a/src/styles/input-styles/checkbox.sass +++ b/src/styles/input-styles/checkbox.sass @@ -81,7 +81,7 @@ input[type="checkbox"].m3.m3-checkbox &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) - & ~ span.m3-ripple-domain > .m3.ripple + & ~ span.m3-ripple-domain > .m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent) &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer @@ -90,7 +90,7 @@ input[type="checkbox"].m3.m3-checkbox &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - & ~ span.m3-ripple-domain > .m3.ripple + & ~ span.m3-ripple-domain > .m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent) &:hover @@ -100,6 +100,6 @@ input[type="checkbox"].m3.m3-checkbox &:active ~ span.m3.m3-checkbox-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) - & ~ span.m3-ripple-domain > .m3.ripple + & ~ span.m3-ripple-domain > .m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) diff --git a/src/styles/input-styles/radio.css b/src/styles/input-styles/radio.css index 9635c7d..0f6c6f1 100644 --- a/src/styles/input-styles/radio.css +++ b/src/styles/input-styles/radio.css @@ -32,7 +32,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + s div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { +div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); } div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer { @@ -41,7 +41,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { +div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple { background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline { diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass index 656341b..854168e 100644 --- a/src/styles/input-styles/radio.sass +++ b/src/styles/input-styles/radio.sass @@ -34,7 +34,7 @@ div.m3.m3-radio-container &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - & ~ span.m3-ripple-domain > .m3.ripple + & ~ span.m3-ripple-domain > .m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent) &:hover @@ -43,7 +43,7 @@ div.m3.m3-radio-container &:active + span.m3.m3-radio-state-layer background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) - & ~ span.m3-ripple-domain > .m3.ripple + & ~ span.m3-ripple-domain > .m3.m3-ripple background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent) &:disabled diff --git a/src/styles/ripple.css b/src/styles/ripple.css index 33d0748..06dbeab 100644 --- a/src/styles/ripple.css +++ b/src/styles/ripple.css @@ -5,7 +5,7 @@ z-index: 20; pointer-events: none; } -.m3.ripple { +.m3.m3-ripple { position: absolute; overflow: hidden; pointer-events: none; @@ -21,7 +21,7 @@ transition-duration: 0.55s; transition-property: opacity, background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .m3.ripple.visible { + .m3.m3-ripple.visible { opacity: 1 !important; } @keyframes rippleAppearanceAnimation { diff --git a/src/styles/ripple.sass b/src/styles/ripple.sass index 2ac8725..5ad26ba 100644 --- a/src/styles/ripple.sass +++ b/src/styles/ripple.sass @@ -5,7 +5,7 @@ z-index: 20 pointer-events: none -.m3.ripple +.m3.m3-ripple position: absolute overflow: hidden pointer-events: none