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)

8
src/styles/input-styles/radio.sass
View File

@@ -5,12 +5,16 @@ div.m3.m3-radio-container
display: inline-flex
justify-content: center
& + label.m3.m3-radio-label
margin-inline: 3px
& > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
z-index: 5
width: 40px
height: 40px
aspect-ratio: 1
& > span.m3.m3-radio-state-layer
width: 40px
aspect-ratio: 1
border-radius: 50%
position: absolute
pointer-events: none

39
src/styles/input-styles/swtich.sass
View File

@@ -1,30 +1,29 @@
div.m3.m3-switch
margin: 4px
gap: 20px
box-sizing: content-box
margin: 4px
height: 32px
display: flex
align-items: center
justify-content: center
width: 52px
height: 32px
justify-content: left
box-sizing: content-box
& > svg
overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px
height: 32px
overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
& > g
transform: translate(11.5%, 81%)
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
& > text
font-family: Material-Symbols-Outlined-Regular
font-size: 20px
font-family: Material-Symbols-Outlined-Regular
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
cy: 50%
cx: 16px
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
& > circle.m3.m3-switch-handler-state-layer
r: 20px
@@ -42,13 +41,13 @@ div.m3.m3-switch
height: 30px
& > input.m3
cursor: pointer
appearance: none
opacity: 0 !important
margin: 0
width: 52px
height: 32px
cursor: pointer
appearance: none
position: absolute
opacity: 0 !important
&:disabled
cursor: not-allowed
@@ -93,8 +92,8 @@ div.m3.m3-switch
r: 14px
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface)
fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
&:hover:not(:disabled)
&:checked + svg
@@ -102,25 +101,25 @@ div.m3.m3-switch
fill: var(--md-sys-color-primary-container)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 8%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 8%
fill: var(--md-sys-color-on-surface)
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 12%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 12%
fill: var(--md-sys-color-on-surface)
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px
@@ -137,8 +136,8 @@ div.m3.m3-switch
fill: var(--md-sys-color-surface-container-highest)
&:checked + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-primary)
fill: var(--md-sys-color-primary)
stroke: var(--md-sys-color-primary)
&:disabled + svg
& > g > text.m3
@@ -154,5 +153,5 @@ div.m3.m3-switch
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
& > rect.m3.m3-switch-track
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)