Input Module
The Input module provides styled input wrappers with configurable gaps, colors, border, background, placeholder styling, focus/disabled/error states, and optional shake animation.
Signature:
scss
@mixin use-input($gaps: (), $colors: ());
Example:
scss
@include termeh.use-input(("small", "medium"), ("primary", "green"));
Dependencies
Input module uses the following Termeh global var()
:
Component | Type | Usage | Default |
---|---|---|---|
base → separator | Color | Fallback border color | null |
radius → normal | Number | Default input border radius | null |
input → height | Number | Input height | 2.8em |
input → border | Color | Default input border color | FALLBACK |
input → placeholder | Color | Default input placeholder color | FALLBACK |
input → background | Color | Default input background color | white |
Input module uses the following Termeh color()
and variant()
:
Color / Variant | Usage | Default |
---|---|---|
error | Accent color for invalid state | error |
primary | Default accent color | error |
shade → mute | Fallback placeholder color | null |
Modifiers
.is-focused
/:focus-within
→ applies focus styling.is-invalid
/:invalid
→ applies error styling with shake animation.is-disabled
/:disabled
→ applies disabled styling.is-<gap>-gap
→ applies a registered gap as spacing.is-<color>
→ applies a registered color as accent color
Child Elements
<input>
→ the main input field, fills available space by default.divider
→ vertical line separating input sections.gutter
→ spacing element inside the input container