Text input

[roomfive]

Preview:

---

Assets:

• Error icon

---

CSS (limited):

Regular

/* Text input */
background: $white;
height: 38px;
padding: 0 10px;
border: 1px solid $gray300;
border-radius: 2px;
font: $regular2;
color: $weworkblack;

/* Placeholder */
color: $gray200;

/* Hover */
border-color: $gray200;

/* Focus */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Disabled */
color: $gray300;
cursor: not-allowed;

/* Instruction (text below) */
font: $regular3;
color: $gray200;
margin-top : 5px;

/* Error (input) */
border-color: $warningred;

/* Error (text below) */
font: $bold6;
color: $warningred;
margin-top : 5px;

Large

/* Text input */
height: 48px;
padding: 0 15px;
font: $regular1;