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

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

label small {
  font-size: 12px;
  line-height: 1.33;

  a {
    color: $white;

    &:hover, &:active {
      text-decoration: underline;
      color: $white;
    }
  }
}

// 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;
    box-shadow: none;
  }

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

  &.input-search {
    background-repeat: no-repeat;
    background-position: center left 16px;
    background-size: 16px 16px;
    background-image: url(~client/assets/svg/for-css/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/for-css/check.svg);
    background-size: 13px 10px;
  }

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

.input-group {
  .input-group-prepend , .input-group-append  {
    background: $gray-600;
    color: $gray-300;
    border-radius: 2px;

    &.input-group-text {
      font-size: 14px;
      line-height: 1.43;
      color: rgba($gray-100, 0.64);
      padding: 10px 24px;
      border: none;
    }

    &.input-group-icon {
      border: solid 1px $gray-400;
      border-right: none;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    &.streak-addon .svg-icon {
      width: 11.6px;
      height: 7.1px;
      margin: 15px 13.4px 15.9px 13px;
    }

    &.positive-addon .svg-icon {
      width: 10px;
      height: 10px;
      margin: 14px 14px;
    }

    &.negative-addon .svg-icon {
      width: 10px;
      height: 2px;
      margin: 18px 14px;
    }
  }

  input:not(:first-child) {
    border-left: none !important;
  }

  input:first-child {
    border-right: none !important;
  }
}

.form-check {
  margin-bottom: 0.5rem;
  padding-left: 0px;
}

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

.custom-control {
  margin-bottom: .5rem;

  &-label {
    padding-top: 3px;
    padding-left: 3px;
  }

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

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

  .custom-control-input {
    &:checked~.custom-control-label::before {
      background-color: $purple-400;
      border-color: $purple-400;
    }

    &:checked~.custom-control-label::after {
      width: 18px;
      height: 18px;
      background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
      background-size: 75% 75%;
    }

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

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

    &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
      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-label::before, &:active:disabled~.custom-control-label::before  {
      box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
    }

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

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

.inline-edit-input-group {
  .input-group-append, .input-group-prepend {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
  }

  .destroy-icon {
    width: 14px;
    height: 16px;
  }
}

.inline-edit-input {
  margin-bottom: 0px;
  border-radius: 0px;
  border: none !important;
  padding-left: 36px;
}

@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-label::after {
    @include custom-radio-checked-icon($purple-400);
    width: 18px;
    height: 18px;
    background-size: 12px 12px;
  }

  &:checked~.custom-control-label::before {
    background-color: $gray-700;
    background-size: 12px 12px;
    border-color: $purple-400;
  }

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

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

  &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
    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-label::before {
    border-color: $gray-400;
    background-color: transparent;
  }

  &:disabled:checked~.custom-control-label::after {
    @include custom-radio-checked-icon($gray-400);
    width: 18px;
    height: 18px;
    background-size: 12px 12px;
  }

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

  &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before  {
    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-label::before, &:active:disabled:checked~.custom-control-label::before  {
    border-color: $gray-400;
  }
}

.toggle-switch-container.no-margin {
  margin-top: 0 !important;
}