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

CHANGED: root classname elements on checkbox and radio components

Browse Source 
NEW: opportunity control toggled state to each a segmented-buttons
FIXED: hover, focus and active states for slider in stylesheets
This commit is contained in:
doryan04
2024-02-14 23:21:28 +04:00
committed by doryan
parent 9eb0a1ceca
commit 16040245a7
10 changed files with 1223 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
label.m3.m3-checkbox-label
div.m3.m3-checkbox-container
@include m3-label-mixin
width: 18px
height: 18px
@@ -28,12 +28,13 @@ input[type="checkbox"].m3.m3-checkbox
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)
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
&: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)
@@ -43,6 +44,7 @@ input[type="checkbox"].m3.m3-checkbox
&: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
@@ -56,13 +58,13 @@ input[type="checkbox"].m3.m3-checkbox
pointer-events: none
z-index: 10
display: flex
font-size: 24px
font-weight: 700
line-height: 24px
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
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
content: "check_box_outline_blank"
@@ -72,6 +74,7 @@ input[type="checkbox"].m3.m3-checkbox
&:checked ~ span.m3-checkbox-state::before
content: "check_box"
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
&:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)

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

@@ -1,4 +1,4 @@
div.m3.m3-radio
div.m3.m3-radio-container
width: 20px
height: 20px
align-items: center

16
src/styles/input-styles/slider.sass
View File

@@ -1,9 +1,16 @@
div.m3.m3-slider-container
height: 20px
display: flex
align-items: center
input[type="range"].m3.m3-slider
margin: 0
height: 4px
appearance: none
border-radius: 2px
background-color: var(--md-sys-color-surface-container-highest)
overflow: visible
border-radius: 2px
margin-inline: 10px
background-color: var(--md-sys-color-surface-container-highest)
&::-webkit-slider-container
margin-inline: -8px
@@ -19,13 +26,18 @@ input[type="range"].m3.m3-slider
&:hover
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)
transition: .2s cubic-bezier(0.2, 0, 0, 1)