drip-ui/es/drip-css/base.css

Lightweight Mobile UI Components built on Vue

html{-webkit-tap-highlight-color:transparent}body{margin:0}a{text-decoration:none}a:focus,button:focus,input:focus,textarea:focus{outline:0}ol,ul{margin:0;padding:0;list-style:none}button,input,textarea{font:inherit;color:inherit}.drip-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.drip-clearfix::after{content:'';display:table;clear:both}[class*=drip-hairline]{position:relative}[class*=drip-hairline]::after{content:' ';position:absolute;pointer-events:none;box-sizing:border-box;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);border:0 solid #eee}.drip-hairline--top::after{border-top-width:1px}.drip-hairline--left::after{border-left-width:1px}.drip-hairline--right::after{border-right-width:1px}.drip-hairline--bottom::after{border-bottom-width:1px}.drip-hairline--top-bottom::after{border-width:1px 0}.drip-hairline--surround::after{border-width:1px}@-webkit-keyframes drip-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes drip-slide-bottom-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes drip-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes drip-slide-bottom-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes drip-fade-in{from{opacity:0}to{opacity:1}}@keyframes drip-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes drip-fade-out{from{opacity:1}to{opacity:0}}@keyframes drip-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes drip-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes drip-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.drip-fade-enter-active{-webkit-animation:.3s drip-fade-in;animation:.3s drip-fade-in}.drip-fade-leave-active{-webkit-animation:.3s drip-fade-out;animation:.3s drip-fade-out}.drip-slide-bottom-enter-active{-webkit-animation:drip-slide-bottom-enter .3s both ease;animation:drip-slide-bottom-enter .3s both ease}.drip-slide-bottom-leave-active{-webkit-animation:drip-slide-bottom-leave .3s both ease;animation:drip-slide-bottom-leave .3s both ease}.drip-info{color:#fff;left:100%;top:-.5em;font-size:.6em;font-weight:500;padding:0 .25em;text-align:center;min-width:1.4em;line-height:1.4;position:absolute;border-radius:.7em;box-sizing:border-box;background-color:#d05602;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif}@font-face{font-style:normal;font-weight:400;font-family:vant-icon;src:url(https://img.yzcdn.cn/vant/vant-icon-76f274.ttf) format('truetype')}.drip-icon{position:relative;display:inline-block;font:normal normal normal .18667rem/1 vant-icon;font-size:inherit;text-rendering:auto}.drip-icon::before{display:inline-block}.drip-icon-add-o::before{content:"\F000"}.drip-icon-add::before{content:"\F001"}.drip-icon-add2::before{content:"\F002"}.drip-icon-after-sale::before{content:"\F003"}.drip-icon-aim::before{content:"\F004"}.drip-icon-alipay::before{content:"\F005"}.drip-icon-arrow-left::before{content:"\F006"}.drip-icon-arrow::before{content:"\F007"}.drip-icon-balance-pay::before{content:"\F008"}.drip-icon-browsing-history::before{content:"\F009"}.drip-icon-card::before{content:"\F00A"}.drip-icon-cart::before{content:"\F00B"}.drip-icon-cash-back-record::before{content:"\F00C"}.drip-icon-cash-on-deliver::before{content:"\F00D"}.drip-icon-certificate::before{content:"\F00E"}.drip-icon-chat::before{content:"\F00F"}.drip-icon-check::before{content:"\F010"}.drip-icon-checked::before{content:"\F011"}.drip-icon-clear::before{content:"\F012"}.drip-icon-clock::before{content:"\F013"}.drip-icon-close::before{content:"\F014"}.drip-icon-completed::before{content:"\F015"}.drip-icon-contact::before{content:"\F016"}.drip-icon-coupon::before{content:"\F017"}.drip-icon-credit-pay::before{content:"\F018"}.drip-icon-debit-pay::before{content:"\F019"}.drip-icon-delete::before{content:"\F01A"}.drip-icon-description::before{content:"\F01B"}.drip-icon-discount::before{content:"\F01C"}.drip-icon-ecard-pay::before{content:"\F01D"}.drip-icon-edit-data::before{content:"\F01E"}.drip-icon-edit::before{content:"\F01F"}.drip-icon-exchange-record::before{content:"\F020"}.drip-icon-exchange::before{content:"\F021"}.drip-icon-fail::before{content:"\F022"}.drip-icon-free-postage::before{content:"\F023"}.drip-icon-gift-card-pay::before{content:"\F024"}.drip-icon-gift-card::before{content:"\F025"}.drip-icon-gift::before{content:"\F026"}.drip-icon-gold-coin::before{content:"\F027"}.drip-icon-goods-collect::before{content:"\F028"}.drip-icon-home::before{content:"\F029"}.drip-icon-hot-sale::before{content:"\F02A"}.drip-icon-hot::before{content:"\F02B"}.drip-icon-idcard::before{content:"\F02C"}.drip-icon-info-o::before{content:"\F02D"}.drip-icon-like-o::before{content:"\F02E"}.drip-icon-like::before{content:"\F02F"}.drip-icon-location::before{content:"\F030"}.drip-icon-logistics::before{content:"\F031"}.drip-icon-more-o::before{content:"\F032"}.drip-icon-more::before{content:"\F033"}.drip-icon-new-arrival::before{content:"\F034"}.drip-icon-new::before{content:"\F035"}.drip-icon-other-pay::before{content:"\F036"}.drip-icon-passed::before{content:"\F037"}.drip-icon-password-not-view::before{content:"\F038"}.drip-icon-password-view::before{content:"\F039"}.drip-icon-pause::before{content:"\F03A"}.drip-icon-peer-pay::before{content:"\F03B"}.drip-icon-pending-deliver::before{content:"\F03C"}.drip-icon-pending-evaluate::before{content:"\F03D"}.drip-icon-pending-orders::before{content:"\F03E"}.drip-icon-pending-payment::before{content:"\F03F"}.drip-icon-phone::before{content:"\F040"}.drip-icon-photo::before{content:"\F041"}.drip-icon-photograph::before{content:"\F042"}.drip-icon-play::before{content:"\F043"}.drip-icon-point-gift::before{content:"\F044"}.drip-icon-points-mall::before{content:"\F045"}.drip-icon-points::before{content:"\F046"}.drip-icon-qr-invalid::before{content:"\F047"}.drip-icon-qr::before{content:"\F048"}.drip-icon-question::before{content:"\F049"}.drip-icon-receive-gift::before{content:"\F04A"}.drip-icon-records::before{content:"\F04B"}.drip-icon-search::before{content:"\F04C"}.drip-icon-send-gift::before{content:"\F04D"}.drip-icon-setting::before{content:"\F04E"}.drip-icon-share::before{content:"\F04F"}.drip-icon-shop-collect::before{content:"\F050"}.drip-icon-shop::before{content:"\F051"}.drip-icon-shopping-cart::before{content:"\F052"}.drip-icon-sign::before{content:"\F053"}.drip-icon-stop::before{content:"\F054"}.drip-icon-success::before{content:"\F055"}.drip-icon-tosend::before{content:"\F056"}.drip-icon-underway::before{content:"\F057"}.drip-icon-upgrade::before{content:"\F058"}.drip-icon-value-card::before{content:"\F059"}.drip-icon-wap-home::before{content:"\F05A"}.drip-icon-wap-nav::before{content:"\F05B"}.drip-icon-warn::before{content:"\F05C"}.drip-icon-wechat::before{content:"\F05D"}.loading-mark{position:fixed;z-index:4000;top:0;right:0;left:0;bottom:0}.loading-toast{position:fixed;z-index:6000;width:2.93333rem;min-height:2.66667rem;top:50%;-webkit-transform:translateY(-100%);transform:translateY(-100%);left:0;right:0;margin:0 auto;background:rgba(17,17,17,.7);text-align:center;border-radius:.13333rem;color:#fff}.loading-loading{width:1.06667rem;height:1.06667rem;display:inline-block;vertical-align:middle;margin-top:.53333rem;-webkit-animation:lt 1s steps(12,end) infinite;animation:lt 1s steps(12,end) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.loading-text{margin-top:.26667rem;font-size:.34667rem}@-webkit-keyframes lt{0%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}@keyframes lt{0%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}.loading-enter,.loading-enter-active,.loading-leave-active{position:relative;z-index:1}.loading-enter,.loading-leave-active{opacity:0}.loading-enter-active,.loading-leave-active{-webkit-transition:opacity .3s;transition:opacity .3s}.spinner{position:fixed;width:1.33333rem;height:.8rem;text-align:center;font-size:.26667rem;z-index:8000;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.spinner>div{background-color:#828c9a;height:100%;width:.05333rem;margin-right:.08rem;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes stretchdelay{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.3)}20%{transform:scaleY(1);-webkit-transform:scaleY(.6)}}@keyframes stretchdelay{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.3)}20%{transform:scaleY(1);-webkit-transform:scaleY(.6)}}.drip-button{position:relative;padding:0;display:inline-block;height:.8rem;line-height:.77333rem;border-radius:.4rem;box-sizing:border-box;font-size:.34667rem;text-align:center;-webkit-appearance:none;-webkit-text-size-adjust:100%}.drip-button::before{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.drip-button:active::before{opacity:.3}.drip-button--unclickable::before{display:none}.drip-button--default{color:#888;background-color:#fff;border:1px solid #dadada}.drip-button--blue{color:#fff;background-color:#126ef8;border:1px solid #126ef8}.drip-button--orange{color:#fff;background-color:#ffab11;border:1px solid #ffab11}.drip-button--green{color:#fff;background-color:#5fa800;border:1px solid #5fa800}.drip-button--plain{background-color:#fff}.drip-button--plain.drip-button--blue{color:#126ef8}.drip-button--plain.drip-button--orange{color:#ffab11}.drip-button--plain.drip-button--green{color:#5fa800}.drip-button--large{width:100%;max-width:8.93333rem;height:1.33333rem;line-height:1.30667rem;border-radius:.66667rem;font-size:.48rem}.drip-button--normal{min-width:2.13333rem;padding:0 .33333rem;font-size:.37333rem}.drip-button--small{min-width:1.86667rem;height:.64rem;padding:0 .21333rem;font-size:.32rem;line-height:.64rem}.drip-button--loading .drip-loading{display:inline-block}.drip-button--block{width:100%;display:block}.drip-button--bottom-action{width:100%;height:1.33333rem;line-height:1.33333rem;border:0;border-radius:0;font-size:.42667rem;color:#fff;background-color:#ffab11}.drip-button--disabled{opacity:.5}.drip-button--round{border-radius:10em}.drip-button--square{border-radius:0}.drip-cell{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;padding:.13333rem .2rem;box-sizing:border-box;line-height:.32rem;position:relative;background-color:#fff;color:#888;font-size:.18667rem;overflow:hidden}.drip-cell:not(:last-child)::after{content:' ';position:absolute;pointer-events:none;box-sizing:border-box;left:.2rem;right:0;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);border-bottom:1px solid #dadada}.drip-cell--borderless::after{display:none}.drip-cell-group{background-color:#fff}.drip-cell__label{font-size:.16rem;line-height:1.2;color:#666}.drip-cell__title,.drip-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.drip-cell__value{overflow:hidden;text-align:right;position:relative;vertical-align:middle}.drip-cell__value--alone{text-align:left}.drip-cell__left-icon{min-width:1em;font-size:.21333rem;line-height:.32rem;margin-right:.06667rem}.drip-cell__right-icon{color:#999;font-size:.16rem;line-height:.32rem;margin-left:.06667rem}.drip-cell__right-icon--left::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.drip-cell__right-icon--up::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.drip-cell__right-icon--down::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.drip-cell--clickable:active{background-color:#e8e8e8}.drip-cell--required{overflow:visible}.drip-cell--required::before{content:'*';position:absolute;left:.09333rem;font-size:.18667rem;color:#d05602}.drip-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}