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

127
src/styles/button-styles/button.sass Normal file
View File

@@ -0,0 +1,127 @@
button:not(.m3-fab, .m3-icon-button)
width: min-content
height: min-content
box-sizing: border-box
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, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.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
&.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
color: var(--md-sys-color-primary)
outline: 1px solid var(--md-sys-color-outline) !important
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.text
background-color: #00000000
padding: 10px 12px !important
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.elevated
@include elevation-1(false)
color: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-low)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.tonal
color: var(--md-sys-color-on-secondary-container)
background-color: var(--md-sys-color-secondary-container)
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)
&::before
@include state-layer
&.filled > .m3.m3-ripple-domain > .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
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
&:is(.filled, .tonal)
@include elevation-0(true)
&.elevated
@include elevation-1(true)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&: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)
&:is(.outlined, .text, .elevated)::before
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)
&:hover
&:is(.filled, .tonal)
@include elevation-1(false)
&.elevated
@include elevation-2(false)
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
&:is(.outlined, .text, .elevated)::before
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)
&:disabled
pointer-events: none
&:is(.filled, .elevated, .tonal, .outlined, .text)
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:is(.filled, .elevated, .tonal)
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&.elevated
box-shadow: none
&.outlined
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important