insomnia/app/css/components/forms.scss

@import '../constants/dimensions';
@import '../constants/colors';

.form-control {
  outline: none;
  border: 0;
  height: $line-height-md;

  textarea,
  input {
    width: 100%;
    height: 100%;
  }

  &.form-control--error {
    input {
      text-decoration: underline;
    }
  }

  &.form-control--outlined,
  &.form-control--underlined {
    height: auto;
    margin: $padding-sm;

    textarea,
    input {
      border: 1px solid $hl-md;
      padding: $padding-sm;
      border-radius: $radius-md;
    }

    textarea,
    input:focus {
      border-color: $hl-xl;
    }
  }

  &.form-control--underlined {
    textarea,
    input {
      border-radius: 0;
      border-top: 0;
      border-right: 0;
      border-left: 0;
    }
  }
}

// Push form all the way to the sides if inside label
label > .form-control,
.form-control--wide {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.btn {
  text-align: center;
  padding: 0 ($padding-md * 1.5);
  height: $line-height-md;
  border: 1px solid transparent;

  &.btn--compact {
    padding: 0 $padding-md;
    height: $line-height-sm;
  }

  &.btn--super-compact {
    padding: 0 $padding-md;
    height: $line-height-xs;
  }

  &.btn--outlined {
    border: 1px solid $hl-lg;
    border-radius: $radius-md;
  }
}

.btn:disabled {
  opacity: 0.3;
}

.btn:focus:not(:disabled),
.btn.focus:not(:disabled),
.btn:hover:not(:disabled) {
  background: $hl-xs;
}

.btn:active {
  background: $hl-md;
}

textarea, input, button {
  box-sizing: border-box;
  text-align: left;
  font-size: inherit;
  text-decoration: inherit;
  background: none;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  color: inherit;

  &::-webkit-input-placeholder {
    color: $hl-xl;
  }
}

input.input--error {
  border-color: $danger !important;
}

button {
  width: auto;
  padding: 0;
  margin: 0;
}

textarea.no-resize {
  resize: none;
}