frontend/scss/setup/mixins/_forms.scss
/*
  @mixin placeholder

  Style form placeholder text
*/

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

/*
  @mixin resetfield
  Form fields reset default styles
*/

@mixin resetfield() {
  padding:0;
  margin:0;
  border-radius:0;
  -webkit-appearance: none;
  background:transparent;
  border:0 none;
  font-size:inherit;
  letter-spacing:inherit;

  &:focus {
    outline: 0;
  }
}

/*
  @mixin textfield
  Form fields minimal styles
*/

@mixin textfield() {
  border-radius:2px;
  box-shadow:inset 0 0 1px #f9f9f9;
  width:100%;
  border:0 none;
  box-sizing:border-box;
  font-size:15px;
  caret-color: $color__action;
}

/*
  @mixin defaultState
  Form fields reset default styles
*/

@mixin defaultState() {
  background-color: $color__f--bg;
  border:1px solid $color__fborder;
  color:$color__text--forms;
}

/*
  @mixin hoverState
  Form fields hover styles
*/

@mixin hoverState() {
  border-color:$color__fborder--hover;
}

/*
  @mixin focusState
  Form fields hover styles
*/

@mixin focusState() {
  border-color:$color__fborder--hover;
  color:$color__text--forms;
  outline:0;
  background-color:$color__background;
}

/*
  @mixin disabledState
  Form fields disabled styles
*/

@mixin disabledState() {
  @include defaultState();
  box-shadow:0 none;
  outline:0;

  opacity: .5;
  pointer-events: none;
}
