@beeapi/nutui/dist/packages/tabselect/tabselect.css

一套轻量级移动端Vue组件库

/*!
 * @beeapi/nutui v2.2.10 - tabselect.css, 451ed2404bee284b891e, Sat Dec 19 2020 12:06:10 GMT+0800 (中国标准时间)
 * (c) 2017-2020 JDC
 * Released under the MIT License.
 */.nut-tab{position:relative;border:1px solid #eee;padding:10px;font-size:12px;background:#eee}.nut-tab-horizontal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative}.close-btn,.nut-tab-horizontal .close-btn{position:absolute;width:17px;height:17px;text-align:center;line-height:14px;font-size:16px;background:#999;font-weight:400;color:#fff;right:0;top:0;-webkit-border-radius:50%;border-radius:50%}.nut-tab-title{border-bottom:1px solid #ededed;scroll-behavior:smooth;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:50px;line-height:48px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;overflow-x:auto;overflow-y:hidden}.nut-tab-title::-webkit-scrollbar{display:none}.nav-bar{position:absolute;height:2px;bottom:0;left:0;z-index:2;background:#f0250f;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nut-tab-title-leftnav{border-right:1px solid #ededed;scroll-behavior:smooth;width:100px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden}.nut-tab-title-leftnav::-webkit-scrollbar{display:none}.nut-tab-title-leftnav .nav-bar-left{position:absolute;width:2px;right:0;top:0;z-index:2;background:#f0250f;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nut-tab-title-leftnav .nut-title-nav{border:0;border-left:1px solid #f5f7fa}.nut-tab-title-leftnav .nut-tab-active{background:#fff}.nut-tab-title-leftnav .nut-tab-active a{color:red}.nut-tab-title-rightnav{background:#fff;scroll-behavior:smooth;border-left:1px solid #ededed;width:100px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.nut-tab-title-rightnav::-webkit-scrollbar{display:none}.nut-tab-title-rightnav .nav-bar-right{position:absolute;width:2px;left:0;top:0;z-index:2;background:#f0250f;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nut-tab-link{color:#333;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:12px;text-decoration:none;line-height:1;height:100%}.nut-tab-link,.nut-tab-title-bottomnav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.nut-tab-title-bottomnav{scroll-behavior:smooth;border:1px solid #fff;border-top-color:#ededed;height:50px;line-height:49px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;overflow-x:auto;overflow-y:hidden}.nut-tab-title-bottomnav::-webkit-scrollbar{display:none}.nut-tab-title-bottomnav .nav-bar-bottom{position:absolute;height:2px;left:0;top:0;z-index:2;background:#f0250f;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nut-title-nav-list{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}.nut-title-nav-leftnav,.nut-title-nav-list{-webkit-box-flex:1;position:relative;-webkit-box-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nut-title-nav-leftnav{-webkit-flex:1;-ms-flex:1;flex:1;padding-left:5px;-ms-flex-align:center}.nut-title-nav-rightnav{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-right:5px;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.nut-title-nav-rightnav,.nut-title-nav-scroll{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative}.nut-title-nav-scroll{min-width:100px}.nut-title-nav-scroll,.nut-title-vertical-scroll{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}.nut-title-vertical-scroll{min-height:55px;position:relative;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nut-tab-icon{display:inline-block;margin-right:5px;width:20px;height:20px;background-repeat:no-repeat;background-size:100% 100%}.nut-tab-active{background:#fff;border:0}.nut-tab-active a{color:red}.nut-tab-item{height:200px;border:1px solid #fff;background:#fff;width:100%;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.nut-tab-item .hide{display:none}.nut-tab-disable{background:#e1e1e1!important}.tabbar-nav-word{font-size:12px}.nut-icon{list-style:none;display:inline-block;width:20px;height:20px;color:#2d2d2d}.nut-icon svg{vertical-align:top;width:100%;height:100%;fill:currentColor}.popup-fade-enter-active{-webkit-animation:nut-fade-in;animation:nut-fade-in}.popup-fade-leave-active{-webkit-animation:nut-fade-out;animation:nut-fade-out}.popup-slide-center-enter-active{-webkit-animation:nut-fade-in;animation:nut-fade-in}.popup-slide-center-leave-active{-webkit-animation:nut-fade-out;animation:nut-fade-out}.popup-slide-top-enter,.popup-slide-top-leave-active{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.popup-slide-right-enter,.popup-slide-right-leave-active{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.popup-slide-bottom-enter,.popup-slide-bottom-leave-active{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.popup-slide-left-enter,.popup-slide-left-leave-active{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.popup-center{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.popup-bottom{bottom:0;left:0;width:100%}.popup-bottom.round{-webkit-border-radius:20px 20px 0 0;border-radius:20px 20px 0 0}.popup-right{top:0;right:0}.popup-right.round{-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px}.popup-left{top:0;left:0}.popup-left.round{-webkit-border-radius:0 20px 20px 0;border-radius:0 20px 20px 0}.popup-top{top:0;left:0;width:100%}.popup-top.round{-webkit-border-radius:0 0 20px 20px;border-radius:0 0 20px 20px}.popup-box{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}@-webkit-keyframes nut-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes nut-fade-out{0%{opacity:1}to{opacity:0}}.nut-overflow-hidden{overflow:hidden!important}.nutui-popup__close-icon{position:absolute;z-index:1;color:#969799;font-size:18px;cursor:pointer}.nutui-popup__close-icon:active{opacity:.7}.nutui-popup__close-icon--top-left{top:16px;left:16px}.nutui-popup__close-icon--top-right{top:16px;right:16px}.nutui-popup__close-icon--bottom-left{bottom:16px;left:16px}.nutui-popup__close-icon--bottom-right{right:16px;bottom:16px}.popup-bg{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7)}@keyframes nut-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}to{opacity:0}}.nut-tabselect .nut-tab{background:none;border:none;padding:0}.nut-tabselect .nav-bar{display:none}.nut-tabselect .nut-tab-item{padding:0}.nut-tabselect .nut-tab-link{font-size:14px}.nut-tabselect .nut-tab-title{border:none;height:auto;line-height:auto;padding-left:18px}.nut-tabselect .nut-tab-title .nut-title-nav-list{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;padding:0 13px;height:30px;line-height:30px;border:1px solid #333;-webkit-border-radius:15px;border-radius:15px;margin-right:15px}.nut-tabselect .nut-tab-title .nut-title-nav-list a{color:#333}.nut-tabselect .nut-tab-title .nut-tab-active{border-color:#e2231a;background:#fcedeb}.nut-tabselect .nut-tab-title .nut-tab-active a{color:#e2231a}.nut-tabselect .nut-tab-inner .nut-tab-title-leftnav{min-width:158px}.nut-tabselect .nut-tab-inner .nut-title-nav{min-height:40px;line-height:40px;background:#f4f4f4;padding-left:18px}.nut-tabselect .nut-tab-inner .nut-tab-active{background:#fff}.nut-tabselect .nut-tab-inner .nut-tab-link{line-height:inherit;font-size:14px}.nut-tabselect .nut-tab-inner .nut-tab-item{padding:0 10px 0 17px}.nut-tabselect .nut-tab-inner .nut-tab-panel{max-height:280px;overflow-y:auto}.nut-tabselect .nut-tab-title-leftnav{border:none;max-height:280px;overflow-y:auto;overflow-x:hidden}.nut-tabselect .nut-tab-title-leftnav .nut-title-nav{border:none}.nut-tabselect .nut-tabselect-main-title{margin:12px 0 8px 18px;font-size:18px;line-height:25px;color:#000;font-weight:700}.nut-tabselect .nut-tabselect-sub-title{margin:22px 0 11px 18px;line-height:20px;color:#666;font-size:14px}.nut-tabselect .nut-tab-panel li{height:29px;line-height:29px;color:#333;border:1px solid #999;padding-left:15px;margin-bottom:10px;-webkit-border-radius:2px;border-radius:2px;cursor:pointer}.nut-tabselect .nut-tab-panel li.nut-tab-panel-list-active{color:#e2231a;border:1px solid #e2231a;background:#fcedeb}.nut-tabselect .popup-bottom.round{-webkit-border-radius:12px 12px 0 0;border-radius:12px 12px 0 0}.nut-tabselect .nut-tabselect-btn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#fff;position:absolute;bottom:0;left:0;right:0;padding:12px 18px}.nut-tabselect .nut-tabselect-btn a{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:30px;line-height:30px;background:-o-linear-gradient(315deg,#f2140c 0,#f2270c 70%,#f24d0c 100%);background:linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);-webkit-border-radius:15px;border-radius:15px;color:#fff;text-align:center}