@eclipse-scout/core/src/modeselector/Mode.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
 */
.mode {
  --padding-x: @mode-padding-x;
  --padding-y: @mode-padding-y;
  --border-width: @mode-border-width;

  border: var(--border-width) solid @control-border-color;
  border-radius: 0;
  flex: 1 1 0;
  padding: var(--padding-y) var(--padding-x);
  #scout.overflow-ellipsis();

  &.first {
    border-radius: @button-border-radius 0 0 @button-border-radius;
  }

  &.last {
    border-radius: 0 @button-border-radius @button-border-radius 0;
  }

  &.first.last {
    border-radius: @button-border-radius;
  }

  &:not(.last):not(.selected) {
    border-right: none;
    padding-right: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
  }

  &.after-selected {
    border-left: none;
    padding-left: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
  }

  // override button (the selected mode cannot be clicked. therefore do not show hover and active colors)
  &.selected {
    color: @selected-color;
    cursor: default;

    &:hover {
      background-color: @selected-background-color;
      border-color: @selected-background-color;
    }

    &:active {
      background-color: @selected-background-color;
      border-color: @selected-background-color;
    }

    &.disabled {
      background-color: @mode-selected-background-disabled-color;
      border-color: @mode-selected-background-disabled-color;
    }
  }

  & > .icon {
    padding: 0; // remove padding from button

    &.with-label {
      margin-right: 8px;
    }
  }

  &:focus {
    box-shadow: none;

    &.keyboard-navigation {
      #scout.focus-inset-box-shadow();
    }
  }
}

.mode-selector.alternative {

  & > .mode {
    --border-width: 0px;

    color: @mode-color;
    background-color: transparent;
    border-radius: @button-border-radius;

    &:hover {
      background-color: @mode-alternative-hover-background-color;
    }

    &:active {
      background-color: @mode-alternative-active-background-color;
    }

    &.selected {
      color: @button-color;
      transition: color 500ms ease;

      &:hover {
        background-color: transparent;
      }

      &.disabled {
        background-color: @mode-alternative-selected-background-disabled-color;
      }
    }

    &.mode-selector-dragging {
      // do not show animations and hover-effects during drag
      background-color: transparent;
      transition: unset;
    }

    &.disabled {
      color: @button-disabled-color;
      background-color: transparent;
      cursor: default;
    }
  }
}

.dense .mode-selector {
  & > .mode {
    --padding-x: @mode-padding-dense-x;
    --padding-y: @mode-padding-dense-y;
  }
}