You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.6 KiB
119 lines
3.6 KiB
//.#{$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;
|
|
}
|
|
}
|
|
|
|
} |