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

102
src/styles/input-styles/checkbox.sass Normal file
View File

@@ -0,0 +1,102 @@
label.m3.m3-checkbox-label
@include m3-label-mixin
width: 18px
height: 18px
& > span.m3.m3-checkbox-state-layer
@include m3-state-layer-mixin
span.m3.m3-checkbox-ripple-layer
z-index: 20
width: 2.5rem
height: 2.5rem
contain: content
border-radius: 50%
position: absolute
input[type="checkbox"].m3.m3-checkbox
margin: 0
z-index: 10
display: flex
width: 1.125rem
height: 1.125rem
appearance: none
position: absolute
align-items: center
border-radius: .14rem
box-sizing: content-box
justify-content: center
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& ~ span.m3-checkbox-state
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
color: var(--md-sys-color-on-surface-variant)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
background: var(--md-sys-color-on-error)
&:is(:user-invalid, .m3.m3-error):not(:checked)
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-primary)
background: var(--md-sys-color-on-primary)
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
color: var(--md-sys-color-on-surface)
&:disabled ~ *
&:is(:hover, &, :checked)
opacity: 38%
& ~ span.m3-checkbox-state
pointer-events: none
z-index: 10
display: flex
align-items: center
justify-content: center
line-height: 24px
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 700
font-size: 24px
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
content: "check_box_outline_blank"
&:indeterminate ~ span.m3-checkbox-state::before
content: "indeterminate_check_box"
&:checked ~ span.m3-checkbox-state::before
content: "check_box"
&:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
& ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
&: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
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&: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
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover
& ~ span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&: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
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)