Advanced

Documentation of advanced form components such as search and call inputs, chat textarea.

Files

app/styles/modules/_forms.scss

Input search

Input search is extended text input, with search icon. It can be created same way as text input with additional class .input-search.

Example:

Code:

<input placeholder="Search" class="input input-search" type="search">
<input placeholder="Readonly" readonly="" class="input input-search" type="search">
<input placeholder="Disabled" disabled="" class="input input-search" type="search">
<input placeholder="Error" class="input input-search error" type="search">

Input search chat

Input search chat is extended input search that is used in chat bars. This input will morph on focus from button like element into input search. You can create input search chat by using additional class .input-seach-chat.

Note

Do not use placeholder text for this type of input
To keep this input open use class .active

Example:

Input advanced

Input advanced is extension for basic text input, that allows to create clickable action element inside input. You can create this advanced input by wrapping <input> into element with classes .input.input-advanced and using additional element .input-advanced_action as container for .btn.

Warning

Input advanced states have to be set on .input-advanced and also on <input> and .btn if it should be disabled, as shown in example below.

Example:

Code:

<!-- default -->
<div class="input input-advanced">
  <input placeholder="Search" type="search">
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- readonly -->
<div class="input input-advanced readonly">
  <input placeholder="Search" type="search" readonly="">
  <div class="input-advanced_action">
    <a class="btn btn-flat disabled">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- disabled -->
<div class="input input-advanced disabled">
  <input placeholder="Search" type="search" disabled="">
  <div class="input-advanced_action">
    <a class="btn btn-flat disabled">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- error -->
<div class="input input-advanced">
  <input placeholder="Search" type="search" class="error">
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

Input call

Input call can be created as combination of input search and input advanced as shown in example below.

Example:

Code:

<!-- default -->
<div class="input input-advanced input-search">
  <input placeholder="Search" type="text">
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- readonly -->
<div class="input input-advanced input-search readonly">
  <input placeholder="Search" type="text" readonly="">
  <div class="input-advanced_action">
    <a class="btn btn-flat disabled">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- disabled -->
<div class="input input-advanced input-search disabled">
  <input placeholder="Search" type="text" disabled="">
  <div class="input-advanced_action">
    <a class="btn btn-flat disabled">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

<!-- error -->
<div class="input input-advanced input-search">
  <input placeholder="Search" type="text" class="error">
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">call</i>
    </a>
  </div>
</div>

Textarea chat

Textarea chat is extended textarea with two additional actions: emoticons and send button. It can be created similar as input advanced as shown in example below.

Example:

Send

Code:

<div class="input input-advanced textarea-chat">
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">attach_file</i>
    </a>
  </div>
  <textarea rows="3"></textarea>
  <div class="input-advanced_action">
    <a class="btn btn-flat">
      <i class="icon icon-m">emoticon</i>
    </a>
  </div>
  <div class="input-advanced_action">
    <a class="btn btn-flat-green">Send</a>
  </div>
</div>

Input with tags

Input with tags are designed to highlight information such as emails inside input element. Tags are created with .tag-item inside .input-tags list items and can by destroyed with click on close icon. Last list item should contain actual <input> as shown in example below.

Example:

karolprokop@abc.cz,
jarozak@abc.cz,
martin@gmail.com,

Code:

<div class="input input-with-tags">
  <ul class="input-tags">
    <li class="input-tags_item">
      <span class="tag-item"> item 1
        <i class="icon icon-s">close</i>
      </span>,
    </li>
    ...
    <li class="input-tags_item input-tags_item-input">
      <input>
    </li>
  </ul>
</div>