UNPKG

zent

Version:

一套前端设计语言和基于React的实现

313 lines 8.39 kB
.zent-datetime-picker { box-sizing: border-box; display: inline-block; width: 183px; background: #fff; line-height: normal; } .zent-datetime-picker .picker-wrapper { position: relative; width: 100%; display: inline-block; } .zent-datetime-picker .picker-input { color: #999; position: relative; box-sizing: border-box; width: 100%; height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px; border: 1px solid #CACACA; border-radius: 2px; } .zent-datetime-picker .picker-input .zenticon { line-height: 30px; position: absolute; right: 10px; top: 0; color: #bbb; } .zent-datetime-picker .picker-input .zenticon-calendar-o { display: block; } .zent-datetime-picker .picker-input .zenticon-close-circle { display: none; } .zent-datetime-picker .picker-input--range { width: 240px; } .zent-datetime-picker .picker-input--showTime { width: 320px; } .zent-datetime-picker .picker-input--filled { color: #333; } .zent-datetime-picker .picker-input--filled:hover .zenticon-close-circle { display: block; } .zent-datetime-picker .picker-input--filled:hover .zenticon-calendar-o { display: none; } .zent-datetime-picker .picker-input--disabled { background: #f8f8f8; color: #CACACA; cursor: not-allowed; } .zent-datetime-picker .picker-input--disabled:hover .zenticon-close-circle { display: none; } .zent-datetime-picker .picker-input--disabled:hover .zenticon-calendar-o { display: block; } .zent-datetime-picker .date-picker, .zent-datetime-picker .month-picker, .zent-datetime-picker .time-picker, .zent-datetime-picker .range-picker { background: #fff; position: absolute; top: 32px; width: 240px; font-size: 12px; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); z-index: 10; } .zent-datetime-picker .grid-cell { vertical-align: middle; padding: 0; } .zent-datetime-picker .range-picker { width: 480px; } .zent-datetime-picker .range-picker .date-picker { position: static; display: inline-block; vertical-align: top; box-shadow: none; } .zent-datetime-picker .range-picker .date-picker .month-panel .grid-cell { height: 41.5px; } .zent-datetime-picker .range-picker .date-picker .year-panel .grid-cell { height: 41.5px; } .zent-datetime-picker .range-picker .date-picker+.date-picker { left: 240px; } .zent-datetime-picker .range-picker--showTime .date-picker { height: 265px; } .zent-datetime-picker .range-picker--showTime .date-picker .month-panel .grid-cell { height: 56.5px; } .zent-datetime-picker .range-picker--showTime .date-picker .year-panel .grid-cell { height: 56.5px; } .zent-datetime-picker .range-picker--showTime .date-picker .time-panel .hour-panel, .zent-datetime-picker .range-picker--showTime .date-picker .time-panel .minute-panel, .zent-datetime-picker .range-picker--showTime .date-picker .time-panel .second-panel { height: 265px; } .zent-datetime-picker .date-panel, .zent-datetime-picker .month-panel, .zent-datetime-picker .year-panel { position: relative; width: 240px; background: #fff; color: #333; } .zent-datetime-picker .date-picker .date-panel .grid-cell { padding: 2px 0; } .zent-datetime-picker .date-picker .month-panel { position: absolute; top: 0; left: 0; } .zent-datetime-picker .date-picker .month-panel .grid-cell { height: 55.5px; vertical-align: middle; padding: 0; } .zent-datetime-picker .date-picker .year-panel .grid-cell { height: 55.5px; vertical-align: middle; padding: 0; } .zent-datetime-picker .month-picker .month-panel .month-table { margin: 10px 0; } .zent-datetime-picker .month-picker .month-panel .year-panel .grid-cell { height: 58px; padding: 0; } .zent-datetime-picker .panel__header { box-sizing: border-box; text-align: center; height: 36px; line-height: 36px; border-bottom: 1px solid #CACACA; } .zent-datetime-picker .panel__header .link--prev { cursor: pointer; float: left; margin-left: 25px; font-size: 8px; } .zent-datetime-picker .panel__header .link--prev .zenticon { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .zent-datetime-picker .panel__header .link--next { cursor: pointer; float: right; margin-right: 25px; font-size: 8px; } .zent-datetime-picker .panel__header .panel__title { cursor: pointer; } .zent-datetime-picker .panel__footer { box-sizing: border-box; height: 54px; line-height: 54px; padding-right: 10px; text-align: right; border-top: 1px solid #CACACA; } .zent-datetime-picker .panel__footer .btn--confirm { line-height: normal; background: #3388FF; color: #fff; border: none; border-radius: 2px; padding: 10px 10px; margin-left: 15px; } .zent-datetime-picker .panel__footer .link--current { color: #3388FF; cursor: pointer; } .zent-datetime-picker .panel__footer .link--disabled { color: #999; } .zent-datetime-picker .panel__table { width: 100%; text-align: center; } .zent-datetime-picker .panel__table td, .zent-datetime-picker .panel__table th { padding: 5px 0; width: 14.28%; text-align: center; margin-bottom: 4px; } .zent-datetime-picker .panel__table .panel__cell { display: inline-block; box-sizing: border-box; text-align: center; vertical-align: middle; border-radius: 2px; cursor: pointer; position: relative } .zent-datetime-picker .panel__table .panel__cell:hover { background: #DDEEFF; } .zent-datetime-picker .panel__table .panel__cell--in-range { background: #DDEEFF; border-color: #DDEEFF; } .zent-datetime-picker .panel__table .panel__cell--in-range:before { content: ''; display: block; width: 8px; height: 20px; background: #DDEEFF; position: absolute; right: -8px; top: 0; } .zent-datetime-picker .panel__table .panel__cell--in-range:after { content: ''; display: block; width: 8px; height: 20px; background: #DDEEFF; position: absolute; left: -8px; top: 0; } .zent-datetime-picker .panel__table .panel__cell--current { color: #3388FF; } .zent-datetime-picker .panel__table .panel__cell--disabled { cursor: not-allowed; color: #e5e5e5; } .zent-datetime-picker .panel__table .panel__cell--disabled:hover { background: #fff; } .zent-datetime-picker .panel__table .panel__cell--disabled:before, .zent-datetime-picker .panel__table .panel__cell--disabled:after { display: none; } .zent-datetime-picker .panel__table .panel__cell--selected { background: #3388FF; color: #fff; } .zent-datetime-picker .panel__table .panel__cell--selected:hover { background: #3388FF; } .zent-datetime-picker .panel__table .panel__cell--different { color: #999; background: none; } .zent-datetime-picker .panel__table .panel__cell--different:before, .zent-datetime-picker .panel__table .panel__cell--different:after { display: none; } .zent-datetime-picker .panel__table .panel__cell.date-panel__cell { width: 20px; height: 20px; line-height: 20px; } .zent-datetime-picker .panel__table .panel__cell.month-panel__cell { width: 30px; height: 30px; line-height: 30px; } .zent-datetime-picker .panel__table .panel__cell.year-panel__cell { width: 50px; height: 30px; line-height: 30px; } .zent-datetime-picker .year-panel { position: absolute; top: 0; left: 0; } .zent-datetime-picker .time-panel .hour-panel, .zent-datetime-picker .time-panel .minute-panel, .zent-datetime-picker .time-panel .second-panel { position: absolute; top: 0; left: 0; height: 319px; width: 240px; background: #fff; } .zent-datetime-picker .time-panel__cell { padding: 3px; } .zent-datetime-picker .time-panel__preview { margin: 12px 10px; height: 31px; line-height: 31px; border: 1px solid #bbb; border-radius: 2px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .zent-datetime-picker .time-panel__preview .time__number { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; cursor: pointer; border-right: 1px solid #bbb; } .zent-datetime-picker .time-panel__preview .time__number:last-child { border-right: none; }