lu2/theme/pure/css/common/ui/Date.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Date.css
 * @author xinxuzhang
 * @create 15-07-03
 *
**/
:not([is-visible])::-webkit-clear-button,
:not([is-visible])::-webkit-inner-spin-button,
:not([is-visible])::-webkit-calendar-picker-indicator {
    display: none;
}

[type="date"]:not([is-visible])::-webkit-datetime-edit-text {
    color: transparent;
    background: linear-gradient(#4c5161, #4c5161) no-repeat center;
    background-size: 80% 1px;
}

:not([is-visible])::-webkit-datetime-edit-text,
:not([is-visible])::-webkit-datetime-edit-year-field,
:not([is-visible])::-webkit-datetime-edit-month-field,
:not([is-visible])::-webkit-datetime-edit-day-field,
:not([is-visible])::-webkit-datetime-edit-hour-field,
:not([is-visible])::-webkit-datetime-edit-minute-field,
:not([is-visible])::-webkit-datetime-edit-ampm-field {
    background: none;
    color: #4c5161;
}
:not([is-visible]):disabled::-webkit-datetime-edit-text,
:not([is-visible]):disabled::-webkit-datetime-edit-year-field,
:not([is-visible]):disabled::-webkit-datetime-edit-month-field,
:not([is-visible]):disabled::-webkit-datetime-edit-day-field,
:not([is-visible]):disabled::-webkit-datetime-edit-hour-field,
:not([is-visible]):disabled::-webkit-datetime-edit-minute-field,
:not([is-visible]):disabled::-webkit-datetime-edit-ampm-field {
    opacity: .4;
}

:not([is-visible]):valid::-webkit-datetime-edit {
    visibility: hidden;
}

.ui-date-input,
.ui-year-input,
.ui-month-input,
.ui-time-input,
.ui-date-range-input,
.ui-month-range-input {
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.ui-date-input > input:not([is-visible]),
.ui-year-input > input:not([is-visible]),
.ui-month-input > input:not([is-visible]),
.ui-time-input > input:not([is-visible]),
.ui-hour-input > input:not([is-visible]),
[class].ui-date-range-input > input,
[class].ui-month-range-input > input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fff;
    -webkit-appearance: none;
}

.ui-input:hover > input[readonly] {
    border-color: #ababaf;
}

.ui-input:active > input[readonly] {
    background-color: #f7f9fa;
}

span.ui-date-input > input {
    width: 125px;
}

span.ui-year-input > input,
span.ui-time-input > input {
    width: 85px;
}

span.ui-month-input > input {
    width: 125px;
}

span.ui-date-range-input > input {
    width: 210px;
}

span.ui-month-range-input > input {
    width: 170px;
}

/* Chrome-window/iOS 月份日期控件会根据系统添加中文描述，宽度不定，因此，宽度使用自动宽度 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    span.ui-time-input > [type="time"] {
        width: auto;
        /* for Safari */
        max-width: 125px;
    }
}
@supports not (-moz-appearance: none) {
    span.ui-time-input > [type="time"] {
        padding-right: 33px;
    }
}

/* 这里定位改成覆盖是为了避免IE浏览器下的focus光标 */
.ui-date-arrow {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    border-right: 4px solid transparent;
    cursor: pointer;
}
.ui-date-arrow::before {
    content: '';
    position: absolute;
    width: 20px;
    top: 1px; bottom: 1px; right: 0;
    margin: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat right;
    background-size: 20px 20px;
}
:disabled + .ui-date-arrow {
    cursor: default;
}
:disabled + .ui-date-arrow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb' fill-opacity='0.4' /%3E%3C/svg%3E");
}

/* firefox覆盖清除按钮，以及移动端覆盖下拉箭头 */
.ui-date-arrow::before {
    background-color: #fff;
    transition: background-color .15s;
}
.ui-input:active .ui-date-arrow::before,
:disabled + .ui-date-arrow::before {
    background-color: #f7f9fa;
}

/* 选择浮层 */
.ui-date-container {
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    animation: fadeIn .2s;
}
body > .ui-date-container {
    display: none;
    position: absolute;
    z-index: 9;
}

.ui-date-container a {
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ui-date-head {
    padding: 5px 0 0;
    overflow: hidden;
}

.ui-date-half {
    width: 50%;
    float: left;
}

.ui-date-prev, .ui-date-next {
    width: 35px;
    height: 30px;
    text-align: center;
    color: #b6bbc6;
    fill: currentColor;
}
a.ui-date-prev:hover {
    color: #2a80eb;
}

span.ui-date-prev {
    color: #ccd0d7;
}

a.ui-date-next:hover {
    color: #2a80eb;
}

span.ui-date-next {
    color: #ccd0d7;
}

.ui-date-prev > svg,
.ui-date-next > svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px auto 0;
}

.ui-date-next > svg {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ui-date-prev {
    float: left;
}

.ui-date-next {
    float: right;
}

.ui-date-switch {
    display: block;
    line-height: 30px;
    margin: 0 35px;
    border-radius: 2px;
    color: #4c5161;
    text-align: center;
}

a.ui-date-switch:hover,
a.ui-date-item:not(.selected):hover {
    color: #4c5161;
    background-color: #f0f0f2;
}

.ui-minute-x,
.ui-hour-x,
.ui-year-x,
.ui-month-x,
.ui-date-x {
    width: 225px;
}

.ui-minute-x[data-step="1"] {
    width: 328px;
}
.ui-minute-x[data-step="2"] {
    width: 276px;
}

.ui-minute-body {
    padding-left: 12px;
    padding-bottom: 12px;
}

.ui-hour-body {
    padding: 8px 0 12px 12px;
}

.ui-year-body,
.ui-month-body,
.ui-date-body {
    padding-left: 5px;
    padding-right: 2px;
    padding-bottom: 5px;
}

.ui-date-item {
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    color: #4c5161;
}

span.ui-date-item {
    opacity: .4;
}

.ui-date-item.col0,
.ui-date-item.col6,
.ui-day-item.col0,
.ui-day-item.col6 {
    color: #eb4646;
}

.ui-date-tr:last-child .ui-date-item:empty {
    display: none;
}

.ui-minute-body .ui-date-item,
.ui-hour-body .ui-date-item {
    width: 45px;
    line-height: 26px;
    margin-top: 4px;
    margin-right: 7px;
}

.ui-year-body .ui-date-item,
.ui-month-body .ui-date-item {
    width: 45px;
    line-height: 54px;
    margin-top: 5px;
    margin-left: 7px;
}

.ui-date-now {
    display: block;
    line-height: 30px;
    margin: 0 5px 5px;
    text-align: center;
}

.ui-day-x {
    padding: 0 2px 0 5px;
    text-align: center;
}

.ui-day-item,
.ui-date-body .ui-date-item {
    display: inline-block;
    width: 28px;
    line-height: 28px;
    margin-right: 3px;
    margin-top: 1px;
    vertical-align: top;
}

.ui-range-x {
    width: 458px;
}

.ui-range-body {
    overflow: hidden;
}

.ui-range-body .ui-date-half + .ui-date-half {
    border-left: 1px solid #f0f0f2;
    margin-left: -1px;
}

.ui-range-footer {
    padding: 5px 15px 15px;
    text-align: right;
}

.ui-range-footer > .ui-button {
    margin-left: 10px;
}

.ui-date-container .selected {
    background-color: #2a80eb;
    color: #fff;
    cursor: default;
}

.ui-date-container span.selected {
    opacity: .4;
}

.ui-range-body .ui-date-half {
    width: 229px;
}

.ui-range-body .ui-date-body {
    padding-left: 6px;
    padding-right: 0;
}

.ui-range-body .ui-month-body {
    margin-bottom: 15px;
}

.ui-range-date-body .selected {
    width: 26px;
    line-height: 26px;
    border: 1px solid #2a80eb;
    border-right-width: 4px;
    margin-right: 0;
    border-radius: 0;
}

.ui-range-body .selected.col0 {
    margin-left: -6px;
    border-left-width: 7px;
}

.ui-range-body .selected.col6 {
    border-right-width: 10px;
}

.ui-range-body .selected.ui-date-first:not(.col0) {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui-range-body .selected.ui-date-last:not(.col6) {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.ui-range-body .ui-date-begin,
.ui-range-body .ui-date-end {
    border-radius: 0;
    width: 26px;
    background-color: #fff;
    color: #4c5161;
}

.ui-range-body .ui-date-begin {
    border-right-width: 4px;
    border-left-width: 1px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui-range-body .ui-date-end {
    margin-right: 3px;
    border-right-width: 1px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.ui-range-body .ui-date-begin:hover,
.ui-range-body .ui-date-end:hover {
    background-color: #fff;
    color: #4c5161;
}

.ui-range-body .ui-date-begin.col6 {
    border-right-width: 0;
    padding-right: 9px;
}

.ui-range-body .ui-date-begin.col0 {
    border-left-width: 1px;
    margin-left: 0;
}

.ui-range-body .ui-date-end.col0 {
    border-left-width: 0;
    padding-left: 7px;
}

.ui-range-body .ui-date-end.col6 {
    border-right-width: 1px;
}

.ui-range-body .ui-date-begin.ui-date-end {
    margin-right: 3px;
    padding: 0;
    border: 1px solid #2a80eb;
    border-radius: 2px;
}

.ui-range-body .ui-date-begin + .ui-date-end {
    border-left-width: 1px;
    margin-right: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ui-date-container {
        animation: none;
    }
    .ui-date-arrow::before,
    .ui-date-container a {
        transition: none;
    }
}