wot-design/lib/theme-default/tabs.css

Mobile UI components built on vue.js

@charset "UTF-8";.wd-tabs__map-btn,.wd-tabs__map-nav-btn,.wd-tabs__nav-item{-webkit-tap-highlight-color:transparent}.wd-tabs,.wd-tabs__nav{background:#fff;position:relative}@font-face{font-family:wd-icons;src:url(fonts/wd-icons.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" wd-icon-"],[class^=wd-icon-]{font-family:wd-icons!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wd-icon-arrow-thin-up:before{content:"\e898"}.wd-icon-arrow-thin-down:before{content:"\e899"}.wd-icon-keyboard-collapse:before{content:"\e900"}.wd-icon-keyboard-delete:before{content:"\e901"}.wd-icon-setting:before{content:"\e902"}.wd-icon-arrow-right:before{content:"\e903"}.wd-icon-arrow-down:before{content:"\e904"}.wd-icon-arrow-up:before{content:"\e905"}.wd-icon-arrow-left:before{content:"\e906"}.wd-icon-fill-camera:before{content:"\e907"}.wd-icon-star-on:before{content:"\e908"}.wd-icon-check-bold:before{content:"\e909"}.wd-icon-error-fill:before{content:"\e90a"}.wd-icon-warn-bold:before{content:"\e90b"}.wd-icon-close-outline:before{content:"\e90c"}.wd-icon-close-bold:before{content:"\e90d"}.wd-icon-check-outline:before{content:"\e90e"}.wd-icon-wifi-error:before{content:"\e90f"}.wd-icon-subscribe:before{content:"\e910"}.wd-icon-detection:before{content:"\e911"}.wd-icon-read:before{content:"\e912"}.wd-icon-fill-arrow-down:before{content:"\e913"}.wd-icon-dong:before{content:"\e914"}.wd-icon-edit-outline:before{content:"\e915"}.wd-icon-add-circle:before{content:"\e916"}.wd-icon-copy:before{content:"\e917"}.wd-icon-bags:before{content:"\e918"}.wd-icon-decrease:before{content:"\e919"}.wd-icon-jdm:before{content:"\e91a"}.wd-icon-spool:before{content:"\e91b"}.wd-icon-download:before{content:"\e91c"}.wd-icon-phone-compute:before{content:"\e91d"}.wd-icon-computer:before{content:"\e91e"}.wd-icon-clock:before{content:"\e91f"}.wd-icon-view:before{content:"\e920"}.wd-icon-eye-close:before{content:"\e921"}.wd-icon-picture:before{content:"\e922"}.wd-icon-evaluation:before{content:"\e923"}.wd-icon-goods:before{content:"\e924"}.wd-icon-lenovo:before{content:"\e925"}.wd-icon-list:before{content:"\e926"}.wd-icon-note:before{content:"\e927"}.wd-icon-video:before{content:"\e928"}.wd-icon-warning:before{content:"\e929"}.wd-icon-camera:before{content:"\e92a"}.wd-icon-transfer:before{content:"\e92b"}.wd-icon-keywords:before{content:"\e92e"}.wd-icon-chat:before{content:"\e931"}.wd-icon-delete-thin:before{content:"\e932"}.wd-icon-add:before{content:"\e933"}.wd-icon-scan:before{content:"\e934"}.wd-icon-translate-bold:before{content:"\e935"}.wd-icon-close:before{content:"\e936"}.wd-icon-search:before{content:"\e937"}.wd-icon-delete:before{content:"\e939"}.wd-icon-more:before{content:"\e93a"}.wd-icon-thin-arrow-left:before{content:"\e93b"}.wd-icon-filter:before{content:"\e93c"}.wd-icon-phone:before{content:"\e93d"}.wd-icon-refresh:before{content:"\e93e"}.wd-icon-check:before{content:"\e93f"}.wd-icon-rotate:before{content:"\e92c"}.wd-sticky.is-support-sticky{position:sticky}.wd-tabs__nav{height:42px;overflow:hidden}.wd-tabs__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;padding-bottom:15px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wd-tabs__nav-item{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;text-align:center;height:42px;line-height:42px;font-size:14px;color:rgba(0,0,0,.85);-webkit-transition:color .3s;transition:color .3s}.wd-tabs__nav-item.is-active{font-weight:500}.wd-tabs__nav-item.is-disabled{color:rgba(0,0,0,.25)}.wd-tabs__line{position:absolute;bottom:20px;left:0;height:3px;background:linear-gradient(315deg,#517cf0 0,#769ef5 100%);z-index:1;border-radius:1.5px}.wd-tabs__container{position:relative;overflow:hidden}.wd-tabs__body{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%}.wd-tabs__map{position:absolute;top:0;left:0;right:0;z-index:2}.wd-tabs__map-btn{position:absolute;right:0;top:0;width:42px;height:42px;line-height:42px;text-align:center;color:rgba(0,0,0,.65);z-index:3;background:#fff}.wd-tabs__map-btn.is-open::after{position:absolute;display:block;content:"";width:100%;height:1px;left:0;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);background:#e8e8e8}.wd-tabs__map-btn::before{position:absolute;content:'';top:0;left:-24px;width:24px;height:41px;background:-webkit-gradient(linear,right top,left top,color-stop(1%,#fff),to(rgba(255,255,255,0)));background:linear-gradient(270deg,#fff 1%,rgba(255,255,255,0) 100%)}.wd-tabs__map-arrow{font-size:18px;display:block;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.wd-tabs__map-arrow.is-open{font-size:14px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.wd-tabs__map-header{position:relative;padding-left:17px;height:42px;line-height:42px;font-size:14px;color:rgba(0,0,0,.85);-webkit-transition:opacity .3s;transition:opacity .3s;background:#fff;opacity:0}.wd-tabs__map-header::after{position:absolute;display:block;content:"";width:100%;height:1px;left:0;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);background:#e8e8e8}.wd-tabs__map-body{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:20px 15px 10px;background:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:center top;transform-origin:center top}.wd-tabs__map-body.is-open{-webkit-transform:scaleY(1);transform:scaleY(1)}.wd-tabs__map-nav-item{-ms-flex-preferred-size:33%;flex-basis:33%}.wd-tabs__map-nav-item:nth-child(3n+2){text-align:center}.wd-tabs__map-nav-item:nth-child(3n+3){text-align:right}.wd-tabs__map-nav-btn{outline:0;-webkit-appearance:none;background:0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:107px;height:32px;line-height:32px;background-color:rgba(0,0,0,.04);margin-bottom:10px;border-color:transparent;border-radius:16px;color:rgba(0,0,0,.85);font-size:14px;text-align:center;-webkit-transition:color .3s,border-color .3s;transition:color .3s,border-color .3s}.wd-tabs__map-nav-btn.is-active{color:#4d80f0;border:1px solid #4d80f0;background-color:#fff}.wd-tabs__map-nav-btn.is-disabled{color:rgba(0,0,0,.25);border-color:#f4f4f4}.wd-tabs__mask{position:absolute;top:42px;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.wd-tabs.is-slide .wd-tabs__nav-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.wd-tabs.is-slide .wd-tabs__nav-item{color:rgba(0,0,0,.85);-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0 17px}.wd-tabs.is-map .wd-tabs__nav{padding-right:40px}@media (max-width:330px){color: rgba(0,0,0,0.85); .wd-tabs__map-nav-btn{width:90px}}