eclipse-scout-core/src/datepicker/DatePicker.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
 */
.date-picker-popup {
  position: absolute;
  width: 252px;
  border: 1px solid @control-popup-border-color;
  border-radius: @control-popup-border-radius;
  #scout.focus-border();
  overflow: hidden;

  &.alternative {
    #scout.drop-shadow();
    border-radius: @control-alternative-border-radius;
  }
}

.date-picker {
  position: relative;
  background-color: @date-picker-background-color;
}

.date-picker-scrollable {
  position: relative;
  width: 100%;
}

.date-picker-month-box {
  position: relative;
  display: inline-block;
  width: 100%;
}

.date-picker-month {
  display: table;
  width: 100%;
  padding: 0 6px 3px 6px;
}

.date-picker-weekdays {
  display: table-row;
}

.date-picker-weekday {
  display: table-cell;
  height: @date-picker-header-height;
  text-align: center;
  vertical-align: middle;
}

.date-picker-week {
  display: table-row;
}

.date-picker-day {
  display: table-cell;
  text-align: center;
  vertical-align: middle;

  .date-picker.touch & {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  & > .text {
    display: inline-block;
    padding: @date-picker-day-padding-y @date-picker-day-padding-x;
    margin-top: 2px;
    border-radius: 50%;
    border: 1px solid transparent;
  }

  &.ten > .text {
    /* increase padding a bit to center days between 10 and 19 nicer */
    padding-right: @date-picker-day-padding-x + 1px;
  }

  /* Hover effect is disabled on touch devices because the hover effect does not vanish on touch end which is annoying especially when swiping. */

  &:active:not(.disabled),
  .date-picker:not(.touch) &:hover:not(.disabled) {
    & > .text {
      border-color: @date-picker-day-hover-border-color;
      background-color: @date-picker-day-hover-background-color;
    }

    &.date-picker-now > .text {
      border-color: @date-picker-now-hover-border-color;
      background-color: @date-picker-now-hover-background-color;
    }

    &.selected {
      & > .text {
        background-color: @date-picker-day-hover-selected-background-color;
      }

      &.date-picker-now > .text {
        background-color: @date-picker-now-hover-selected-background-color;
      }
    }
  }

  &.date-picker-out {
    color: @date-picker-out-color;
  }

  &.date-picker-weekend {
    color: @date-picker-weekend-color;
  }

  &.date-picker-out-weekend {
    color: @date-picker-out-weekend-color;
  }

  &.date-picker-now {
    color: @date-picker-now-color;
    font-weight: bold;
  }

  &.preselected {
    & > .text {
      border-color: @date-picker-day-preselected-border-color;
      border-style: dashed;
    }

    &.date-picker-now > .text {
      border-color: @date-picker-now-preselected-border-color;
    }
  }

  &.selected {
    color: @date-picker-day-selected-color;

    & > .text {
      background-color: @date-picker-day-selected-background-color;
    }

    &.date-picker-now {
      color: @date-picker-now-selected-color;

      & > .text {
        background-color: @date-picker-now-selected-background-color;
      }
    }
  }

  /* Must be after other style definitions, because 'disabled' should overrule other definitions */

  &.disabled {
    color: @date-picker-day-disabled-color;
  }
}

.date-picker-header {
  line-height: @date-picker-header-height;
  height: @date-picker-header-height;
  padding: 0 10px;
  background-color: @date-picker-header-background-color;
  border-bottom: 1px solid @border-color;

  /* Additional space between navigation buttons on touch devices */

  &.touch {
    padding-left: 18px;
    padding-right: 18px;

    & > .date-picker-left-m {
      margin-left: 26px;
    }

    & > .date-picker-right-m {
      margin-right: 26px;
    }
  }
}

.date-picker-separator {
  position: absolute;
  top: @date-picker-header-height * 2 - 1px;
  left: 0;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid @border-color;
}

.date-picker-header-month {
  text-align: center;
  cursor: default;
  font-size: 13px;
  padding-top: @date-picker-header-month-padding-top;
}

.date-picker-left-y,
.date-picker-left-m,
.date-picker-right-y,
.date-picker-right-m {
  text-align: center;
  width: 22px;
  line-height: @date-picker-header-height;
  height: @date-picker-header-height;
  cursor: pointer;
  #scout.font-icon();
  font-size: 17px;

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

  &:active {
    color: @active-color;
  }
}

.date-picker-left-y,
.date-picker-left-m {
  float: left;
}

.date-picker-left-y::before {
  content: @icon-angle-double-left;
}

.date-picker-left-m::before {
  content: @icon-angle-left;
}

.date-picker-right-y,
.date-picker-right-m {
  float: right;
}

.date-picker-right-y::before {
  content: @icon-angle-double-right;
}

.date-picker-right-m::before {
  content: @icon-angle-right;
}

.touch-popup-widget-container {
  & > .date-picker {
    border: none;
  }
}