//.#{$namespace}android{
.#{$namespace}off-canvas-wrap{
    .#{$namespace}bar{//fix android
       position: absolute!important;
       @include transform(translate3d(0, 0, 0));//fix ios(offcanvas scalable的时候,bar会消失)
       -webkit-box-shadow: none;
       box-shadow: none;
    }
   } 
//}

.#{$namespace}off-canvas-wrap{
    position: relative;
    width:100%;
    height: 100%;
    overflow: hidden;
    z-index: z("default");
    .#{$namespace}inner-wrap{
        position: relative;
        width: 100%;
        height:100%;
        z-index: z("default");
        &.#{$namespace}transitioning{
            -webkit-transition: -webkit-transform 350ms ;
            transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);    
        }
        .#{$namespace}off-canvas-left {
            @include transform(translate3d(-100%, 0, 0));
        }
        .#{$namespace}off-canvas-right{
            @include transform(translate3d(100%, 0, 0));
        }
    }
    &.#{$namespace}active{
         overflow:hidden;
         height:100%;
         .#{$namespace}off-canvas-backdrop{
//           -webkit-backface-visibility: hidden;
            transition: background 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
            display: block;
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: z("backdrop");
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   
         } 
    }
    &.#{$namespace}slide-in{
        .#{$namespace}off-canvas-right {
            -webkit-transform: translate3d(100%, 0px, 0px);
            z-index: z("max")!important;
        }
        .#{$namespace}off-canvas-left {
            -webkit-transform: translate3d(-100%, 0px, 0px);
            z-index: z("max")!important;
        }
    }
}


.#{$namespace}off-canvas-left, .#{$namespace}off-canvas-right {
//  -webkit-backface-visibility: hidden;
    width: 70%;
    min-height:100%;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #333;
    box-sizing: content-box;
    -webkit-overflow-scrolling: touch;
    z-index: -1;
    visibility: hidden;
    &.#{$namespace}transitioning{
        -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);    
    }
}
.#{$namespace}off-canvas-left {
    left: 0;
}
.#{$namespace}off-canvas-right {
    right: 0;
}

//scalable
.#{$namespace}off-canvas-wrap:not(.#{$namespace}slide-in).#{$namespace}scalable {
    background-color: #333;
    >.#{$namespace}off-canvas-left,>.#{$namespace}off-canvas-right{
        width: 80%;
        @include transform(scale(0.8));
        opacity: 0.1;
        &.#{$namespace}transitioning{
            -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
        }
    }
    >.#{$namespace}off-canvas-left{
        -webkit-transform-origin: -100%;
        transform-origin: -100%;
    }
    >.#{$namespace}off-canvas-right{
        -webkit-transform-origin: 200%;
        transform-origin: 200%;
    }
    &.#{$namespace}active{
         >.#{$namespace}inner-wrap{
             @include transform(scale(0.8));
         }
         >.#{$namespace}off-canvas-left,>.#{$namespace}off-canvas-right{
             @include transform(scale(1));
             opacity: 1;
         }
    }
    
}