@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2017-09-19 18:00:24
 * @version $Id$
 */

@import "var.scss";


.do-layer {display:flex;justify-content:center;align-items:center;width:auto;height:auto;

  a {text-decoration:none;}

  
  .layer-box {flex:0 auto;position:absolute;z-index:65535;opacity:0;
    
    &.shift {transition: all .5s ease-out;}


    

    &.scale {transform:scale(1.02);transition:transform .1s linear;}

    /* 默认皮肤 */
    &.skin-normal {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3); 


      /* 弹层标题栏 */
      .layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cd, 2);}

      /* 弹层主体内容 */
      .layer-content {position:relative;width:100%;height:auto;min-height:50px;word-break:break-all;word-wrap: break-word;
          
        .prompt-value {width: 100%;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;

            &.alert {border-color:nth($cr, 2)}
            &:focus {border-color:nth($ct, 2)}
        }
        .msg-box {line-height:30px;}
      }


      /* 弹层按钮部分 */
      .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;

        a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 2);text-align:center;cursor:pointer;

          &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
            
          &:hover {
            &::before {opacity:1;transform:scale(1, .8);}
          }
          &:active {background:nth($cp, 2)}
        }
      }

    }

    /* ;alert/confirm/prompt 3类弹层 */
    &.type-1,
    &.type-2,
    &.type-3 {max-width:600px;min-width:300px;
      
      .layer-content {padding:10px;}
    }


    &.type-4 {padding:0;

      .frame-box {display:block;width:100%;height:100%;margin:0;padding:0;border:0;resize: none;}
    }

    /* tips类弹层(type 5) */
    &.type-5 {visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);box-shadow:none;

      i.arrow {position:absolute;width:0;height:0;border:6px solid transparent;content: ""}
      i.offset-top {left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
      i.offset-bottom {left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
      i.offset-top-left {right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
      i.offset-bottom-left {right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}

      .layer-content {min-height:20px;margin:0;}
    }

    
    /* loading类弹层 */
    &.type-6 {z-index:65539;box-shadow:none;background:transparent;
    
      .layer-content {display:flex;justify-content:center;align-items:center;}
    }

    
    /* 特殊类弹层(toast弹层) */
    &.type-toast {position:fixed;min-width:10px;padding:0;background:transparent;

      .layer-content {min-height:40px;height:40px;}

      .toast-box {display:inline-block;position:relative;min-height:40px;padding:5px 12px 5px 50px;line-height:28px;border-radius:3px;word-break: break-all;

        &.style-info {border:1px solid nth($ct, 2);background:#edfbf8;color:nth($ct, 3);}
        &.style-warn {border:1px solid nth($co, 2);background:#fffbed;color:nth($co, 3);}
        &.style-deny {border:1px solid nth($cr, 2);background:#fffbed;color:nth($cr, 3);}

        >i {position:absolute;left:12px;top:5px;line-height:28px;font-size:26px;}
      }
    }

    
    /* 内置几种loading动画 */
    .loading {position:relative;width:100px;height:100px;margin:auto;

      .dot-box {position:absolute;display:block;}
      
      /* 常规的转动 */
      &.style-1 {

        .dot-box {width:70%;height:70%;margin:15%;line-height:70px;font-size:70px;text-align:center;animation: circle .8s infinite linear;
          
          i {display:block;width:100%;height:100%;}
        }
      }
  
      
      /* 频谱波动 */
      &.style-2 {height:40px;

        .dot-box{display:flex;justify-content:center;width:100%;height:100%;
            
          i {float:left;display:block;width:6px;height:100%;margin:0 3px;background:nth($ct, 3);animation: bounce 1s infinite ease-in-out;transform:scaleY(.6);

            &:nth-child(2) {animation-delay:.1s;}
            &:nth-child(3) {animation-delay:.2s;}
            &:nth-child(4) {animation-delay:.3s;}
            &:nth-child(5) {animation-delay:.4s;}
          }
        }
      }

      /* 缓动圆圈 */
      &.style-3 {width:50px;height:50px;

        .dot-box{width:100%;height:100%;
          
          i {position:absolute;display:block;width:100%;height:100%;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);opacity:.5;
                  
            &::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}

            &:nth-child(2) {animation-delay:.1s;}
            &:nth-child(3) {animation-delay:.2s;}
            &:nth-child(4) {animation-delay:.3s;}
            &:nth-child(5) {animation-delay:.4s;}
          }
        }
      }

      /* 矩阵 */
      &.style-4 {width:60px;height:60px;

        .dot-box{
            
          i {float:left;display:block;width:20px;height:20px;background:nth($ct, 3);animation: grid 1.5s infinite linear;
                  
            &:nth-child(4),
            &:nth-child(8) {animation-delay:.2s;}
            &:nth-child(1),
            &:nth-child(5),
            &:nth-child(9) {animation-delay:.3s;}

            &:nth-child(2),
            &:nth-child(6) {animation-delay:.4s;}

            &:nth-child(3) {animation-delay:.5s;}
          }
        }
      }

    }

  }




  &.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:transparent;backdrop-filter:blur(5px);

    &.shift {transition: all .5s ease-out;}
    &.inner {position:absolute;}
  }
  &:active {z-index:65536;}
}


/* 指令式的tips */
.do-layer__tips {visibility:hidden;position:absolute;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;border-radius:3px;font-size:14px;color:#fff;background:rgba(0,0,0,.5);

  i.arrow {position:absolute;width:0;height:0;border:6px solid transparent;content: ""}
  i.offset-top {left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
  i.offset-bottom {left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
  i.offset-top-left {right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
  i.offset-bottom-left {right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}

  .layer-content {min-height:20px;margin:0;}
}



@keyframes circle {
  to {transform: rotate(360deg)}
}

@keyframes circle2 {
  70%,to {transform: rotate(405deg);opacity:1}
}


@keyframes bounce {
  25% {transform: scaleY(1);}
  50% {transform: scaleY(.6);}
}


@keyframes grid { 
  36% {transform: scale(.1);opacity:.3}
  60% {transform: scale(1);opacity:1}
}



@media screen and (max-width:480px) {
  .do-layer {
    .layer-box {
      &.type-1,&.type-2,&.type-3,&.type-4,&.type-7 {width:90%;}
    }
  }
}