精简layer的部分图标和动画,同时图标改为共享UI库的图标
宇天
parent
ed0adceef7
commit
8bfca19c87
|
|
@ -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: 9,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 2,
|
||||
5: 5,
|
||||
6: 5,
|
||||
7: 5
|
||||
1: 0,
|
||||
2: 0,
|
||||
3: 5,
|
||||
4: 5,
|
||||
5: 9
|
||||
},
|
||||
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 ''
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -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}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Reference in New Issue