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

ADDED: Base slider styles and disable state of segment-button

Browse Source
This commit is contained in:
doryan04
2024-02-13 23:31:16 +04:00
committed by doryan
parent 366cc1686b
commit 7109057e95
11 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/styles/generics.css
View File

@@ -753,6 +753,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
opacity: 38%;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
background-color: var(--md-sys-color-secondary-container);
}
@@ -869,6 +875,35 @@ div.m3.m3-radio svg > circle.m3-radio-state {
r: 5px;
}
input[type=range].m3.m3-slider {
height: 4px;
appearance: none;
border-radius: 2px;
background-color: var(--md-sys-color-surface-container-highest);
overflow: visible;
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
width: 20px;
aspect-ratio: 1;
appearance: none;
overflow: visible;
border-radius: 50%;
box-sizing: border-box;
background: var(--md-sys-color-primary);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
width: 40px;
aspect-ratio: 1;
background-color: transparent;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-switch {
margin: 4px;
gap: 20px;