UNPKG

ten-design-vue

Version:

ten-vue

479 lines (398 loc) 7.98 kB
/* dependencies button,icon,select */ @import "../vars.less"; @import "../mixins/index.less"; @time-options-item-height: 40px; @item-count: 6; @item-selected-bg-color: #FBFBFB; @icon-color: #bfbfbf; .input-active() { z-index: 1; border-color: @primary-color; } .ten-picker { padding: 0; &__input { min-width: 304px; display: inline-flex; border: @border-main; background: #fff; border-radius: @input-border-radius-default; width: 100%; // input active focus 和 disabled不会共存... &:hover:not(.ten-picker__input--disabled), &--focused:not(.ten-picker__input--disabled) { .input-active(); .ten-picker__input-icon:not(.ten-picker__input-icon--clear) { color: @primary-color; } } // input disabled &--disabled { background: #fbfbfb; border-color: @disabled-color; cursor: not-allowed; } // input readonly &--readonly { cursor: default; &:focus { .input-active(); } } &--error { border-color: @error-color; } // input show clear &:not(&--empty):hover&:not(&--disabled):hover&:not(&--readonly):hover:not(&--no-clear):hover { .ten-picker__input-icon--suffix { visibility: hidden; } .ten-picker__input-icon--clear { visibility: visible; } } .ten-input__input { border: none; } &-separator { padding: 0 10px; line-height: @input-inner-height-default; } &-suffixicon { position: relative; min-width: 24px; margin: 0 8px; } &-icon { position: absolute; height: @input-inner-height-default; line-height: @input-inner-height-default; font-size: 0; color: @icon-color; .ten-icon { font-size: 20px; vertical-align: middle; } &--suffix { .ten-icon { font-size: 20px; } } &--clear { visibility: hidden; cursor: pointer; &:hover { color: @primary-color; } } } &--size-small { border-radius: @input-border-radius-small; .ten-picker__input-icon, .ten-picker__input-separator { height: @input-inner-height-small; line-height: @input-inner-height-small; } } } &__popup { display: flex; &-shortcut { width: 101px; padding: 6px 0 6px 16px ; border-right: @border-main-2; &-btn { display: block; color: #000; padding: 0; + .ten-button { margin-left: 0; } &:hover { color: #4088ff; } } } } } .ten-picker-datetime-range { min-width: 408px; } // basic .ten-time-options { height: @item-count * @time-options-item-height; padding-bottom: (@item-count - 1) * @time-options-item-height + 1; overflow-y: hidden; overflow-x: hidden; font-size: @text-level-1-size; &:hover { overflow-y: auto; } &--scrolling { overflow-y: hidden; } &__item { display: block; height: @time-options-item-height; line-height: @time-options-item-height; text-align: center; cursor: pointer; &:hover { background: @primary-color-ligher-7; } &--selected { font-weight: bold; background: @item-selected-bg-color; border-top: @border-main-2; border-bottom: @border-main-2; &:hover { background: @item-selected-bg-color; } } &--disabled, &--disabled:hover { background: transparent; color: @disabled-color; cursor: not-allowed; } } } .ten-date-item { color: #000; &__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; &:hover { background-color: @primary-color-ligher-7; } } &__text { font-size: 14px; } &--now { .ten-date-item__wrapper { box-shadow: inset 0px 0px 0px 1px @primary-color; color: @primary-color; } } &--highlight { .ten-date-item__wrapper { background-color: @primary-color-ligher-7; border-color: @primary-color-ligher-7; } } &--active { .ten-date-item__wrapper { color: #fff; background-color: @primary-color; } &-start { .ten-date-item__wrapper { border-left-color: #fff; } } &-end { .ten-date-item__wrapper { border-right-color: #fff; } } } &--last-day-of-month { .ten-date-item__wrapper { border-right-color: #fff; } } &--first-day-of-month { .ten-date-item__wrapper { border-left-color: #fff; } } &--additional { .ten-date-item__wrapper { color: #BFBFBF; background: #fff; border-color: #fff; } } &--disabled { .ten-date-item__wrapper { cursor: not-allowed; background: #f5f5f5; border-color: #f5f5f5; color: @disabled-color; } } } .ten-date-day, .ten-date-date { tbody { tr { .ten-date-item__wrapper{ margin-top: 8px; } &:first-child{ .ten-date-item__wrapper{ margin-top: 6px; } } } } } .ten-date-year, .ten-date-month { tbody { tr { .ten-date-item__wrapper { margin-top: 28px; width: 38px; border-left-width: 22px; border-right-width: 22px; } &:first-child{ .ten-date-item__wrapper { margin-top: 24px; } } &:last-child { .ten-date-item{ text-align: left; } } } } } // panel .ten-time { display: flex; &__item { min-width: 56px; border-right: @border-main-2; &:last-child { border-right: none; } } } .ten-time-range { display: flex; .ten-time:first-child { border-right: @border-main-2; } } .ten-date { width: 304px; padding: 11px 16px 22px; table { border-collapse: collapse; border: none; margin: auto; user-select: none; } tbody { margin-top: 2px; } th { border-bottom: 1px solid @border-color; padding: 7px 0; margin-bottom: 5px; font-weight: 500; } td { padding: 0; text-align: center; border: none; &:first-child { .ten-date-item__wrapper { border-left: none; } } &:last-child { .ten-date-item__wrapper { border-right: none; } } } &__sub-panel { &--hide { display: none; } } .ten-date-header { display: flex; &__text { flex: 1; justify-content: center; display: flex; align-items: center; .ten-date-header__btn { color: #000; &:hover { color: #4088ff; } } } &__btn { padding: 0; color: @icon-color; &--prev-month, &--next-year { margin-left: 4px!important; } &--next-year { transform-origin: center 17px; } &--disabled { display: none; } } } } .ten-date-range { width: 608px; overflow: hidden; display: flex; .ten-date:first-child { border-right: @border-main-2;; } } .ten-date-time { width: 304px; .ten-time, .ten-time__item { flex: 1; } .ten-time__item:hover { flex: none; } &__time { &-header { display: flex; height: 51px; line-height: 50px; border-bottom: @border-main-2; &-date { flex: 1; text-align: center; &:first-child { border-right: @border-main-2; } } } } &__footer { border-top: @border-main-2; .clearfix(); &-btn { float: right; } } } .ten-date-time-range { width: 608px; }