getlackey/lackey-cms

[data-lky-block] {
    display: flex;
    padding: 0;

    border: 2px solid $color-lackey-light-blue;
    background-color: #fff;

    transition: border-color 0.3s;

    @at-root {
        [data-lky-highlight] & {
            border-color: $color-pink;
        }
    }

    [data-lky-icon] {
        flex: 0 0 auto;

        section.block-list & {
            cursor: move;
        }
    }

    [data-lky-bin],
    [data-lky-cog] {
        opacity: 0.8;
        cursor: pointer;
    }

    > div {
        flex: 1 0 auto;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        border-left: 2px solid $color-lackey-light-blue;
    }

    &[data-lky-locked] {
        border-color: transparentize($color-lackey-light-gray, 0.5);
        > div { border-left-color: transparentize($color-lackey-light-gray, 0.5); }

        [data-lky-icon], [data-lky-bin] { opacity: 0.2; }
        [data-lky-bin] {
            cursor: default;
            pointer-events: none;
        }
    }

    [data-lky-editable]:not([data-lky-editable=true]) > & {
        position: relative;

        &:after {
            content: "";

            position: absolute;
            left: 0; right: 0;
            top: 0; bottom: 0;

            background-image: url(../../../img/cms/cms/svg/block/lock.svg);
            background-position: left top;
            background-repeat: no-repeat;

            pointer-events: none;
        }

        > img { opacity: 0.65; }
    }
}

figure[data-lky-component][data-lky-type],
[data-lky-hook="lackey"] [data-lky-hook="main-area"] [data-lky-component="settings"] [data-lky-hook="settings.blocks"] figure[data-lky-component][data-lky-type] {
    > label {
        display: block;
        margin: 5px 0px 3px;

        color: $color-background-accent;
        font-weight: 500;
    }
}

[data-lky-hook="sections"] {
    > ul {
        > li {
            > span {
                color: $color-lackey-light-blue;
                display: block;
                padding: 10px 0px 5px;
            }
        }
    }
}

[data-lky-add-block] {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;

    position: relative;
    display: block;
    width: 100%;
    height: 30px;

    cursor: copy;

    &:before {
        content: "";

        position: absolute;
        left: 0; right: 0;
        top: 50%;
        width: 100%;
        height: 2px;

        background-color: $color-lackey-blue;
        pointer-events: none;
    }

    &:after {
        $circle-size: 1.25rem;
        content: "";

        position: absolute;
        left: 50%;
        top: 50%;
        width: $circle-size;
        height: $circle-size;

        background: {
            image: url(../../../img/cms/cms/svg/ui/add-block.svg);
            size: 100%;
        }
        border-radius: 100%;
    }

    * + & { margin-top: 5px; }

    &:not(:hover) {
        opacity: 0;

        transition: opacity 0.3s $timing-material-accelerate;

        &:before {
            transform: translateY(-50%) scaleX(0.00001);

            transition: transform 0s 0.3s;
        }

        &:after {
            transform: translate(-50%, -50%) scale(0.00001);

            transition: transform 0.3s $timing-material-accelerate;
        }
    }
    &:hover,
    &:first-child:last-child {
        opacity: 1;

        transition: opacity 0.1s;

        &:before {
            transform: translateY(-50%);

            transition: transform 0.25s 0.1s $timing-material-sharp;
        }

        &:after {
            transform: translate(-50%, -50%);

            transition: transform 0.3s $timing-material-decelerate;
        }
    }
}

[data-lky-hook="lackey"] [data-lky-hook="main-area"] [data-lky-component="settings"] [data-lky-hook="settings.blocks"] {
    display: flex;

    > div {
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        &[data-lky-hook="sections"] {
            &:empty:after {
                content: "Blocks cannot be added to this element.";
            }

            > section.block-list {
                > * {
                    margin: 0 auto;
                    width: 225px;
                }
            }
        }

        &[data-lky-hook="layout"] {
            position: relative;
            padding-top: 6.5rem;

            &:before {
                content: "Block Layout";

                position: absolute;
                top: calc(6.5rem - 1.35em);

                font-size: 14px;
                font-weight: 500;
                color: $color-background-accent;
            }

            > figure {
                position: relative;
                top: 0 !important; // Override style attribute.
                left: 0 !important; // Override style attribute.
                box-sizing: content-box;

                font-size: ($settings-edit-width - 100px);

                &:not(.block) {
                    width: 1em;
                }
                &.block {
                    border: 1px solid $color-lackey-blue;
                }

                figure.block {
                    position: absolute;
                    margin: 0;
                    padding: 0;

                    border: 1px solid $color-lackey-blue;
                    overflow: hidden;
                    cursor: zoom-in;

                    transition: background-color 0.4s;

                    &[data-lky-highlight] { background-color: $color-lackey-blue; }

                    &[data-has-children] > figure.block { display: none; }
                }

                figure.element {
                    position: absolute;
                    margin: 0;
                    padding: 0;

                    pointer-events: none;
                    border: 1px solid $color-lackey-lighter-blue;
                    background-color: rgba($color-lackey-lighter-blue, 0.25);

                    &.at-left { border-left-color: transparent; }
                    &.full-width {
                        border-left-color: transparent;
                        border-right-color: transparent;
                    }

                    &.at-top { border-top-color: transparent; }
                    &.full-height {
                        border-top-color: transparent;
                        border-bottom-color: transparent;
                    }
                }
            }
        }
    }
}

.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.gu-transit {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}