artistry/src/styl/drawer/drawer.styl

A powerful and configurable stylesheet

@require 'drawer-settings.styl';
@require '../animation/overflow.styl';

$drawer-transition-duration = $drawer-fade-duration + $drawer-slide-duration;

// TODO: Create z-index override to force on top
.drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $drawer-z-index;
    visibility: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    transition-property: visibility;
    transition-duration: $drawer-transition-duration;
    will-change: visibility;

    & > .drawer-background {
        position: absolute;
        overflow-y: hidden;
        overflow-x: hidden;
        top: 0;
        right: 0;
        //bottom: 0;
        left: 0;
        min-height: 100%;
        background-color: $drawer-mask-background-color;
        opacity: 0;
        transition-property: opacity;
        transition-duration: $drawer-fade-duration;
        transition-delay: $drawer-slide-duration;
        will-change: opacity;

        & > .drawer-scroller {
            display: block;
            position: absolute;
            //overflow-y: hidden;
            max-height: 100%;
            z-index: $drawer-z-index + 1;
            transition-property: transform;
            transition-duration: $drawer-slide-duration;
            transition-delay: $drawer-fade-duration;

            & > .drawer-content {
                background-color: $drawer-background-color;
                padding: 0;
                border: $drawer-border-width solid $drawer-border-color;
                border-radius: $drawer-border-radius;
                box-shadow: $drawer-box-shadow;
                clearfix();
            }
        }
    }

    &.drawer-space {
        & > .drawer-background {
            & > .drawer-scroller {
                & > .drawer-content {
                    padding: $drawer-padding;
                }
            }
        }
    }

    &.drawer-top > .drawer-background > .drawer-scroller {
        top: 0;
        left: 0;
        right: 0;
        transform: "translateY(calc(-100% - %s))" % $drawer-slide-buffer;

        .drawer-full& {
            bottom: 0;
        }
    }

    &.drawer-right > .drawer-background > .drawer-scroller {
        top: 0;
        right: 0;
        bottom: 0;
        transform: "translateX(calc(100% + %s))" % $drawer-slide-buffer;

        & > .drawer-content {
            min-height: 100%;
        }

        .drawer-full& {
            left: 0;
        }
    }

    &.drawer-bottom > .drawer-background > .drawer-scroller {
        right: 0;
        bottom: 0;
        left: 0;
        transform: "translateY(calc(100% + %s))" % $drawer-slide-buffer;

        .drawer-full& {
            top: 0;
            overflow-y: visible;
            max-height: unset;
            position: relative;
        }
    }

    &.drawer-left > .drawer-background > .drawer-scroller {
        top: 0;
        bottom: 0;
        left: 0;
        transform: "translateX(calc(-100% - %s))" % $drawer-slide-buffer;

        & > .drawer-content {
            min-height: 100%;
        }

        .drawer-full& {
            right: 0;
        }
    }

    &.drawer-right,
    &.drawer-left {
        overflow-x: hidden;
        overflow-y: hidden;

        & > .drawer-background {
            position: fixed;
        }
    }

    &.drawer-open {
        visibility: visible;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        & > .drawer-background {
            opacity: 1;
            transition-delay: 0s;
            overflow-y: visible;
            overflow-x: visible;
            animation-name: overflow-xy-hidden;
            animation-duration: $drawer-transition-duration;

            & > .drawer-scroller {
                transition-delay: $drawer-fade-duration;
                transform: none;
                overflow-y: visible;
                overflow-x: visible;
                //animation-name: overflow-xy-hidden;
                //animation-duration: $drawer-transition-duration;
            }
        }

        &.drawer-right,
        &.drawer-left {
            overflow: hidden;
            animation-name: overflow-y-scroll;
            animation-duration: $drawer-transition-duration;
            -webkit-overflow-scrolling: auto;

            & > .drawer-background {
                overflow-y: scroll;
                animation-name: left-right-background-open;
                -webkit-overflow-scrolling: touch;
            }
        }
    }
}

@keyframes left-right-background-open {
    from {
        position: absolute;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    to {
        position: absolute;
        overflow-x: hidden;
        overflow-y: hidden;
    }
}