| Index: src/scss/_form.scss |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/src/scss/_form.scss |
| @@ -0,0 +1,56 @@ |
| +/******************************************************************************* |
| + * Form |
| + ******************************************************************************/ |
| + |
| +input, |
| +button |
| +{ |
| + width: 100%; |
| + height: 2.6em; |
| +} |
| + |
| +/* Input field |
| + ******************************************************************************/ |
| + |
| +input |
| +{ |
| + margin-bottom: $medium-space; |
| + padding: 0 $x-small-space; |
| + border: 2px solid #CDCDCD; |
| +} |
| + |
| +/* Error state |
| + ******************************************************************************/ |
| + |
| +.invalid |
| +{ |
| + border-color: $error; |
| +} |
| + |
| +.error-message |
| +{ |
| + display: none; |
| +} |
| + |
| +.invalid + .error-message |
| +{ |
| + display: block; |
| + margin-top: -$x-small-space; |
| + margin-bottom: $small-space; |
| + color: $error; |
| +} |
| + |
| +/* Buttons |
| + ******************************************************************************/ |
| + |
| +button |
| +{ |
| + border: 0; |
| + text-transform: uppercase; |
| +} |
| + |
| +.secondary |
| +{ |
| + color: #fff; |
| + background-color: $secondary; |
| +} |