eclipse-scout-core/src/calendar/YearPanel.less

/*
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.year-panel-container {
  display: inline-block;
  vertical-align: top;
  width: 0;
  overflow: hidden;
}

.year-panel-title {
  position: relative;
  margin-left: 10px;
  width: calc(~'100% - 40px');
  height: @calendar-title-height;
  white-space: nowrap;

  & > .year-title-item {
    display: inline-block;
    padding-right: 15px;
    line-height: @calendar-title-height;
    color: @year-panel-title-item-color;
    cursor: pointer;
    font-weight: bold;

    &.selected {
      color: @text-color;
      cursor: default;
    }

    &:hover {
      color: @text-color;
    }
  }

  &::after {
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: -1px;
    content: '';
    background-color: @border-color;
  }
}

.year-panel-list {
  position: relative;
  width: 180px;
  margin-left: 10px;
  height: calc(~'100% - ' @calendar-title-height);
  overflow: hidden;

  & > .year-month {
    margin-top: 18px;
    margin-bottom: 8px;
    position: relative;
    padding-top: 20px;
    padding-right: 15px;
    float: left;
    width: 180px;

    & > .year-day {
      position: relative;
      float: left;
      width: 23px;
      text-align: right;
      color: @text-color;
      height: @year-panel-day-height;
      padding-right: 5px;
      line-height: @year-panel-day-line-height;
      cursor: pointer;

      &.year-hover {
        background-color: @year-panel-range-hover-background-color;
      }

      &.year-range {
        background-color: @year-panel-range-background-color;
      }

      &.year-range-day {
        background-color: @year-panel-range-day-background-color;
        color: @active-inverted-color;
      }

      &.year-hover-day {
        background-color: @year-panel-range-day-background-color;
        color: @active-inverted-color;
      }
    }
  }

  & > .year-month::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    content: attr(data-title);
    font-weight: bold;
    color: @text-color;
  }

  & > .year-month::after {
    position: absolute;
    bottom: 0;
    right: 19px;
    height: calc(~'100% - 20px');
    width: 26%;
    content: '';
    background-color: @year-panel-weekend-background-color;
    opacity: 0.10;
    pointer-events: none;
  }
}