getlackey/lackey-cms

@import "vars";

button.lky-edit-block {
    position: absolute;
    width: 1em; height: 1em;
    z-index: 100000;

    font-size: 3rem;
    background: {
        color: $color-background;
        image: url(../../../img/cms/cms/svg/ui/settings/settings.svg);
        size: 60%;
        position: center;
        repeat: no-repeat;
    }

    transition: background-color 0.5s $timing-material-decelerate;

    animation: target-change 0.5s $timing-material-standard 1;
    @keyframes target-change {
        from { background-color: $color-background-highlight; }
        to { background-color: $color-background; }
    }
    &[data-target-change] { animation: none; }

    &:hover {
        background-color: $color-background-accent;

        transition: background-color 0.2s $timing-material-standard;
    }
}

figure.lky-block-overlay {
    position: absolute;
    z-index: 99999;

    pointer-events: none;
    user-select: none;

    background-color: transparent;
    border: 2px dashed transparentize($color-background-highlight, 0.2);

    animation: target-change-overlay 0.7s $timing-material-sharp 1;
    @keyframes target-change-overlay {
        0% { background-color: transparent; }
        50% { background-color: transparentize($color-background-highlight, 0.8); }
        100% { background-color: transparent; }
    }
    &[data-target-change] { animation: none; }
}