@eclipse-scout/core/src/timepicker/TimePicker.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
 */
.time-picker-popup {
  position: absolute;
  #scout.control-popup();
  overflow: hidden;
  max-height: 350px;
}

.time-picker-separator {
  position: absolute;
  top: 0;
  left: 46px;
  height: 100%;
  border-right: 1px @palette-gray-4 solid;
}

.time-picker {
  position: relative;
  background-color: @control-background-color;

  &.touch-only :not(.selected):not(.disabled):not(:active):hover {
    &,
    & > .cell {
      // Disable sticky hover effect on touch devices
      background-color: inherit;
    }
  }

  .touch-popup-widget-container > & {
    max-height: 300px;
    display: flex;
    justify-content: center;

    & > .day-table {
      padding: 0;

      & > .hour-row:first-child > .cell {
        margin-top: 0;
      }
    }
  }
}

.time-picker-touch-popup {
  max-width: 200px;

  & > .body > .touch-popup-widget-container > .time-picker-separator {
    left: 84px;
  }
}

.day-table {
  padding: 0 13px 0 3px;

  & > .hour-row {
    display: flex;

    &:hover > .hours,
    &:hover > .hours.preselected {
      background-color: @hover-background-color;
    }

    &:first-child > .cell {
      margin-top: 7px;
    }

    &:last-child > .cell {
      margin-bottom: 7px;
    }

    & > .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: @time-picker-cell-size;
      height: @time-picker-cell-size;
      margin: 2px;
      border-radius: @time-picker-cell-border-radius;
    }

    & > .hours {
      color: @time-picker-hours-color;
      margin: 2px 13px 2px 4px;

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

        & > .text {
          border-bottom: 2px @date-picker-now-color solid;
          margin-bottom: -2px;
          font-weight: @font-weight-bold;
        }
      }

      &.preselected {
        background-color: @time-picker-preselected-background-color;
      }

      &:hover + .minutes {
        background-color: @hover-background-color;

        &.selected {
          background-color: @time-picker-selected-background-color;
        }
      }

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

      &.selected {
        color: @item-selection-border-color;

        & > .text {
          font-weight: @font-weight-bold;
          border-bottom: 2px @selected-background-color solid;
          margin-bottom: -2px;
        }
      }
    }

    & > .minutes {

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

        & > .text {
          border-bottom: 2px @date-picker-now-color solid;
          margin-bottom: -2px;
          font-weight: @font-weight-bold;
        }
      }

      &.preselected {
        background-color: @time-picker-preselected-background-color;
      }

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

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

      &.selected {
        color: @time-picker-selected-color;
        background-color: @time-picker-selected-background-color;

        &.now > .text {
          border-color: @time-picker-now-selected-color;
        }
      }
    }
  }
}