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

@import "var.scss";


.do-layer {width:auto;height:auto;

  a {text-decoration:none;}

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

    &.__tc {top:0;left:50%;}
    &.__tl {top:0;left:0;}
    &.__tr {top:0;left:100%;}
    &.__ct {top:50%;left:50%;}
    &.__cc {top:47.5%;left:50%;}
    &.__bc {top:100%;left:50%;}
    &.__bl {top:100%;left:0;}
    &.__br {top:100%;left:100%;}

    

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

    /* 默认皮肤 */
    &.skin-default {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($cgr, 1);}

      /* 弹层主体内容 */
      .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;

          // .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
          
        .prompt-value {width: 100%;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;

            &.alert {border-color:nth($cr, 1)}
            &:focus {border-color:nth($ct, 1)}
        }
        .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, 1);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, 2); 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, 1)}
        }
      }

    }

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


    /* 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;padding:0}
    }

    
    /* loading类弹层 */
    &.type-6 {z-index:65539;box-shadow:none;background:transparent;}

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

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

      .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, 1);background:#edfbf8;color:nth($ct, 3);}
        &.style-warn {border:1px solid nth($co, 1);background:#fffbed;color:nth($co, 3);}
        &.style-deny {border:1px solid nth($cr, 1);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,&.style-2 {

        .dot-box {width:70%;height:70%;margin:15%;line-height:70px;font-size:70px;text-align:center;
          
          i {display:block;width:100%;height:100%;}
        }
      }

      &.style-1 {
        .dot-box {animation: circle .8s infinite linear;}
      }
      &.style-2 {
        .dot-box {animation: round .6s infinite linear;}
      }
      
      /* 频谱波动 */
      &.style-3 {height:50px;

        .dot-box{width:100%;height:100%;
            
          i {float:left;display:block;width:10px;height:100%;margin:0 5px;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-4 {

        .dot-box{width:60%;height:60%;margin:20%;
          
          i {position:absolute;display:block;width:60px;height:60px;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);
                  
            &::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-5 {

        .dot-box{width:90%;height:90%;margin:5%;
            
          i {float:left;display:block;width:30px;height:30px;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:rgba(0,0,0,.3);

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


/* 指令式的tips */
.do-layer__tips {visibility:hidden;position:fixed;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;padding:0}
}



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

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

@keyframes round {
  from,24.99%, to {transform:rotate(0deg)}
  25%,49.99% {transform:rotate(90deg)}
  50%,74.99% {transform:rotate(180deg)}
  75%,99.99% {transform:rotate(270deg)}
}


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


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