forms
form-field() mixin
Styles for most text inputs and select field
@mixin form-field { /* ... */ }
Requires
[mixin]
corners
[mixin]
shadow
[mixin]
has-errors
scss
.foo {
@include form-field;
}
Usage (scss)
css
.foo {
border-radius: 0.33333rem 0.33333rem 0;
background-color: #fff;
color: #25292c;
border: size('border-thin', 'px') dashed #5c666f;
box-shadow: 0 0 0.34722rem rgba(37, 41, 44, 0.6) inset;
display: block;
width: 100%;
}
.foo:focus {
border-color: #cf0a2c;
box-shadow: none;
outline: 0;
}
.foo.has-errors [data-text-input] {
border: size('border-thin', 'px') solid #dd9b0b;
}
Output (css)
has-errors() mixin
Apply error styles, scoped to the field, form, or otherwise.
@mixin has-errors(
$scope: 'field'
) { /* ... */ }
Parameters
Name | Description | Type | Default |
---|---|---|---|
$scope | The scope of errors to be styled, or false if the scope is already established. | 'form' | 'field' | false | 'field' |
scss
.field-error {
@include has-errors('field') {
border-color: red;
}
}
.form {
@include has-errors(false) {
border-color: red;
}
}
Usage (scss)
css
[data-form-field].has-errors .field-error {
border-color: red;
}
.form.has-errors {
border-color: red;
}
Output (css)