cube-ui/lib/toast/style.css

A fantastic mobile ui lib implement by Vue

.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:-10px}.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-loading{font-size:24px}.cube-loading-spinners{position:relative;display:block;width:1em;height:1em}.cube-loading-spinner{position:absolute;left:44.5%;top:37%;width:2px;height:25%;border-radius:50%/20%;opacity:.25;background-color:currentColor;-webkit-animation:spinner-fade 1s linear infinite;animation:spinner-fade 1s linear infinite}.cube-loading-spinner:first-child{-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:rotate(-150deg) translateY(-150%);transform:rotate(-150deg) translateY(-150%)}.cube-loading-spinner:nth-child(2){-webkit-animation-delay:.083333333333333s;animation-delay:.083333333333333s;-webkit-transform:rotate(-120deg) translateY(-150%);transform:rotate(-120deg) translateY(-150%)}.cube-loading-spinner:nth-child(3){-webkit-animation-delay:.166666666666667s;animation-delay:.166666666666667s;-webkit-transform:rotate(-90deg) translateY(-150%);transform:rotate(-90deg) translateY(-150%)}.cube-loading-spinner:nth-child(4){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-transform:rotate(-60deg) translateY(-150%);transform:rotate(-60deg) translateY(-150%)}.cube-loading-spinner:nth-child(5){-webkit-animation-delay:.333333333333333s;animation-delay:.333333333333333s;-webkit-transform:rotate(-30deg) translateY(-150%);transform:rotate(-30deg) translateY(-150%)}.cube-loading-spinner:nth-child(6){-webkit-animation-delay:.416666666666667s;animation-delay:.416666666666667s;-webkit-transform:rotate(0deg) translateY(-150%);transform:rotate(0deg) translateY(-150%)}.cube-loading-spinner:nth-child(7){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-transform:rotate(30deg) translateY(-150%);transform:rotate(30deg) translateY(-150%)}.cube-loading-spinner:nth-child(8){-webkit-animation-delay:.583333333333333s;animation-delay:.583333333333333s;-webkit-transform:rotate(60deg) translateY(-150%);transform:rotate(60deg) translateY(-150%)}.cube-loading-spinner:nth-child(9){-webkit-animation-delay:.666666666666667s;animation-delay:.666666666666667s;-webkit-transform:rotate(90deg) translateY(-150%);transform:rotate(90deg) translateY(-150%)}.cube-loading-spinner:nth-child(10){-webkit-animation-delay:.75s;animation-delay:.75s;-webkit-transform:rotate(120deg) translateY(-150%);transform:rotate(120deg) translateY(-150%)}.cube-loading-spinner:nth-child(11){-webkit-animation-delay:.833333333333333s;animation-delay:.833333333333333s;-webkit-transform:rotate(150deg) translateY(-150%);transform:rotate(150deg) translateY(-150%)}.cube-loading-spinner:nth-child(12){-webkit-animation-delay:.916666666666667s;animation-delay:.916666666666667s;-webkit-transform:rotate(180deg) translateY(-150%);transform:rotate(180deg) translateY(-150%)}@-webkit-keyframes spinner-fade{0%{opacity:.85}50%{opacity:.25}to{opacity:.25}}@keyframes spinner-fade{0%{opacity:.85}50%{opacity:.25}to{opacity:.25}}.cube-toast.cube-popup{z-index:900}.cube-toast .cube-popup-content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:13px 16px;color:#ccc;background-color:rgba(37,38,45,.9);border-radius:2px}.cube-toast-icon{width:24px;height:24px;font-size:24px}.cube-toast-tip{line-height:20px;font-size:14px;max-width:12em;max-height:40px;overflow:hidden}.cube-loading~.cube-toast-tip,.cube-toast-icon~.cube-toast-tip{margin-left:8px}.cube-toast-fade-enter-active{-webkit-animation:toast-in .2s;animation:toast-in .2s}.cube-toast-fade-leave-active{-webkit-animation:toast-out .2s;animation:toast-out .2s}@-webkit-keyframes toast-in{0%{opacity:0}to{opacity:1}}@keyframes toast-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes toast-out{0%{opacity:1}to{opacity:0}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}