vue-poster-editor/lib/styles/widgets/popup.less

A poster editor based on Vue.js

// editor-popup
.editor-popup{
    background: #FFF;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    padding: 8px 12px;
    min-width: 40px;
    position: absolute;

    &:before{
        background: inherit;
        box-shadow: -2px -2px 2px rgba(0, 0, 0, .1);
        content: "";
        margin-bottom: -5px;
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 100%;
        left: 15px;

        transform: rotate(45deg);
        pointer-events: none;
    }

    &.editor-popup-nw{
        top: 100%;
        left: 0;
    }
}
// editor-popup-list
.editor-popup-list{
    background-color: rgba(255, 255, 255, .9);
    margin: -35px 0 0 -10px;
    padding: 8px;

    &:before{
        display: none;
    }

    .list{
        position: relative;
        max-height: 420px;
        overflow: auto;

        ul{
            margin: 0;
            padding: 0;
        }
        li{
            border-radius: 3px;
            cursor: pointer;
            font-size: 1.2em;
            margin-top: 1px;
            padding: 5px 15px 5px 10px;
            vertical-align: top;
            white-space: nowrap;

            transition: background-color linear .2s;

            &:first-child{
                margin-top: 0;
            }

            &:hover,
            &.current{
                background-color: rgba(255, 186, 0, .8);
            }
        }
    }
}

// ui-mask editBy:caigua
.ui-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: .5;
    width: 100%;
    height: 100%;
    background-color: #000;
}