vexip-ui/css/tab-nav.css

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

.vxp-tab-nav-vars{--vxp-tab-nav-d-color:var(--vxp-border-color-light-2);--vxp-tab-nav-color:var(--vxp-content-color-base);--vxp-tab-nav-color-hover:var(--vxp-color-primary-base);--vxp-tab-nav-color-active:var(--vxp-tab-nav-color-hover);--vxp-tab-nav-color-disabled:var(--vxp-content-color-disabled);--vxp-tab-nav-card-color:var(--vxp-tab-nav-color);--vxp-tab-nav-card-color-hover:var(--vxp-tab-nav-color-hover);--vxp-tab-nav-card-color-active:var(--vxp-tab-nav-color-active);--vxp-tab-nav-card-color-disabled:var(--vxp-tab-nav-color-disabled);--vxp-tab-nav-card-bg-color:var(--vxp-fill-color-background);--vxp-tab-nav-card-bg-color-active:transparent;--vxp-tab-nav-card-bg-color-disabled:var(--vxp-tab-nav-card-bg-color);--vxp-tab-nav-card-b-color:var(--vxp-tab-nav-d-color);--vxp-tab-nav-card-b-color-active:var(--vxp-tab-nav-color-active);--vxp-tab-nav-card-b-color-disabled:var(--vxp-tab-nav-card-b-color);--vxp-tab-nav-card-radius:var(--vxp-radius-base);--vxp-tab-nav-item-pad-size:4px;--vxp-tab-nav-marker-bg-color:var(--vxp-tab-nav-color-active);--vxp-tab-nav-marker-size:2px;--vxp-tab-nav-v-padding:8px;--vxp-tab-nav-h-padding:16px}.vxp-tab-nav{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;align-items:stretch;background-color:transparent;outline:0}.vxp-tab-nav,.vxp-tab-nav *,.vxp-tab-nav ::after,.vxp-tab-nav ::before{box-sizing:border-box}.vxp-tab-nav--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-tab-nav--left,.vxp-tab-nav--right{display:inline-flex;flex-direction:column}.vxp-tab-nav__scroll{display:flex}.vxp-tab-nav--left .vxp-tab-nav__scroll,.vxp-tab-nav--right .vxp-tab-nav__scroll{display:inline-flex;flex-direction:column}.vxp-tab-nav__list{position:relative;display:flex!important;flex-direction:row;padding:0;margin:0;list-style:none}.vxp-tab-nav--left .vxp-tab-nav__list,.vxp-tab-nav--right .vxp-tab-nav__list{display:inline-flex;flex-direction:column}.vxp-tab-nav__extra{display:flex;flex:0 0 auto;align-items:center;border:0 solid var(--vxp-tab-nav-d-color)}.vxp-tab-nav__extra--suffix{flex:1 0 auto;justify-content:flex-end}.vxp-tab-nav--align-center .vxp-tab-nav__extra{flex:1 0 auto}.vxp-tab-nav--align-right .vxp-tab-nav__extra{flex:1 0 auto}.vxp-tab-nav--align-right .vxp-tab-nav__extra--suffix{flex:0 0 auto}.vxp-tab-nav__prefix,.vxp-tab-nav__suffix{padding:var(--vxp-tab-nav-v-padding) var(--vxp-tab-nav-h-padding)}.vxp-tab-nav--bottom .vxp-tab-nav__prefix,.vxp-tab-nav--top .vxp-tab-nav__prefix{padding-inline-start:3px}.vxp-tab-nav--bottom .vxp-tab-nav__suffix,.vxp-tab-nav--top .vxp-tab-nav__suffix{padding-inline-end:3px}.vxp-tab-nav__item{display:flex}.vxp-tab-nav--left .vxp-tab-nav__item,.vxp-tab-nav--right .vxp-tab-nav__item{flex-direction:column}.vxp-tab-nav__content{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--vxp-tab-nav-v-padding) var(--vxp-tab-nav-h-padding);color:var(--vxp-tab-nav-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0 solid var(--vxp-tab-nav-d-color);outline:0;transition:var(--vxp-transition-color)}.vxp-tab-nav__content:focus,.vxp-tab-nav__content:hover{color:var(--vxp-tab-nav-color-hover)}.vxp-tab-nav__content--active,.vxp-tab-nav__content--active:focus,.vxp-tab-nav__content--active:hover{color:var(--vxp-tab-nav-color-active)}.vxp-tab-nav__content--disabled,.vxp-tab-nav__content--disabled:focus,.vxp-tab-nav__content--disabled:hover{color:var(--vxp-tab-nav-color-disabled);cursor:not-allowed}.vxp-tab-nav--card .vxp-tab-nav__content{color:var(--vxp-tab-nav-card-color);background-color:var(--vxp-tab-nav-card-bg-color);border:var(--vxp-border-shape) var(--vxp-tab-nav-card-b-color);transition:var(--vxp-transition-color),var(--vxp-transition-background),var(--vxp-transition-border)}.vxp-tab-nav--card .vxp-tab-nav__content:focus,.vxp-tab-nav--card .vxp-tab-nav__content:hover{color:var(--vxp-tab-nav-card-color-hover)}.vxp-tab-nav--card .vxp-tab-nav__content--active,.vxp-tab-nav--card .vxp-tab-nav__content--active:focus,.vxp-tab-nav--card .vxp-tab-nav__content--active:hover{color:var(--vxp-tab-nav-card-color-active);background-color:var(--vxp-tab-nav-card-bg-color-active);border-color:var(--vxp-tab-nav-card-b-color-active)}.vxp-tab-nav--card .vxp-tab-nav__content--disabled,.vxp-tab-nav--card .vxp-tab-nav__content--disabled:focus,.vxp-tab-nav--card .vxp-tab-nav__content--disabled:hover{color:var(--vxp-tab-nav-card-color-disabled);background-color:var(--vxp-tab-nav-card-bg-color-disabled);border-color:var(--vxp-tab-nav-card-b-color-disabled)}.vxp-tab-nav__add{position:relative;display:flex;align-items:center;justify-content:center;padding:0 12px;line-height:inherit;color:var(--vxp-tab-nav-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:0 solid var(--vxp-tab-nav-d-color);outline:0;transition:var(--vxp-transition-color)}.vxp-tab-nav__add:focus,.vxp-tab-nav__add:hover{color:var(--vxp-tab-nav-color-hover)}.vxp-tab-nav--card .vxp-tab-nav__add{color:var(--vxp-tab-nav-card-color);background-color:var(--vxp-tab-nav-card-bg-color);border:var(--vxp-border-shape) var(--vxp-tab-nav-card-b-color)}.vxp-tab-nav--card .vxp-tab-nav__add:focus,.vxp-tab-nav--card .vxp-tab-nav__add:hover{color:var(--vxp-tab-nav-card-color-hover)}.vxp-tab-nav__pad{display:none;width:var(--vxp-tab-nav-item-pad-size);pointer-events:none;border:0 solid var(--vxp-tab-nav-d-color)}.vxp-tab-nav--card .vxp-tab-nav__pad{display:block}.vxp-tab-nav--left .vxp-tab-nav__pad,.vxp-tab-nav--right .vxp-tab-nav__pad{width:auto;height:var(--vxp-tab-nav-item-pad-size)}.vxp-tab-nav__item:nth-child(1) .vxp-tab-nav__pad{display:none}.vxp-tab-nav__track{position:absolute;pointer-events:none;transition:top var(--vxp-transition-base),left var(--vxp-transition-base),width var(--vxp-transition-base),height var(--vxp-transition-base)}.vxp-tab-nav--top .vxp-tab-nav__add,.vxp-tab-nav--top .vxp-tab-nav__content,.vxp-tab-nav--top .vxp-tab-nav__extra,.vxp-tab-nav--top .vxp-tab-nav__pad{border-bottom-width:1px}.vxp-tab-nav--top.vxp-tab-nav--card .vxp-tab-nav__content--active,.vxp-tab-nav--top.vxp-tab-nav--card .vxp-tab-nav__content--active:focus,.vxp-tab-nav--top.vxp-tab-nav--card .vxp-tab-nav__content--active:hover{border-bottom-color:transparent}.vxp-tab-nav--top.vxp-tab-nav--card .vxp-tab-nav__add,.vxp-tab-nav--top.vxp-tab-nav--card .vxp-tab-nav__content{border-start-start-radius:var(--vxp-tab-nav-card-radius);border-start-end-radius:var(--vxp-tab-nav-card-radius);border-end-end-radius:0;border-end-start-radius:0}.vxp-tab-nav--top .vxp-tab-nav__track{bottom:0;width:70px}.vxp-tab-nav--right .vxp-tab-nav__add,.vxp-tab-nav--right .vxp-tab-nav__content,.vxp-tab-nav--right .vxp-tab-nav__extra,.vxp-tab-nav--right .vxp-tab-nav__pad{border-inline-start-width:1px}.vxp-tab-nav--right.vxp-tab-nav--card .vxp-tab-nav__content--active,.vxp-tab-nav--right.vxp-tab-nav--card .vxp-tab-nav__content--active:focus,.vxp-tab-nav--right.vxp-tab-nav--card .vxp-tab-nav__content--active:hover{border-inline-start-color:transparent}.vxp-tab-nav--right.vxp-tab-nav--card .vxp-tab-nav__add,.vxp-tab-nav--right.vxp-tab-nav--card .vxp-tab-nav__content{border-start-start-radius:0;border-start-end-radius:var(--vxp-tab-nav-card-radius);border-end-end-radius:var(--vxp-tab-nav-card-radius);border-end-start-radius:0}.vxp-tab-nav--right .vxp-tab-nav__track{left:0;height:70px}.vxp-tab-nav--bottom .vxp-tab-nav__add,.vxp-tab-nav--bottom .vxp-tab-nav__content,.vxp-tab-nav--bottom .vxp-tab-nav__extra,.vxp-tab-nav--bottom .vxp-tab-nav__pad{border-top-width:1px}.vxp-tab-nav--bottom.vxp-tab-nav--card .vxp-tab-nav__content--active,.vxp-tab-nav--bottom.vxp-tab-nav--card .vxp-tab-nav__content--active:focus,.vxp-tab-nav--bottom.vxp-tab-nav--card .vxp-tab-nav__content--active:hover{border-top-color:transparent}.vxp-tab-nav--bottom.vxp-tab-nav--card .vxp-tab-nav__add,.vxp-tab-nav--bottom.vxp-tab-nav--card .vxp-tab-nav__content{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:var(--vxp-tab-nav-card-radius);border-end-start-radius:var(--vxp-tab-nav-card-radius)}.vxp-tab-nav--bottom .vxp-tab-nav__track{top:0;width:70px}.vxp-tab-nav--left .vxp-tab-nav__add,.vxp-tab-nav--left .vxp-tab-nav__content,.vxp-tab-nav--left .vxp-tab-nav__extra,.vxp-tab-nav--left .vxp-tab-nav__pad{border-inline-end-width:1px}.vxp-tab-nav--left.vxp-tab-nav--card .vxp-tab-nav__content--active,.vxp-tab-nav--left.vxp-tab-nav--card .vxp-tab-nav__content--active:focus,.vxp-tab-nav--left.vxp-tab-nav--card .vxp-tab-nav__content--active:hover{border-inline-end-color:transparent}.vxp-tab-nav--left.vxp-tab-nav--card .vxp-tab-nav__add,.vxp-tab-nav--left.vxp-tab-nav--card .vxp-tab-nav__content{border-start-start-radius:var(--vxp-tab-nav-card-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-tab-nav-card-radius)}.vxp-tab-nav--left .vxp-tab-nav__track{right:0;height:70px}.vxp-tab-nav__marker{width:100%;height:var(--vxp-tab-nav-marker-size);background-color:var(--vxp-tab-nav-marker-bg-color)}.vxp-tab-nav--left .vxp-tab-nav__marker,.vxp-tab-nav--right .vxp-tab-nav__marker{width:var(--vxp-tab-nav-marker-size);height:100%}.vxp-tab-nav__icon{margin-inline-end:4px}.vxp-tab-nav__close{position:relative;inset-inline-start:8px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;margin-inline-start:-2px;color:inherit;cursor:pointer;background-color:transparent;border:0;border-radius:50%;outline:0;transition:var(--vxp-transition-background)}.vxp-tab-nav__close:focus,.vxp-tab-nav__close:hover{background-color:var(--vxp-color-primary-opacity-9)}