/*
    日期选择框
*/

@import "../../less/config/main";
.rotate(@deg) {
    transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    /* IE 9 */
    -moz-transform: rotate(@deg);
    /* Firefox */
    -webkit-transform: rotate(@deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(@deg);
    /* Opera */
}

.box-sizing(@type) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    -ms-box-sizing: @type;
    -o-box-sizing: @type;
    box-sizing: @type;
}

.box-shadow(@x, @y, @weight, @color) {
    -webkit-box-shadow: @x @y @weight @color;
    -moz-box-shadow: @x @y @weight @color;
    -ms-box-shadow: @x @y @weight @color;
    -o-box-shadow: @x @y @weight @color;
    box-shadow: @x @y @weight @color;
}

.inset-shadow(@x, @y, @weight, @color) {
    -webkit-box-shadow: inset @x @y @weight @color;
    -moz-box-shadow: inset @x @y @weight @color;
    -ms-box-shadow: inset @x @y @weight @color;
    -o-box-shadow: inset @x @y @weight @color;
    box-shadow: inset @x @y @weight @color;
}

.transition(@duration) {
    -webkit-transition: @duration;
    -moz-transition: @duration;
    -ms-transition: @duration;
    -o-transition: @duration;
    transition: @duration;
}

.cui-datePickerContainer {
    position: relative;
    width: 200px;
    padding: 8px 10px;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 2px;
    .inset-shadow(0, 1px, 3px, @c-light-b);
    .box-sizing(border-box);
    background-color: @c-common-white;
    outline: 0;
    cursor: pointer;
    .placeholder {
        color: #aaa;
    }
    .calendar {
        position: absolute;
        right: .6em;
        top: .65em;
    }
    .cui-datePicker {
        display: none;
        opacity: 0;
        filter: alpha(opacity=0);
        background-color: #f5f5f5;
        z-index: 10;
        border: 1px solid #e3e3e3;
        border-radius: 3px;
        width: 280px;
        overflow: hidden;
        cursor: default;
        position: absolute;
        top: 100%;
        left: -1px;
        margin: 2px 0 20px;
        .box-shadow(0, 0, 0, .175);
        .transition(0.3s);
        .cui-header {
            margin: 6px 8px 8px;
            position: relative;
            height: 24px;
            line-height: 24px;
            text-align: center;
            a {
                color: #555;
                display: inline-block;
                text-decoration: none;
                &.prev,
                &.next {
                    position: absolute;
                    top: 0;
                    //border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    padding: 0;
                    text-align: center;
                    font-size: 16px;
                    .icon-component {
                        position: relative;
                        top: 1px;
                    }
                }
                &.prev {
                    left: 0;
                }
                &.next {
                    right: 0;
                }
                &.year,
                &.month {
                    padding: 0;
                    width: 74px;
                    display: inline-block;
                    font-size: 20px;
                    color: #000;
                    border-color: transparent;
                    background: 0 0;
                    &:hover {
                        background-color: lighten(#f5f5f5, 60%);
                    }
                }
            }
        }
        .cui-inner {
            position: relative;
            text-align: center;
            margin-bottom: 6px;
            .week,
            .day {
                width: 36px;
                padding: 4px 0;
                margin: 1px;
                color: #555;
                font-size: 14px;
                text-align: center;
                display: inline-block;
            }
            .week {
                color: #000;
            }
            .day {
                border: 1px solid #e3e3e3;
                background-color: #fff;
                border-radius: 3px;
                &.gray {
                    color: #aaa;
                }
                &.activeItem {
                    color: @c-common-black;
                    background-color: @c-normal-c;
                }
                &:hover {
                    color: @c-common-white;
                    background-color: @c-important-a;
                }
            }
            .yearItem,
            .monthItem {
                border: 1px solid #e3e3e3;
                background-color: #fff;
                border-radius: 3px;
                padding: 6px 0;
                &:hover {
                    color: @c-common-white;
                    background-color: @c-important-a;
                }
            }
            .monthItem {
                width: 85px;
            }
            .yearItem {
                width: 50px;
            }
            .days,
            .months,
            .years {
                width: 280px;
                position: relative;
                left: 0;
                top: 0;
            }
            .days-next,
            .months-next,
            .years-next {
                position: absolute;
                left: 100%;
            }
            .days-next {
                top: 26px;
            }
            .days-prev,
            .months-prev,
            .years-prev {
                position: absolute;
                left: -100%;
            }
            .days-prev {
                top: 26px;
            }
        }
    }
    &.active {
        .cui-datePicker {
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
}