acl-1.0.10

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
Default dropdown
Disable dropdown by adding the class .disabled
<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
November 26
November 26
<!-- 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;