ten-design-vue/lib/theme/components/calendar.less

ten-vue

/* dependencies icon */
@import "../vars.less";

@calendar-date-cell-bg-addtional: #FBFBFB;

.ten-calendar {
  background: #fff;
  &__header {
    height: 56px;
    line-height: 56px;
    text-align: center;

    .ten-date-header__btn {
      padding: 0;
      color: @icon-color;
      text-align: center;

      &--prev-month {
        margin-right: 20px;
      }

      &--next-month {
        margin-left: 20px;
      }
    }

    &-year,
    &-month {
      display: inline-block;
      font-weight: bold;
      font-size: 16px;
      margin: 0 12px;
      cursor: pointer;

      &.active,
      &:hover {
        color: @primary-color;
      }

      &__item {
        text-align: center;

        &.selected {
          color: @primary-color;
        }
      }
    }

    &-month {
      width: 22px;
    }

    &-year {
      width: 52px;
    }
  }

  &__body-table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;

    th {
      border-top: @border-main-2;
      height: 48px;
      font-weight: normal;
    }

    .ten-date-item {
      border-top: @border-main-2;
      border-right: @border-main-2;
      min-height: 144px;
      padding: 0;
      cursor: pointer;

      &:last-child {
        border-right: none;
      }

      &:hover {
        background: @primary-color-ligher-7;
      }

      .ten-calendar-date-cell {
  
        &__header {
          padding: 8px 10px 2px;
          text-align: right;
          color: @text-color;
        }
  
        &__content {
          padding: 0 8px 8px;
          height: 112px;
          overflow: auto;
        }
      }

      &.ten-date-item--now {
        .ten-calendar-date-cell__header {
          color: @primary-color;
        }
      }

      &.ten-date-item--active {
        background: @primary-color-ligher-7;
        .ten-calendar-date-cell__header {
          color: @primary-color;
        }
      }

      &.ten-date-item--additional {
        .ten-calendar-date-cell__wrapper {
          background: @calendar-date-cell-bg-addtional;
        }
        .ten-calendar-date-cell__header {
          color: @disabled-color;
        }
      }
    }
  }
}