Form
Input Field & Validation
Can be used by adding the class .text-field
Default
Hovered
Focused
Valid Input
Use this style by adding the class
.-success
Invalid Input
Use this style by adding the class
.-error
This is an error message for the invalid input
Disabled Input
Use this style by adding the class
.disabled
Read Only Input
Use this style by adding
readonly attribute
<input type="text" class="text-field" placeholder="johndoe">
Form label
Use the class .form-label to style <label>.
<label class="form-label">This is a label</label>
Textarea
Can be used by adding the class .textarea
<textarea class="textarea" placeholder="This is a placeholder text"></textarea>
Radio Button
<div class="radio-wrapper">
<input type="radio" class="radio-btn" id="radio-1" name="group-1">
<label for="radio-1">Default radio button</label>
</div>
Checkbox
<div class="checkbox-wrapper">
<input type="checkbox" class="checkbox" id="checkbox-1" />
<label for="checkbox-1">Default checkbox</label>
</div>
Selection dropdown
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is an option from the list
Default dropdown
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is a selected option from the list
Disable dropdown by adding the class
.disabled
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is an option from the list
- This is a selected option from the list
<div class="dropdown">
<div class="dropdown-selection">
<input class="selection" type="text" value="This is default option">
</div>
<ul class="list">
<li class="item"> This is an option from the list </li>
...
<li class="item selected"> This is an option from the list </li>
</ul>
</div>
Notice:
Above is just UI, we will have exact usage when we decide which library to use for dropdown-box.
Datepicker
November 26
Default datepicker
November 26
Disable datepicker by adding the class
.disabled
November 26
December
2015
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Active datepicker
<!-- Default Datepicker-->
<div class="datepicker">
<div class="selection"></div>
<div class="inner">
<div class="calendar">...</div>
</div>
</div>
Basic Form Layout
As shown below, default layout for <form> is set to full-width:
<form>
<div class="form-group">
<label class="form-label">Email</label>
<input type="text" class="text-field" placeholder="Enter your email">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="text-field" placeholder="Enter your password">
</div>
<div class="form-group">
<div class="checkbox-wrapper">
<input type="checkbox" class="checkbox" id="remember-password" />
<label for="remember-password">Remember password</label>
</div>
</div>
<div class="form-group">
<button class="btn">Cancel</button>
<button class="btn -success">Submit</button>
</div>
</form>
Notice:
Use the class .form-group for controling the row in form.
Inline Form Layout
Use the class .form-inline for inline layout. It applies to label input textarea & .form-group as shown below.
<form class="form-inline">
...
</form>
Sample Form Usage
<!-- Same markup as above -->
<form>
<div class="form-group">
<label class="form-label">Step</label>
<input class="text-field" placeholder="Enter step’s description here">
</div>
<div class="form-group">
<label class="form-label">Start - End</label>
<div class="datepicker cols-6">
<div class="selection">November 26</div>
<button class="btn"><i class="icon -calendar"></i></button>
</div>
<div class="datepicker cols-6">
<div class="selection">November 26</div>
<button class="btn"><i class="icon -calendar"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label">Memo</label>
<textarea class="textarea" placeholder="Enter some memo"></textarea>
</div>
<div class="form-group">
<button class="btn">Cancel</button>
<button class="btn -success">Submit</button>
</div>
</form>
Notice:
It is good practice to give every form a unique name, if needed, so they can be restyled easily. Also make sure to reuse the Grid-system to easily layout the form with class .cols-*.
Related mixin
@mixin base-input($bg-color,
$border-color,
$inner-shadow-color) {
background-color: $bg-color;
border: 1px solid $border-color;
border-radius: $base-border-radius;
@if $inner-shadow-color == 'none' {
box-shadow: none;
} @else {
box-shadow: inset 0 1px 2px 1px $inner-shadow-color;
}
}
Example
Usage:
@include base-input($white, $primary-color-dark-20, $primary-color-light-80);
CSS Output:
background-color: #fff;
border: 1px solid #1077bc;
border-radius: 3px;
box-shadow: inset 0 1px 2px 1px #c7e6fa;