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

CHANGED: style and components directories, removed redundant imports from styles

Browse Source 
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
doryan04
2024-02-03 01:34:54 +04:00
committed by doryan
parent 0ae3a6d980
commit df1d0c2599
75 changed files with 2509 additions and 2012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/styles/input-styles/radio.css Normal file
View File

@@ -0,0 +1,91 @@
@import "../mixins/m3-mixins.css";
div.m3.m3-radio {
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 {
z-index: 5;
}
div.m3.m3-radio > span.m3.m3-radio-state-layer {
width: 40px;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
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 {
margin: 0;
width: 20px;
height: 20px;
aspect-ratio: 1;
cursor: pointer;
appearance: none;
position: absolute;
}
div.m3.m3-radio > 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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio > 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 {
margin: 0;
width: 20px;
z-index: 10;
border-radius: 50%;
pointer-events: none;
aspect-ratio: inherit;
}
div.m3.m3-radio svg > circle {
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio 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 {
r: 5px;
}
/*# sourceMappingURL=radio.css.map */