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

CHANGES: Added unoptimized progress bar inside <Slider> component

Browse Source 
FIXED: Some styles
This commit is contained in:
doryan04
2024-02-18 22:39:34 +04:00
committed by doryan
parent 1f6343c07b
commit a45fdf2f1f
9 changed files with 127 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/generics.css
View File

@@ -881,36 +881,39 @@ div.m3.m3-slider-container {
display: flex;
align-items: center;
}
div.m3.m3-slider-container > datalist {
display: none;
}
input[type=range].m3.m3-slider {
margin: 0;
height: 4px;
appearance: none;
overflow: visible;
border-radius: 2px;
margin-inline: 10px;
background-color: var(--md-sys-color-surface-container-highest);
margin-inline: 8px;
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%);
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
appearance: none;
box-shadow: none;
border-radius: 2px;
min-block-size: 4px;
height: 4px !important;
}
input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
height: 4px;
}
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%;
margin-top: -8px;
box-sizing: border-box;
outline: 10px solid transparent;
background: var(--md-sys-color-primary);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
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 {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}