wcui/js/lib/layer/skin/def.scss

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

@import "../../../../css/var.scss";


.do-layer {position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto;

    a {text-decoration:none;}

    /* 默认皮肤 */
    &.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
        
        .icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
        .icon-1::before {content:"\e610";color:nth($ct, 1);} // get
        .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
        .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
        .icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
        .icon-5::before {content:"\e630";color:nth($ct, 1);} // face
        .icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
        .icon-7::before {content:"\e623";color:nth($co, 1);} // star
        .icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
        .icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute   


        /* 弹层标题栏 */
        .layer-title {width:100%;height:43px;padding:0 8px;line-height:43px;background:#f5f5f5;font-size:16px;color:nth($cgr, 1);}

        .action-min,
        .action-close {position:absolute;display:block;top:12px;width:20px;height:20px;line-height:20px;font-size:14px;text-align:center;cursor:pointer;color:nth($cgr, 2);

            &:hover {color:nth($ct, 1);}
        }
        .action-min {right:40px;
            &::before {content:"\e634"}
        }
        .action-close {right:10px;
            &::before {content:"\e687"}
        }

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

            .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
            .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;

                .prompt-value {width: 230px;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;}
            }

            &.none-icon .detail {margin:0 auto;}
        }


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

            a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1);@include ts();
                
                &:hover {background:nth($cp, 2)}
                &:active {background:nth($cp, 3)}
            }
        }

    }

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


    /* tips类弹层(type 5) */
    &.type-5 {visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;

        &.active {visibility:visible;opacity:1;}
        i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}

        .layer-content .detail {margin:0;padding:0}
    }

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

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

        .layer-content {min-height:60px;padding:0}
        .layer-content .detail {margin:0;padding:0}
    }

    
    /* 内置几种loading动画 */
    .loading-box {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%;-webkit-animation: circle 1.3s infinite linear;-moz-animation: circle 1.3s infinite linear;animation: circle 1.3s infinite linear;

                &::after {content:"\e648";font:70px/1 "ui font";}
            }
        }

        &.style-2 {
            .dot-box::after {content:"\e64a";}
        }
        
        /* 频谱波动 */
        &.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);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);

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

        /* 缓动圆圈 */
        &.style-4 {

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

                    &:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
                    &:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
                    &:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
                    &:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;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);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
                        
                    &:nth-child(4),
                    &:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
                    &:nth-child(1),
                    &:nth-child(5),
                    &:nth-child(9) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}

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

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


    }

    &:active {z-index:65536;}

}

.do-layer-cover {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);

    &.type-6 {background:rgba(0,0,0,.3);}
}


@-webkit-keyframes circle {
    to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes circle {
    to {-moz-transform: rotate(360deg);}
}
@keyframes circle {
    to {transform: rotate(360deg)}
}

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

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



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