@eclipse-scout/core/src/form/fields/FormField.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.form-field {
  /* FormFieldLayout uses absolute positioning, make sure it is positioned relatively to its container */
  position: relative;

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

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

    .read-only& {
      color: @label-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& {
        color: @top-label-disabled-color;
      }

      .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;

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

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

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

  /* Convenience class to add to a field when the mandatory indicator should not be displayed (e.g. inside a FormFieldMenu) */

  &.no-mandatory-indicator > .mandatory-indicator {
    display: none;
  }

  &.no-mandatory-indicator > label.top {
    margin-left: 0;
  }

  & > .status {
    position: absolute;
    margin-left: @field-status-margin-left;
    height: @field-status-size;

    #scout.status();
  }

  &.has-menus {

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

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

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

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

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

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

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

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