精简layer的部分图标和动画,同时图标改为共享UI库的图标

js/lib/layer/base.js

@@ -14,7 +14,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
         return window.layer
     }
 
-    yua.ui.layer = '0.0.4-base'
+    yua.ui.layer = '1.0.0-base'
     var layerDom = {},
         layerObj = {},
         unique = null, //储存当前打开的1/2/3类型的弹窗
@@ -253,14 +253,11 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
     }*/
     __constructor.prototype = {
         dot: { //loading的子元素数量
-            0: 4,
+            1: 0,
-            1: 9,
+            2: 0,
-            2: 2,
+            3: 5,
-            3: 3,
+            4: 5,
-            4: 2,
+            5: 9
-            5: 5,
-            6: 5,
-            7: 5
         },
         timeout: null,
         create: function(){
@@ -327,7 +324,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
             }
         },
         getLoading: function(style){
-            return '<div class="do-ui-load load-style-'
+            return '<div class="loading-box style-'
                     + style
                     + '">'
                 + '<span class="dot-box">'
@@ -346,7 +343,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                 }
                 
                 html += '>{{title}}'
-                    + '<a class="action-close def-font" :click="no(\'' + this.init.$id + '\')"></a>'
+                    + '<a class="action-close do-ui-font" :click="no(\'' + this.init.$id + '\')"></a>'
                     + '</div>'
             }
             return html
@@ -357,7 +354,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                 return ''
             }
             if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
-                return '<span class="def-font msg-icon icon-' + this.init.icon + '"></span>'
+                return '<span class="do-ui-font msg-icon icon-' + this.init.icon + '"></span>'
             }
             return ''
         },

js/lib/layer/skin/def.scss

@@ -0,0 +1,232 @@
+@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-1::before {content:"\e610";color:nth($cg, 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($cg, 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($cg, 1);} // unmute   
+
+
+        /* 弹层标题栏 */
+        .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 1);font-size:14px;color:nth($cgr, 1);}
+
+        .action-min,
+        .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2);
+
+            &:hover {border: 1px solid #ddd;line-height: 18px;color:nth($cg, 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;}
+                .msg-box {line-height:30px;}
+            }
+
+            &.none-icon .detail {margin:0 auto;}
+        }
+
+
+        /* 弹层按钮部分 */
+        .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;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;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}
+        }
+
+    }
+
+    /* ;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($cg, 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($cg, 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($cg, 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}
+}
+
+
+