src/theme/primeng/_datepicker.theme.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 "openk.styles";

.openk-datepicker {
  display: inline-block;
  outline: none;

  .ui-calendar {
    position: initial;
  }

  .ui-datepicker {
    @include user-select-mixin(none);

    width: 100vw;
    max-width: 20em !important;
    min-width: 17.5em !important;
    color: get-color($openk-default-palette, A400, contrast);
    background: get-color($openk-default-palette);
    border: 1px solid get-color($openk-info-palette, A300);
    box-shadow: 0 0 2px get-color($openk-info-palette, A300);
  }

  .ui-state-default {
    outline: none;
    padding: 0;
    margin: 1px;
  }

  .ui-state-disabled {
    opacity: 0.33;
  }

  .ui-datepicker-next,
  .ui-datepicker-prev {
    @include user-select-mixin(none);
    @include rounded-border-mixin();

    display: inline-flex;
    justify-content: center;
    align-items: center;
    outline: none;
    background: get-color($openk-default-palette);
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    box-sizing: border-box;
    cursor: pointer;

    &:hover,
    &:focus,
    &:active {
      background: $openk-background;
      color: get-color($openk-info-palette);
    }

    &:active {
      background: $openk-background-highlight;
      color: get-color($openk-info-palette);
    }

    &::before {
      @include material-icon-mixin();
    }
  }

  .ui-datepicker-prev::before {
    padding-right: 1px;
    content: "chevron_left";
  }

  .ui-datepicker-next::before {
    padding-left: 1px;
    content: "chevron_right";
  }

}