diff --git a/GruntFile.js b/GruntFile.js index 0f54d45..f1429ac 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -27,8 +27,8 @@ options: { banner: '/*! layer mobile-v<%= pkg.mobile %> <%= pkg.description %>移动版 License LGPL <%= pkg.homepage %>mobile By <%= pkg.author %> */\n;' }, - src: './src/mobile/layer.m.js', - dest: './mobile/layer.m.js' + src: './src/mobile/layer.js', + dest: './mobile/layer.js' } }, diff --git a/mobile/layer.js b/mobile/layer.js new file mode 100644 index 0000000..815f981 --- /dev/null +++ b/mobile/layer.js @@ -0,0 +1,2 @@ +/*! layer mobile-v1.7 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ +;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){var c;return/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)?(a.addEventListener("touchmove",function(){c=!0},!1),void a.addEventListener("touchend",function(a){a.preventDefault(),c||b.call(this,a),c=!1},!1)):a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layermbox"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'

'+(a?c.title[0]:c.title)+'

':""}(),j=function(){var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a=''+c.btn[0]+"",2===b&&(a=''+c.btn[1]+""+a),'
'+a+"
"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content=''),f.innerHTML=(c.shade?"
':"")+'
"+g+'
'+c.content+"
"+j+"
",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;if(a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time)),a.title){var e=b[d]("layermend")[0],f=function(){a.cancel&&a.cancel(),layer.close(c.index)};g.touch(e,f)}var h=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var i=b[d]("layermbtn")[0].children,j=i.length,k=0;j>k;k++)g.touch(i[k],h);if(a.shade&&a.shadeClose){var l=b[d]("laymshade")[0];g.touch(l,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"1.7",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window); \ No newline at end of file diff --git a/mobile/layer.m.js b/mobile/layer.m.js deleted file mode 100644 index 9a81fc1..0000000 --- a/mobile/layer.m.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! layer mobile-v1.6 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ -;!function(a){"use strict";var b="";b=b?b:document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0];var c=document,d="querySelectorAll",e="getElementsByClassName",f=function(a){return c[d](a)};document.head.appendChild(function(){var a=c.createElement("link");return a.href=b+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}());var g={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0};a.ready={extend:function(a){var b=JSON.parse(JSON.stringify(g));for(var c in a)b[c]=a[c];return b},timer:{},end:{}},ready.touch=function(a,b){var c;return/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)?(a.addEventListener("touchmove",function(){c=!0},!1),void a.addEventListener("touchend",function(a){a.preventDefault(),c||b.call(this,a),c=!1},!1)):void a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layermbox"],j=function(a){var b=this;b.config=ready.extend(a),b.view()};j.prototype.view=function(){var a=this,b=a.config,d=c.createElement("div");a.id=d.id=i[0]+h,d.setAttribute("class",i[0]+" "+i[0]+(b.type||0)),d.setAttribute("index",h);var g=function(){var a="object"==typeof b.title;return b.title?'

'+(a?b.title[0]:b.title)+'

':""}(),j=function(){var a,c=(b.btn||[]).length;return 0!==c&&b.btn?(a=''+b.btn[0]+"",2===c&&(a=''+b.btn[1]+""+a),'
'+a+"
"):""}();if(b.fixed||(b.top=b.hasOwnProperty("top")?b.top:100,b.style=b.style||"",b.style+=" top:"+(c.body.scrollTop+b.top)+"px"),2===b.type&&(b.content='
'+(b.content||"")+"
"),d.innerHTML=(b.shade?"
':"")+'
"+g+'
'+b.content+"
"+j+"
",!b.type||2===b.type){var l=c[e](i[0]+b.type),m=l.length;m>=1&&k.close(l[0].getAttribute("index"))}document.body.appendChild(d);var n=a.elem=f("#"+a.id)[0];b.success&&b.success(n),a.index=h++,a.action(b,n)},j.prototype.action=function(a,b){var c=this;if(a.time&&(ready.timer[c.index]=setTimeout(function(){k.close(c.index)},1e3*a.time)),a.title){var d=b[e]("layermend")[0],f=function(){a.cancel&&a.cancel(),k.close(c.index)};ready.touch(d,f)}var g=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),k.close(c.index)):a.yes?a.yes(c.index):k.close(c.index)};if(a.btn)for(var h=b[e]("layermbtn")[0].children,i=h.length,j=0;i>j;j++)ready.touch(h[j],g);if(a.shade&&a.shadeClose){var l=b[e]("laymshade")[0];ready.touch(l,function(){k.close(c.index,a.end)})}a.end&&(ready.end[c.index]=a.end)};var k={v:"1.6",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var b=f("#"+i[0]+a)[0];b&&(b.innerHTML="",c.body.removeChild(b),clearTimeout(ready.timer[a]),delete ready.timer[a],"function"==typeof ready.end[a]&&ready.end[a](),delete ready.end[a])},closeAll:function(){for(var a=c[e](i[0]),b=0,d=a.length;d>b;b++)k.close(0|a[0].getAttribute("index"))}};"function"==typeof define?define(function(){return k}):a.layer=k}(window); \ No newline at end of file diff --git a/mobile/need/layer.css b/mobile/need/layer.css index e619aae..4e55a5b 100644 --- a/mobile/need/layer.css +++ b/mobile/need/layer.css @@ -1 +1 @@ -.layermbox{position:absolute;left:0;top:0;width:100%;z-index:19891014}.layermmain,.laymshade{position:fixed;left:0;top:0;width:100%;height:100%}.layermbtn span,.layermchild{display:inline-block;position:relative}.laymshade{background-color:rgba(0,0,0,.5);pointer-events:auto}.layermmain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layermmain .section{display:table-cell;vertical-align:middle;text-align:center}.layermchild{text-align:left;background-color:#fff;font-size:14px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}.layermborder{border:1px solid #999}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layermanim{animation-name:bounceIn;-webkit-animation-name:bounceIn}.layermbox0 .layermchild{max-width:260px;min-width:150px}.layermbox1 .layermchild{border:none;border-radius:0}.layermbox2 .layermchild{width:auto;max-width:260px;min-width:40px;border:none;background-color:rgba(0,0,0,.6);color:#fff}.layermchild h3{padding:0 45px 0 10px;height:50px;line-height:50px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;border-bottom:1px solid #EBEBEB}.layermbtn span,.layermchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layermcont{padding:20px 15px;line-height:22px;border-radius:5px}.layermbox1 .layermcont{padding:0}.layermbox2 .layermcont{text-align:center;padding:30px 30px 0;line-height:0}.layermbox2 .layermcont i{width:1.5rem;height:1.5rem;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layermbox2 .layermcont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layermbox2 .layermcont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layermbtn{position:relative;height:40px;line-height:40px;font-size:0;text-align:center;border-top:1px solid #EBEBEB}.layermbtn span{width:50%;text-align:center;font-size:14px;cursor:pointer;border-radius:0 5px 0 0}.layermbtn span:first-child{height:39px;background-color:#fff;border-radius:0 0 0 5px}.layermbtn:before{content:'\20';position:absolute;width:1px;height:39px;left:50%;top:0;background-color:#EBEBEB}.layermend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layermend::after,.layermend::before{position:absolute;left:5px;top:13px;content:'';width:20px;height:2px;background-color:rgba(0,0,0,.3);transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layermend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} \ No newline at end of file +.layermbox{position:relative;z-index:19891014}.layermmain,.laymshade{position:fixed;left:0;top:0;width:100%;height:100%}.layermbtn span,.layermchild{display:inline-block;position:relative}.laymshade{background-color:rgba(0,0,0,.5);pointer-events:auto}.layermmain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layermmain .section{display:table-cell;vertical-align:middle;text-align:center}.layermchild{text-align:left;background-color:#fff;font-size:14px;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}.layermborder{border:1px solid #999}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layermanim{animation-name:bounceIn;-webkit-animation-name:bounceIn}.layermbox0 .layermchild{max-width:90%;min-width:150px}.layermbox1 .layermchild{border:none;border-radius:0}.layermbox2 .layermchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layermchild h3{padding:0 45px 0 10px;height:50px;line-height:50px;font-size:16px;font-weight:400;border-radius:3px 3px 0 0;border-bottom:1px solid #EBEBEB}.layermbtn span,.layermchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layermcont{padding:20px 15px;line-height:22px;text-align:center}.layermbox1 .layermcont{padding:0;text-align:left}.layermbox2 .layermcont{text-align:center;padding:0;line-height:0}.layermbox2 .layermcont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layermbox2 .layermcont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layermbox2 .layermcont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layermbtn{position:relative;height:40px;line-height:40px;font-size:0;text-align:center;border-top:1px solid #EBEBEB}.layermbtn span{width:50%;text-align:center;font-size:14px;cursor:pointer;border-radius:0 3px 0 0}.layermbtn span:first-child{height:39px;background-color:#fff;border-radius:0 0 0 3px}.layermbtn:before{content:'\20';position:absolute;width:1px;height:39px;left:50%;top:0;background-color:#EBEBEB}.layermend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layermend::after,.layermend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layermend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} \ No newline at end of file diff --git a/package.json b/package.json index 69e0156..1a417cc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "layer", "version": "2.1", - "mobile": "1.6", + "mobile": "1.7", "description": "弹层组件", "main": "", "scripts": { diff --git a/src/mobile/layer.m.js b/src/mobile/layer.js similarity index 87% rename from src/mobile/layer.m.js rename to src/mobile/layer.js index 3081f75..9a444f7 100644 --- a/src/mobile/layer.m.js +++ b/src/mobile/layer.js @@ -1,8 +1,8 @@ /*! - @Name：layer mobile v1.6 弹层组件移动版 + @Name：layer mobile v1.7 弹层组件移动版 @Author：贤心 - @Date：2015-11-06 + @Date：2015-11-25 @Copyright：Sentsin Xu(贤心) @官网：http://layer.layui.com/mobile/ @License：MIT @@ -12,23 +12,10 @@ ;!function(win){ "use strict"; -var path = ''; //所在路径，如果非模块加载不用配置 -path = path ? path : document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0]; - var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){ return doc[query](s); }; -//插入css -document.head.appendChild((function(){ - var link = doc.createElement('link'); - link.href = path + 'need/layer.css'; - link.type = 'text/css'; - link.rel = 'styleSheet' - link.id = 'layermcss'; - return link; -}())); - //默认配置 var config = { type: 0, @@ -38,7 +25,7 @@ var config = { anim: true }; -win.ready = { +var ready = { extend: function(obj){ var newobj = JSON.parse(JSON.stringify(config)); for(var i in obj){ @@ -46,18 +33,16 @@ win.ready = { } return newobj; }, - timer: {}, - end: {} + timer: {}, end: {} }; //点触事件 ready.touch = function(elem, fn){ var move; if(!/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)){ - elem.addEventListener('click', function(e){ + return elem.addEventListener('click', function(e){ fn.call(this, e); }, false); - return; } elem.addEventListener('touchmove', function(){ move = true; @@ -108,7 +93,7 @@ Layer.prototype.view = function(){ } if(config.type === 2){ - config.content = '
' + (config.content||'') + '
'; + config.content = ''; } layerbox.innerHTML = (config.shade ? '
' : '') @@ -184,8 +169,8 @@ Layer.prototype.action = function(config, elem){ config.end && (ready.end[that.index] = config.end); }; -var layer = { - v: '1.6', +win.layer = { + v: '1.7', index: index, //核心方法 @@ -214,8 +199,25 @@ var layer = { } }; -'function' === typeof define ? define(function() { +'function' == typeof define ? define(function() { return layer; -}) : win.layer = layer; +}) : function(){ + + var js = document.scripts, script = js[js.length - 1], jsPath = script.src; + var path = jsPath.substring(0, jsPath.lastIndexOf("/") + 1); + + //如果合并方式，则需要单独引入layer.css + if(script.getAttribute('merge')) return; + + document.head.appendChild(function(){ + var link = doc.createElement('link'); + link.href = path + 'need/layer.css'; + link.type = 'text/css'; + link.rel = 'styleSheet' + link.id = 'layermcss'; + return link; + }()); + +}(); }(window); \ No newline at end of file diff --git a/src/mobile/need/layer.css b/src/mobile/need/layer.css index 64fd094..4ebde2e 100644 --- a/src/mobile/need/layer.css +++ b/src/mobile/need/layer.css @@ -1,12 +1,12 @@ /* layer弹层移动版样式 */ -.layermbox{position:absolute; left:0; top:0; width:100%; z-index:19891014;} +.layermbox{position:relative; z-index:19891014;} .laymshade, .layermmain{position:fixed; left:0; top:0; width:100%; height:100%;} .laymshade{background-color:rgba(0,0,0, .5); pointer-events:auto;} .layermmain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} .layermmain .section{display:table-cell; vertical-align:middle; text-align:center;} -.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:6px; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto;} +.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:3px; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto;} .layermchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .18s; animation-duration: .18s;} .layermborder{border:1px solid #999;} @-webkit-keyframes bounceIn { /* 默认 */ @@ -23,34 +23,34 @@ } .layermanim{animation-name: bounceIn; -webkit-animation-name: bounceIn;} -.layermbox0 .layermchild{max-width:260px; min-width:150px;} +.layermbox0 .layermchild{max-width:90%; min-width:150px;} .layermbox1 .layermchild{border:none; border-radius:0;} -.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background-color:rgba(0,0,0,.6); color:#fff;} -.layermchild h3{padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:5px 5px 0 0; border-bottom:1px solid #EBEBEB;} +.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} +.layermchild h3{padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:3px 3px 0 0; border-bottom:1px solid #EBEBEB;} .layermchild h3, .layermbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} -.layermcont{padding:20px 15px; line-height:22px; border-radius:5px;} -.layermbox1 .layermcont{padding:0;} -.layermbox2 .layermcont{text-align:center; padding:30px 30px 0; line-height: 0;} -.layermbox2 .layermcont i{width:1.5rem; height:1.5rem; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} +.layermcont{padding:20px 15px; line-height:22px; text-align:center;} +.layermbox1 .layermcont{padding:0; text-align:left;} +.layermbox2 .layermcont{text-align:center; padding: 0; line-height: 0;} +.layermbox2 .layermcont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} .layermbox2 .layermcont i{-webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} @-webkit-keyframes bouncedelay{ - 0%,80%,100%{-webkit-transform:scale(0)} - 40%{-webkit-transform:scale(1)} + 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} + 40%{transform:scale(1); -webkit-transform:scale(1)} } @keyframes bouncedelay{ - 0%,80%,100%{transform:scale(0);-webkit-transform:scale(0)} - 40%{transform:scale(1);-webkit-transform:scale(1)} + 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} + 40%{transform:scale(1); -webkit-transform:scale(1)} } .layermbox2 .layermcont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} .layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay: -.16s; animation-delay: -.16s;} .layermbox2 .layermcont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} .layermbtn{position:relative; height:40px; line-height:40px; font-size:0; text-align:center; border-top:1px solid #EBEBEB;} -.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer; border-radius: 0 5px 0 0;} -.layermbtn span:first-child{height:39px; background-color:#fff; border-radius: 0 0 0 5px;} +.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer; border-radius: 0 3px 0 0;} +.layermbtn span:first-child{height:39px; background-color:#fff; border-radius: 0 0 0 3px;} .layermbtn:before{content:'\20'; position:absolute; width:1px; height:39px; left:50%; top:0; background-color:#EBEBEB;} .layermend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;} -.layermend::before, .layermend::after{position:absolute; left:5px; top:13px; content:''; width:20px; height:2px; background-color:rgba(0,0,0,.3); transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;} +.layermend::before, .layermend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;} .layermend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}