diff --git a/js/lib/layer/base.js b/js/lib/layer/base.js index a3dd3b0..5852ce8 100644 --- a/js/lib/layer/base.js +++ b/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: 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 '
' + '' @@ -346,7 +343,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){ } html += '>{{title}}' - + '' + + '' + '
' } 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 '' + return '' } return '' }, diff --git a/js/lib/layer/skin/def.css b/js/lib/layer/skin/def.css index b95ee3a..3e825c3 100644 --- a/js/lib/layer/skin/def.css +++ b/js/lib/layer/skin/def.css @@ -1,234 +1 @@ -@charset "UTF-8"; -/** - * - * @authors yutent (yutent@doui.cc) - * @date 2016-09-21 01:36:22 - * - */ - - -.do-layer, .do-layer * {vertical-align: baseline;box-sizing:border-box;} -.do-layer a {text-decoration:none;} - -@font-face {font-family: "def-font"; - src: url('def.eot'); /* IE9*/ - src: url('def.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ -} - -.do-layer-cl::after {visibility:hidden;overflow:hidden;display:block;height: 0;content: ".";clear: both;} -.do-layer-cover {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);} -.do-layer {position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto;} -.do-layer:active {z-index:65536;} - - -/*默认皮肤样式*/ -.do-layer.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);} -.do-layer.skin-def .def-font {display: inline-block;font-family:"def-font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} -.do-layer.skin-def .icon-1:before {content:"\e6f1";color:#11b330;}/*discover*/ -.do-layer.skin-def .icon-2:before {content:"\e6fa";color:#f30;}/*position*/ -.do-layer.skin-def .icon-3:before {content:"\e6f0";color:#f30;}/*del*/ -.do-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}/*fire*/ -.do-layer.skin-def .icon-5:before {content:"\e6f9";color:#09f;}/*pilot*/ -.do-layer.skin-def .icon-6:before {content:"\e700";color:#f7b824}/*message*/ -.do-layer.skin-def .icon-7:before {content:"\e6fc";color:#63e2c2}/*talk*/ -.do-layer.skin-def .icon-8:before {content:"\e6f6";color:#f7b824}/*warn*/ -.do-layer.skin-def .icon-9:before {content:"\e6fb";color:#f60;}/*star*/ -.do-layer.skin-def .icon-10:before {content:"\e6f8";color:#48d0f7;}/*happy*/ -.do-layer.skin-def .icon-11:before {content:"\e6fd";color:#f90;}/*sad*/ -.do-layer.skin-def .icon-12:before {content:"\e631";color:#09a;}/*share*/ -.do-layer.skin-def .icon-13:before {content:"\e6f3";color:#f60;}/*search*/ -.do-layer.skin-def .icon-14:before {content:"\e6f4";color:#09a;}/*user*/ -.do-layer.skin-def .icon-15:before {content:"\e701";color:#f30;}/*minus*/ -.do-layer.skin-def .icon-16:before {content:"\e703";color:#f7b824;}/*wait*/ -.do-layer.skin-def .icon-17:before {content:"\e704";color:#11b330;}/*right*/ - - - -.do-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;} -.do-layer.skin-def .action-min,.do-layer.skin-def .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#666;} -.do-layer.skin-def .action-min {right:40px;} -.do-layer.skin-def .action-close {right:10px;} -.do-layer.skin-def .action-close:hover,.do-layer.skin-def .action-min:hover {border: 1px solid #ddd;line-height: 18px;color:#049789;} -.do-layer.skin-def .action-min:before {content:"\e600";} -.do-layer.skin-def .action-close:before {content:"\e659";} - -.do-layer.skin-def .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;} -.do-layer.skin-def .layer-content .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:40px;text-align:center;} -.do-layer.skin-def .layer-content .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;} -.do-layer.skin-def .layer-content.none-icon .detail {margin:0 auto;} -.do-layer.skin-def .layer-content .detail .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;} -.do-layer.skin-def .layer-content .detail .msg-box {line-height:30px;} - - -.do-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;} -.do-layer.skin-def .layer-btns 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;} - -.do-layer.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;transition:opacity .3s ease-in-out;} -.do-layer.type-5.active {visibility:visible;opacity:1;} -.do-layer.type-5 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: ""} -.do-layer.type-5 .layer-content .detail {margin:0;padding:0} - - -/******** 额外的弹窗类型样式 ******/ -.do-layer.type-1,.do-layer.type-2,.do-layer.type-3 {max-width:600px;min-width:230px;} -.do-layer.type-1 .layer-content,.do-layer.type-2 .layer-content,.do-layer.type-3 .layer-content{max-width:600px;} - -/*loading类型,背景色要去掉, 并且遮罩颜色改为黑色半透明*/ -.do-layer.type-6 {box-shadow:none;background:transparent;} -.do-layer-cover.type-6 {background:rgba(0,0,0,.3);} - -/*special模式类型,调小宽高限制,内外边距取消*/ -.do-layer.type-unspecial {min-width:10px;background:transparent;} -.do-layer.type-unspecial .layer-content {min-height:60px;padding:0} -.do-layer.type-unspecial .layer-content .detail {margin:0;padding:0} - -/*--------几种loading动画-------*/ -.do-ui-load {position:relative;width:100px;height:100px;margin:auto;} - -/* style 0 */ -.do-ui-load.load-style-0 .dot-box {position:absolute;display:block;width:70%;height:70%;margin:15%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;} -.do-ui-load.load-style-0 .dot-box i {position:absolute;display:block;width:40%;height:40%;border-radius:50%;background:#03998c;-webkit-animation: fadein 2s infinite linear;animation: fadein 2s infinite linear;-webkit-transform: scale(.5);transform: scale(.5);opacity:.3} -.do-ui-load.load-style-0 .dot-box i:nth-child(1) {left:2.5%;top:2.5%;} -.do-ui-load.load-style-0 .dot-box i:nth-child(2) {right:2.5%;top:2.5%;-webkit-animation-delay:.4s;animation-delay:.4s;} -.do-ui-load.load-style-0 .dot-box i:nth-child(3) {left:2.5%;bottom:2.5%;-webkit-animation-delay:.8s;animation-delay:.8s;} -.do-ui-load.load-style-0 .dot-box i:nth-child(4) {right:2.5%;bottom:2.5%;-webkit-animation-delay:1.2s;animation-delay:1.2s;} - -/* style 1 */ -.do-ui-load.load-style-1 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;} -.do-ui-load.load-style-1 .dot-box i {float:left;display:block;width:30px;height:30px;background:#03998c;-webkit-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;} -.do-ui-load.load-style-1 .dot-box i:nth-child(4), -.do-ui-load.load-style-1 .dot-box i:nth-child(8) {-webkit-animation-delay:.2s;animation-delay:.2s;} -.do-ui-load.load-style-1 .dot-box i:nth-child(1), -.do-ui-load.load-style-1 .dot-box i:nth-child(5), -.do-ui-load.load-style-1 .dot-box i:nth-child(9) {-webkit-animation-delay:.3s;animation-delay:.3s;} - -.do-ui-load.load-style-1 .dot-box i:nth-child(2), -.do-ui-load.load-style-1 .dot-box i:nth-child(6) {-webkit-animation-delay:.4s;animation-delay:.4s;} - -.do-ui-load.load-style-1 .dot-box i:nth-child(3) {-webkit-animation-delay:.5s;animation-delay:.5s;} - - -/* style 2 */ -.do-ui-load.load-style-2 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;} -.do-ui-load.load-style-2 .dot-box i {position:absolute;display:block;width:40px;height:40px;background:#03998c;border-radius:50%;-webkit-animation: bounce 1.5s infinite linear;animation: bounce 1.5s infinite linear;-webkit-transform: scale(.1);transform: scale(.1);} -.do-ui-load.load-style-2 .dot-box i:nth-child(1) {left:5px;top:0;} -.do-ui-load.load-style-2 .dot-box i:nth-child(2) {right:5px;top:0;-webkit-animation-delay:.5s;animation-delay:.5s;} - - -/* style 3 */ -.do-ui-load.load-style-3 .dot-box {position:absolute;display:block;width:100%;height:100%;} -.do-ui-load.load-style-3 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-top:5px solid #ff0;border-radius:50%;-webkit-animation: circle .9s infinite ease-in-out;animation: circle .9s infinite ease-in-out;} -.do-ui-load.load-style-3 .dot-box i:nth-child(1) {border-color:#03998c;} -.do-ui-load.load-style-3 .dot-box i:nth-child(2) {border-color:#f30;-webkit-animation-delay:.3s;animation-delay:.3s;} -.do-ui-load.load-style-3 .dot-box i:nth-child(3) {-webkit-animation-delay:.6s;animation-delay:.6s;} - - -/* style 4 */ -.do-ui-load.load-style-4 .dot-box {position:absolute;display:block;width:100%;height:100%;-webkit-animation: circle 1s infinite linear;animation: circle 1s infinite linear;} -.do-ui-load.load-style-4 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-radius:50%;} -.do-ui-load.load-style-4 .dot-box i:nth-child(1) {border-top: 50px solid #fff;} -.do-ui-load.load-style-4 .dot-box i:nth-child(2) {border-bottom: 50px solid #000;} -.do-ui-load.load-style-4 .dot-box i:nth-child(1)::before {position:absolute;top:-50%;width:50%;height:50%;border-top: 25px solid #000;border-radius:50%;content:""} -.do-ui-load.load-style-4 .dot-box i:nth-child(1)::after {position:absolute;top:-20%;left:20%;width:10px;height:10px;border-radius:50%;background:#fff;content:""} -.do-ui-load.load-style-4 .dot-box i:nth-child(2)::before {position:absolute;bottom:-50%;right:0;width:50%;height:50%;border-bottom: 25px solid #fff;border-radius:50%;content:""} -.do-ui-load.load-style-4 .dot-box i:nth-child(2)::after {position:absolute;bottom:-20%;right:20%;width:10px;height:10px;border-radius:50%;background:#000;content:""} - - -/* style 5 */ -.do-ui-load.load-style-5 {width:100px;height:50px;} -.do-ui-load.load-style-5 .dot-box {position:absolute;display:block;width:100%;height:100%;} -.do-ui-load.load-style-5 .dot-box i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:#03998c;-webkit-animation: bounce2 1s infinite ease-in-out;animation: bounce2 1s infinite ease-in-out;-webkit-transform:scaleY(.6);transform:scaleY(.6);} -.do-ui-load.load-style-5 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;} -.do-ui-load.load-style-5 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;} -.do-ui-load.load-style-5 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;} -.do-ui-load.load-style-5 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;} - -/* style 6 */ -.do-ui-load.load-style-6 {width:300px;height:50px;} -.do-ui-load.load-style-6 .dot-box {position:absolute;display:block;width:100%;height:100%;} -.do-ui-load.load-style-6 .dot-box i {position:absolute;display:block;width:10px;height:10px;background:#03998c;-webkit-animation: spring 3s infinite ease-in-out;animation: spring 3s infinite ease-in-out;} -.do-ui-load.load-style-6 .dot-box i:nth-child(2) {-webkit-animation-delay:.2s;animation-delay:.1s;} -.do-ui-load.load-style-6 .dot-box i:nth-child(3) {-webkit-animation-delay:.4s;animation-delay:.2s;} -.do-ui-load.load-style-6 .dot-box i:nth-child(4) {-webkit-animation-delay:.6s;animation-delay:.3s;} -.do-ui-load.load-style-6 .dot-box i:nth-child(5) {-webkit-animation-delay:.8s;animation-delay:.4s;} - -/* style 7 */ -.do-ui-load.load-style-7 .dot-box {position:absolute;display:block;width:60%;height:60%;margin:20%;} -.do-ui-load.load-style-7 .dot-box i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle3 2s infinite ease-in-out;animation: circle3 2s infinite ease-in-out;-webkit-transform: rotate(45deg);transform: rotate(45deg);} -.do-ui-load.load-style-7 .dot-box i::before {display:block;width:8px;height:8px;background:#03998c;border-radius:50%;content:""} -.do-ui-load.load-style-7 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;} -.do-ui-load.load-style-7 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;} -.do-ui-load.load-style-7 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;} -.do-ui-load.load-style-7 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;} - - - -@-webkit-keyframes circle { - to {-webkit-transform: rotate(360deg);} -} -@keyframes circle { - to {transform: rotate(360deg)} -} -@-webkit-keyframes circle2 { - to {-webkit-transform: rotate(-360deg);} -} -@keyframes circle2 { - to {transform: rotate(-360deg)} -} -@-webkit-keyframes circle3 { - 70%,to {-webkit-transform: rotate(405deg);} -} -@keyframes circle3 { - 70%,to {transform: rotate(405deg);} -} - -@-webkit-keyframes fadein { - - 50% {-webkit-transform: scale(1);opacity:1} - to {-webkit-transform: scale(.5);opacity:.3} -} -@keyframes fadein { - - 50% {transform: scale(1);opacity:1} - to {transform: scale(.5);opacity:.3} -} - -@-webkit-keyframes grid { - - 36% {-webkit-transform: scale(.1);opacity:.3} - 60% {-webkit-transform: scale(1);opacity:1} -} -@keyframes grid { - - 36% {transform: scale(.1);opacity:.3} - 60% {transform: scale(1);opacity:1} -} - -@-webkit-keyframes bounce { - 70% {-webkit-transform: scale(1);} - to {-webkit-transform: scale(.1);} -} -@keyframes bounce { - 70% {transform: scale(1);} - to {transform: scale(.1);} -} - - -@-webkit-keyframes bounce2 { - 25% {-webkit-transform: scaleY(1.3);} - 50% {-webkit-transform: scaleY(.6);} -} -@keyframes bounce2 { - 25% {transform: scaleY(1.3);} - 50% {transform: scaleY(.6);} -} - -@-webkit-keyframes spring { - 30%,50% {-webkit-transform: translateX(200px);} - 80%,to {-webkit-transform: translateX(0);} -} -@keyframes spring { - 30%,50%{transform: translateX(200px);} - 80%,to {transform: translateX(0);} -} - +.do-layer{position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto}.do-layer a{text-decoration:none}.do-layer.skin-def{color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,0.3)}.do-layer.skin-def .icon-1::before{content:"\e610";color:#1abc9c}.do-layer.skin-def .icon-2::before{content:"\e6f8";color:#3498db}.do-layer.skin-def .icon-3::before{content:"\e6fd";color:#f39c12}.do-layer.skin-def .icon-4::before{content:"\e6f6";color:#f39c12}.do-layer.skin-def .icon-5::before{content:"\e630";color:#1abc9c}.do-layer.skin-def .icon-6::before{content:"\e636";color:#34495e}.do-layer.skin-def .icon-7::before{content:"\e623";color:#f39c12}.do-layer.skin-def .icon-8::before{content:"\e604";color:#e74c3c}.do-layer.skin-def .icon-9::before{content:"\e605";color:#1abc9c}.do-layer.skin-def .layer-title{width:100%;height:40px;padding:0 8px;line-height:40px;background:#e7e8eb;font-size:14px;color:#34495e}.do-layer.skin-def .action-min,.do-layer.skin-def .action-close{position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#5d6d7e}.do-layer.skin-def .action-min:hover,.do-layer.skin-def .action-close:hover{border:1px solid #ddd;line-height:18px;color:#1abc9c}.do-layer.skin-def .action-min{right:40px}.do-layer.skin-def .action-min::before{content:"\e634"}.do-layer.skin-def .action-close{right:10px}.do-layer.skin-def .action-close::before{content:"\e687"}.do-layer.skin-def .layer-content{position:relative;width:100%;height:auto;min-height:50px;padding:10px}.do-layer.skin-def .layer-content .msg-icon{position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center}.do-layer.skin-def .layer-content .detail{width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap:break-word}.do-layer.skin-def .layer-content .detail .prompt-value{width:230px;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:3px}.do-layer.skin-def .layer-content .detail .msg-box{line-height:30px}.do-layer.skin-def .layer-content.none-icon .detail{margin:0 auto}.do-layer.skin-def .layer-btns{width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right}.do-layer.skin-def .layer-btns 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}.do-layer.type-1,.do-layer.type-2,.do-layer.type-3{max-width:600px;min-width:230px}.do-layer.type-5{visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,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}.do-layer.type-5.active{visibility:visible;opacity:1}.do-layer.type-5 i.arrow{position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,0.5);content:""}.do-layer.type-5 .layer-content .detail{margin:0;padding:0}.do-layer.type-6{box-shadow:none;background:transparent}.do-layer.type-unspecial{min-width:10px;background:transparent}.do-layer.type-unspecial .layer-content{min-height:60px;padding:0}.do-layer.type-unspecial .layer-content .detail{margin:0;padding:0}.do-layer .loading-box{position:relative;width:100px;height:100px;margin:auto}.do-layer .loading-box .dot-box{position:absolute;display:block}.do-layer .loading-box.style-1 .dot-box,.do-layer .loading-box.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}.do-layer .loading-box.style-1 .dot-box::after,.do-layer .loading-box.style-2 .dot-box::after{content:"\e648";font:70px/1 "ui font"}.do-layer .loading-box.style-2 .dot-box::after{content:"\e64a"}.do-layer .loading-box.style-3{height:50px}.do-layer .loading-box.style-3 .dot-box{width:100%;height:100%}.do-layer .loading-box.style-3 .dot-box i{float:left;display:block;width:10px;height:100%;margin:0 5px;background:#16a085;-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(0.6);-moz-transform:scaleY(0.6);transform:scaleY(0.6)}.do-layer .loading-box.style-3 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-3 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-3 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-3 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-4 .dot-box{width:60%;height:60%;margin:20%}.do-layer .loading-box.style-4 .dot-box 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)}.do-layer .loading-box.style-4 .dot-box i::before{display:block;width:8px;height:8px;background:#16a085;border-radius:50%;content:""}.do-layer .loading-box.style-4 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-4 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-4 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-4 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box{width:90%;height:90%;margin:5%}.do-layer .loading-box.style-5 .dot-box i{float:left;display:block;width:30px;height:30px;background:#16a085;-webkit-animation:grid 1.5s infinite linear;-moz-animation:grid 1.5s infinite linear;animation:grid 1.5s infinite linear}.do-layer .loading-box.style-5 .dot-box i:nth-child(4),.do-layer .loading-box.style-5 .dot-box i:nth-child(8){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-5 .dot-box i:nth-child(1),.do-layer .loading-box.style-5 .dot-box i:nth-child(5),.do-layer .loading-box.style-5 .dot-box i:nth-child(9){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-5 .dot-box i:nth-child(2),.do-layer .loading-box.style-5 .dot-box i:nth-child(6){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box i:nth-child(3){-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}.do-layer: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,0.05)}.do-layer-cover.type-6{background:rgba(0,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(0.6)}}@-moz-keyframes bounce{25%{-moz-transform:scaleY(1.3)}50%{-moz-transform:scaleY(0.6)}}@keyframes bounce{25%{transform:scaleY(1.3)}50%{transform:scaleY(0.6)}}@-webkit-keyframes grid{36%{-webkit-transform:scale(0.1);opacity:.3}60%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes grid{36%{-moz-transform:scale(0.1);opacity:.3}60%{-moz-transform:scale(1);opacity:1}}@keyframes grid{36%{transform:scale(0.1);opacity:.3}60%{transform:scale(1);opacity:1}} diff --git a/js/lib/layer/skin/def.eot b/js/lib/layer/skin/def.eot deleted file mode 100644 index c4a2f5e..0000000 Binary files a/js/lib/layer/skin/def.eot and /dev/null differ diff --git a/js/lib/layer/skin/def.scss b/js/lib/layer/skin/def.scss new file mode 100644 index 0000000..073c878 --- /dev/null +++ b/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} +} + + + diff --git a/js/lib/layer/skin/def.ttf b/js/lib/layer/skin/def.ttf deleted file mode 100644 index c63ae22..0000000 Binary files a/js/lib/layer/skin/def.ttf and /dev/null differ