vue3-tabor/dist/assets/index.css

Vue 3 routing tabs with keepAlive support, browser-like tab navigation for Vue applications

:root{--primary-color: #5a67d8;--tab-label-min-width: 30px;--tab-label-max-width: 100px;--tab-min-width: 83px;--tab-height: 40px;--tab-padding: 0 12px;--tabs-gap: 6px;--page-padding: 10px;--font-size-base: 14px;--tab-background-color: rgba(248, 249, 250, .5);--tab-active-background-color: #fff;--tab-active-color: var(--primary-color);--tab-text-color: #64748b;--tab-border-color: #e2e8f0;--tab-border-radius: 4px;--tab-box-shadow: 0 1px 2px rgba(0, 0, 0, .03);--tab-active-box-shadow: 0 1px 3px rgba(0, 0, 0, .05)}.tabor-pages{padding:var(--page-padding)}.tabor-tabs{box-sizing:border-box;display:flex;align-items:center;height:var(--tab-height);border-bottom:1px solid var(--tab-border-color);font-size:var(--font-size-base);padding-left:4px;background:var(--tab-active-background-color);position:relative}.tabor-tabs--line{border-color:var(--tab-border-color);padding:0 12px;border-bottom:1px solid var(--tab-border-color)}.tabor-tabs--card{gap:var(--tabs-gap);padding-bottom:0}.tabor-tab{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:inherit;padding:var(--tab-padding);cursor:pointer;border-style:solid;border-color:var(--tab-border-color);border-width:0;margin-bottom:-1px;background:var(--tab-background-color);transition:all .25s ease;font-weight:400;position:relative;min-width:var(--tab-min-width)}.tabor-tab.tabor-tab-active{background:var(--tab-active-background-color);color:var(--primary-color);font-weight:500}.tabor-tab .remove-icon{opacity:0;transition:opacity .2s ease;margin-left:5px;font-size:12px}.tabor-tab:hover .remove-icon{opacity:.7}.tabor-tab.rt-tab-active .remove-icon{opacity:.9}.tabor-tab:hover .remove-icon:hover{opacity:1}.tabor-tab .tabor-tab--prefix{margin-right:6px;display:flex;align-items:center}.tabor-tab--line{border-width:0;border-radius:0;margin:0 16px 0 0;background:transparent;position:relative;padding-bottom:0}.tabor-tab--line:after{content:"";position:absolute;bottom:0;left:50%;right:50%;height:2px;background-color:var(--primary-color);transition:all .25s ease;opacity:0}.tabor-tab--line.tabor-tab-active{background:transparent;border-bottom:none}.tabor-tab--line.tabor-tab-active:after{left:0;right:0;opacity:1}.tabor-tab--line:hover:not(.rt-tab-active){color:var(--primary-color);background:transparent}.tabor-tab--line:hover:not(.rt-tab-active):after{left:0;right:0;opacity:.5}.tabor-tab--card{border-width:1px;border-bottom-width:0;border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;box-shadow:var(--tab-box-shadow);overflow:hidden}.tabor-tab--card.tabor-tab-active{border-bottom-color:var(--tab-active-background-color);box-shadow:var(--tab-active-box-shadow)}.tabor-tab--card.tabor-tab-active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--primary-color)}.tabor-tab--card:hover:not(.tabor-tab-active){background:#f0f2f5cc}.tabor-dropdown-menu[data-v-54f47c12]{position:fixed;background-color:var(--tab-active-background-color, white);border:1px solid var(--tab-border-color, #e2e8f0);border-radius:4px;box-shadow:0 2px 10px #0000001a;z-index:9999;min-width:100px;padding:4px 0;font-size:13px;overflow:visible;animation:fadeIn-54f47c12 .15s ease-out}.tabor-dropdown-menu ul[data-v-54f47c12]{list-style:none;margin:0;padding:0}.tabor-dropdown-menu li[data-v-54f47c12]{padding:6px 12px;cursor:pointer;display:flex;align-items:center;color:var(--tab-text-color, #64748b);transition:all .15s ease;min-height:20px;line-height:1.4;border-radius:3px;margin:0 3px}.tabor-dropdown-menu li.tabor-dropdown-item-disabled[data-v-54f47c12]{opacity:.5;cursor:not-allowed;pointer-events:none}.tabor-dropdown-menu li[data-v-54f47c12]:not(.tabor-dropdown-item-disabled):hover{background-color:#5a67d814;color:var(--primary-color)}.tabor-dropdown-icon[data-v-54f47c12]{margin-right:6px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;width:12px}.tabor-dropdown-divider[data-v-54f47c12]{height:1px;margin:3px 6px;overflow:hidden;background-color:var(--tab-border-color, #e2e8f0);padding:0!important;pointer-events:none;min-height:auto!important}.tabor-dropdown-divider[data-v-54f47c12]:hover{background-color:var(--tab-border-color, #e2e8f0)!important}@keyframes fadeIn-54f47c12{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tabor-remove-icon{display:flex;align-items:center;margin-left:.5em}.tabor-tab-label{display:flex;align-items:center;justify-content:center;min-width:var(--tab-label-min-width);max-width:var(--tab-label-max-width)}.tabor-tab-label span{align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}