@eclipse-scout/core/src/planner/Planner.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
 */
.planner-icon(@icon, @size) {
  #scout.font-icon();
  display: inline-block;
  position: relative;
  font-size: @size;
  line-height: 29px;
  width: 29px;
  content: @icon;
  color: @icon-color;
  text-align: center;
}

.planner {
  position: absolute;
  overflow: hidden;

  & > .menubar.bottom {
    position: absolute;
    bottom: 0;
  }
}

.planner-scale {
  position: absolute;
  right: 0;
  height: @planner-scale-height;
  border-bottom: 1px solid @border-color;
  width: 100%;
  /* for horizontal scrollbars */
  overflow: hidden;
  white-space: nowrap;

  & .scale-item {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 0 0 0 5px;
    // Ensure texts of scale items next to each other don't overlap
    // overflow-y needs to be visible for scale-item-lines
    overflow-x: clip;

    &.label-invisible {
      color: transparent;
    }
  }

  & > .timeline {
    display: inline-block;
    width: calc(~'100% - ' @planner-resource-title-width);

    & > .timeline-large {
      height: 50%;
      background-color: @planner-timeline-background-color;
      line-height: @planner-scale-height / 2;

      & > .scale-item > .planner-large-scale-item-line {
        height: @planner-scale-height;
      }
    }

    & > .timeline-small {
      height: 50%;
      line-height: @planner-scale-height / 2;

      & > .highlight {
        position: absolute;
        background-color: @item-selection-background-color;
        height: 50%;
      }
    }
  }
}

.planner-scale-title {
  height: 100%;
  float: left;
  #scout.overflow-ellipsis-nowrap();
  padding: 0 @resource-padding-x;
  font-size: 17px;
  color: @planner-resource-title-color;
  line-height: @planner-scale-height;
  width: @planner-resource-title-width;
}

.planner-grid {
  position: absolute;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.planner-resource {
  height: @planner-resource-minheight;
  width: 100%;
  border-bottom: 1px solid @border-color;

  & > .resource-title {
    line-height: @planner-resource-minheight;
    height: 100%;
    width: @planner-resource-title-width;
    padding: 0 @resource-padding-x;
    float: left;
    #scout.overflow-ellipsis-nowrap();
  }

  &.selected > .resource-title {
    background-color: @item-selection-background-color;
  }

  & > .resource-cells {
    position: relative;
    height: 100%;
    width: calc(~'100% - ' @planner-resource-title-width);
    float: left;

    & > .selector {
      position: absolute;
      border-top: 2px solid @item-selection-border-color;
      border-bottom: 2px solid @item-selection-border-color;
      z-index: 1; /* TODO [7.0] CRU/BSH/CGU Instead of assigning a z-index, find a better insertion point for the selector */
      top: 0;

      & > .selector-resize-left {
        background-color: @planner-selector-resize-background-color;
        border-left: 2px solid @item-selection-border-color;
        border-right: 2px solid @item-selection-border-color;
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        cursor: col-resize;
      }

      & > .selector-resize-right {
        background-color: @planner-selector-resize-background-color;
        border-left: 2px solid @item-selection-border-color;
        border-right: 2px solid @item-selection-border-color;
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;
        height: 100%;
        cursor: col-resize;
      }
    }
  }
}

.planner-activity {
  position: absolute;
  top: 1px;
  width: 0;
  color: @planner-activity-color;
  height: @planner-resource-minheight - 3px;
  line-height: @planner-resource-minheight - 3px;
  background-color: @palette-green-2;
  text-align: center;
  border: 1px solid @border-color;
  overflow: hidden;

  &.selected {
    outline: 2px solid @item-selection-border-color;
  }
}

.planner-activity-level {
  background-color: @planner-activity-level-background-color;
}

.planner-small-scale-item-line {
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0;
  background-color: @planner-small-scale-item-line-color;
  pointer-events: none;
}

.planner-large-scale-item-line {
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0;
  background-color: @planner-large-scale-item-line-color;
  pointer-events: none;
}