htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/input/_calendar.scss

// core
.p-calendar {
  display: inline-flex;
  max-width: 100%;
}

.p-calendar .p-inputtext {
  flex: 1 1 auto;
  width: 1%;
}

.p-calendar-w-btn .p-inputtext {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p-calendar-w-btn .p-datepicker-trigger {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.p-calendar .p-datepicker-trigger-icon {
  cursor: pointer;
}

/* Fluid */
.p-fluid .p-calendar {
  display: flex;
}

.p-fluid .p-calendar .p-inputtext {
  width: 1%;
}

/* Datepicker */
.p-calendar .p-datepicker {
  min-width: 100%;
}

.p-datepicker {
  width: auto;
}

.p-datepicker-inline {
  display: inline-block;
  overflow-x: auto;
}

/* Header */
.p-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-datepicker-header .p-datepicker-title {
  margin: 0 auto;
}

.p-datepicker-prev,
.p-datepicker-next {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
  display: flex;
}

.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
  flex: 1 1 auto;
}

/* DatePicker Table */
.p-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

.p-datepicker td > span {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Month Picker */
.p-monthpicker-month {
  width: 33.3%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

/* Year Picker */
.p-yearpicker-year {
  width: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

/*  Button Bar */
.p-datepicker-buttonbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Time Picker */
.p-timepicker {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-timepicker button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.p-timepicker > div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
  min-width: 80vw;
}

// theme
.p-calendar {
  &.p-invalid.p-component > .p-inputtext {
    @include invalid-input();
  }

  &:not(.p-calendar-disabled).p-focus > .p-inputtext {
    @include focused-input();
  }
}

.p-datepicker {
  padding: $calendarPadding;
  background: $calendarInlineBg;
  color: $calendarTextColor;
  border: $calendarBorder;
  border-radius: $borderRadius;

  &:not(.p-datepicker-inline) {
    background: $calendarBg;
    border: $calendarOverlayBorder;
    box-shadow: $inputOverlayShadow;

    .p-datepicker-header {
      background: $calendarHeaderBg;
    }
  }

  .p-datepicker-header {
    padding: $calendarHeaderPadding;
    color: $calendarHeaderTextColor;
    background: $calendarInlineHeaderBg;
    font-weight: $calendarHeaderFontWeight;
    margin: $inputListHeaderMargin;
    border-bottom: $calendarHeaderBorder;
    border-top-right-radius: $borderRadius;
    border-top-left-radius: $borderRadius;

    .p-datepicker-prev,
    .p-datepicker-next {
      @include action-icon();
    }

    .p-datepicker-title {
      line-height: $actionIconHeight;

      .p-datepicker-year,
      .p-datepicker-month {
        color: $calendarHeaderTextColor;
        transition: $actionIconTransition;
        font-weight: $calendarHeaderFontWeight;
        padding: $calendarHeaderCellPadding;

        &:enabled:hover {
          color: $calendarMonthYearHeaderHoverTextColor;
        }
      }

      .p-datepicker-month {
        margin-right: $inlineSpacing;
      }
    }
  }

  table {
    font-size: $fontSize;
    margin: $calendarTableMargin;

    th {
      padding: $calendarHeaderCellPadding;

      > span {
        width: $calendarCellDateWidth;
        height: $calendarCellDateHeight;
      }
    }

    td {
      padding: $calendarCellDatePadding;

      > span {
        width: $calendarCellDateWidth;
        height: $calendarCellDateHeight;
        border-radius: $calendarCellDateBorderRadius;
        transition: $listItemTransition;
        border: $calendarCellDateBorder;
        outline-color: transparent;

        &.p-highlight {
          color: $highlightTextColor;
          background: $highlightBg;
        }

        &:focus {
          @include focused();
        }
      }

      &.p-datepicker-today {
        > span {
          background: $calendarCellDateTodayBg;
          color: $calendarCellDateTodayTextColor;
          border-color: $calendarCellDateTodayBorderColor;

          &.p-highlight {
            color: $highlightTextColor;
            background: $highlightBg;
          }
        }
      }
    }
  }

  .p-datepicker-buttonbar {
    padding: $calendarButtonBarPadding;
    border-top: $divider;

    .p-button {
      width: auto;
    }
  }

  .p-timepicker {
    border-top: $divider;
    padding: $calendarTimePickerPadding;

    button {
      @include action-icon();

      &:last-child {
        margin-top: 0.2em;
      }
    }

    span {
      font-size: $calendarTimePickerTimeFontSize;
    }

    > div {
      padding: $calendarTimePickerElementPadding;
    }
  }

  &.p-datepicker-timeonly {
    .p-timepicker {
      border-top: 0 none;
    }
  }

  .p-monthpicker {
    margin: $calendarTableMargin;

    .p-monthpicker-month {
      padding: $calendarCellDatePadding;
      transition: $listItemTransition;
      border-radius: $borderRadius;

      &.p-highlight {
        color: $highlightTextColor;
        background: $highlightBg;
      }
    }
  }

  .p-yearpicker {
    margin: $calendarTableMargin;

    .p-yearpicker-year {
      padding: $calendarCellDatePadding;
      transition: $listItemTransition;
      border-radius: $borderRadius;

      &.p-highlight {
        color: $highlightTextColor;
        background: $highlightBg;
      }
    }
  }

  &.p-datepicker-multiple-month {
    .p-datepicker-group {
      border-left: $divider;
      padding-right: $calendarPadding;
      padding-left: $calendarPadding;
      padding-top: 0;
      padding-bottom: 0;

      &:first-child {
        padding-left: 0;
        border-left: 0 none;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }

  &.p-datepicker-mobile {
    table {
      th,
      td {
        padding: $calendarCellDatePaddingSM;
      }
    }
  }

  &:not(.p-disabled) {
    table {
      td {
        span:not(.p-highlight):not(.p-disabled) {
          outline-color: transparent;

          &:hover {
            background: $calendarCellDateHoverBg;
          }

          &:focus {
            @include focused();
          }
        }
      }
    }

    .p-monthpicker {
      .p-monthpicker-month {
        &:not(.p-disabled) {
          outline-color: transparent;

          &:not(.p-highlight):hover {
            background: $calendarCellDateHoverBg;
          }

          &:focus {
            @include focused();
          }
        }
      }
    }

    .p-yearpicker {
      .p-yearpicker-year {
        &:not(.p-disabled) {
          outline-color: transparent;

          &:not(.p-highlight):hover {
            background: $calendarCellDateHoverBg;
          }

          &:focus {
            @include focused();
          }
        }
      }
    }
  }
}