Forms
Variables
var(--color-input-background)
: #fffvar(--color-input-border)
: #333var(--color-input-border-focus)
: {{stylesheets.color.accent1}}var(--color-input-group-background)
: rgb(241,241,241)var(--color-input-label)
: grayvar(--color-input-error)
: red
Mixins
input $background, $color, $colorDisabled, $border, $borderFocus, $borderDisabled
Parameters
$background
(required) - Color;$color
(required) - Color;$colorDisabled
(required) - Color;$border
(required) - Color;$borderFocus
(required) - Color;$borderDisabled
(required) - Color;
Usage
.input {
@mixin input white, black, grey, black, blue, grey;
}
Output
.input {
width: 100%;
box-shadow: 0 1px 0 0 black;
border: 0;
padding: 0;
background-color: white;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.1;
transition: box-shadow var(--easing-out) 250ms;
&:focus {
outline: none;
box-shadow: 0 2px 0 0 blue;
}
&:disabled {
box-shadow: none;
border-bottom: 1px dashed grey;
color: grey;
}
&:read-only {
cursor: text;
}
}
Helpers
None
Example
<form class="form">...</form>
Labels
<form class="form">
<label>Example Input</label>
<input id="exampleInput" type="text" placeholder="Example">
</form>
Input types
<form class="form">
<!-- text -->
<input type="text" placeholder="Text">
<!-- read only -->
<input type="text" value="Text can only be copied" readonly>
<!-- email -->
<input type="email" placeholder="Email">
<!-- password -->
<input type="password" placeholder="Password">
<!-- url -->
<input type="url" placeholder="Url">
<!-- telephone -->
<input type="tel" placeholder="Telephone">
<!-- search -->
<input type="search" placeholder="Search">
<!-- number -->
<input type="number" placeholder="Number">
<!-- date -->
<input type="date" placeholder="Date">
<!-- date time -->
<input type="datetime" placeholder="Date Time">
<!-- date time local -->
<input type="datetime-local" placeholder="Date Time Local">
<!-- month -->
<input type="month" placeholder="Month">
<!-- week -->
<input type="week" placeholder="Week">
<!-- time -->
<input type="time" placeholder="Time">
<!-- textarea -->
<textarea placeholder="Textarea"></textarea>
<!-- select -->
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>
Errors
<form class="form">
<div class="error">
<label>Some input</label>
<input type="text" placeholder="Error">
<small>This field is required</small>
</div>
</form>
Input Group
<form class="form">
<div class="input-group">
<input type="text" placeholder="Enter your email">
<button class="input-group-btn button">Sign Up</button>
</div>
</form>