@charset "UTF-8";



//颜色定义
$bg-color:            #ffffff;
$text-color:          #333333;
$text-color-light:    #666666;
$text-color-lighter:  #999999;


//底部动画 进入 
@keyframes animation-slide-bottom-in {
  0% { bottom: -70%;opacity: 0;}
  100% { bottom: 0;opacity: 1;}
}
//底部动画 移出
@keyframes animation-slide-bottom-out {
  0% { bottom: 0;opacity: 1;}
  100% { bottom: -70%;opacity: 0;}
}
//顶部动画 进入 
@keyframes animation-slide-top-in {
  0% { top: -150%;opacity: 0;}
  100% { top: 0;opacity: 1;}
}
//顶部动画 移出
@keyframes animation-slide-top-out {
  0% { top: 0;opacity: 1;}
  100% { top: -150%;opacity: 0;}
}


//中间动画 进入 
@keyframes animation-slide-middle-in {
  0% { top: -40%;opacity: 0;}
  100% { top: 50%;opacity: 1;}
}
//中间动画 移出
@keyframes animation-slide-middle-out {
  0% { top: 50%;opacity: 1;}
  100% { top: -40%;opacity: 0;}
}

//右侧动画 进入 
@keyframes animation-slide-right-in {
  0% { right: -100%;opacity: 0;}
  100% { right: 0;opacity: 1;}
}
//右侧动画 移出
@keyframes animation-slide-right-out {
  0% { right: 0;opacity: 1;}
  100% { right: -100%;opacity: 0;}
}


//底部灰色遮罩背景 进入 
@keyframes maskbg-in {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
//底部灰色遮罩背景 进入
@keyframes maskbg-out {
  0% { opacity: 1;}
  100% { opacity: 0;}
}


//遮罩弹层
.dlr-maskcont{
  color:$text-color;
  position:relative;
  z-index:1000;
  
  //底部弹层
  .dlr-maskcont-bottom{
    position:fixed;
    z-index:11;
    bottom:0;
    left:0;
    width:100%;
  }
  
  //顶部弹层
  .dlr-maskcont-top{
    position:fixed;
    z-index:11;
    top:0;
    left:0;
    width:100%;
  }

  //中间弹层
  .dlr-maskcont-middle{
    position:fixed;
    z-index:11;
    top:50%;
    left:50%;
    width:82%;
    transform:translate3d(-50%,-50%,0);
  }

  //右侧弹层
  .dlr-maskcont-right{
    position:fixed;
    z-index:11;
    top:0;
    right:0;
    width:85%;
    height:100%;
  }



  //黑色遮罩
  .dlr-mask-bg{
    position:fixed;
    z-index:10;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.6);
  }


  

  //底部动画 进入 
  &.dlr-slide-bottom-in{
   animation: maskbg-in 300ms;
    .dlr-maskcont-bottom{
      animation: animation-slide-bottom-in 300ms;
    }
  }
  //底部动画 离开 
  &.dlr-slide-bottom-out{
    animation: maskbg-out 300ms;
    .dlr-maskcont-bottom{
      animation: animation-slide-bottom-out 300ms;
    }
  }
  
  //顶部动画 进入 
  &.dlr-slide-top-in{
   animation: maskbg-in 300ms;
    .dlr-maskcont-top{
      animation: animation-slide-top-in 400ms;
    }
  }
  //顶部动画 离开 
  &.dlr-slide-top-out{
    animation: maskbg-out 300ms;
    .dlr-maskcont-top{
      animation: animation-slide-top-out 400ms;
    }
  }

  //中间动画 进入 
  &.dlr-slide-middle-in{
   animation: maskbg-in 300ms;
    .dlr-maskcont-middle{
      animation: animation-slide-middle-in 300ms;
    }
  }
  //中间动画 离开 
  &.dlr-slide-middle-out{
    animation: maskbg-out 300ms;
    .dlr-maskcont-middle{
      animation: animation-slide-middle-out 300ms;
    }
  }

  
  //右侧动画 进入 
  &.dlr-slide-right-in{
   animation: maskbg-in 300ms;
    .dlr-maskcont-right{
      animation: animation-slide-right-in 300ms;
    }
  }
  //右侧动画 离开 
  &.dlr-slide-right-out{
    animation: maskbg-out 300ms;
    .dlr-maskcont-right{
      animation: animation-slide-right-out 300ms;
    }
  } 

  
  

}