@antmjs/vantui/es/tabs/index.css

一套适用于Taro3及React的vantui组件库

:root,page{--primary-color:#07c160}.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-box-flex:0;-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__wrap--scrollable .van-tab--complete{-webkit-box-flex:1!important;-webkit-flex:1 0 auto!important;flex:1 0 auto!important;padding:0 24px}.van-tabs__wrap--scrollable .van-tabs__nav--complete{padding-right:16px;padding-left:16px}.van-tabs__scroll{width:100%;background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:content-box;height:calc(100% + 30px)}.van-tabs__scroll--card{box-sizing:border-box;margin:0 32px;margin:0 var(--padding-md,32px);border:2px solid var(--primary-color);border:var(--border-width-base,2px) solid var(--tabs-default-color,var(--primary-color));width:calc(100% - calc(32px * 2));width:calc(100% - calc(var(--padding-md,32px) * 2));border-radius:4px;border-radius:var(--border-radius-sm,4px)}.van-tabs__scroll::-webkit-scrollbar{display:none}.van-tabs__nav{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{margin:-1px;box-sizing:border-box;height:60px;height:var(--tabs-card-height,60px);border:2px solid var(--primary-color);border:var(--border-width-base,2px) solid var(--tabs-default-color,var(--primary-color));border-radius:4px;border-radius:var(--border-radius-sm,4px)}.van-tabs__nav--card .van-tab{color:var(--primary-color);color:var(--tabs-default-color,var(--primary-color));line-height:calc(60px - 2 * 2px);line-height:calc(var(--tabs-card-height, 60px) - 2 * var(--border-width-base, 2px));border-right:2px solid var(--primary-color);border-right:var(--border-width-base,2px) solid var(--tabs-default-color,var(--primary-color))}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:var(--primary-color);background-color:var(--tabs-default-color,var(--primary-color))}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:6px;height:var(--tabs-bottom-bar-height,6px);border-radius:6px;border-radius:var(--tabs-bottom-bar-height,6px);background-color:var(--primary-color);background-color:var(--tabs-bottom-bar-color,var(--primary-color))}.van-tabs__track{position:relative;width:100%;height:100%}.van-tabs__track--animated{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-transition-property:left;transition-property:left}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:88px;height:var(--tabs-line-height,88px)}.van-tabs--card .van-tabs__wrap{height:60px;height:var(--tabs-card-height,60px)}.van-tab{-webkit-box-flex:1;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 10px;text-align:center;cursor:pointer;position:relative;color:#646566;color:var(--tab-text-color,#646566);font-size:28px;font-size:var(--tab-font-size, 28px);line-height:88px;line-height:var(--tabs-line-height, 88px)}.van-tab--active-line{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:6px;height:var(--tabs-bottom-bar-height,6px);background-color:#07c160;background-color:var(--primary-color,#07c160);border-radius:4px}.van-tab--active-line-show{-webkit-animation:tab-line-show .3s;animation:tab-line-show .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.van-tab--active-line-hidden{-webkit-animation:tab-line-hidden .3s;animation:tab-line-hidden .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes tab-line-show{from{width:0%}to{width:50%;width:var(--tabs-bottom-bar-width,50%)}}@keyframes tab-line-show{from{width:0%}to{width:50%;width:var(--tabs-bottom-bar-width,50%)}}@-webkit-keyframes tab-line-hidden{from{width:50%;width:var(--tabs-bottom-bar-width,50%)}to{width:0%}}@keyframes tab-line-hidden{from{width:50%;width:var(--tabs-bottom-bar-width,50%)}to{width:0%}}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab__title__info{position:relative!important;top:-2px!important;padding-top:3px;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}.van-tab__title .van-info--dot{border-radius:100%;width:16px;width:var(--info-dot-size,16px);height:16px;height:var(--info-dot-size,16px)}