artistry/src/styl/abilities/maskable.styl

A powerful and configurable stylesheet

$mask-background-color = rgba(1, 1, 1, 0.5);
$mask-fade-duration = 0.3s;
$mask-delay-duration = 0.3s;

maskable() {
    &:after {
        content: '';
        display: block;
        position: fixed;
        //overflow-y: hidden;
        //overflow-x: hidden;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $mask-background-color;
        opacity: 0;
        transition-property: opacity, visibility;
        transition-duration: $mask-fade-duration;
        transition-delay: $mask-delay-duration;
        will-change: opacity;
        visibility: hidden;
    }

    &[data-position="absolute"] {
        &:after {
            position: absolute;
        }
    }

    &[data-status="locked"] {
        &:after {
            opacity: 1;
            visibility: visible;
        }
    }
}

.maskable {
    maskable();
}