@lan-ui/lan-ui
Version:
A fantastic mobile ui lib implement by Vue
1 lines • 6.08 kB
CSS
.cube-popup{position:fixed;left:0;right:0;top:0;bottom:0;z-index:100;pointer-events:none}.cube-popup_mask{pointer-events:auto}.cube-popup_mask .cube-popup-mask{display:block}.cube-popup-container,.cube-popup-mask{position:absolute;width:100%;height:100%}.cube-popup-mask{display:none;overflow:hidden;background-color:#25262d;opacity:.4;pointer-events:auto}.cube-popup-mask:before{content:".";display:block;width:1px;height:1px;background-color:rgba(0,0,0,.1);margin-left:-.625rem}.cube-popup-container{-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}.cube-popup-content{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;-webkit-transform:translate(-100%,-100%);transform:translate(-100%,-100%);pointer-events:auto}.cube-popup-center .cube-popup-content,.cube-popup-left .cube-popup-content,.cube-popup-right .cube-popup-content{top:-50%;left:-50%;width:auto;max-width:100%;-webkit-transform:translate(0);transform:translate(0)}.cube-popup-left .cube-popup-content,.cube-popup-right .cube-popup-content{height:100%;top:-100%}.cube-popup-center .cube-popup-content{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cube-popup-top .cube-popup-content{top:-100%;left:-100%;-webkit-transform:translate(0);transform:translate(0)}.cube-popup-right .cube-popup-content{top:-100%;right:100%}.cube-popup-left .cube-popup-content{left:-100%}.cube-dialog-main{width:16.875rem;padding:0;text-align:center;overflow:hidden;border-radius:.125rem;background-color:#fff}.cube-dialog-alert,.cube-dialog-confirm{position:relative;overflow:hidden}.cube-dialog-icon{margin-top:1.25rem;margin-bottom:1rem;line-height:1;color:#4a4c5b;font-size:1.875rem}.cube-dialog-icon i{display:inline-block;width:1.875rem;height:1.875rem;padding:.625rem;box-sizing:content-box;border-radius:50%;background-color:#f3f4f5}.cube-dialog-icon+.cube-dialog-title .cube-dialog-title-def{margin-top:0}.cube-dialog-icon+.cube-dialog-content{margin-top:-.25rem}.cube-dialog-title{color:#333;font-size:1rem;line-height:1}.cube-dialog-title+.cube-dialog-content{margin-top:.75rem}.cube-dialog-title-def{margin:1.875rem 1rem 0;overflow:hidden;white-space:nowrap}.cube-dialog-content{margin:1rem 0;text-align:left;color:#4c4c4c;font-size:.875rem;line-height:1.375rem}.cube-dialog-content-def{padding:0 1rem}.cube-dialog-content-def>p{display:table;margin:auto}.cube-dialog-content-def>p+.cube-input{margin-top:.75rem}.cube-dialog-confirm .cube-dialog-btns .cube-dialog-btn,.cube-dialog-prompt .cube-dialog-btns .cube-dialog-btn{width:50%;float:left}.cube-dialog-confirm .cube-dialog-btns.border-right-1px:after,.cube-dialog-prompt .cube-dialog-btns.border-right-1px:after{right:50%;border-color:#ebebeb}.cube-dialog-close{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;z-index:1;position:absolute;top:0;right:0;width:2rem;height:2rem;color:#999;font-size:1.125rem}.cube-dialog-btns{overflow:hidden;width:100%;font-size:0}.cube-dialog-btn{display:inline-block;width:100%;padding:1.0625rem .625rem;margin:0;font-size:1rem;line-height:1;text-align:center;text-decoration:none;color:#999;background-color:#fff;background-clip:padding-box;box-sizing:border-box}.cube-dialog-btn:active{background-color:rgba(0,0,0,.04)}.cube-dialog-btn_highlight{color:#1890ff}.cube-dialog-btn_highlight:active{background-color:rgba(24,144,255,.04)}.cube-dialog-btn_disabled{color:#999}.cube-dialog-btn_disabled:active{background-color:transparent}.cube-dialog-fade-enter-active{-webkit-animation:dialog-fadein .4s;animation:dialog-fadein .4s}.cube-dialog-fade-enter-active .cube-dialog-main{-webkit-animation:dialog-zoom .4s;animation:dialog-zoom .4s}@-webkit-keyframes dialog-fadein{0%{opacity:0}to{opacity:1}}@keyframes dialog-fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes dialog-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.cube-input{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:.875rem;line-height:1.429;background-color:#fff;position:relative}.cube-input:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #ebebeb;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-input:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-input:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-input-field{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;width:100%;min-width:0;padding:.625rem;box-sizing:border-box;color:#4c4c4c;line-height:inherit;background-color:inherit;border-radius:.125rem;outline:none}.cube-input-field::-webkit-input-placeholder{color:#ccc;text-overflow:ellipsis}.cube-input-field+.cube-input-append .cube-input-clear:first-child,.cube-input-field+.cube-input-append .cube-input-eye:first-child{margin-left:-.3125rem}.cube-input_active:after{border-color:#1890ff}.cube-input-append,.cube-input-prepend{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.cube-input-clear,.cube-input-eye{width:1em;height:1em;line-height:1;padding:.625rem;box-sizing:content-box;color:#999}.cube-input-clear>i,.cube-input-eye>i{display:inline-block;-webkit-transform:scale(1.2);transform:scale(1.2)}.cube-input-eye>.cubeic-eye-invisible,.cube-input-eye>.cubeic-eye-visible{-webkit-transform:scale(1.4);transform:scale(1.4)}