test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 12.6 kB
CSS
.nut-theme-dark .nut-tabpane{background:#0a0a0a}.nut-tabpane{width:100%;flex-shrink:0;display:block;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);padding:var(--nutui-tabpane-padding, 24px 20px);box-sizing:border-box;overflow:auto}.nut-tabpane.inactive{overflow:visible;height:0}.nut-tabs{display:flex;background:var(--nutui-tabs-titles-background-color, var(--nsui-gray-color-1, #ffffff));border-radius:var(--nutui-tabs-titles-border-radius, 0);padding:var(--nutui-tabs-titles-padding, 0);overflow:hidden;position:relative}.nut-tabs--menu{overflow:visible;z-index:9}.nut-tabs__scroll--screen{width:var(--nutui-tabs-scroll-screen-width, 7px);height:var(--nutui-tabs-scroll-screen-height, var(--nutui-tabs-horizontal-titles-height, 50px));position:absolute;top:0;right:var(--nutui-tabs-scroll-screen-right, 8px);transform:scaleY(.6);opacity:var(--nutui-tabs-scroll-screen-opacity, .4);background:#FFFFFF;box-shadow:var(--nutui-tabs-scroll-screen-box-shadow, -1px 0px 7px 0px rgba(0, 0, 0, .3));z-index:2}.nut-tabs__scroll--screen.scroll--screen_menu{width:50px;right:0}.nut-tabs__scroll--block{position:absolute;top:0;right:-1px;display:flex;align-items:center;justify-content:center;width:var(--nutui-tabs-block-width, 16px);height:var(--nutui-tabs-scroll-block-height, var(--nutui-tabs-scroll-screen-height, var(--nutui-tabs-horizontal-titles-height, 50px)));background-color:var(--nutui-tabs-block-background, var(--nsui-white-color-1, #FFFFFF));z-index:3}.nut-tabs__scroll--block.scroll--block_menu{width:50px}.nut-tabs__scroll--block-icon-up{transition:all .2s linear;transform:rotate(180deg)}.nut-tabs__scroll--block-icon-down{transition:all .2s linear}.nut-tabs__extra-title{position:absolute;top:var(--nutui-tabs-horizontal-titles-height, 50px);left:0;overflow:hidden;box-sizing:border-box;z-index:2;padding:16px 0 0;background-color:#fff}.nut-radiogroup .nut-radio.nut-tabs__extra-title-radio{margin-bottom:16px}.nut-tabs__divider--horizontal{top:var(--nutui-tabs-horizontal-titles-height, 50px);transform:translateY(-2px);z-index:1}.nut-tabs__divider--vertical{transform:translate(-2px);left:var(--nutui-tabs-vertical-titles-width, 100px);z-index:1}.nut-tabs__titles{box-sizing:border-box;height:var(--nutui-tabs-horizontal-titles-height, 50px);display:flex;user-select:none;flex-shrink:0;overflow:hidden;background:var(--nutui-tabs-titles-item-background-color, var(--nsui-gray-color-1, #ffffff));z-index:1}.nut-tabs__titles--shadow-horizontal{box-shadow:0 2px 16px #0000000a}.nut-tabs__titles--shadow-vertical{box-shadow:2px 0 16px #0000000a}.nut-tabs__titles::-webkit-scrollbar{display:none;width:0;background:transparent}.nut-tabs__titles--left{justify-content:flex-start;padding:var(--nutui-tabs-titles-scrollable-padding, 0 8px)}.nut-tabs__titles--right{justify-content:flex-end}.nut-tabs__titles--scrollable{overflow-x:auto;overflow-y:hidden}.nut-tabs__titles--scrollable .nut-tabs__titles-item{width:auto;padding:var(--nutui-tabs-horizontal-titles-item-pading, 0 8px 0 8px);box-sizing:border-box}.nut-tabs__titles-item{position:relative;min-width:var(--nutui-tabs-horizontal-titles-item-min-width, 50px);display:flex;flex:1;align-items:center;justify-content:center;margin:0 var(--nutui-tabs-title-gap, 0);font-size:var(--nutui-tabs-titles-item-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-tabs-titles-item-color, var(--nsui-gray-color-7, #8C8C8C));line-height:var(--nutui-tabs-titles-item-line-height, 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-tabs__titles-item--left,.nut-tabs__titles-item--right{flex:none}.nut-tabs--horizontal.nut-tabs--normal .nut-tabs__titles-item__text{transform:translateY(-2px)}.nut-tabs__titles-item__text{text-align:center}.nut-tabs__titles-item__smile,.nut-tabs__titles-item__line{position:absolute;transition:width .3s ease;width:0;height:0;margin-top:1px;content:" ";bottom:var(--nutui-tabs-horizontal-line-bottom, 28%);left:50%;transform:translate(-50%);border-radius:var(--nutui-tabs-horizontal-line-border-radius, 2px);opacity:var(--nutui-tabs-horizontal-tab-line-opacity, 1);overflow:hidden}.nut-tabs__titles-item__smile{bottom:-20%}.nut-tabs__titles-item__smile .nut-icon{position:absolute;font-size:12px;width:100%;height:100%;color:var(--nutui-tabs-tab-smile-color, var(--nutui-brand-color, #2C68FF))}.nut-tabs__titles-item--active{color:var(--nutui-tabs-titles-item-active-color, var(--nsui-gray-color-9, #262626));font-weight:var(--nutui-tabs-titles-item-active-font-weight, 500)}.nut-tabs__titles-item--active .nut-tabs__titles-item__smile{overflow:unset;bottom:-2%;width:40px;height:20px}.nut-tabs__titles-item--active .nut-tabs__titles-item__line{overflow:unset;content:" ";width:var(--nutui-tabs-horizontal-titles-item-active-line-width, 14px);height:var(--nutui-tabs-horizontal-titles-item-active-line-height, 3px);background:var(--nutui-tabs-horizontal-tab-line-color, var(--nutui-brand-color, #2C68FF))}.nut-tabs__titles-item--active .nut-tabs__titles-item__line.nut-tabs__titles-item__line-full{position:absolute;height:var(--nutui-tabs-horizontal-titles-item-active-line-full-height, 2px);bottom:0}.nut-tabs__titles-item--disabled{color:var(--nutui-gray-3, #e5e5e5)}.nut-tabs--horizontal{flex-direction:column}.nut-tabs--vertical{flex-direction:row;width:100%}.nut-tabs--vertical .nut-tabs__titles{box-sizing:border-box;flex-direction:column;height:100%;padding:0;width:var(--nutui-tabs-vertical-titles-width, 100px);flex-shrink:0}.nut-tabs--vertical .nut-tabs__titles--scrollable{overflow-x:hidden;overflow-y:auto}.nut-tabs--vertical .nut-tabs__titles-item{height:var(--nutui-tabs-vertical-titles-item-height, 40px);flex:none}.nut-tabs--vertical .nut-tabs__titles-item--next{border-top-right-radius:var(--nutui-tabs-titles-item-next-border-top-right-radius, 0px)}.nut-tabs--vertical .nut-tabs__titles-item--last{border-bottom-right-radius:var(--nutui-tabs-titles-item-last-border-bottom-right-radius, 0px)}.nut-tabs--vertical .nut-tabs__titles-item__smile{width:0;height:0;overflow:hidden;transition:width .3s ease}.nut-tabs--vertical .nut-tabs__titles-item__line{width:0;height:0;transform:translateY(-50%);transition:height .3s ease;bottom:15%}.nut-tabs--vertical .nut-tabs__titles-item--active{background-color:var(--nutui-tabs-horizontal-titles-item-active-background-color, var(--nsui-gray-color-1, #ffffff))}.nut-tabs--vertical .nut-tabs__titles-item--active .nut-tabs__titles-item__line{left:10px;width:var(--nutui-tabs-vertical-titles-item-active-line-width, 3px);height:var(--nutui-tabs-vertical-titles-item-active-line-height, 14px);background:var(--nutui-tabs-vertical-tab-line-color, var(--nutui-brand-color, #2C68FF))}.nut-tabs--vertical .nut-tabs__titles-item--active .nut-tabs__titles-item__smile{right:-5px;bottom:2%;left:auto;width:40px;height:20px;transform:rotate(320deg)}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles{flex-direction:row;overflow-x:auto;overflow-y:hidden;height:var(--nutui-tabs-horizontal-titles-height, 50px)}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__content{flex-direction:row}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles-item--active{background-color:initial}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles-item--active .nut-tabs__titles-item__line{left:50%;transform:translate(-50%)}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles-item--active .nut-tabs__titles-item__smile{left:50%;right:auto;bottom:-3px;transform:translate(-50%) rotate(0)}.nut-tabs--vertical .nut-tabs__content{flex-direction:column;height:100%}.nut-tabs--vertical .nut-tabs__content__wrap{flex:1}.nut-tabs--vertical .nut-tabs__content .nut-tabpane{height:100%}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles{display:flex;flex-direction:row;padding:0;width:100%}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles .nut-tabs__titles-item{display:flex;align-items:center;justify-content:center;flex:1 0 auto}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles .nut-tabs__titles-item--active{color:var(--nutui-tabs-titles-item-active-color, var(--nsui-gray-color-9, #262626));font-weight:var(--nutui-tabs-titles-item-active-font-weight, 500)}.nut-tabs--vertical .nut-tabs--horizontal .nut-tabs__titles .nut-tabs__titles-item--active .nut-tabs__titles-item__line{content:" ";width:var(--nutui-tabs-horizontal-titles-item-active-line-width, 14px);height:var(--nutui-tabs-horizontal-titles-item-active-line-height, 3px);background:var(--nutui-tabs-horizontal-tab-line-color, var(--nutui-brand-color, #2C68FF))}.nut-tabs__content{display:flex;box-sizing:border-box}.nut-tabs__content__wrap{overflow:hidden}.nut-tabs--tag{display:inline-block;border-radius:var(--nutui-tabs-tag-border-radius, 32px);padding:var(--nutui-tabs-titles-tag-padding, 0 0 0 0)}.nut-tabs--tag .nut-tabs__titles{height:var(--nutui-tabs-titles-tag-height, 32px);position:relative}.nut-tabs--tag .nut-tabs__titles .nut-tabs__titles-tag-item{padding:var(--nutui-tabs__titles-tag-item-padding, 0 16px 0 16px);flex:auto;z-index:1;transition:color .3s ease}.nut-tabs--tag .nut-tabs__titles .nut-tabs__titles-tag-item.nut-tabs__titles-tag-item--active{color:var(--nutui-tabs__titles-tag-item--active-color, var(--nsui-gray-color-1, #ffffff))}.nut-tabs--tag .nut-tabs__titles .nut-tabs__titles-item--active-line{position:absolute;left:0;transition:left .3s ease,width .3s ease;height:var(--nutui-tabs__titles-item--active-line-height, var(--nutui-tabs-titles-tag-height, 32px));border-radius:var(--nutui-tabs__titles-item--active-line-border-radius, var(--nutui-tabs-titles-tag-height, 32px));background:var(--nutui-tabs__titles-item--active-line-background, var(--nutui-brand-color, #2C68FF));width:var(--nutui-tabs__titles-item--active-line-width, 0)}.nut-tabs--slider{padding:var(--nutui-tabs-titles-slider-padding, 0 0 0 0)}.nut-tabs--slider .nut-tabs__titles{height:var(--nutui-tabs-titles-slider-height, 28px);background:var(--nutui-tabs-titles-slider-background, #f2f2f2);position:relative}.nut-tabs--slider .nut-tabs__titles .nut-tabs__titles-slider-item{color:var(--nutui-tabs__titles-slider-item--active-color, #757575);z-index:1;transition:color .3s ease}.nut-tabs--slider .nut-tabs__titles .nut-tabs__titles-slider-item.nut-tabs__titles-slider-item--active{color:var(--nutui-tabs__titles-slider-item--active-color, #212121)}.nut-tabs--slider .nut-tabs__titles .nut-tabs__titles-item--active-line{position:absolute;left:0;transition:left .3s ease,width .3s ease;height:var(--nutui-tabs__titles-item--active-slider-line-height, calc(var(--nutui-tabs-titles-slider-height, 28px) - var(--nutui-tabs__titles-item--active-slider-line-transy, 2px) - var(--nutui-tabs__titles-item--active-slider-line-transy, 2px)));border-radius:var(--nutui-tabs__titles-item--active-slider-line-border-radius, 2px);background:var(--nutui-tabs__titles-item--active-slider-line-background, var(--nsui-gray-color-1, #ffffff));transform:translate(var(--nutui-tabs__titles-item--active-slider-line-transx, 2px),var(--nutui-tabs__titles-item--active-slider-line-transy, 2px));width:var(--nutui-tabs__titles-item--active-slider-line-width, calc(var(--nutui-tabs__titles-item--active-line-width, 0) - var(--nutui-tabs__titles-item--active-slider-line-transx, 2px) - var(--nutui-tabs__titles-item--active-slider-line-transx, 2px)))}.nut-tabs--slider-middle .nut-tabs__titles{width:var(--nutui-tabs--slider-middle-width, 160px);margin:0 auto}.nut-tabs--slider-middle .nut-tabs__titles .nut-tabs__titles-slider-item{flex:auto}.nut-tabs--card{padding:var(--nutui-tabs-titles-card-padding, 16px 16px 0 16px)}.nut-tabs--card .nut-tabs__titles{height:var(--nutui-tabs-titles-card-height, 38px);box-sizing:content-box;border:var(--nutui-tabs-titles-card-border, 1px solid var(--nutui-brand-color, #2C68FF))}.nut-tabs--card .nut-tabs__titles .nut-tabs__titles-card-item{color:var(--nutui-tabs__titles-card-item--active-color, var(--nutui-brand-color, #2C68FF));z-index:1}.nut-tabs--card .nut-tabs__titles .nut-tabs__titles-card-item+.nut-tabs__titles-card-item{border-left:var(--nutui-tabs-titles-card-border, 1px solid var(--nutui-brand-color, #2C68FF))}.nut-tabs--card .nut-tabs__titles .nut-tabs__titles-card-item.nut-tabs__titles-card-item--active{background-color:var(--nutui-tabs__titles-card-item--active-background, var(--nutui-brand-color, #2C68FF));color:var(--nutui-tabs__titles-card-item--active-color, var(--nsui-gray-color-1, #ffffff))}.nut-tabs--radio .nut-tabs__titles{padding:var(--nutui-tabs-titles-radio-padding, 0 16px)}.nut-tabs--radio-group{flex-wrap:nowrap}