habitica/website/client/assets/scss/form.scss

.nested-field {
  padding-left: 1.5rem;
}

// Inputs and texteares

input, textarea, input.form-control, textarea.form-control {
  padding: 10px 16px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.43;
  color: $gray-200;
  border: 1px solid $gray-400;

  &:hover:not(:disabled) {
    border-color: $gray-300;
  }

  &:active:not(:disabled), &:focus:not(:disabled) {
    border-color: $purple-500;
    color: $gray-50;
    outline: 0;
  }

  &:disabled {
    opacity: 0.64;
    background: $gray-500;
  }

  &.input-search { // TODO Abstract to work with all icons
    background-repeat: no-repeat;
    background-position: center left 16px;
    background-size: 16px 16px;
    background-image: url(~client/assets/svg/search.svg);
    padding-left: 40px;
  }

  &.input-valid, &.input-invalid {
    background-repeat: no-repeat;
    background-position: center right 16px;
  }

  &.input-valid {
    padding-right: 37px;
    background-image: url(~client/assets/svg/check.svg);
    background-size: 13px 10px;
  }

  &.input-invalid {
    padding-right: 40px;
    background-image: url(~client/assets/svg/alert.svg);
    background-size: 16px 16px;
  }
}

// Checkboxes and radios
$bg-focused-active-control: #4f2993;
$bg-disabled-control: #34303a;

.custom-control {
  &-description {
    padding-top: 3px;
    padding-left: 3px;
  }

  & .custom-control-indicator {
    width: 18px;
    height: 18px;
    background-size: 75% 75%;
    background-color: transparent;
    border: 2px solid $gray-200;
    transition-property: box-shadow;
  }

  & .custom-control-input {
    display: none;
  }
}

.custom-checkbox {
  .custom-control-indicator {
    border-radius: 2px;
  }

  .custom-control-input {
    &:checked~.custom-control-indicator {
      background-image: url(~client/assets/svg/checkbox-white.svg);
      background-color: $purple-400;
      border-color: $purple-400;
    }

    &:active~.custom-control-indicator {
      background-color: inherit;
    }

    &:focus:not(:checked):not(:disabled)~.custom-control-indicator, &:active:not(:checked):not(:disabled)~.custom-control-indicator  {
      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
    }

    &:focus:checked:not(:disabled)~.custom-control-indicator, &:active:checked:not(:disabled)~.custom-control-indicator  {
      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
      border-color: $purple-400;
      background-color: $purple-400;
    }

    &:focus:disabled~.custom-control-indicator, &:active:disabled~.custom-control-indicator  {
      box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
    }

    &:disabled:checked~.custom-control-indicator {
      border-color: $gray-400;
      background-color: $gray-400;
    }

    &:disabled:not(:checked)~.custom-control-indicator {
      border-color: $gray-400;
      background-color: transparent;
    }
  }
}

@mixin custom-radio-checked-icon ($bg-color) {
  background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23");
}

.custom-radio .custom-control-input {
  &:checked~.custom-control-indicator {
    @include custom-radio-checked-icon($purple-400);
    background-color: $gray-700;
    background-size: 12px 12px;
    border-color: $purple-400;
  }

  &:active~.custom-control-indicator {
    background-color: inherit;
  }

  &:focus:not(:checked):not(:disabled)~.custom-control-indicator, &:active:not(:checked):not(:disabled)~.custom-control-indicator  {
    box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
  }

  &:focus:checked:not(:disabled)~.custom-control-indicator, &:active:checked:not(:disabled)~.custom-control-indicator  {
    box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
    border-color: $purple-400;
    background-color: rgba($bg-focused-active-control, 0.1);
  }

  &:disabled:checked~.custom-control-indicator {
    border-color: $gray-400;
    background-color: transparent;
    @include custom-radio-checked-icon($gray-400);
  }

  &:disabled:not(:checked)~.custom-control-indicator {
    border-color: $gray-300;
    background-color: transparent;
  }

  &:focus:disabled~.custom-control-indicator, &:active:disabled~.custom-control-indicator  {
    box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
    border-color: $gray-300;
    background-color: rgba($bg-disabled-control, 0.1);
  }

  &:focus:disabled:checked~.custom-control-indicator, &:active:disabled:checked~.custom-control-indicator  {
    border-color: $gray-400;
  }
}