1.0.8
This commit is contained in:
sentsin
@@ -2,7 +2,7 @@
|
||||
|
||||
@Name: layui
|
||||
@Author: 贤心
|
||||
@Site: http://www.layui.com
|
||||
@Site: www.layui.com
|
||||
|
||||
*/
|
||||
|
||||
@@ -29,11 +29,11 @@ pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; w
|
||||
|
||||
/** 图标字体 **/
|
||||
@font-face {font-family: 'layui-icon';
|
||||
src: url('../font/iconfont.eot');
|
||||
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../font/iconfont.woff') format('woff'),
|
||||
url('../font/iconfont.ttf') format('truetype'),
|
||||
url('../font/iconfont.svg#iconfont') format('svg');
|
||||
src: url('../font/iconfont.eot?v=1.0.8');
|
||||
src: url('../font/iconfont.eot?v=1.0.8#iefix') format('embedded-opentype'),
|
||||
url('../font/iconfont.woff?v=1.0.8') format('woff'),
|
||||
url('../font/iconfont.ttf?v=1.0.8') format('truetype'),
|
||||
url('../font/iconfont.svg?v=1.0.8#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.layui-icon{
|
||||
@@ -68,15 +68,15 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
|
||||
/* 布局 */
|
||||
.layui-main{position: relative; width: 1140px; margin: 0 auto;}
|
||||
.layui-header{position: relative; z-index: 1000; height: 65px;}
|
||||
.layui-header{position: relative; z-index: 1000; height: 60px;}
|
||||
.layui-header a:hover{transition: all .5s; -webkit-transition: all .5s;}
|
||||
.layui-side{position: fixed; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden;}
|
||||
.layui-side-scroll{width: 220px; height: 100%; overflow-x: hidden;}
|
||||
.layui-body{position: absolute; left: 200px; right: 0; top: 0; bottom: 0; z-index: 998; width: auto; overflow: hidden; overflow-y: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
|
||||
|
||||
/* 后台布局风格 */.layui-layout-admin .layui-header{border-bottom: 5px solid #1AA094;}
|
||||
.layui-layout-admin .layui-side{top: 70px; width: 200px; overflow-x: hidden;}
|
||||
.layui-layout-admin .layui-body{top: 70px; bottom: 44px;}
|
||||
/* 后台布局风格 */.layui-layout-admin .layui-header{background-color: #23262E;}
|
||||
.layui-layout-admin .layui-side{top: 60px; width: 200px; overflow-x: hidden;}
|
||||
.layui-layout-admin .layui-body{top: 60px; bottom: 44px;}
|
||||
.layui-layout-admin .layui-main{width: auto; margin: 0 15px;}
|
||||
.layui-layout-admin .layui-footer{position: fixed; left: 200px; right: 0; bottom: 0; height: 44px; background-color: #eee;}
|
||||
|
||||
@@ -92,18 +92,30 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-field-box{padding: 10px 15px;}
|
||||
.layui-field-title .layui-field-box{padding: 10px 0;}
|
||||
|
||||
/* 颜色 */
|
||||
.layui-bg-black{background-color: #393D49; color: #c2c2c2;}
|
||||
.layui-bg-black a{color: #c2c2c2;}.layui-bg-black a:hover{color: #fff;}
|
||||
.layui-bg-gray{background-color: #eee; color: #333;}
|
||||
.layui-bg-green{background-color: #009688; color: #D7EEE8;}
|
||||
.layui-bg-blue{background-color: #1E9FFF; color: #D7EEE8;}
|
||||
/* 进度条 */
|
||||
.layui-progress{position: relative; height: 6px; border-radius: 20px; background-color: #e2e2e2;}
|
||||
.layui-progress-bar{position: absolute; width: 0; height: 6px; border-radius: 20px; background-color: #5FB878; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-progress-big,
|
||||
.layui-progress-big .layui-progress-bar{height: 18px; line-height: 18px; text-align: right;}
|
||||
.layui-progress-text{position: absolute; right: 0; top: -16px; line-height: 18px; font-size: 12px; color: #666}
|
||||
.layui-progress-big .layui-progress-text{position: static; padding: 0 10px; color: #fff;}}
|
||||
|
||||
|
||||
/* 背景颜色 */
|
||||
.layui-bg-red{background-color: #FF5722;} /*赤*/
|
||||
.layui-bg-orange{background-color: #F7B824;} /*橙*/
|
||||
.layui-bg-green{background-color: #009688;} /*绿*/
|
||||
.layui-bg-cyan{background-color: #2F4056;} /*青*/
|
||||
.layui-bg-blue{background-color: #1E9FFF;} /*蓝*/
|
||||
.layui-bg-black{background-color: #393D49;} /*黑*/
|
||||
.layui-bg-gray{background-color: #eee;} /*灰*/
|
||||
|
||||
|
||||
/* 文字 */
|
||||
.layui-word-aux{font-size: 12px; color: #999; padding: 0 5px;}
|
||||
|
||||
/* 按钮 */
|
||||
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; border: none; border-radius: 2px; cursor: pointer; opacity: 0.9; filter:alpha(opacity=90); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 2px; cursor: pointer; opacity: 0.9; filter:alpha(opacity=90); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-btn:hover{opacity: 0.8; filter:alpha(opacity=80); color: #fff;}
|
||||
.layui-btn:active{opacity: 1; filter:alpha(opacity=100);}
|
||||
.layui-btn+.layui-btn{margin-left: 10px;}
|
||||
@@ -122,6 +134,15 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-btn-small i{font-size: 16px !important;}
|
||||
/* 迷你 */.layui-btn-mini{height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px;}
|
||||
.layui-btn-mini i{font-size: 14px !important;}
|
||||
/* 按钮组 */.layui-btn-group{display: inline-block; vertical-align: middle; font-size: 0;}
|
||||
.layui-btn-group .layui-btn{margin-left: 0!important; margin-right: 0!important; border-left: 1px solid rgba(255,255,255,.5); border-radius: 0;}
|
||||
.layui-btn-group .layui-btn-primary{border-left: none;}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-color: #C9C9C9; color: #009688;}
|
||||
.layui-btn-group .layui-btn:first-child{border-left: none; border-radius: 2px 0 0 2px;}
|
||||
.layui-btn-group .layui-btn-primary:first-child{border-left: 1px solid #c9c9c9;}
|
||||
.layui-btn-group .layui-btn:last-child{border-radius: 0 2px 2px 0;}
|
||||
.layui-btn-group .layui-btn+.layui-btn{margin-left: 0;}
|
||||
.layui-btn-group+.layui-btn-group{margin-left: 10px;}
|
||||
|
||||
/** 表单 **/
|
||||
.layui-input, .layui-textarea, .layui-select{height: 38px; line-height: 38px; line-height: 36px\9; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
|
||||
@@ -172,7 +193,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
/* 复选框 */.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 28px; margin: 4px 10px 0 0; padding-right: 30px; border: 1px solid #d2d2d2; background-color: #fff; cursor: pointer; font-size: 0; border-radius: 2px; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box !important;}
|
||||
.layui-form-checkbox:hover{border: 1px solid #c2c2c2;}
|
||||
.layui-form-checkbox *{display: inline-block; vertical-align: middle;}
|
||||
.layui-form-checkbox span{padding: 0 10px; font-size: 14px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
||||
.layui-form-checkbox span{padding: 0 10px; height: 100%; font-size: 14px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
||||
.layui-form-checkbox:hover span{background-color: #c2c2c2;}
|
||||
.layui-form-checkbox i{position: absolute; right: 0; width: 37px; color: #fff; font-size: 20px;}
|
||||
.layui-form-checkbox:hover i{color: #c2c2c2;}
|
||||
@@ -198,19 +219,20 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-form-radioed i,.layui-form-radio i:hover{color: #5FB878;}
|
||||
.layui-radio-disbaled i{color: #e2e2e2 !important;}
|
||||
|
||||
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 80px; padding: 8px 15px; line-height: 20px; border: 1px solid #e6e6e6; border-radius: 2px 0 0 2px; text-align: center; background-color: #FBFBFB; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
||||
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border: 1px solid #e6e6e6; border-radius: 2px 0 0 2px; text-align: center; background-color: #FBFBFB; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
||||
.layui-form-pane .layui-input-inline{margin-left: -1px;}
|
||||
.layui-form-pane .layui-input-block{margin-left: 112px; left: -1px;}
|
||||
.layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;}
|
||||
.layui-form-pane .layui-input{border-radius: 0 2px 2px 0;}
|
||||
.layui-form-pane .layui-form-text .layui-form-label{float: none; width: 100%; border-right: 1px solid #e6e6e6; border-radius: 2px; box-sizing: border-box!important; text-align: left;}
|
||||
.layui-form-pane .layui-form-text .layui-form-label{float: none; width: 100%; border-right: 1px solid #e6e6e6; border-radius: 2px; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; text-align: left;}
|
||||
.layui-form-pane .layui-form-text .layui-input-inline{display: block; margin: 0; top: -1px; clear: both;}
|
||||
.layui-form-pane .layui-form-text .layui-input-block{margin: 0; left: 0; top: -1px;}
|
||||
.layui-form-pane .layui-form-text .layui-textarea{min-height: 100px; border-radius: 0 0 2px 2px;}
|
||||
.layui-form-pane .layui-input:hover, .layui-form-pane .layui-textarea:hover{border-color: #e6e6e6 !important;}
|
||||
.layui-form-pane .layui-input:focus, .layui-form-pane .layui-textarea:focus{border-color: #e6e6e6 !important;}
|
||||
.layui-form-pane .layui-form-checkbox{margin: 0 0 10px 10px;}
|
||||
.layui-form-pane .layui-form-checkbox{margin: 4px 0 4px 10px;}
|
||||
.layui-form-pane .layui-form-switch,
|
||||
.layui-form-pane .layui-form-radio{margin-left: 10px; }
|
||||
.layui-form-pane .layui-form-radio{margin-top: 6px; margin-left: 10px; }
|
||||
.layui-form-pane .layui-form-item[pane]{position: relative; border: 1px solid #e6e6e6;}
|
||||
.layui-form-pane .layui-form-item[pane] .layui-form-label{position: absolute; left: 0; top: 0; height: 100%; border-width: 0px; border-right-width: 1px;}
|
||||
.layui-form-pane .layui-form-item[pane] .layui-input-inline{margin-left: 110px;}
|
||||
|
||||
/** 富文本编辑器 **/
|
||||
.layui-layedit{border: 1px solid #d2d2d2; border-radius: 2px;}
|
||||
@@ -491,7 +513,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
.layui-form-item .layui-form-label{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.layui-form-item .layui-inline{display: block; margin-right: 0; margin-bottom: 20px; clear: both;}
|
||||
.layui-form-item .layui-inline:after{content:'\20'; clear:both; display:block; height:0;}
|
||||
.layui-form-item .layui-input-inline{display: block; float: none; left: -1px; width: auto; margin: 0 0 10px 112px; }
|
||||
.layui-form-item .layui-input-inline{display: block; float: none; left: -3px; width: auto; margin: 0 0 10px 112px; }
|
||||
.layui-form-item .layui-input-inline+.layui-form-mid{margin-left: 110px; top: -5px; padding: 0;}
|
||||
.layui-form-item .layui-form-checkbox{margin-right: 5px; margin-bottom: 5px;}
|
||||
}
|
||||
|
||||
151
src/css/layui.mobile.css
Normal file
151
src/css/layui.mobile.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
|
||||
@Name: layui mobile
|
||||
@Author: 贤心
|
||||
@Site: http://www.layui.com/mobile/
|
||||
|
||||
*/
|
||||
|
||||
/* reset */
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,legend{margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0)}
|
||||
html{font:12px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,Arial,sans-serif; -ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
|
||||
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
|
||||
a{text-decoration: none; background:transparent}
|
||||
a:active,a:hover{outline:0}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
li{list-style:none;}
|
||||
b,strong{font-weight:700;}
|
||||
h1, h2, h3, h4, h5, h6{font-weight:500;}
|
||||
address,cite,dfn,em,var{font-style:normal;}
|
||||
dfn{font-style:italic}
|
||||
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
|
||||
img{border:0; vertical-align: bottom}
|
||||
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0; outline: 0;}
|
||||
button,select{text-transform:none}
|
||||
select{-webkit-appearance: none; border:none;}
|
||||
input{line-height:normal; }
|
||||
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
|
||||
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
|
||||
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
|
||||
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
|
||||
label,input{vertical-align: middle;}
|
||||
|
||||
|
||||
/** 图标字体 **/
|
||||
@font-face {font-family: 'layui-icon';
|
||||
src: url('../font/iconfont.eot?v=1.0.7');
|
||||
src: url('../font/iconfont.eot?v=1.0.7#iefix') format('embedded-opentype'),
|
||||
url('../font/iconfont.woff?v=1.0.7') format('woff'),
|
||||
url('../font/iconfont.ttf?v=1.0.7') format('truetype'),
|
||||
url('../font/iconfont.svg?v=1.0.7#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.layui-icon{
|
||||
font-family:"layui-icon" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
/** 基础通用 **/
|
||||
/* 消除第三方ui可能造成的冲突 */.layui-box, .layui-box *{-webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;}
|
||||
.layui-border-box, .layui-border-box *{-webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
||||
.layui-inline{position: relative; display: inline-block; *display:inline; *zoom:1; vertical-align: middle;}
|
||||
/* 三角形 */.layui-edge{position: absolute; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden;}
|
||||
/* 单行溢出省略 */.layui-elip{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
/* 屏蔽选中 */.layui-unselect{-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-disabled,.layui-disabled:active{background-color: #d2d2d2 !important; color: #fff !important; cursor: not-allowed !important;}
|
||||
/* 纯圆角 */.layui-circle{border-radius: 100%;}
|
||||
.layui-show{display: block !important;}
|
||||
.layui-hide{display: none !important;}
|
||||
|
||||
|
||||
.layui-upload-iframe{position: absolute; width: 0px; height: 0px; border: 0px; visibility: hidden;}
|
||||
.layui-upload-enter{border: 1px solid #009E94; background-color: #009E94; color: #fff; -webkit-transform: scale(1.1); transform: scale(1.1);}
|
||||
|
||||
|
||||
/** layer-mobile */
|
||||
|
||||
.layui-m-layer{position:relative; z-index: 19891014;}
|
||||
.layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
|
||||
.layui-m-layershade,
|
||||
.layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
|
||||
.layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
|
||||
.layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
|
||||
.layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
|
||||
.layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;}
|
||||
.layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
|
||||
|
||||
/* 弹出动画 */
|
||||
@-webkit-keyframes layui-m-anim-scale { /* 默认 */
|
||||
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
|
||||
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
|
||||
}
|
||||
@keyframes layui-m-anim-scale { /* 默认 */
|
||||
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
|
||||
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
|
||||
}
|
||||
.layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;}
|
||||
|
||||
@-webkit-keyframes layui-m-anim-up{
|
||||
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
|
||||
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
|
||||
}
|
||||
@keyframes layui-m-anim-up{
|
||||
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
|
||||
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
|
||||
}
|
||||
.layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up}
|
||||
|
||||
.layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
|
||||
.layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
|
||||
.layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
|
||||
.layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;}
|
||||
.layui-m-layerchild h3,
|
||||
.layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
|
||||
.layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;}
|
||||
.layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
|
||||
.layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
|
||||
.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
|
||||
.layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}
|
||||
|
||||
/* loading */
|
||||
@-webkit-keyframes layui-m-anim-loading{
|
||||
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
|
||||
40%{transform:scale(1); -webkit-transform:scale(1)}
|
||||
}
|
||||
@keyframes layui-m-anim-loading{
|
||||
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
|
||||
40%{transform:scale(1); -webkit-transform:scale(1)}
|
||||
}
|
||||
.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||
|
||||
.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
|
||||
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
|
||||
.layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
|
||||
.layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
|
||||
.layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
|
||||
.layui-m-layerbtn span[yes]{color: #40AFFE;}
|
||||
.layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
|
||||
.layui-m-layerbtn span:active{background-color: #F6F6F6;}
|
||||
.layui-m-layerend{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;}
|
||||
.layui-m-layerend::before, .layui-m-layerend::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;}
|
||||
.layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
|
||||
|
||||
/* 底部对话框风格 */
|
||||
body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;}
|
||||
.layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
|
||||
.layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
|
||||
.layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
|
||||
.layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
|
||||
.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}
|
||||
|
||||
/* 通用提示 */
|
||||
body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;}
|
||||
.layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@Name: layer
|
||||
@Author: 贤心
|
||||
|
||||
**/
|
||||
*/
|
||||
|
||||
*html{background-image: url(about:blank); background-attachment: fixed;}
|
||||
html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
|
||||
@@ -16,7 +16,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
|
||||
.layui-layer-close{position:absolute;}
|
||||
.layui-layer-content{position:relative;}
|
||||
.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-load{background:url(loading-1.gif) center center no-repeat;}
|
||||
.layui-layer-ico{ background:url(icon.png) no-repeat;}
|
||||
.layui-layer-dialog .layui-layer-ico,
|
||||
.layui-layer-setwin a,
|
||||
@@ -28,39 +28,39 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
|
||||
/* 动画 */
|
||||
.layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;}
|
||||
|
||||
@-webkit-keyframes bounceIn { /* 默认 */
|
||||
@-webkit-keyframes layer-bounceIn { /* 默认 */
|
||||
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
|
||||
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
@keyframes layer-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)}
|
||||
}
|
||||
.layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn}
|
||||
.layer-anim{-webkit-animation-name: layer-bounceIn;animation-name: layer-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}
|
||||
@-webkit-keyframes layer-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 layer-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:layer-zoomInDown;animation-name:layer-zoomInDown}
|
||||
|
||||
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
|
||||
@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}
|
||||
|
||||
@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
|
||||
@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft}
|
||||
|
||||
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:rollIn;animation-name:rollIn}
|
||||
@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn}
|
||||
|
||||
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:fadeIn;animation-name:fadeIn}
|
||||
@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}
|
||||
|
||||
@-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 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 layer-fadeIn{0%{opacity:0}100%{opacity:1}}
|
||||
|
||||
@-webkit-keyframes bounceOut { /* 关闭动画 */
|
||||
@-webkit-keyframes layer-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 {
|
||||
@keyframes layer-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;}
|
||||
.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-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;}
|
||||
|
||||
Reference in New Issue
Block a user