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

CHANGED: README

Browse Source 
ADDED: Labels for switch and radio component
This commit is contained in:
doryan04
2024-02-02 01:12:58 +04:00
parent f39f302555
commit 252f03af7a
11 changed files with 202 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/styles/generics.css
View File

@@ -210,16 +210,22 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
}
div.m3.m3-radio {
display: inline-flex;
justify-content: space-between;
gap: 20px;
}
div.m3.m3-radio > span {
width: 20px;
height: 20px;
align-items: center;
display: inline-flex;
justify-content: center;
}
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > span.m3-checkbox-ripple-layer, div.m3.m3-radio > span span.m3.m3-radio-state-layer {
z-index: 5;
}
div.m3.m3-radio > span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
width: 40px;
aspect-ratio: 1;
border-radius: 50%;
@@ -227,7 +233,7 @@ div.m3.m3-radio > span.m3.m3-radio-state-layer {
pointer-events: none;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
margin: 0;
width: 20px;
height: 20px;
@@ -236,47 +242,47 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio {
appearance: none;
position: absolute;
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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 > span > 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 {
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 {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
div.m3.m3-radio > span > 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 > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .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 {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
stroke-opacity: 38%;
stroke: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
fill-opacity: 38%;
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
fill-opacity: 0;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
fill-opacity: 1;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio svg {
div.m3.m3-radio > span svg {
margin: 0;
width: 20px;
z-index: 10;
@@ -284,17 +290,17 @@ div.m3.m3-radio svg {
pointer-events: none;
aspect-ratio: inherit;
}
div.m3.m3-radio svg > circle {
div.m3.m3-radio > span svg > circle {
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio svg > circle.m3-radio-outline {
div.m3.m3-radio > span svg > circle.m3-radio-outline {
r: 9px;
fill: black;
fill-opacity: 0;
stroke-width: 2px;
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio svg > circle.m3-radio-state {
div.m3.m3-radio > span svg > circle.m3-radio-state {
r: 5px;
}
@@ -546,40 +552,46 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
}
div.m3.m3-switch {
margin: 4px;
gap: 20px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg {
div.m3.m3-switch > span {
display: flex;
align-items: center;
justify-content: center;
}
div.m3.m3-switch > span > svg {
overflow: visible;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg > g {
div.m3.m3-switch > span > svg > g {
transform: translate(11.5%, 81%);
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.m3.m3-switch > svg > g > text {
div.m3.m3-switch > span > svg > g > text {
font-family: Material-Symbols-Outlined-Regular;
font-size: 20px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cy: 50%;
cx: 16px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
r: 8px;
}
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
stroke-width: 2px;
border-radius: 16px;
@@ -587,7 +599,7 @@ div.m3.m3-switch > svg > rect.m3.m3-switch-track {
width: 50px;
height: 30px;
}
div.m3.m3-switch > input.m3 {
div.m3.m3-switch > span > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
@@ -596,98 +608,98 @@ div.m3.m3-switch > input.m3 {
height: 32px;
position: absolute;
}
div.m3.m3-switch > input.m3:disabled {
div.m3.m3-switch > span > input.m3:disabled {
cursor: not-allowed;
}
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > span > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
r: 12px;
}
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
div.m3.m3-switch > span > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0;
}
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
div.m3.m3-switch > span > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px);
}
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
div.m3.m3-switch > span > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
opacity: 0;
}
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:checked, div.m3.m3-switch > span > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
r: 14px;
}
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface);
fill-opacity: 38%;
}
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill-opacity: 8%;
}
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill-opacity: 8%;
}
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill-opacity: 12%;
}
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
div.m3.m3-switch > span > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill-opacity: 12%;
}
div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
rx: 16px;
width: 52px;
height: 32px;
stroke-width: 0;
}
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:not(:checked), div.m3.m3-switch > span > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
x: 1px;
y: 1px;
}
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-outline);
fill: var(--md-sys-color-surface-container-highest);
}
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:checked + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-primary);
fill: var(--md-sys-color-primary);
}
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
div.m3.m3-switch > span > input.m3:disabled + svg > g > text.m3 {
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
}
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:disabled + svg > rect.m3.m3-switch-track {
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
}
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
div.m3.m3-switch > span > input.m3:checked:disabled + svg > g > text.m3 {
transform: translateX(38.5%);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
div.m3.m3-switch > span > input.m3:checked:disabled + svg > 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);
}