react-ui-component/css/dropdown.less

some component build with ReactJs

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


.dropdown {
    @line_height: 25px;
    @height: 30px;

    position: relative;
    
    ._placeHolder {
        color: @gray_b;
    }

    .__label {
        color: @black_c;
        padding: 0 8px;
        line-height: @line_height;
        height: @height;
        border: 1px solid @gray_b;
        position: relative;
        &>input._transparent {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            opacity: 0;
        }
        >._text {
            .truncate;
        }
    }

    ._label {
        .__label;
        cursor: pointer;
    }
    ._list {
        margin-top: -1px;
        position: absolute;
        width: 100%;
        z-index: 100;
        background: @white;
        border: 1px solid @gray_b;
        max-height: @line_height * 10;
        overflow: auto;
        &:empty {
            border: none;
        }
        >._item {
            cursor: pointer;
            padding: 3px 16px;
            border-bottom: 1px solid transparent;
            &._active {
                background: @gray_c;
                border-color: @gray_d;
            }
        }

    }
    &._active {
        ._search ._text {
            color: @gray_b;
        }
    }

    ._overlay {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 9;
        background: rgba(250, 250, 250, 0.5);
        .loader {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0);
            -ms-transform: translate3d(-50%, -50%, 0);
            -o-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
        }
    }

    ._search {
        .__label;
        position: relative;
        ._text {
            cursor: text;
            position: relative;
            background: none;
            display: inline-block;
            line-height: @line_height;
            z-index: 2;
        }
        ._input {
            background: none;
            padding: 0 5px;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            right: 0;
            bottom: 0;
            width: 100%;
            border: none;
            z-index: 3;
        }
    }

    ._multi {
        border: 1px solid @gray_b;
        line-height: @line_height;
        height: @height;
        width: 100%;
        padding: 1px 5px;
        ._input {
            border: none;
            display: inline;
            white-space: pre;
            max-width: 100%;
        }

        ._placeHolder {
            margin-left: -6px;
        }
        
        ._tag {
            cursor: pointer;
            margin-right: 3px;
            background: @gray_c;
            color: @black;
            font-size: 14px;
            padding: 0 3px;
            ._text {
                padding-right: 3px; 
            }

            ._delete {
                color: @black;
                &:before {
                    content: 'x';
                }
            }
        }
    }

    &._top> ._list {
        bottom: 30px;
    }

    .basic_transition;
}