getlackey/lackey-cms

.lackey-cms {
    .modal {
        margin-left: 10%;
        margin-top: 10%;
        padding: 60px;
        position: fixed;
        width: 80%;
        top: 0px;
        left: 0px;
        z-index: 99999;
        background: #fff;
        border: solid 1px #666666;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        max-height: 70%;

        [data-lky-close] {
            position: absolute;
            top: 0;
            right: 0;
            margin: 12px 20px;
            font-size: 50px;
            cursor: pointer;
            line-height: 1;
            color: #b1b1b1;
            &:hover {
                color: #303030;
            }
        }
    }
    .fullscreen {
        position: fixed;
        width: 100%;
        height: calc(100% - 50px);
        background-color: rgba(0, 0, 0, 0);
        top: 50px;
        left: 0px;
        z-index: 99999;
        -webkit-transition: background .5s ease-out;
        -moz-transition: background .5s ease-out;
        -o-transition: background .5s ease-out;
        transition: background .5s ease-in;
        overflow-y: auto;
    }
}
[data-lky-overlay] {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.open .lackey-cms .fullscreen {
    background-color: rgba(0, 0, 0, 1);
}