org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.less

/*******************************************************************************
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 ******************************************************************************/
.form-field {
  border-spacing: 0;
  /* FormFieldLayout uses absolute positioning, make sure it is positioned relatively to its container */
  position: relative;

  & > label {
    position: absolute;
    #scout.overflow-ellipsis-nowrap();
    padding-top: @borderless-field-padding-y;
    padding-bottom: @borderless-field-padding-y;
    margin-left: @mandatory-indicator-width;
    /* Add small spacing between label and field */
    padding-right: @mandatory-indicator-width;

    &.empty {
      /* explicitly disable ellipsis, because IE would display it for very narrow columns even if content is ' ' */
      text-overflow: clip;
    }

    .disabled&{
      color: @text-disabled-color;
    }

    .read-only& {
      color: @text-color;
    }

    &.top {
      color: @top-label-color;
      font-size: @top-label-font-size;
      padding-bottom: @top-label-border-padding-bottom;

      .alternative& {
        /* Reduce space between input and label if there is no border */
        padding-bottom: 0;
      }

      .disabled&,
      .read-only& {
        /* Always use same color for top labels even if it is disabled or read only */
        color: @top-label-color;
      }
    }

    .focused& {
      color: @focus-color;
    }

    .has-error& {
      color: @error-color;
    }
  }

  & > .field {
    position: absolute;
  }

  /* Class that applies the same vertical padding to the .field as to the label (useful e.g. for html fields) */
  &.borderless-field-padding-y > .field {
    padding-top: @borderless-field-padding-y;
    padding-bottom: @borderless-field-padding-y;
  }

  & > .mandatory-indicator {
    position: absolute;
    visibility: hidden;
    width: @mandatory-indicator-width;

    &::before {
      content: '*';
      font-size: @mandatory-indicator-font-size;
    }
  }

  &.mandatory > .mandatory-indicator:not(.read-only) {
    visibility: visible;
  }

  &.disabled.alternative > .mandatory-indicator {
    color: @disabled-color;
  }

  & > .status {
    position: absolute;
    margin-left: @field-status-margin-left;
    width: @field-status-width;
    height: @status-font-icon-size; /* Same as font-size of status icon */

    #scout.status();
  }

  &.has-menus {

    &.has-tooltip:not(.has-info):not(.has-warning):not(.has-error) {
      & > .status::before {
        content: @icon-ellipsis-circle;
      }
    }

    & > .status {
      #scout.menu-status();
    }
  }

  &.has-tooltip > .status {
    #scout.tooltip-status();
  }

  &.has-info > .status {
    #scout.info-status();
  }

  &.has-warning > .status {
    #scout.warning-status();
  }

  &.has-error > .status {
    #scout.error-status();
  }

  .disabled-overlay {
    position: absolute;
  }

  &.cell-editor-form-field {
    position: absolute;
  }
}