iolovolio/src/scss/forms.scss

input,
button {
  background: $white;
  border-radius: 0;
  height: 28px;
}

button {
  border: none;
  cursor: pointer;
  outline: 0 !important;

  &:active,
  &:focus,
  &:visited,
  &:hover {
    outline: 0 !important;
  }


  &:-moz-focusring {
    //color: transparent;
    text-shadow: 0 0 0 $black;
  }

  ::-moz-focus-inner {border:0;}

}

input,
select,
textarea {
  font-size: $font-12;
  border-radius: 0;
  background: $white;
  width: 100%;
  outline: none !important;
  border: 1px solid $gray;

  &:active,
  &:focus{
    outline: none !important;
  }

  &:-moz-focusring {
    //color: transparent;
    text-shadow: 0 0 0 $black;
  }

  &:-webkit-autofill {
    -webkit-text-fill-color: $black;
    box-shadow: 0 0 0px 1000px $white inset !important;
    &:focus,
    &:hover {
      -webkit-text-fill-color: $black;
      box-shadow: 0 0 0px 1000px $white inset !important;
    }
  }

}


select,
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=date],
input[type=number] {
  color: $dark-gray;
  background: $white;
  border-radius: 0;
  height: auto;
  display: block;
  padding: 7px 10px;
  border: 1px solid $gray;
  @include font-style( $font-sans, 'regular', $font-18);
  box-shadow: unset;
  text-transform: initial !important;

}

select,
.input-select {
  appearance: none;
  background-image: url(/images/arrow-down.svg);
  background-size: auto 30%;
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.input-text {
  padding: 7px 20px;
  //height: 40px;
}

.input-select {
  padding: 7px 20px;
  //height: 40px;
}

.input-textarea {
  padding: 7px;
  width: 100%;
}

.button {
  color: $white;
  background: transparent;
  border-radius: 0;
  height: auto;
  display: block;
  padding: 10px 15px;
  border: 2px solid $white;
  text-align: center;
  @include font-style( $font-sans, 'regular', $font-14);

  &.button-brown {
    background: $brown;
    color: $white;
    border: none;
  }

  &.button-white {
    background: $white;
    border: 1px solid $brown;
    color: $brown;
  }

  &.button-transparent {
    background: transparent;
    border: 1px solid $brown;
    color: $brown;
  }

  &.button-big {
    padding: 10px 20px;
    font-size: $font-18;
  }

  &.button-small {
    height: 18px;
    line-height: $font-6;
    padding: 5px;
  }

  &.button-black {
    background: $dark-gray;
    color: $white;
    border: 2px solid $dark-gray;
  }

  &:disabled {
    opacity: 0.5;
  }
}

.checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  line-height: 12px;

  .checkbox-label {
    font-size: $font-16;
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background: none;
    border: 1px solid $black;
    &:disabled {
      border-bottom: 1px solid $gray;
    }

    &:after {
      content: '';
      position: absolute;
      display: none;
    }
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    &:checked ~ .mark {
      background: $gray;
      &:after {
        display: block;
      }
    }
  }
}

.radio {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin: 10px 15px 0 0;
  cursor: pointer;
  user-select: none;
  line-height: 20px;

  .radio-label {
    font-size: $font-16;
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: none;
    border: 1px solid $gray;
    &:disabled {
      border-bottom: 1px solid $gray;
    }

    &:after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: $gray;
      display: none;
    }
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    &:checked ~ .mark {
      &:after {
        display: block;
      }
    }
  }
}