/*
    下拉选择框
*/

@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 */
}

.translate(@x, @y) {
    -webkit-transform: translate(@x, @y);
    -moz-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
    transform: translate(@x, @y);
}

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

.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;
}

.cui-selectBoxContainer {
    padding: 8px 10px;
    line-height: normal;
    border: 1px solid #ccc;
    border-radius: 2px;
    outline: 0;
    position: relative;
    min-width: 100px;
    width: 200px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
    .box-sizing(border-box);
    &:before {
        width: 0;
        height: 0;
        border-bottom: transparent\9;
        //border-top: 6px solid #666;
        border-top: 6px solid #aaa;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        right: .5em;
        top: 1.0em;
        z-index: 0;
        .transition(0.3s);
    }
    .placeholder,
    .addon {
        color: #aaa;
    }
    .addon {
        margin-right: 12px;
    }
    .cui-optionsWrapper {
        //top: 100%;
        top: 102%;
        z-index: 10;
        position: absolute;
        overflow: hidden;
        left: -13px;
        right: -13px;
        hr {
            position: relative;
            display: none;
            z-index: 1060;
            margin: 0 12px;
            border-width: 0;
            border-top: solid 1px #ccc;
            border-bottom: solid 1px @c-light-a;
        }
        .cui-options {
            display: none;
            border: 1px solid #ccc;
            border-radius: 0 0 4px 4px;
            border-top-width: 0;
            background-color: @c-common-white;
            margin: 0 12px 20px;
            .box-shadow(0, 6px, 12px, rgba(0, 0, 0, .175));
            .transition(0.4s);
            .translate(0, -100%);
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                max-height: 300px;
                overflow: auto;
                li {
                    padding: .4em .6em;
                    cursor: pointer;
                    display: list-item;
                    text-align: -webkit-match-parent;
                    //
                    color: @c-important-b;
                    &.activeItem {
                        //color: @c-common-black;
                        //background-color: @c-normal-c;
                        color: @c-common-white;
                        background-color: @c-important-a;
                    }
                    &:hover {
                        color: @c-common-white;
                        background-color: @c-important-a;
                        //color: @c-important-a;
                        //background-color: @c-normal-c;
                    }
                }
            }
        }
    }
    &.active {
        //
        //
        border-color: @c-important-a;
        background-color: lighten(@c-important-a, 45%);
        &:before {
            //
            border-top: 6px solid @c-important-a;
            .rotate(180deg);
            border-top: transparent\9;
            //border-bottom: 6px solid #666\9;
            border-bottom: 6px solid #288add\9;
        }
        hr {
            display: block;
        }
        .cui-options {
            .translate(0, 0);
        }
    }
}