@eclipse-scout/core/src/form/fields/sliderfield/SliderField.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
 */

.slider-field {
  --slider-margin: 20px;
  --slider-flex: 80%;
  --slider-min-width: 50px;
  --input-min-width: 75px;
  --input-flex: 20%;
  --value-label-min-width: 50px;
  --value-label-padding: 6px;

  &.has-error > .field > .slider {
    --track-color: @error-color;
  }

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

    & > .slider {
      flex: var(--slider-flex);
      min-width: var(--slider-min-width);
      margin-right: var(--slider-margin);
    }

    & > input {
      flex: var(--input-flex);
      min-width: var(--input-min-width);
      text-align: right;
    }

    & > .value-label {
      flex: none;
      min-width: var(--value-label-min-width);
      display: inline-block;
      color: @control-color;
      align-content: center;
      text-align: center;
      padding-left: var(--value-label-padding);
      padding-top: var(--borderless-field-padding-y);
      padding-bottom: var(--borderless-field-padding-y);
    }

    // Added by SliderFieldLayout when field is to narrow to fit all elements
    &.compact {

      &.value-editable {
        // Hide slider, use full width for input field

        & > .slider {
          display: none;
        }

        & > input {
          min-width: 0;
        }
      }

      &:not(.value-editable) {
        // Remove min-width constraints but continue to show both elements

        & > .slider,
        & > .value-label {
          min-width: 0;
        }
      }
    }
  }
}