@beeapi/nutui
Version:
一套轻量级移动端Vue组件库
5 lines • 5.84 kB
CSS
/*!
* @beeapi/nutui v2.2.10 - tab.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}.tabbar-nav-word{font-size:12px}