@eclipse-scout/core/src/desktop/desktoptab/DesktopTab.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
 */
.desktop-tab.simple-tab {
  width: @desktop-tab-width;
  min-width: @desktop-tab-min-width;
  margin: @desktop-tab-margin-top @desktop-tab-margin-right 0 0;
  padding: @desktop-tab-padding @desktop-tab-padding 0 @desktop-tab-padding-left;
  border-radius: @desktop-tab-border-radius @desktop-tab-border-radius 0 0;
  border: @desktop-tab-border-width solid @desktop-tab-border-color;
  border-bottom-width: 0;
  background-color: @desktop-tab-background-color;

  & > .title-line {
    .closable& {
      margin-right: 25px;
    }

    & > .icon-container {
      color: @desktop-tab-sub-title-color;
    }

    & > .title {
      font-size: @font-size-plus;
    }

    & > .status-container {
      color: @desktop-tab-status-color;

      & > .save-needer {
        color: inherit;
      }
    }
  }

  & > .sub-title {
    color: @desktop-tab-sub-title-color;
    font-size: @font-size-smaller;
    letter-spacing: @sub-title-letter-spacing;
    padding-top: 1px;
  }

  & > .closer {
    color: @desktop-tab-sub-title-color;
    padding: 4px;
    margin: 7px;
    border-radius: @border-radius-medium;

    & > .key-box {
      top: 0;
      right: 0;
    }

    &:hover {
      color: @desktop-header-color;
      background-color: @desktop-tab-closer-hover-background-color;
    }

    &:active, &.active {
      background-color: @desktop-tab-closer-active-background-color;
    }
  }

  & > .key-box {
    bottom: @desktop-tab-key-box-bottom;
    margin-left: 4px;
  }

  &.animate-modality-highlight {
    .animation-flash-desktop-tab(flash-desktop-tab);
  }

  &:hover,
  &:active {
    background-color: @desktop-tab-hover-background-color;
    border-color: transparent;

    & > .title-line > .title {
      color: inherit;
    }
  }

  &.glasspane-parent {
    // Modality highlight does not work with pointer-events: none because mouse down is ignored on the glass pane completely by the browser
    // -> we need to disable the hover effect manually
    pointer-events: unset;

    &:not(.disabled):not(.selected):hover {
      background-color: @desktop-tab-background-color;
      border-color: @desktop-tab-border-color;
    }

    &:not(.selected):hover > .closer {
      display: none;
    }
  }

  &.disabled {
    background-color: transparent;

    & > .title-line > .title {
      color: @desktop-header-disabled-color;
    }
  }

  &.selected {
    background-color: @simple-tab-selected-background-color;
    border-color: transparent;

    & > .title-line {
      & > .icon-container {
        color: @status-info-color;
      }

      & > .title {
        color: @desktop-tab-selected-color;
        font-weight: @font-weight-bold;
      }

      & > .status-container {
        color: @status-info-color;

        & > .save-needer {
          color: @desktop-tab-selected-save-needer-color;
        }
      }
    }

    & > .sub-title {
      color: @desktop-tab-selected-sub-title-color;
    }

    & > .closer {
      color: @closer-color;

      &:hover {
        background-color: @hover-background-color;
        color: @closer-hover-color;
      }

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

    & > .edge {
      #scout.inverted-bottom-round-edge(@border-radius: @desktop-tab-border-radius, @color: @simple-tab-selected-background-color);

      &.right {
        z-index: 1; // lay over right tab
      }
    }

    &.first > .edge.left {
      display: none;
    }

    &.animate-modality-highlight {
      .animation-flash-desktop-tab(flash-desktop-tab-selected);

      & > .edge {
        .animation-flash-desktop-tab(flash-desktop-tab-selected-edge);
      }
    }
  }
}

.animation-flash-desktop-tab(@keyframes-name) {
  #scout.animation-name(@keyframes-name);
  #scout.animation-duration(0.4s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(linear);
}

.keyframes-flash-desktop-tab() {
  0% {
    background-color: @desktop-tab-background-color;
  }
  25% {
    background-color: @desktop-tab-flash-background-color;
  }
  50% {
    background-color: @desktop-tab-background-color;
  }
  75% {
    background-color: @desktop-tab-flash-background-color;
  }
  100% {
    background-color: @desktop-tab-background-color;
  }
}

@-webkit-keyframes flash-desktop-tab {
  .keyframes-flash-desktop-tab();
}

@keyframes flash-desktop-tab {
  .keyframes-flash-desktop-tab();
}

.keyframes-flash-desktop-tab-selected() {
  0% {
    background-color: @simple-tab-selected-background-color;
  }
  25% {
    background-color: @desktop-tab-selected-flash-background-color;
  }
  50% {
    background-color: @simple-tab-selected-background-color;
  }
  75% {
    background-color: @desktop-tab-selected-flash-background-color;
  }
  100% {
    background-color: @simple-tab-selected-background-color;
  }
}

@-webkit-keyframes flash-desktop-tab-selected {
  .keyframes-flash-desktop-tab-selected();
}

@keyframes flash-desktop-tab-selected {
  .keyframes-flash-desktop-tab-selected();
}

.keyframes-flash-desktop-tab-selected-edge() {
  0% {
    border-color: @simple-tab-selected-background-color;
  }
  25% {
    border-color: @desktop-tab-selected-flash-background-color;
  }
  50% {
    border-color: @simple-tab-selected-background-color;
  }
  75% {
    border-color: @desktop-tab-selected-flash-background-color;
  }
  100% {
    border-color: @simple-tab-selected-background-color;
  }
}

@-webkit-keyframes flash-desktop-tab-selected-edge {
  .keyframes-flash-desktop-tab-selected-edge();
}

@keyframes flash-desktop-tab-selected-edge {
  .keyframes-flash-desktop-tab-selected-edge();
}