@eclipse-scout/core/src/menu/ComboMenu.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
 */

.combo-menu {
  padding: 0;
  cursor: default;
  align-items: stretch;

  &:active, &.active, &:hover {
    background-color: transparent;
  }

  & > .menu-item {
    &:not(.first) {
      margin-left: 3px;

      &::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 7px;
        height: calc(100% - 14px);
        width: 1px;
        background-color: @border-color;
      }
    }

    &:focus::before {
      display: none;
    }

    &:not(.disabled):hover,
    &.selected {
      &::before,
      & ~ .menu-item::before {
        display: none;
      }
    }
  }

  &.loading > .menu-item {
    & > .text,
    & > .icon,
    & > .submenu-icon,
    &::before {
      opacity: 0;
      transition: opacity @loading-fade-duration;
    }
  }
}

.combo-menu.menu-button {
  border: 0;

  & > .menu-item {
    border: 1px solid @button-border-color;
    flex-grow: 1;

    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
      flex-grow: 0;
    }

    &:not(.last) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 0;
    }

    &:not(.first) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
      margin-left: 0;
    }

    .disabled& {
      border-color: @button-disabled-color;
    }

    &:focus {
      z-index: 1; // Allows box-shadow to draw over the right menu-item
    }
  }

  &.default {
    & > .menu-item {
      .button.default();

      &::before {
        background-color: @default-combo-menu-separator-color;
      }

      &.selected {
        background-color: @default-button-selected-background-color;
        border-color: @default-button-selected-background-color;
      }

      &.disabled {
        color: @disabled-inverted-color;

        &:hover, &.active, &:active, &.selected {
          background-color: @default-button-background-color;
          border-color: @default-button-background-color;
        }
      }
    }
  }
}

.context-menu > .combo-menu {
  padding: 0;

  & > .menu-item {
    color: @context-menu-item-color;
    padding: @context-menu-item-padding-y @context-menu-item-padding-right @context-menu-item-padding-y @context-menu-item-padding-left;
    flex-grow: 1;
    justify-content: start;
    border-radius: 0;

    & > .font-icon {
      color: @context-menu-item-icon-color;
    }

    &.menu-textandicon > .icon {
      margin-right: @context-menu-item-icon-margin-right;
    }

    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
      flex-grow: 0;
    }

    &.disabled {
      color: @menu-item-disabled-color;

      & > .font-icon {
        color: @menu-item-disabled-color;
      }
    }
  }
}