ten-design-vue/lib/style/date-picker.css

ten-vue

/* dependencies button,icon,select */
/**
 * 文字部分
 * 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-picker {
  padding: 0;
}
.ten-picker__input {
  min-width: 304px;
  display: inline-flex;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 0px;
  width: 100%;
}
.ten-picker__input:hover:not(.ten-picker__input--disabled),
.ten-picker__input--focused:not(.ten-picker__input--disabled) {
  z-index: 1;
  border-color: #0052d9;
}
.ten-picker__input:hover:not(.ten-picker__input--disabled) .ten-picker__input-icon:not(.ten-picker__input-icon--clear),
.ten-picker__input--focused:not(.ten-picker__input--disabled) .ten-picker__input-icon:not(.ten-picker__input-icon--clear) {
  color: #0052d9;
}
.ten-picker__input--disabled {
  background: #fbfbfb;
  border-color: #c0c0c0;
  cursor: not-allowed;
}
.ten-picker__input--readonly {
  cursor: default;
}
.ten-picker__input--readonly:focus {
  z-index: 1;
  border-color: #0052d9;
}
.ten-picker__input--error {
  border-color: #ff3e00;
}
.ten-picker__input:not(.ten-picker__input--empty):hover.ten-picker__input:not(.ten-picker__input--disabled):hover.ten-picker__input:not(.ten-picker__input--readonly):hover:not(.ten-picker__input--no-clear):hover .ten-picker__input-icon--suffix {
  visibility: hidden;
}
.ten-picker__input:not(.ten-picker__input--empty):hover.ten-picker__input:not(.ten-picker__input--disabled):hover.ten-picker__input:not(.ten-picker__input--readonly):hover:not(.ten-picker__input--no-clear):hover .ten-picker__input-icon--clear {
  visibility: visible;
}
.ten-picker__input .ten-input__input {
  border: none;
}
.ten-picker__input-separator {
  padding: 0 10px;
  line-height: 38px;
}
.ten-picker__input-suffixicon {
  position: relative;
  min-width: 24px;
  margin: 0 8px;
}
.ten-picker__input-icon {
  position: absolute;
  height: 38px;
  line-height: 38px;
  font-size: 0;
  color: #bfbfbf;
}
.ten-picker__input-icon .ten-icon {
  font-size: 20px;
  vertical-align: middle;
}
.ten-picker__input-icon--suffix .ten-icon {
  font-size: 20px;
}
.ten-picker__input-icon--clear {
  visibility: hidden;
  cursor: pointer;
}
.ten-picker__input-icon--clear:hover {
  color: #0052d9;
}
.ten-picker__input--size-small {
  border-radius: 0px;
}
.ten-picker__input--size-small .ten-picker__input-icon,
.ten-picker__input--size-small .ten-picker__input-separator {
  height: 30px;
  line-height: 30px;
}
.ten-picker__popup {
  display: flex;
}
.ten-picker__popup-shortcut {
  width: 101px;
  padding: 6px 0 6px 16px ;
  border-right: 1px solid #e8e8e8;
}
.ten-picker__popup-shortcut-btn {
  display: block;
  color: #000;
  padding: 0;
}
.ten-picker__popup-shortcut-btn + .ten-button {
  margin-left: 0;
}
.ten-picker__popup-shortcut-btn:hover {
  color: #4088ff;
}
.ten-picker-datetime-range {
  min-width: 408px;
}
.ten-time-options {
  height: 240px;
  padding-bottom: 201px;
  overflow-y: hidden;
  overflow-x: hidden;
  font-size: 14px;
}
.ten-time-options:hover {
  overflow-y: auto;
}
.ten-time-options--scrolling {
  overflow-y: hidden;
}
.ten-time-options__item {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.ten-time-options__item:hover {
  background: #e8f1ff;
}
.ten-time-options__item--selected {
  font-weight: bold;
  background: #FBFBFB;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.ten-time-options__item--selected:hover {
  background: #FBFBFB;
}
.ten-time-options__item--disabled,
.ten-time-options__item--disabled:hover {
  background: transparent;
  color: #c0c0c0;
  cursor: not-allowed;
}
.ten-date-item {
  color: #000;
}
.ten-date-item__wrapper {
  display: inline-block;
  height: 24px;
  width: 24px;
  line-height: 24px;
  box-sizing: content-box;
  border-left: 6px solid #fff;
  border-right: 6px solid #fff;
  text-align: center;
  cursor: pointer;
}
.ten-date-item__wrapper:hover {
  background-color: #e8f1ff;
}
.ten-date-item__text {
  font-size: 14px;
}
.ten-date-item--now .ten-date-item__wrapper {
  box-shadow: inset 0px 0px 0px 1px #0052d9;
  color: #0052d9;
}
.ten-date-item--highlight .ten-date-item__wrapper {
  background-color: #e8f1ff;
  border-color: #e8f1ff;
}
.ten-date-item--active .ten-date-item__wrapper {
  color: #fff;
  background-color: #0052d9;
}
.ten-date-item--active-start .ten-date-item__wrapper {
  border-left-color: #fff;
}
.ten-date-item--active-end .ten-date-item__wrapper {
  border-right-color: #fff;
}
.ten-date-item--last-day-of-month .ten-date-item__wrapper {
  border-right-color: #fff;
}
.ten-date-item--first-day-of-month .ten-date-item__wrapper {
  border-left-color: #fff;
}
.ten-date-item--additional .ten-date-item__wrapper {
  color: #BFBFBF;
  background: #fff;
  border-color: #fff;
}
.ten-date-item--disabled .ten-date-item__wrapper {
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #c0c0c0;
}
.ten-date-day tbody tr .ten-date-item__wrapper,
.ten-date-date tbody tr .ten-date-item__wrapper {
  margin-top: 8px;
}
.ten-date-day tbody tr:first-child .ten-date-item__wrapper,
.ten-date-date tbody tr:first-child .ten-date-item__wrapper {
  margin-top: 6px;
}
.ten-date-year tbody tr .ten-date-item__wrapper,
.ten-date-month tbody tr .ten-date-item__wrapper {
  margin-top: 28px;
  width: 38px;
  border-left-width: 22px;
  border-right-width: 22px;
}
.ten-date-year tbody tr:first-child .ten-date-item__wrapper,
.ten-date-month tbody tr:first-child .ten-date-item__wrapper {
  margin-top: 24px;
}
.ten-date-year tbody tr:last-child .ten-date-item,
.ten-date-month tbody tr:last-child .ten-date-item {
  text-align: left;
}
.ten-time {
  display: flex;
}
.ten-time__item {
  min-width: 56px;
  border-right: 1px solid #e8e8e8;
}
.ten-time__item:last-child {
  border-right: none;
}
.ten-time-range {
  display: flex;
}
.ten-time-range .ten-time:first-child {
  border-right: 1px solid #e8e8e8;
}
.ten-date {
  width: 304px;
  padding: 11px 16px 22px;
}
.ten-date table {
  border-collapse: collapse;
  border: none;
  margin: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ten-date tbody {
  margin-top: 2px;
}
.ten-date th {
  border-bottom: 1px solid #d9d9d9;
  padding: 7px 0;
  margin-bottom: 5px;
  font-weight: 500;
}
.ten-date td {
  padding: 0;
  text-align: center;
  border: none;
}
.ten-date td:first-child .ten-date-item__wrapper {
  border-left: none;
}
.ten-date td:last-child .ten-date-item__wrapper {
  border-right: none;
}
.ten-date__sub-panel--hide {
  display: none;
}
.ten-date .ten-date-header {
  display: flex;
}
.ten-date .ten-date-header__text {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center;
}
.ten-date .ten-date-header__text .ten-date-header__btn {
  color: #000;
}
.ten-date .ten-date-header__text .ten-date-header__btn:hover {
  color: #4088ff;
}
.ten-date .ten-date-header__btn {
  padding: 0;
  color: #bfbfbf;
}
.ten-date .ten-date-header__btn--prev-month,
.ten-date .ten-date-header__btn--next-year {
  margin-left: 4px!important;
}
.ten-date .ten-date-header__btn--next-year {
  -webkit-transform-origin: center 17px;
  transform-origin: center 17px;
}
.ten-date .ten-date-header__btn--disabled {
  display: none;
}
.ten-date-range {
  width: 608px;
  overflow: hidden;
  display: flex;
}
.ten-date-range .ten-date:first-child {
  border-right: 1px solid #e8e8e8;
}
.ten-date-time {
  width: 304px;
}
.ten-date-time .ten-time,
.ten-date-time .ten-time__item {
  flex: 1;
}
.ten-date-time .ten-time__item:hover {
  flex: none;
}
.ten-date-time__time-header {
  display: flex;
  height: 51px;
  line-height: 50px;
  border-bottom: 1px solid #e8e8e8;
}
.ten-date-time__time-header-date {
  flex: 1;
  text-align: center;
}
.ten-date-time__time-header-date:first-child {
  border-right: 1px solid #e8e8e8;
}
.ten-date-time__footer {
  border-top: 1px solid #e8e8e8;
  zoom: 1;
}
.ten-date-time__footer:before,
.ten-date-time__footer:after {
  content: " ";
  display: table;
}
.ten-date-time__footer:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.ten-date-time__footer-btn {
  float: right;
}
.ten-date-time-range {
  width: 608px;
}