@eclipse-scout/core/src/form/Form.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2024 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 {
  position: relative;

  &.dimmed-background {
    background-color: @dimmed-background-color;

    & > .root-group-box > .menubar {
      background-color: inherit;
    }
  }
}

.view:not(.detail-form):not(.mobile-view) {
  & > .root-group-box > .main-menubar {
    #scout.main-menubar-light;
  }
}

.mobile-view > .header > .title {
  font-weight: bold;
}

.dialog {
  position: absolute;
  #scout.popup();
  /* minimum padding to desktop */
  margin: 10px 10px 15px;
  /* min-width and min-height are read by Resizable.js to prevent a dialog from becoming too small
     You can overrule these values with a specific CSS class on a dialog/form when you require a
     larger or smaller min-size. */
  min-width: 250px;
  min-height: 100px;
  top: 0; /* must be specified otherwise dialogs will be positioned at end of document and increase document size */

  & > .header {
    // overflow: hidden on dialog cannot be used without cutting the resize and drag handles
    // A border radius on to the header and root-group-box is necessary if elements inside the dialog have a background color
    border-top-left-radius: @popup-border-radius;
    border-top-right-radius: @popup-border-radius;
  }

  & > .root-group-box {
    border-radius: @popup-border-radius;

    .header-visible& {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &.animate-open {
    #scout.animation(fade-in ease-in 1);
    #scout.animation-duration(0.15s);
  }

  &.animate-modality-highlight {
    #scout.animation-shake();
  }

  /* remove border and rounded corners in full screen mode */

  &.full-width,
  &.full-height {
    border-radius: 0;
  }

  &.full-width {
    border-right: 0;
    border-left: 0;
  }

  &.full-height {
    border-bottom: 0;
  }

  & > .resizable-nw,
  & > .resizable-n,
  & > .resizable-ne {
    margin-top: -@dialog-border-top-size;
  }
}

.form > .header {
  padding-top: @form-title-padding-top;
  padding-left: 20px;
  padding-right: 10px;
  overflow: hidden; // Necessary to make header as height as content because of the floating closable.

  &.no-title {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    & > .title,
    & > .sub-title {
      .hidden();
    }
  }

  & > .icon-container {
    float: left;

    & > .icon {
      margin-right: 6px;
      vertical-align: middle;

      &.font-icon {
        font-size: 16px;
      }
    }
  }

  & > .title {
    #scout.overflow-ellipsis-nowrap();
    font-size: @font-size-large;
    color: @title-color;
    margin-top: @text-margin-top;
  }

  & > .sub-title {
    #scout.overflow-ellipsis-nowrap();
    color: @sub-title-color;
  }

  & > .status-container {
    float: right;
    margin-top: -8px;
    margin-right: -2px;

    & > .status {
      /* make sure close icon overlaps drag-handle */
      position: relative;

      vertical-align: middle;
      display: inline-block;
      margin-left: 5px;

      &.closer {
        border-radius: @closer-border-radius;
        margin-left: 7px;
        padding: 7px;
        position: relative;

        & > .key-box {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
}

@media (max-width: @iphone6-width) {
  .dialog {
    /* no need to have a margin on small screens */
    /* otherwise on iphone5, cancel button on a dialog would always be stacked in ellipsis if there is another menu item */
    margin: 0;

    & > .resizable-handle {
      /* Remove handle, it is not useful anymore
         and it increases the dialog size which has the effect that the body may be scrolled (on iphone).
         Important is necessary because jquery ui sets it to display: block using inline style */
      display: none !important; /* NOSONAR (see comment above)*/
    }
  }
}