src/app/shared/date-control/component/date-control.component.scss

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

@import "src/styles/openk.styles";

:host {
  display: inline-flex;
  position: relative;
  font-size: 0.875em;
}

.container {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.calendar-icon {
  @include user-select-mixin(none);

  display: inline-flex;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: initial;
  padding: 0 0.3em;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  margin: auto 0;
  color: get-color($openk-default-palette, 800);
}

.calendar-icon-open {
  color: get-color($openk-info-palette, A300);
}

.calendar-control-input {
  width: 100%;
  height: 100%;
  font-size: 1em;
  padding-right: 1.5em;
}

.calendar-control-input-opened-top {
  @include rounded-border-mixin($top-right: 0);
}

.calendar-control-input-opened-bottom {
  @include rounded-border-mixin($bottom-right: 0);
}

.calendar-control-day {
  @include rounded-border-mixin();

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 150ms ease-in-out;

  &.calendar-control-day-today {
    background: $openk-background;
    border-color: $openk-form-border;
  }

  &:hover:not(.calendar-control-day-disabled),
  &:focus:not(.calendar-control-day-disabled) {
    background: $openk-background-highlight;
    border-color: $openk-form-border;
  }

  &:active:not(.calendar-control-day-disabled),
  &.calendar-control-day-selected:not(.calendar-control-day-disabled),
  &.calendar-control-day-selected {
    border: 1px solid get-color($openk-info-palette);
    background-color: get-color($openk-info-palette);
    color: get-color($openk-info-palette, 500, contrast);
  }

}

.calendar-control-day-disabled {
  cursor: unset;
}