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

DONE: Full typography

Browse Source 
CHANGES: Everywhere change <span> labels to <Typography>
FIXED: Imports in SASS files
This commit is contained in:
doryan04
2024-02-17 21:11:14 +04:00
committed by doryan
parent 16040245a7
commit 1f6343c07b
19 changed files with 956 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/styles/input-styles/checkbox.sass
View File

@@ -1,20 +1,18 @@
div.m3.m3-checkbox-container
@include m3-label-mixin
width: 18px
height: 18px
@include m3-checkbox-container-mixin
& > 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
& > 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
@@ -28,6 +26,7 @@ input[type="checkbox"].m3.m3-checkbox
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& ~ span.m3-checkbox-state
position: absolute
color: var(--md-sys-color-on-surface-variant)
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
@@ -55,13 +54,13 @@ input[type="checkbox"].m3.m3-checkbox
opacity: 38%
& ~ span.m3-checkbox-state
pointer-events: none
z-index: 10
display: flex
font-size: 24px
font-weight: 700
line-height: 24px
align-items: center
pointer-events: none
justify-content: center
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
@@ -83,6 +82,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
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
@@ -91,6 +91,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
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
@@ -100,6 +101,7 @@ 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
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)