@eclipse-scout/core/src/form/fields/wizard/WizardProgressField.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
 */
.wizard-steps {
  overflow: hidden;
  margin-left: @mandatory-indicator-width;
  margin-right: 0;
}

.wizard-steps-body {
  display: flex;
  align-items: center;
  height: @wizard-steps-height;
  overflow: hidden;
  white-space: nowrap; /* Allows the last wizard-step to be 100% without line break */
  border-bottom: @wizard-steps-border-width solid @border-color;
  position: relative;
}

.wizard-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: @wizard-step-padding-x;
  padding-right: @wizard-step-padding-x;

  & > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: @wizard-step-icon-size;
    height: @wizard-step-icon-size;
    border: 1px solid @wizard-step-icon-border-color;
    border-radius: 50%;
    margin-right: @wizard-step-icon-margin-right;
    font-size: @font-size-small;

    & > .font-icon {
      font-size: 14px;
    }
  }

  & > .text {
    & > .title {
      #scout.overflow-ellipsis-nowrap();

      &::before {
        #scout.bold-text-enlarger();
      }
    }

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

  &.first {
    padding-left: 0;
  }

  &.last {
    padding-right: 0;
  }

  &.action-enabled {
    cursor: pointer;
    color: @link-color;

    &:hover {
      & > .icon {
        color: @hover-color;
        background-color: @hover-background-color;
      }

      & > .text > .title {
        color: @hover-color;
      }
    }

    &:active, &.active {
      & > .icon {
        background-color: @active-background-color;
      }
    }
  }

  &.finished {
    & > .icon {
      color: @wizard-step-finished-color;
      background-color: @wizard-step-finished-background-color;
      border-color: @wizard-step-finished-background-color;
    }

    &.action-enabled {
      &:hover > .icon {
        color: @wizard-step-finished-color;
        background-color: darken(@wizard-step-finished-background-color, 6%);
        border-color: darken(@wizard-step-finished-background-color, 6%);
      }

      &:active > .icon,
      &.active > .icon {
        color: @wizard-step-finished-color;
        background-color: darken(@wizard-step-finished-background-color, 13%);
        border-color: darken(@wizard-step-finished-background-color, 13%);
      }
    }
  }

  &.selected {
    & > .icon {
      color: @wizard-step-selected-icon-color;
      background-color: @wizard-step-selected-icon-background-color;
      border-color: @wizard-step-selected-icon-background-color;
      font-weight: bold;
    }

    & > .text > .title {
      font-weight: @title-font-weight;
    }
  }

  &.disabled {
    & > .icon {
      background-color: @wizard-step-disabled-background-color;
      color: @wizard-step-disabled-color;
      border-color: @wizard-step-disabled-border-color;
    }

    & > .text > .title,
    & > .text > .sub-title {
      color: @wizard-step-disabled-color;
    }
  }
}

.wizard-steps > .scrollbar {
  #scout.scrollbar-x-padding(6px, 4px);
}

.wizard-step-separator {
  height: 1px;
  width: 40px;
  background-color: @border-color;
  flex-shrink: 0;
  flex-grow: 0;
}

.wizard-steps.compact {
  & > .wizard-steps-body {
    height: @wizard-steps-compact-height;

    & > .wizard-step-separator {
      width: 20px;
    }
  }
}