theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0.3

Browse Source
This commit is contained in:
sentsin
2016-11-10 02:31:39 +08:00
parent e7f1a4ad42
commit 31a0586501
43 changed files with 847 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/css/layui.css
View File

@@ -151,11 +151,15 @@ a cite{font-style: normal; *cursor:pointer;}
/* 下拉选择 */.layui-form-select{position: relative;}
.layui-form-select .layui-input{padding-right: 30px; cursor: pointer;}
.layui-form-select .layui-edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: transform .3s; transition: transform .3s,-webkit-transform .3s;}
.layui-form-select ul{display: none; position: absolute; left: 0; top: 42px; margin-bottom: 50px; padding: 5px 0; z-index: 999; width: 100%; border: 1px solid #d2d2d2; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
.layui-form-select ul li{padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;}
.layui-form-select ul li:hover{background-color: #f2f2f2;}
.layui-form-select ul li.layui-this{background-color: #5FB878; color: #fff;}
.layui-form-selected ul{display: block;}
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; margin-bottom: 50px; padding: 5px 0; z-index: 999; min-width: 100%; border: 1px solid #d2d2d2; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
.layui-form-select dl dt,
.layui-form-select dl dd{padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.layui-form-select dl dt{font-size: 12px; color: #999;}
.layui-form-select dl dd{cursor: pointer;}
.layui-form-select dl dd:hover{background-color: #f2f2f2;}
.layui-form-select .layui-select-group dd{padding-left: 20px;}
.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
.layui-form-selected dl{display: block;}
.layui-form-selected .layui-edge{margin-top: -9px; -webkit-transform:rotate(180deg); transform: rotate(180deg);}
.layui-form-selected .layui-edge{margin-top: -3px\0; }
:root .layui-form-selected .layui-edge{margin-top: -9px\0/IE9;}
@@ -308,21 +312,41 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-nav .layui-nav-item a{display: block; padding: 0 20px; color: #c2c2c2; transition: all .3s; -webkit-transition: all .3s;}
.layui-nav-bar,
.layui-nav .layui-this:after{position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #5FB878; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav-bar{z-index: 1000;}
.layui-nav .layui-this a
,.layui-nav .layui-nav-item a:hover{color: #fff;}
.layui-nav .layui-this:after{content: ''; top: auto; bottom: 0; width: 100%;}
.layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
.layui-nav .layui-nav-child a{color: #333;}
.layui-nav .layui-nav-child a:hover{background-color: #f2f2f2; color: #333;}
.layui-nav .layui-nav-more{content:''; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav .layui-nav-more{position: absolute; top: 28px; right: 3px; border-width: 6px; border-top-style: solid; border-top-color: #c2c2c2;}
.layui-nav .layui-nav-mored,
.layui-nav-itemed .layui-nav-more{top: 22px; border-style: dashed; border-color: transparent; border-bottom-style: solid; border-bottom-color: #c2c2c2;}
/* 垂直导航菜单 */.layui-nav-tree{width: 200px; padding: 0;}
.layui-nav-tree .layui-nav-item{display: block; line-height: 45px;}
.layui-nav-tree .layui-nav-item{display: block; width: 100%; line-height: 45px;}
.layui-nav-tree .layui-nav-item a{height: 45px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-nav-tree .layui-nav-bar{width: 5px; height: 0;}
.layui-nav-tree .layui-this{margin: 1px 0;}
.layui-nav-tree .layui-this a{background-color: #4E5465;}
.layui-nav-tree .layui-this>a{background-color: #4E5465;}
.layui-nav-tree .layui-this:after{width: 5px; height: 100%; top: 0; left: 0; bottom: auto;}
.layui-nav-tree .layui-nav-item a:hover{background-color: #4E5465;}
.layui-nav-tree .layui-nav-title a,
.layui-nav-tree .layui-nav-title a:hover{background-color: #2B2E37; color: #fff;}
.layui-nav-tree .layui-nav-title a:hover,
.layui-nav-itemed>a{background-color: #2B2E37 !important; color: #fff !important;}
.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
.layui-nav-tree .layui-nav-child{position: relative; top: 0; background: none; border: none; box-shadow: none;}
.layui-nav-tree .layui-nav-child a{height: 36px; line-height: 36px; padding-left: 36px;}
.layui-nav-tree .layui-nav-child a{color: #c2c2c2;}
.layui-nav-tree .layui-nav-child a:hover{color: #fff; background: none;}
.layui-nav-tree .layui-nav-more{top: 20px; right: 10px;}
.layui-nav-itemed .layui-nav-more{top: 14px;}
.layui-nav-itemed .layui-nav-child{display: block;}
/** 面包屑 **/
.layui-breadcrumb{visibility: hidden; font-size: 0;}
.layui-breadcrumb a{padding-right: 8px; line-height: 22px; font-size: 14px; color: #333 !important;}

150
src/css/modules/layer/layer.css → src/css/modules/layer/default/layer.css
View File

@@ -1,93 +1,42 @@
/*!
/**
@Name: layer's style
@Name: layer
@Author: 贤心
@Blog： sentsin.com
*/
**/
*html{background-image:url(about:blank); background-attachment:fixed;}
html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
*html{background-image: url(about:blank); background-attachment: fixed;}
html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
/* common */
.layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;}
.layui-layer-shade{top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");}
.layui-layer{top:150px; left:0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
.layui-layer{-webkit-overflow-scrolling: touch;}
.layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
.layui-layer-close{position:absolute;}
.layui-layer-content{position:relative;}
.layui-layer-border{border:1px solid #B2B2B2; border:1px solid rgba(0,0,0,.3); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-moves{position:absolute; border:3px solid #666; border:3px solid rgba(0,0,0,.5); cursor:move; background-color:#fff; background-color:rgba(255,255,255,.3); filter:alpha(opacity=50);}
.layui-layer-load{background:url(default/loading-0.gif) #fff center center no-repeat;}
.layui-layer-ico{ background:url(default/icon.png) no-repeat;}
.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;}
.layui-layer-ico{ background:url(icon.png) no-repeat;}
.layui-layer-dialog .layui-layer-ico,
.layui-layer-setwin a,
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;}
.layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;}
/* 动画 */
.layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s; }
.layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;}
@-webkit-keyframes bounceIn { /* 默认 */
0% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)}
}
.layer-anim{-webkit-animation-name: bounceIn; animation-name: bounceIn}
@-webkit-keyframes bounceOut {
100% {
opacity: 0;
-webkit-transform: scale(.7);
transform: scale(.7)
}
30% {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceOut {
100% {
opacity: 0;
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7)
}
30% {
-webkit-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03)
}
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
.layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn}
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
@@ -101,6 +50,18 @@ html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes bounceOut { /* 关闭动画 */
100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)}
30% {-webkit-transform: scale(1.05); transform: scale(1.05)}
0% {-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
/* 标题栏 */
.layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
.layui-layer-setwin{position:absolute; right:15px; *right:0; top:15px; font-size:0; line-height: initial;}
@@ -117,15 +78,17 @@ html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
.layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;}
/* 按钮栏 */
.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto;}
.layui-layer-btn{text-align: right; padding:0 10px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;}
.layui-layer-btn a{height: 28px; line-height: 28px; margin: 0 6px; padding: 0 15px; border:1px #dedede solid; background-color:#f1f1f1; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;}
.layui-layer-btn a:hover{opacity:0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity:0.7;}
.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity: 0.8;}
.layui-layer-btn .layui-layer-btn0{border-color: #4898d5; background-color: #2e8ded; color:#fff;}
.layui-layer-btn-l{text-align: left;}
.layui-layer-btn-c{text-align: center;}
/* 定制化 */
.layui-layer-dialog{min-width:260px;}
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break:break-all; overflow:hidden; font-size:14px; overflow:auto;}
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;}
.layui-layer-ico1{background-position:-30px 0 }
.layui-layer-ico2{background-position:-60px 0;}
@@ -135,33 +98,32 @@ html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
.layui-layer-ico6{background-position:-180px 0;}
.layui-layer-rim{border:6px solid #8D8D8D; border:6px solid rgba(0,0,0,.3); border-radius:5px; box-shadow: none;}
.layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;}
.layui-layer-hui{min-width:100px; background-color:#000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
.layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
.layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;}
.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;}
.layui-layer-page .layui-layer-content{position:relative; overflow:auto;}
.layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;}
.layui-layer-nobg{background:none;}
.layui-layer-iframe .layui-layer-content{overflow:hidden;}
.layui-layer-iframe iframe{display:block; width:100%;}
.layui-layer-iframe iframe{display: block; width: 100%;}
.layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;}
.layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(default/loading-0.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(default/loading-1.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(default/loading-2.gif) no-repeat;}
.layui-layer-tips{background:none; box-shadow:none; border:none;}
.layui-layer-tips .layui-layer-content{position:relative; line-height:22px; min-width: 12px; padding:5px 10px; font-size:12px; _float:left; border-radius:3px; box-shadow: 1px 1px 3px rgba(0,0,0,.3); background-color:#FF9900; color:#fff;}
.layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;}
.layui-layer-tips{background: none; box-shadow:none; border:none;}
.layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 5px 10px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; color: #fff;}
.layui-layer-tips .layui-layer-close{right:-2px; top:-1px;}
.layui-layer-tips i.layui-layer-TipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color:#FF9900;}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;}
.layui-layer-tips i.layui-layer-TipsT{bottom:-8px;}
.layui-layer-tips i.layui-layer-TipsB{top:-8px;}
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color:#FF9900;}
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top:1px; border-bottom-style:solid; border-bottom-color: #000;}
.layui-layer-tips i.layui-layer-TipsR{left:-8px;}
.layui-layer-tips i.layui-layer-TipsL{right:-8px;}
/* skin */
.layui-layer-lan[type="dialog"]{min-width:280px;}
.layui-layer-lan .layui-layer-title{background:#4476A7; color:#fff; border: none;}
.layui-layer-lan
.layui-layer-lan .layui-layer-btn{padding:10px; text-align: right; border-top:1px solid #E9E7E7}
.layui-layer-lan .layui-layer-btn a{background:#BBB5B5; border:none;}
.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5;}
@@ -171,16 +133,19 @@ html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
/*
layer.extend
*/
/**
@Name: layer拓展样式
*/
.layui-layer-iconext{background:url(default/icon-ext.png) no-repeat;}
.layui-layer-iconext{background:url(icon-ext.png) no-repeat;}
/* prompt模式 */
.layui-layer-prompt .layui-layer-input{display:block; width:220px; height:30px; margin:0 auto; line-height:30px; padding: 0 5px; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color:#333;}
.layui-layer-prompt textarea.layui-layer-input{width:300px; height:100px; line-height:20px;}
.layui-layer-prompt .layui-layer-content{padding: 20px;}
.layui-layer-prompt .layui-layer-btn{padding-top: 0;}
/* tab模式 */
.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);}
@@ -209,3 +174,10 @@ html #layuicss-skinlayercss{display:none; position: absolute; width:1989px;}
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
.layui-layer-imgtit em{padding-left:10px; font-style: normal;}
@media screen and (max-width: 1100px) {
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
}