off-canvas.scss

/**
 * @copyright   2010-2014, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}off-canvas {
    position: fixed;
    overflow: auto;
    top: 0;
    height: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: transform $offCanvas-transition, opacity $offCanvas-transition, visibility $offCanvas-transition;
    -webkit-overflow-scrolling: touch;
}

.#{$vendor-prefix}on-canvas {
    position: relative;
    width: 100%;
    max-width: 100%;
    z-index: 2;
    transition: transform $offCanvas-transition, padding $offCanvas-transition;
}

.#{$vendor-prefix}canvas {
    position: relative;
    overflow-x: hidden;
}

//-------------------- Modifiers --------------------//

.#{$vendor-prefix}off-canvas--left {
    @extend .#{$vendor-prefix}off-canvas;

    left: 0;
    width: $offCanvas-left-width;
    transform: translate3d(-100%, 0, 0);

    &.show { transform: translate3d(0, 0, 0) !important; }
}

.#{$vendor-prefix}off-canvas--right {
    @extend .#{$vendor-prefix}off-canvas;

    right: 0;
    width: $offCanvas-right-width;
    transform: translate3d(100%, 0, 0);

    &.show { transform: translate3d(0, 0, 0) !important; }
}

//-------------------- Animations --------------------//

.#{$vendor-prefix}canvas {
    &.on-top,
    &.squish {
        .#{$vendor-prefix}off-canvas { z-index: 3; }
    }

    &.push-reveal {
        .#{$vendor-prefix}off-canvas--left { transform: translate3d(-50%, 0, 0); }
        .#{$vendor-prefix}off-canvas--right { transform: translate3d(50%, 0, 0); }
    }

    &.reverse-push {
        .#{$vendor-prefix}off-canvas--left { transform: translate3d(100%, 0, 0); }
        .#{$vendor-prefix}off-canvas--right { transform: translate3d(-100%, 0, 0); }
    }

    &.reveal {
        .#{$vendor-prefix}off-canvas { transform: translate3d(0, 0, 0); }
    }

    &.push-down {
        .#{$vendor-prefix}off-canvas--left,
        .#{$vendor-prefix}off-canvas--right { transform: translate3d(0, -100%, 0); }
    }

    &.push,
    &.push-reveal,
    &.push-down,
    &.reverse-push,
    &.reveal {
        &.move-left {
            .#{$vendor-prefix}on-canvas {
                transform: translate3d(-$offCanvas-right-width, 0, 0);
            }
        }

        &.move-right {
            .#{$vendor-prefix}on-canvas {
                transform: translate3d($offCanvas-left-width, 0, 0);
            }
        }
    }

    &.squish {
        &.move-left {
            .#{$vendor-prefix}on-canvas {
                padding-right: $offCanvas-right-width;
            }
        }

        &.move-right {
            .#{$vendor-prefix}on-canvas {
                padding-left: $offCanvas-left-width;
            }
        }
    }
}

//-------------------- Responsive --------------------//

@include if-max($offCanvas-mobile-breakpoint) {
    .#{$vendor-prefix}off-canvas--left {
        width: $offCanvas-left-width-mobile;
    }

    .#{$vendor-prefix}off-canvas--right {
        width: $offCanvas-right-width-mobile;
    }

    .#{$vendor-prefix}canvas {
        &.push,
        &.push-reveal,
        &.push-down,
        &.reverse-push,
        &.reveal {
            &.move-left {
                .#{$vendor-prefix}on-canvas {
                    transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
                }
            }

            &.move-right {
                .#{$vendor-prefix}on-canvas {
                    transform: translate3d($offCanvas-left-width-mobile, 0, 0);
                }
            }
        }
    }
}