Input

Molecules · Updated on 22 March 2017

Documentation is WIP, check open issues and start improving!

Input component is used for information input. It consists of three parts — Icon, Value and Placeholder. If Value is not present, Placeholder is displayed and Icon is optional property.

Documentation

Specifications

// Base

$input-height                                 : unit(10);                 // 40px
$input-padding                                : unit(2.5);                // 10px;
$input-color-background                       : rgba(palette(cd1), 0.04);
$input-border-radius                          : unit(1.5);                // 6px

$input-icon-margin-left                       : unit(0.5);                // 2px
$input-icon-margin-right                      : unit(2);                  // 8px

$input-opacity-disabled                       : 0.24;

$input-value-text-type                        : 'body';
$input-value-color-placeholder                : palette(cd3);

API

Name	Values	Default
icon	component	nil
placeholder	string	’’
value	string	’’