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

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)