Maniacs_Mansion/MealQuest
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature 05 task 2: Core UI primitives (#34)
CI / ci (push) Successful in 1m31s
Details

Browse Source 
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
This commit was merged in pull request #34.
This commit is contained in:
dev_agent
2026-10-03 16:34:59 -04:00
committed by approver_agent
parent 496f2e5375
commit 02f1dd6491
36 changed files with 1408 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/ui/Slider.module.css
+61
View File
@@ -0,0 +1,61 @@
/* The input is the 44 px tall hit area; the track and knob are drawn by the
vendor pseudo-elements. --slider-fill is set inline from the value. */
.slider {
appearance: none;
display: block;
width: 100%;
min-width: 44px;
height: 44px;
margin: 0;
background: transparent;
cursor: pointer;
}
.slider:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.slider::-webkit-slider-runnable-track {
height: 8px;
border-radius: var(--radius-pill);
background: linear-gradient(
to right,
var(--color-accent) var(--slider-fill),
var(--color-neutral-300) var(--slider-fill)
);
}
.slider::-webkit-slider-thumb {
appearance: none;
box-sizing: border-box;
width: 24px;
height: 24px;
margin-top: -8px;
border: 3px solid var(--color-accent);
border-radius: var(--radius-pill);
background: var(--color-bg);
box-shadow: var(--shadow-sm);
}
.slider::-moz-range-track {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-neutral-300);
}
.slider::-moz-range-progress {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-accent);
}
.slider::-moz-range-thumb {
box-sizing: border-box;
width: 24px;
height: 24px;
border: 3px solid var(--color-accent);
border-radius: var(--radius-pill);
background: var(--color-bg);
box-shadow: var(--shadow-sm);
}