@eclipse-scout/core/src/form/fields/smartfield/SmartField.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 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
 */
.dropdown-field {

  & > .icon {
    cursor: pointer;

    &::before {
      content: @icon-angle-down-bold;
      font-size: 16px;
    }
  }

  &.popup-open > .icon::before {
    content: @icon-angle-up-bold;
  }

  & > .field {
    cursor: pointer;

    &.disabled {
      cursor: default;
    }
  }
}

.proposal-field {

  & > .icon::before {
    content: @icon-pencil;
  }
}

.smart-field {

  & > .icon::before,
  & > .field > .icon::before {
    content: @icon-search;
  }

  /* Multiline SmartField */

  & > .field > .multiline-input {
    border-radius: @control-border-radius @control-border-radius 0 0;
    width: 100%;
    padding-left: @text-field-padding-x;

    &:focus {
      border-bottom-right-radius: @control-border-radius;
      border-bottom-left-radius: @control-border-radius;
    }

    &.alternative {
      border-bottom-color: @text-field-alternative-border-color;
      padding-left: @text-field-alternative-padding-left;
      padding-right: @text-field-alternative-padding-right;

      &:focus {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-color: @focus-color;
      }

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

    &.read-only {
      border-bottom-color: @border-color;

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

  /* DIV below the smart field containing the additional lines */

  & > .field > .multiline-lines {
    background-color: @control-background-color;
    border: solid 1px @control-border-color;
    border-radius: 0 0 @control-border-radius @control-border-radius;
    border-top: none;
    padding: 3px @text-field-padding-x;
    #scout.overflow-ellipsis-nowrap();
    #scout.user-select(text);

    &.disabled {
      background-color: @control-disabled-background-color;
    }
  }

  &.alternative > .field > .multiline-lines,
  &.read-only > .field > .multiline-lines {
    border: 0;
    padding-top: 6px;

    &.disabled {
      background-color: transparent;
    }
  }

  &.alternative > .field > .multiline-lines {
    padding-left: @text-field-alternative-padding-left;
    padding-right: @text-field-alternative-padding-right;
  }

  &.disabled > .field > .multiline-lines {
    color: @disabled-color;

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

.dropdown-field,
.proposal-field,
.smart-field {
  & > .input-field[placeholder]:empty::before,
  & > .multiline > .input-field[placeholder]:empty::before {
    #scout.fake-placeholder();
  }

  & > .input-field[placeholder].disabled:empty::before,
  & > .multiline > .input-field[placeholder].disabled:empty::before {
    #scout.placeholder-disabled();
  }

  &.loading {
    & > .icon {
      #scout.animation(pulsate-in-out 2.2s ease-in-out infinite);
    }
  }

  & > .field {

    &.halign-left,
    &.halign-left > .multiline-input {
      text-align: left;
    }

    &.halign-center,
    &.halign-center > .multiline-input {
      text-align: center;
    }

    &.halign-right,
    &.halign-right > .multiline-input {
      text-align: right;
    }
  }

  &.clearable-always.has-text:not(.loading):not(.disabled):not(.compact),
  &.clearable-focused.has-text.focused:not(.loading):not(.disabled):not(.compact) {

    &.halign-right {

      & > input,
      & > .input-field,
      & > .field > input,
      & > .field > .input-field {
        padding-left: 0;
        padding-right: @text-field-icon-outer-width;

        &.alternative {
          padding-left: @text-field-alternative-padding-left;
          padding-right: @text-field-alternative-icon-outer-width;
        }

        &.cell-editor-field {
          padding-right: @text-field-icon-outer-width;
        }
      }
    }
  }

  &.halign-right:not(.disabled) > .field > .multiline-lines {
    padding-right: @text-field-icon-outer-width;
  }

  &.alternative.halign-right:not(.disabled) > .field > .multiline-lines {
    padding-right: @text-field-alternative-icon-outer-width;
  }

  &.alternative.halign-right {
    & > .clear-icon,
    & > .field > .clear-icon {
      margin-right: 0;
      margin-left: @text-field-icon-margin-x;
    }
  }
}


.smart-field-touch-popup > .body {
  & > .touch-popup-field {
    & > .field {
      & > .multiline-input {
        border-radius: @control-border-radius @control-border-radius;
      }

      & > .multiline-lines {
        display: none;
      }
    }
  }

  & > .touch-popup-widget-container .table-data {
    padding: 2px @touch-popup-padding-x @touch-popup-padding-x;

    & > .table-row.first {
      border-top-color: transparent;
    }
  }
}

.dropdown-field-popup,
.smart-field-popup,
.proposal-field-popup {
  #scout.chooser-popup();
}

.proposal-chooser {

  & > .active-filter {
    position: absolute;
  }

  & > .status {
    display: flex;
    align-items: center;
  }

  & > .active-filter,
  & > .status {
    padding: 0 @proposal-chooser-padding-x;
    background-color: @proposal-chooser-status-background-color;
    border-top: solid 1px @border-color;
    height: @logical-grid-row-height;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &.empty > .active-filter,
  &.empty > .status {
    border-top: 0;
  }

  & > .table {
    & > .table-header {
      padding-left: @proposal-chooser-padding-x;
      padding-right: @proposal-chooser-padding-x;
    }

    & > .table-data {
      padding: @proposal-chooser-padding-y @proposal-chooser-padding-x;

      & > .table-row {
        &.first {
          border-top: 1px solid @table-row-border-color;

          &.selected::after {
            // If header is invisible, selection of first row starts at 0
            // Since we now have a top border we can move it to -1px again to cover the border
            top: -1px;
          }
        }

        &.inactive {
          font-style: italic;

          & > .table-cell.last > .text::after {
            content: ' (' var(--inactive-lookup-row-suffix-text) ')';
          }
        }
      }

      & > .scrollbar.y-axis > .scrollbar-thumb > .scrollbar-thumb-handle {
        margin-left: 1px;
      }
    }
  }

  & > .tree {
    & > .tree-data {
      padding: @proposal-chooser-padding-y @proposal-chooser-padding-x;

      & > .tree-node.inactive,
      & > .animation-wrapper > .tree-node.inactive {
        font-style: italic;

        & > .text::after {
          content: ' (' var(--inactive-lookup-row-suffix-text) ')';
        }
      }
    }
  }
}

.status > .ellipsis {
  padding-left: 3px;
}

.animate-dot {
  position: relative;
  #scout.animation-name(animateDot);
  #scout.animation-duration(1650ms);
  #scout.animation-iteration-count(infinite);
}

.delay-0 {
  #scout.animation-delay(0ms);
}

.delay-1 {
  #scout.animation-delay(200ms);
}

.delay-2 {
  #scout.animation-delay(400ms);
}