Files
livewire-material/resources/css/components.css
T
Andreas Reinhold / reiniandClaude Opus 5 281c21b0a4 Draw the slider without Tailwind
<x-slider> renders data-md-slider with its size, colour, value label,
orientation and centring as data-md-* attributes and its parts as
data-md-slider-*; every size, colour role, disabled state, the vertical
quarter turn, RTL mirroring and the no-script fallback move into
components/slider.css as custom properties per size and colour (plan
step 36). slider.js reads the props from the root and marks the
renamed handle, tick and icon hooks.

Browser tests pin the handle centred on the track at each size, Space
held with an arrow, and the vertical slider's drag along Y, keys and
value label beside the handle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 15:01:19 +02:00

35 lines
1.2 KiB
CSS

/*
* The component stylesheets already written without Tailwind (plan step 36), while the rest are
* still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
* the entry: the layer statement, not the import order, decides where its rules rank. Step 37
* replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
/* Foundation components */
@import './components/icon.css';
@import './components/shape.css';
/* Actions and communication */
/* Inputs, selection and data */
@import './components/form.css';
@import './components/field.css';
@import './components/input.css';
@import './components/password.css';
@import './components/textarea.css';
@import './components/select.css';
@import './components/file.css';
@import './components/checkbox.css';
@import './components/radio.css';
@import './components/toggle.css';
@import './components/chip.css';
@import './components/chip-set.css';
@import './components/choices.css';
@import './components/slider.css';
/* Containment */
/* Navigation */