ten-design-vue/lib/style/calendar.css

ten-vue

/* dependencies icon */
/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-calendar {
  background: #fff;
}
.ten-calendar__header {
  height: 56px;
  line-height: 56px;
  text-align: center;
}
.ten-calendar__header .ten-date-header__btn {
  padding: 0;
  color: rgba(0, 0, 0, 0.32);
  text-align: center;
}
.ten-calendar__header .ten-date-header__btn--prev-month {
  margin-right: 20px;
}
.ten-calendar__header .ten-date-header__btn--next-month {
  margin-left: 20px;
}
.ten-calendar__header-year,
.ten-calendar__header-month {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  margin: 0 12px;
  cursor: pointer;
}
.ten-calendar__header-year.active,
.ten-calendar__header-month.active,
.ten-calendar__header-year:hover,
.ten-calendar__header-month:hover {
  color: #0052d9;
}
.ten-calendar__header-year__item,
.ten-calendar__header-month__item {
  text-align: center;
}
.ten-calendar__header-year__item.selected,
.ten-calendar__header-month__item.selected {
  color: #0052d9;
}
.ten-calendar__header-month {
  width: 22px;
}
.ten-calendar__header-year {
  width: 52px;
}
.ten-calendar__body-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
.ten-calendar__body-table th {
  border-top: 1px solid #e8e8e8;
  height: 48px;
  font-weight: normal;
}
.ten-calendar__body-table .ten-date-item {
  border-top: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  min-height: 144px;
  padding: 0;
  cursor: pointer;
}
.ten-calendar__body-table .ten-date-item:last-child {
  border-right: none;
}
.ten-calendar__body-table .ten-date-item:hover {
  background: #e8f1ff;
}
.ten-calendar__body-table .ten-date-item .ten-calendar-date-cell__header {
  padding: 8px 10px 2px;
  text-align: right;
  color: #333;
}
.ten-calendar__body-table .ten-date-item .ten-calendar-date-cell__content {
  padding: 0 8px 8px;
  height: 112px;
  overflow: auto;
}
.ten-calendar__body-table .ten-date-item.ten-date-item--now .ten-calendar-date-cell__header {
  color: #0052d9;
}
.ten-calendar__body-table .ten-date-item.ten-date-item--active {
  background: #e8f1ff;
}
.ten-calendar__body-table .ten-date-item.ten-date-item--active .ten-calendar-date-cell__header {
  color: #0052d9;
}
.ten-calendar__body-table .ten-date-item.ten-date-item--additional .ten-calendar-date-cell__wrapper {
  background: #FBFBFB;
}
.ten-calendar__body-table .ten-date-item.ten-date-item--additional .ten-calendar-date-cell__header {
  color: #c0c0c0;
}