@eclipse-scout/core/src/tile/fields/FormFieldTile.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
 */
.tile.dashboard {
  border: none;
  border-radius: @dashboard-tile-border-radius;
  color: @tile-default-color;
  --tile-background-color: @tile-default-background-color;
  background-color: var(--tile-background-color);
  #scout.double-drop-shadow(@spread1: 1px, @color1: @dashboard-tile-border-color, @y2: 0px, @blur2: 0px);

  // Adjust color of the resizable border, see Resizable.ts
  // Always use inverted colors which are darker than regular color to make the resizable visible even if the dashboard contains mixed tiles (some inverted, some not)
  --resizable-color: @dashboard-tile-default-inverted-selected-border-color;

  &.color-alternative {
    --resizable-color: @dashboard-tile-alternative-inverted-selected-border-color;
  }

  &.inverted {
    --box-shadow-1-color: @tile-default-inverted-background-color;
  }

  &.inverted.color-alternative {
    --box-shadow-1-color: @tile-alternative-inverted-background-color;
  }

  .dimmed-background & {
    --box-shadow-1-spread: 0;
    --box-shadow-2-y: @drop-shadow-y;
    --box-shadow-2-blur: @drop-shadow-blur;
    --box-shadow-2-alpha: @dashboard-tile-drop-shadow-light-alpha;

    &.inverted {
      --box-shadow-2-alpha: @dashboard-tile-drop-shadow-dark-alpha;
    }
  }

  & > .form-field {
    padding: 16px @tile-field-padding @tile-field-padding;
    border-radius: inherit;
    overflow: hidden;

    &.label-hidden {
      padding-top: @tile-field-padding;

      .compact& {
        // reduce padding-top only if there is no label
        // the padding with label is already fine
        padding-top: @tile-field-compact-padding-y;
      }
    }

    .compact& {
      padding-bottom: @tile-field-compact-padding-y;
      padding-left: @tile-field-compact-padding-x;
      padding-right: @tile-field-compact-padding-x;
    }

    &.no-padding {
      padding: 0;

      & > .field {
        border: 0;
        border-radius: 0;
      }
    }

    & > label {
      color: @tile-default-label-color;
      margin: 0;
      font-size: 12px;
      font-weight: bold;
      padding-top: 0;
      padding-bottom: @dashboard-tile-label-padding-bottom;
      padding-right: 0;
    }

    & > .field {
      margin-left: 0;
      overflow: hidden;
    }

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

    & > .status {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;

      background-color: var(--tile-background-color);
      box-shadow: 0 0 4px 4px var(--tile-background-color);
      border-radius: 50%;

      padding: 0;
      margin: 0;

      // These properties are set by FormFieldLayout.js depending on StatusPosition, Label, etc.
      // In order to fix these values for the FormFieldTile we need !important.
      height: 24px !important;
      width: 24px !important;
      top: 12px !important;
      right: 12px !important;
      line-height: unset !important;
    }

    &.has-menus:not(.has-tooltip):not(.has-error) > .status {
      border-radius: @border-radius;
    }

    /* Move part of the tile's padding (@offset) to the inner div. */
    /* This makes it possible to draw the scrollbar (seemingly) outside the field. */

    &.scrollbar-y-outside {
      @offset: 17px;
      padding-right: @tile-field-padding - @offset;

      .compact& {
        padding-right: 0;
      }

      & > label {
        margin-right: @offset;
      }

      & > .field {
        padding-right: @offset;

        & > .scrollbar.y-axis {
          /* Remove margin top/bottom, because root-group-box already provides a padding */
          height: 100%;
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    }

    /* --- Special rules for specific tile fields --- */

    &.browser-field > .field {
      border-radius: 0;
    }

    &.browser-field.inverted > .field {
      border: 0;
    }

    &.html-field > label,
    &.bean-field > label {
      padding-bottom: @dashboard-tile-label-large-padding-bottom;
    }
  }

  // Define a short transition for opacity changes (used in .loading state)
  & > .form-field {
    transition: opacity 0.15s; // Same time is used in animation() of .loading-indicator
    opacity: 1;
  }

  &.loading {
    & > .form-field {
      pointer-events: none;
      opacity: 0; // animated with CSS transition
    }

    & > .loading-indicator {
      #scout.loading-indicator();
    }
  }

  &.inverted {
    --tile-background-color: @tile-default-inverted-background-color;
    color: @tile-default-inverted-color;

    &.disabled:not(.read-only) {
      & ::-moz-selection {
        #scout.text-selection();
      }

      & ::selection {
        #scout.text-selection();
      }
    }

    & ::-moz-selection {
      background: darken(@text-selection-background-color, 10);
    }

    & ::selection {
      background: darken(@text-selection-background-color, 10);
    }

    & > .form-field {
      & > label {
        color: @tile-default-inverted-label-color;
      }

      /* Override link style in inverted tiles, otherwise app-links would not be readable */

      & .app-link,
      & a {
        color: @tile-default-inverted-color;

        &:hover {
          color: @tile-default-inverted-link-hover-color;
        }

        &:active {
          color: @tile-default-inverted-link-active-color;
        }
      }

      & > .status::before {
        color: @tile-default-inverted-color;
      }

      &.has-menus:not(.has-tooltip):not(.has-error) > .status {
        &::before {
          color: @tile-default-inverted-color;
        }

        &:hover::before {
          background-color: @tile-default-inverted-status-hover-background-color;
        }

        &:active::before,
        &.selected::before {
          background-color: @tile-default-inverted-status-active-background-color;
        }
      }

      &.has-error > .status {
        &::before {
          color: @tile-default-inverted-error-status-color;
        }

        &:hover::before,
        &:active::before,
        &.selected::before {
          color: @tile-default-inverted-error-status-hover-color;
        }
      }

      .scrollbar-thumb-handle {
        background-color: @tile-scrollbar-thumb-inverted-color;
      }

      .scrollbar-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
      .scrollbar-thumb:hover > .scrollbar-thumb-handle {
        background-color: @tile-scrollbar-thumb-inverted-hover-color;
      }

      .container-too-small-for-thumb > .scrollbar-thumb-handle {
        border-radius: 0;
        background-color: @tile-scrollbar-thumb-inverted-small-color;
      }

      .container-too-small-for-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
      .container-too-small-for-thumb.scrollbar-thumb:hover > .scrollbar-thumb-handle {
        background-color: @tile-scrollbar-thumb-inverted-small-hover-color;
      }
    }
  }

  &.color-alternative {
    --tile-background-color: @tile-alternative-background-color;
    color: @tile-alternative-color;

    & > .form-field {
      & > label {
        color: @tile-alternative-label-color;
      }

      & .app-link,
      & a {
        color: @tile-alternative-link-color;

        &:hover {
          color: @tile-alternative-link-hover-color;
        }

        &:active {
          color: @tile-alternative-link-active-color;
        }
      }
    }
  }

  &.inverted.color-alternative {
    --tile-background-color: @tile-alternative-inverted-background-color;
    color: @tile-alternative-inverted-color;

    & ::-moz-selection {
      #scout.text-selection();
    }

    & ::selection {
      #scout.text-selection();
    }

    & > .form-field {
      & > label {
        color: @tile-alternative-inverted-label-color;
      }

      & .app-link,
      & a {
        color: @tile-alternative-inverted-color;

        &:hover {
          color: @tile-alternative-inverted-link-hover-color;
        }

        &:active {
          color: @tile-alternative-inverted-link-active-color;
        }
      }

      &.has-menus:not(.has-tooltip):not(.has-error) > .status {
        &:hover::before {
          background-color: @tile-alternative-inverted-status-hover-background-color;
        }

        &:active::before,
        &.selected::before {
          background-color: @tile-alternative-inverted-status-active-background-color;
        }
      }
    }
  }

  &.selected:not(.dragged):not(.resizing) {
    --box-shadow-1-spread: @dashboard-tile-selected-border-width;
    --box-shadow-1-color: @dashboard-tile-default-selected-border-color;

    &.inverted {
      --box-shadow-1-spread: @dashboard-tile-inverted-selected-border-width;
      --box-shadow-1-color: @dashboard-tile-default-inverted-selected-border-color;
    }

    &.color-alternative {
      --box-shadow-1-color: @dashboard-tile-alternative-selected-border-color;
    }

    &.inverted.color-alternative {
      --box-shadow-1-color: @dashboard-tile-alternative-inverted-selected-border-color;
    }
  }

  &.dragged-clone > .form-field {
    // Disable interaction with elements on the clone while dragging
    pointer-events: none;
  }
}

/*
 Mixing that can be used to reduce the horizontal padding.
 To ensure the label is aligned with the label from other tiles the h-padding of the label is increased.
 */
.dashboard-tile-small-horizontal-padding(@padding-x: @tile-field-compact-padding-x, @small-padding-x: @tile-field-small-compact-padding-x) {
  padding-left: @small-padding-x;
  padding-right: @small-padding-x;

  & > label {
    padding-left: @padding-x - @small-padding-x;
    padding-right: @padding-x - @small-padding-x;
  }
}