drip-ui/es/drip-css/tabs.css

Lightweight Mobile UI Components built on Vue

.drip-tabs{position:relative}.drip-tabs__content{font-size:.32rem}.drip-tabs__wrap{top:0;left:0;right:0;z-index:99;overflow:hidden;position:absolute}.drip-tabs__wrap--page-top{position:fixed}.drip-tabs__wrap--content-bottom{top:auto;bottom:0}.drip-tabs__wrap--scrollable .drip-tab{-webkit-box-flex:0;-webkit-flex:0 0 22%;flex:0 0 22%}.drip-tabs__wrap--scrollable .drip-tabs__nav{overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch}.drip-tabs__wrap--scrollable .drip-tabs__nav::-webkit-scrollbar{display:none}.drip-tabs__nav{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;position:relative;background-color:#fff}.drip-tabs__nav--line{height:100%;padding-bottom:.4rem;box-sizing:content-box}.drip-tabs__nav--card{margin:0 .4rem;border-radius:.05333rem;box-sizing:border-box;border:1PX solid #ffab11;height:1.33333rem}.drip-tabs__nav--card .drip-tab{color:#ffab11;border-right:1PX solid #ffab11;line-height:1.30667rem}.drip-tabs__nav--card .drip-tab:last-child{border-right:none}.drip-tabs__nav--card .drip-tab.drip-tab--active{color:#fff;background-color:#ffab11}.drip-tabs__nav--card .drip-tab--disabled{color:#c9c9c9}.drip-tabs__nav--square{box-sizing:border-box;height:.93333rem}.drip-tabs__nav--square .drip-tab{color:#ffab11;padding:0;border-right:1PX solid #ffab11;line-height:.90667rem}.drip-tabs__nav--square .drip-tab:first-child{margin-left:.53333rem}.drip-tabs__nav--square .drip-tab:first-child .drip-ellipsis{border-left:1PX solid #ffab11}.drip-tabs__nav--square .drip-tab:last-child{box-sizing:content-box;padding-right:.53333rem;border-right:none}.drip-tabs__nav--square .drip-tab:last-child .drip-ellipsis{border-right:1PX solid #ffab11}.drip-tabs__nav--square .drip-tab .drip-ellipsis{width:100%;height:.88rem;display:inline-block;border-right:1PX solid #ffab11;border-top:1PX solid #ffab11;border-bottom:1PX solid #ffab11}.drip-tabs__nav--square .drip-tab.drip-tab--active .drip-ellipsis{color:#fff;background-color:#ffab11}.drip-tabs__nav--square .drip-tab--disabled{color:#c9c9c9}.drip-tabs__line{z-index:1;left:0;bottom:.4rem;height:.08rem;position:absolute;border-radius:.04rem;background-image:-webkit-linear-gradient(233deg,#ffab11 0,#ffdc0f 73%);background-image:linear-gradient(-143deg,#ffab11 0,#ffdc0f 73%)}.drip-tabs--line{padding-top:1.33333rem}.drip-tabs--line .drip-tabs__wrap{height:1.33333rem}.drip-tabs--card{padding-top:1.33333rem}.drip-tabs--card .drip-tabs__wrap{height:1.33333rem}.drip-tab{-webkit-box-flex:1;-webkit-flex:1;flex:1;cursor:pointer;padding:0 .13333rem;font-size:.37333rem;position:relative;color:#333;line-height:1.33333rem;text-align:center;box-sizing:border-box;background-color:#fff;min-width:0}.drip-tab span{display:block}.drip-tab--active{font-weight:700}.drip-tab--disabled{color:#c9c9c9}