153 lines
8.2 KiB
CSS
153 lines
8.2 KiB
CSS
/**
|
||
wcPop.css v1.0 styleSheet（2018/03/30）
|
||
write by 【px】
|
||
*/
|
||
.popui__modal-panel{position: relative;}
|
||
.popui__modal-panel *{font-style: normal; font-weight: normal; list-style: none;}
|
||
.popui__modal-mask {background: black; opacity: .6; pointer-events: auto; height: 100%; width: 100%; position: fixed; top: 0; left: 0; animation: mask-fadeIn .5s;}
|
||
@keyframes mask-fadeIn {0% {opacity: 0;}100% {opacity: .6;}}
|
||
.popui__panel-main{display: table; color:#333; font-family: 宋体,helvetica,arial,sans-serif; pointer-events: none; height: 100%; width: 100%; position: fixed; left: 0; top: 0;}
|
||
.popui__panel-main .popui__panel-section{display: table-cell; vertical-align: middle; text-align: center;}
|
||
.popui__panel-child{background: #fff; border-radius: 3px; display: inline-block; pointer-events: auto; font-size: 14px; text-align: left; max-width: 300px; position: relative;}
|
||
|
||
.popui__panel-tit{color:#333; font-size: 14px; padding: 7px 20px; text-align: center;}
|
||
.popui__panel-cnt{padding: 15px; text-align: center; line-height: 1.3; word-wrap: break-word; word-break: break-all;}
|
||
.popui__panel-btn{display: flex; align-items: center; line-height: 40px; position: relative;}
|
||
.popui__panel-btn:after{content: ''; border-top: 1px solid #e7e7e7; position: absolute; left: 0; right: 0; top: 0; z-index:5;}
|
||
.popui__panel-btn .btn{cursor: pointer; display: block; flex: 1; font-size: 14px; text-align: center; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; z-index: 3;}
|
||
.popui__panel-btn .btn:active{background: #f5f5f5;}
|
||
.popui__panel-btn .btn:after{content:"";border-left:1px solid #e7e7e7;position:absolute;top:0;bottom:0;right:0;}
|
||
.popui__panel-btn .btn:last-child:after{border:none;}
|
||
.popui__panel-btn .btn:first-child{border-bottom-left-radius: 3px;}
|
||
.popui__panel-btn .btn:last-child{border-bottom-right-radius: 3px;}
|
||
/* +++ */
|
||
.wcPop-close .popui__modal-mask{animation: anim-fadeOut .3s;}
|
||
.wcPop-close .popui__panel-child{animation: anim-fadeOut .3s;}
|
||
.wcPop-close .popui__footer, .wcPop-close .popui__actionsheet{animation: anim-fadeOutUp .3s;}
|
||
|
||
|
||
/* __ 自定义样式 */
|
||
/* 样式1（toast） */
|
||
.popui__toast{background: rgba(17,17,17,.7); color: #fff; min-height: 120px; width: 120px;}
|
||
.popui__toast .popui__toast-icon{margin-bottom: 5px;}
|
||
.popui__toast .popui__toast-icon img{height:24px;width:24px;}
|
||
.popui__toast .popui__panel-cnt{padding: 35px 10px 15px;}
|
||
/* 样式2（footer底部弹出） */
|
||
.popui__footer{background: 0 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 10px; width: 95%;}
|
||
.popui__footer .popui__panel-cnt{background-color: rgba(255,255,255,.8); border-radius: 3px 3px 0 0; padding: 15px 10px;}
|
||
.popui__footer .popui__panel-btn{background: 0 0; border-top: 0; display: block;}
|
||
.popui__footer .popui__panel-btn:after{display:none;}
|
||
.popui__footer .popui__panel-btn .btn{background: rgba(255,255,255,.8); border-top: 1px solid #ccc;}
|
||
.popui__footer .popui__panel-btn .btn:after{border-left:none;}
|
||
.popui__footer .popui__panel-btn .btn:nth-last-child(2){border-radius: 0 0 3px 3px;}
|
||
.popui__footer .popui__panel-btn .btn:nth-last-child(1){border-top: 0; border-radius: 3px; margin-top: 10px;}
|
||
/* 样式3（actionsheet底部弹出式菜单） */
|
||
.popui__actionsheet{border-radius: 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; width: 100%;}
|
||
.popui__actionsheet .popui__panel-cnt{padding: 15px 10px;}
|
||
.popui__actionsheet .popui__panel-btn{background: 0 0; border-top: 0; display: block;}
|
||
.popui__actionsheet .popui__panel-btn .btn{border-top: 1px solid #e7e7e7;}
|
||
.popui__actionsheet .popui__panel-btn .btn:after{border-left:none;}
|
||
.popui__actionsheet .popui__panel-btn .btn:nth-last-child(1){border-top: 5px solid #e7e7e7; border-bottom-right-radius: 0;}
|
||
/* 样式4（ios、android） */
|
||
.wcPop-close .popui__ios, .wcPop-close .popui__android, .wcPop-close .popui__androidSheet{animation: anim-fadeScaleOut .3s;}
|
||
.popui__ios{width: 80%;}
|
||
.popui__ios .popui__panel-tit{font-size:16px; padding: 20px 25px 10px;}
|
||
.popui__ios .popui__panel-cnt{color:#808080; padding: 0 25px 15px; min-height:40px;}
|
||
.popui__ios .popui__panel-cnt:first-child{color:#333; padding: 40px 20px 25px;}
|
||
.popui__ios .popui__panel-btn{line-height: 48px;}
|
||
.popui__ios .popui__panel-btn .btn{font-size: 14px;}
|
||
.popui__android{width: 80%;}
|
||
.popui__android .popui__panel-tit{font-size:18px; padding: 20px 25px 10px; text-align: left;}
|
||
.popui__android .popui__panel-cnt{color:#808080; font-size: 15px; padding: 5px 25px 35px; text-align: left; min-height:40px;}
|
||
.popui__android .popui__panel-cnt:first-child{color:#333; padding: 25px 25px 35px;}
|
||
.popui__android .popui__panel-btn{display: block; padding: 0 25px 12px; text-align: right; line-height: 34px;}
|
||
.popui__android .popui__panel-btn:after{display: none;}
|
||
.popui__android .popui__panel-btn .btn{border-radius:0; font-size: 14px; display: inline-block; vertical-align: top; padding: 0 15px;}
|
||
.popui__android .popui__panel-btn .btn:after{display: none;}
|
||
.popui__android .popui__panel-btn .btn:first-child{color: #808080;}
|
||
.popui__android .popui__panel-btn .btn:last-child{margin-right: -10px;}
|
||
.popui__androidSheet{border-radius:2px;width: 80%;}
|
||
.popui__androidSheet .popui__panel-tit{font-size:18px; padding: 15px 20px 5px; text-align: left;}
|
||
.popui__androidSheet .popui__panel-cnt{color:#808080; font-size: 15px; padding: 0 20px 15px; text-align: left;}
|
||
.popui__androidSheet .popui__panel-cnt:first-child{color:#333; padding: 15px 20px 5px;}
|
||
.popui__androidSheet .popui__panel-btn{display: block; padding: 0; text-align: left; line-height: 42px;}
|
||
.popui__androidSheet .popui__panel-btn:after{display: none;}
|
||
.popui__androidSheet .popui__panel-btn .btn{border-bottom: 1px solid #eee; border-radius:0; font-size: 14px; padding: 0 20px; text-align: left;}
|
||
.popui__androidSheet .popui__panel-btn .btn:last-child{border-bottom: 0;}
|
||
.popui__androidSheet .popui__panel-btn .btn:after{display: none;}
|
||
|
||
|
||
/* __ 弹窗动画 */
|
||
.anim-fadeIn{animation: anim-fadeIn .5s;}
|
||
.anim-scaleIn{animation: anim-scaleIn .3s;}
|
||
.anim-fadeInUp{animation: anim-fadeInUp .3s;}
|
||
.anim-fadeInDown{animation: anim-fadeInDown .3s;}
|
||
.anim-fadeOutUp{animation: anim-fadeOut .3s;}
|
||
.anim-fadeOut{animation: anim-fadeOut .3s;}
|
||
.anim-fadeScaleOut{animation: anim-fadeScaleOut .3s;}
|
||
.anim-rollIn{animation: anim-rollIn .3s;}
|
||
.anim-shake{animation: anim-shake .3s;}
|
||
.anim-loading{animation: anim-loading 1s steps(12, end) infinite;}
|
||
.anim-footer{animation: anim-footer .3s;}
|
||
/* 渐变 */
|
||
@keyframes anim-fadeIn {
|
||
0% {opacity: 0;}
|
||
100% {opacity: 1;}
|
||
}
|
||
/* 缩放 */
|
||
@keyframes anim-scaleIn {
|
||
0% {opacity: 0; transform: scale(.9);}
|
||
100% {opacity: 1; transform: scale(1);}
|
||
}
|
||
/* 由上向下打开 */
|
||
@keyframes anim-fadeInUp {
|
||
0% {opacity: 0; transform: translateY(-100%);}
|
||
100% {opacity: 1; transform: translateY(0);}
|
||
}
|
||
/* 由下向上打开 */
|
||
@keyframes anim-fadeInDown {
|
||
0% {opacity: 0; transform: translateY(100%);}
|
||
100% {opacity: 1; transform: translateY(0);}
|
||
}
|
||
/* 由上向下渐变关闭 */
|
||
@keyframes anim-fadeOutUp {
|
||
100% {opacity: 0; transform: translateY(100%);}
|
||
}
|
||
/* 渐变缩小关闭 */
|
||
@keyframes anim-fadeOut {
|
||
100% {opacity: 0;}
|
||
}
|
||
/* 渐变缩小关闭 */
|
||
@keyframes anim-fadeScaleOut {
|
||
100% {opacity: 0;-webkit-transform: scale(.9);transform: scale(.9);}
|
||
}
|
||
/* 左侧翻转打开 */
|
||
@keyframes anim-rollIn {
|
||
0% {opacity: 0; transform: translateX(-100%) rotate(-120deg);}
|
||
100% {opacity: 1; transform: translateX(0) rotate(0);}
|
||
}
|
||
/* 震动 */
|
||
@keyframes anim-shake {
|
||
0%,100% {transform: translateX(0);}
|
||
10%,30%,50%,70%,90% {transform: translateX(-10px);}
|
||
20%,40%,60%,80% {transform: translateX(10px);}
|
||
}
|
||
/* 加载中 */
|
||
@keyframes anim-loading {
|
||
0% {transform: rotate3d(0, 0, 1, 0deg);}
|
||
100% {transform: rotate3d(0, 0, 1, 360deg);}
|
||
}
|
||
/* 底部向上弹出 */
|
||
@keyframes anim-footer {
|
||
0% {opacity: 0; transform: translateY(800px)}
|
||
100% {opacity: 1; transform: translateY(0);}
|
||
}
|
||
|
||
|
||
/* 去除android上a、button、input标签点击产生的阴影 */
|
||
a,button,input,label{-webkit-tap-highlight-color:rgba(255,0,0,0); outline:none;}
|
||
/* __ flex弹性盒子 */
|
||
.flexbox{display:-webkit-box; display:-webkit-flex; display:flex; display:-ms-flexbox;}
|
||
.flex-alignc{align-items: center;}
|
||
.flex1{-webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;}
|
||
.flex2{-webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2;} |