react-ui-component/css/date-picker.less

some component build with ReactJs

@import url('meta.less');
@import url('transition.less');

.datepicker {
    position: relative;
    width: 280px;
    ._input {
        cursor: pointer;
        width: 100%;
        line-height: 25px;
        height: 30px;
        padding: 0 10px;
        color: @black;
        border: 1px solid @gray_b;
    }
    >._picker {
        position: absolute;
        z-index: 1000;
        left: 0;
        top: 29px;
    }
    &._top {
        >._picker {
            top: initial;
            bottom: 29px;
        }
    }
    &._left {
        >._picker {
            top: 0;
            left: -280px;
        }
    }
    &._right {
        >._picker {
            top: 0;
            left: 280px;
        }
    }
    .basic_transition;
}

.calendar {
    border: 1px solid @gray_b;
    position: relative;
    width: 280px;
    overflow: hidden;
    >._label {
        background: @gray_c;
        color: @black_c;
        padding: 15px 10px 5px;
        >._year {
            font-size: 30px;
        }
        >._date {
            font-size: 14px;
        }
        a {
            color: @blue;
        }
    }

    table {
        width: 100%;
        font-size: 13px;
        th, td {
            text-align: center;
            vertical-align: middle;
            padding: 3px;
        }
    }

    ._picker-label {
        height: 30px;
        position: relative;
        background: @white;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        ._nav, ._link {
            display: block;
            height: 100%;
            float: left;
            width: 10%;
            line-height: 30px;
        }

        ._link {
            cursor: pointer;
            width: 80%;
            ._year-link, ._month-link {
                color: @blue;
            }
        }

        ._nav {
            width: 10%;
            padding-top: 8px;
            i {
                line-height: 100%;
                border-width: 1px;
                display: block;
                margin-left: 8px;
                font-size: 13px;
                width: 16px;
                height: 12px;
            }
            &._prev {
                i:before {
                    content: '<';
                }
            }
            &._next {
                i:before {
                    content: '>';
                }
            }
            &._year {
                &._prev {
                    i:before {
                        content: '<<';
                    }
                }
                &._next {
                    i:before {
                        content: '>>';
                    }
                }
            }
        }

    }
    
    >._year-picker, >._month-picker {
        font-size: 14px;
        text-align: center;
        >ul {
            overflow: hidden;
            background: @gray_c;
            padding: 0;
            >li {
                list-style-type: none;
                float: left;
                width: 25%;
                padding: 15px 10px;
                ._active {
                    color: @black;
                }
            }
        }
    }

    >._day-picker {
        font-size: 14px;
        table {
            background: @white_a;
        }

        ._week {
            color: @gray_a;
        }

        ._link {
            width: 59%;
        }

        ._day {
            border-radius: 50%;
            display: block;
            line-height: 30px;
            height: 30px;
            width: 30px;
        }

        ._today {
            color: @gray_a;
            border: 1px solid @gray_b;
        }
        ._active {
            background: @gray_b;
            color: @gray_a;
        }
    }
}