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

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

Browse Source 
FIXED: Styles for segmented-button
This commit is contained in:
doryan04
2024-02-24 23:58:23 +04:00
committed by doryan
parent 964534c780
commit 0a8b58668d
22 changed files with 423 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,39 @@
@mixin m3-icon-button-state-colors($opacity)
&:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
&.filled::before, &.filled.toggled.selected::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
&.filled.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
&.tonal::before, &.tonal.toggled.selected::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
&.tonal.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
@if $border != none
@if $border == transparent
border: 0 solid transparent
@else
border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent)
@if $fill != none
@if $fill == transparent
fill: $fill
@else
fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)
@if $background != none
@if $background == transparent
background-color: $background
@else
background-color: color-mix(in srgb, var($background) $background-opacity, transparent)
button.m3.m3-icon-button
@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%)