ten-design-vue
Version:
ten-vue
479 lines (398 loc) • 7.98 kB
text/less
/* 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 ;
}
&--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;
}