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

ADDED: Mixins for icon buttons, but it's not completed feature

Browse Source 
FIXED: Styles for segmented-button
This commit is contained in:
doryan04
2024-02-24 23:58:23 +04:00
committed by doryan
parent 964534c780
commit 0a8b58668d
22 changed files with 423 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,7 +81,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
& ~ span.m3-ripple-domain > .m3.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
@@ -90,7 +90,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
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover
@@ -100,6 +100,6 @@ 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
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)

4
src/styles/input-styles/radio.css
View File

@@ -32,7 +32,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + s
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
@@ -41,7 +41,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {

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

@@ -34,7 +34,7 @@ div.m3.m3-radio-container
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
& ~ span.m3-ripple-domain > .m3.ripple
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover
@@ -43,7 +43,7 @@ div.m3.m3-radio-container
&:active + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& ~ span.m3-ripple-domain > .m3.ripple
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
&:disabled