react-ui-component/css/popup.less

some component build with ReactJs

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

.popup {
    @short: 6px;
    @long: 8px;
    @base: -17px;

    .border_base {
        border-width: inherit;
        border-color: inherit;
    }

    ._trigger {
        display: inline-block;
        cursor: pointer;
    }

    ._wrap {
        display: block;
        position: relative;
        ._content {
            position: absolute;
            z-index: 100;
            max-width: 350px;
            min-width: 150px;
            background: @white;
            border-radius: @border_radius;
            text-align: center;
            padding: 10px;
            border: 1px solid @gray_b;
        }

        ._arrow {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: @long @short;
            border-color: @gray_b transparent transparent transparent;
            &:before {
                content: '';
                position: absolute;
                border-style: solid;
                border-width: @long @short;
            }
        }

        &._top ._arrow {
            left: 50%;
            margin-left: -@short;
            bottom: @base;
            &:before {
                .border_base;
                left: inherit;
                margin-left: -@short;
                bottom: -@short;
                border-top-color: @white;
            }
        }

        &._left ._arrow {
            border-width: @short @long;
            right: @base;
            top: 50%;
            margin-top: -@long;
            border-color: transparent transparent transparent @gray_b;
            &:before {
                .border_base;
                top: inherit;
                margin-top: -@short;
                right: -@short;
                border-left-color: @white;
            }
        }

        &._right ._arrow {
            top: 50%;
            left: @base;
            margin-top: -@long;
            border-width: @short @long;
            border-color: transparent @gray_b transparent transparent;
            &:before {
                .border_base;
                top: inherit;
                margin-top: -@short;
                left: -@short;
                border-right-color: @white;
            }
        }

        &._bottom ._arrow {
            left: 50%;
            top: @base;
            margin-left: -@short;
            border-color: transparent transparent @gray_b transparent;
            &:before {
                .border_base;
                left: inherit;
                top: -@short;
                margin-left: -@short;
                border-bottom-color: @white;
            }
        }
    }
    .basic_transition;
}

.confirm-box {
    ._action {
        margin-top: 10px;
        font-size: 80%;
        text-align: center;
        ._cancel, ._confirm {
            cursor: pointer;
            display: inline-block;
        }
        ._confirm {
            margin-right:5px; 
        }
    }
}