linagora-rse/frontend/css/modules/form-helper.less

Linagora RSE

@inputBorderColor: #e0e0e0;
@errorColor: #f44336;
@toggleDisabledColor: darken(@body-bg, 15%);

esn-form-group {
  .form-control.ng-pristine.ng-invalid {
    border-bottom: 1px solid @inputBorderColor;
  }

  .fg-line::after {
    background: none;
  }

  .esn-form-message-container {
    height: 20px;
    padding-top: 5px;

    .help-block {
      margin-top: 0;
      font-size: 11px;
    }
  }

  &.has-invalid .esn-form-message-container .help-block {
    color: @errorColor;
  }

  .form-control.ng-valid-validator, .form-control.ng-valid-async-validator {
    background-image: url('/images/checkmark.png');
    background-size: 1.5em;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 25px;
  }

  .form-control.ng-invalid-validator, .form-control.ng-invalid-async-validator {
    background-image: none;
  }

  .form-control.ng-pending {
    background-image: url('/images/throbber-amber.svg');
    background-size: 2em;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 25px;
  }
}

esn-form-group.has-required {
  .fg-label::after {
    content: " *";
  }
}

esn-form-group.has-focus.has-required {
  .fg-label::after {
    color: @errorColor;
  }
}

esn-form-group:not(.has-focus).has-invalid {
  .fg-label {
    color: @errorColor;
  }
}

form:not(.ng-submitted) {
  esn-form-validate-message.pristine {
    display: none;
  }
}

.toggle-switch {
  .ts-helper.ts-disabled {
    cursor: not-allowed;
    background: @toggleDisabledColor;
  }

  .ts-helper.ts-disabled:before {
    background: @toggleDisabledColor;
  }

  .ts-label.ts-disabled {
    color: lighten(@text-color, 40%);
    background: transparent;
  }
}