vexip-ui/css/tabs.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-tabs{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:flex;flex-direction:column;overflow:hidden}.vxp-tabs,.vxp-tabs *,.vxp-tabs ::after,.vxp-tabs ::before{box-sizing:border-box}.vxp-tabs--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-tabs--inherit{color:inherit}.vxp-tabs__header{display:flex;flex-shrink:0;min-width:0;min-height:0}.vxp-tabs__header .vxp-tab-nav{width:100%;height:100%}.vxp-tabs__main{position:relative;display:flex;flex:auto;min-width:0;min-height:0;transition:var(--vxp-transition-transform)}.vxp-tabs--top .vxp-tabs__main{padding-top:10px}.vxp-tabs--right{flex-direction:row-reverse}.vxp-tabs--right .vxp-tabs__main{padding-inline-end:10px}.vxp-tabs--bottom{flex-direction:column-reverse}.vxp-tabs--bottom .vxp-tabs__main{padding-bottom:10px}.vxp-tabs--left{flex-direction:row}.vxp-tabs--left .vxp-tabs__main{padding-inline-start:10px}.vxp-tabs__panel{position:absolute;flex-shrink:0;width:100%;opacity:0}.vxp-tabs__panel--active{position:relative;z-index:1;opacity:100%}.vxp-tabs__panel--lazy{display:none;opacity:100%}.vxp-tabs__panel--lazy.vxp-tabs__panel--active{display:block}