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

CHANGED: style and components directories, removed redundant imports from styles

Browse Source 
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
doryan04
2024-02-03 01:34:54 +04:00
committed by doryan
parent 0ae3a6d980
commit df1d0c2599
75 changed files with 2509 additions and 2012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/styles/button-styles/icon-button.sass Normal file
View File

@@ -0,0 +1,134 @@
button.m3.m3-icon-button
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
contain: content
border-radius: 50%
position: relative
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
width: 40px
height: 40px
border: none
padding: 0
&::before
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
content: ""
width: 100%
height: 100%
position: absolute
& > span.m3-icon
z-index: 25
font-size: 2em
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
&.selected.toggled
fill: var(--md-sys-color-primary)
&.filled
&
fill: var(--md-sys-color-on-primary)
background-color: var(--md-sys-color-primary)
&.toggled
fill: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled
fill: var(--md-sys-color-on-primary)
background-color: var(--md-sys-color-primary)
&.tonal
&.toggled
fill: var(--md-sys-color-on-surface-variant)
background-color: var(--md-sys-color-surface-container-highest)
&.selected.toggled, &
fill: var(--md-sys-color-on-secondary-container)
background-color: var(--md-sys-color-secondary-container)
&: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)
&.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)
&.selected.toggled
border: 1px solid #00000000
background-color: var(--md-sys-color-inverse-surface)
fill: var(--md-sys-color-inverse-on-surface)
&.filled:not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&.toggled > .m3.m3-ripple-domain > .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
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
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&: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)
&.tonal:not(:disabled)
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.toggled > .m3.m3-ripple-domain > .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)
&.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)