forms

form-field() mixin

Styles for most text inputs and select field

@mixin form-field { /* ... */ }
Requires
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
NameDescriptionTypeDefault
$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)