Subversion Repositories Integrator Subversion

body {
  .ui-datepicker {
    background: $inputContentPanelBg;
    border: $inputBorder;
    color: $inputContentPanelTextColor;
    padding: $calendarPadding;
    width: auto;
    border-radius: $borderRadius;

    .ui-datepicker-header {
      margin: 0;
      padding: $calendarTitlePadding;
      line-height: normal;
      background: $calendarTitleBg;
      color: $calendarTitleTextColor;
      font-weight: 600;
      border: $calendarTitleBorder;
      border-width: $calendarTitleBorderWidth;
      border-radius: 0;
    }

    .ui-datepicker-next {
      @include icon_override("\e901");
      right: 0;
    }

    .ui-datepicker-prev {
      @include icon_override("\e900");
      left: 0;
    }

    .ui-datepicker-next,
    .ui-datepicker-prev {
      cursor: pointer;
      top: 50%;
      margin-top: -1 * $actionIconHeight / 2;
      @include action-icon();

      span {
        display: none;
      }
    }

    .ui-datepicker-title {
      line-height: 1;
      margin: 0;

      select {
        width: 40%;
        margin: 0;

        &:first-child {
          margin-right: $inlineSpacing;
        }
      }
    }

    .ui-datepicker-calendar {
      margin: $calendarTableMargin;

      th {
        padding: $calendarCellPadding;
        text-align: center;

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

      td {
        padding: $calendarCellPadding;
        text-align: center;

        a {
          padding: 0;
          color: $calendarCellDateTextColor;
          text-align: center;
          width: $calendarCellDateWidth;
          height: $calendarCellDateHeight;
          line-height: $calendarCellDateHeight;
          border: $calendarCellDateBorder;
          display: inline-block;
          transition: $transition;
          border-radius: $calendarCellDateBorderRadius;

          &:hover {
            background: $calendarCellDateHoverBg;
            border-color: $calendarCellDateHoverBorderColor;
          }

          &.ui-state-active {
            background: $calendarCellDateSelectedBg;
            color: $calendarCellDateSelectedTextColor;
            border: $calendarCellDateSelectedBorder;
          }
        }

        &.ui-datepicker-today {
          a {
            background: $calendarCellDateTodayBg;
            color: $calendarCellDateTodayTextColor;
            font-weight: 600;
            border: $calendarCellDateTodayBorder;

            &:hover {
              background: $calendarCellDateHoverBg;
              border-color: $calendarCellDateHoverBorderColor;
            }

            &.ui-state-active {
              background: $calendarCellDateSelectedBg;
              color: $calendarCellDateSelectedTextColor;
              border: $calendarCellDateSelectedBorder;
            }
          }
        }
      }
    }

    &.ui-input-overlay {
      border: $inputOverlayBorder;
      box-shadow: $inputOverlayShadow;
    }

    .ui-timepicker-div {
      dl {
        margin: $calendarTimePickerMargin;

        dt {
          padding: $calendarTimePickerLabelPadding;

          &.ui_tpicker_time_label {
            padding: $calendarTimePickerInputPadding;
          }
        }

        dd {
          padding: $calendarTimePickerInputPadding;
          margin: $calendarTimePickerInputMargin;
        }
      }
    }

    .ui-datepicker-buttonpane,
    .ui-datepicker-buttonbar {
      button {
        transition: $transition;
        border-radius: $borderRadius;
        @include secondary-button();
      }

      .ui-g-6:first-child {
        text-align: left;
      }

      .ui-g-6:last-child {
        text-align: right;
      }
    }

    .ui-datepicker-buttonbar {
      border-top: $calendarTitleBorder;
      padding: $calendarButtonBarPadding;
    }

    .ui-monthpicker-month {
      margin: $calendarTableMargin;
      color: $calendarCellDateTextColor;
      transition: $transition;
      padding: $calendarCellPadding;
      border: $borderRadius;

      &:hover {
        background: $calendarCellDateHoverBg;
        border-color: $calendarCellDateHoverBorderColor;
      }

      &.ui-state-active {
        background: $calendarCellDateSelectedBg;
        color: $calendarCellDateSelectedTextColor;
        border: $calendarCellDateSelectedBorder;
      }
    }

    .ui-datepicker-group {
      padding: $calendarPadding;
    }

    .ui-picker-up {
      @include action-icon();

      .ui-icon {
        @include icon_override("\e903");
      }
    }

    .ui-picker-down {
      @include action-icon();

      .ui-icon {
        @include icon_override("\e902");
      }
    }

    &.ui-datepicker-multi {
      width: auto !important;
    }
  }

  .ui-calendar {
    .ui-button.ui-button-icon-only {
      width: $inputButtonWidth;
      @include border-radius-left(0);

      .ui-icon-calendar {
        @include icon_override("\e927");
      }
    }

    &.ui-trigger-calendar {
      input.hasDatepicker {
        @include border-radius-right(0);
      }
    }
  }

  .ui-fluid {
    .ui-trigger-calendar {
      input.hasDatepicker {
        width: calc(100% - #{$inputButtonWidth});
        padding-right: 0;
      }

      .ui-datepicker-trigger.ui-button {
        position: absolute;
        right: -1 * $inputButtonWidth;
        width: $inputButtonWidth;

        .ui-button-text {
          padding: $buttonIconOnlyPadding;
        }
      }
    }

    .p-datepicker {
      .ui-datepicker-trigger.ui-button {
        right: 0;
      }
    }
  }
}