vue-amazing-ui/lib/tabs/Tabs.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.tabs-wrap[data-v-53f22562]{display:flex;font-size:14px;color:#000000e0;line-height:1.57142857;list-style:none}.tabs-wrap .tabs-nav-container[data-v-53f22562]{position:relative;display:flex;flex:none;align-items:center}.tabs-wrap .tabs-nav-container[data-v-53f22562]:before{position:absolute;content:""}.tabs-wrap .tabs-nav-container .tabs-prefix[data-v-53f22562],.tabs-wrap .tabs-nav-container .tabs-suffix[data-v-53f22562]{flex:none}.tabs-wrap .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]{position:relative;display:flex;flex:auto;align-self:stretch;overflow:hidden;white-space:nowrap;transform:translate(0)}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .shadow[data-v-53f22562]{position:absolute;z-index:1;opacity:0;transition:opacity .3s;content:"";pointer-events:none}.tabs-wrap .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:before{position:absolute;z-index:1;opacity:0;transition:opacity .3s;content:"";pointer-events:none}.tabs-wrap .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:after{position:absolute;z-index:1;opacity:0;transition:opacity .3s;content:"";pointer-events:none}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list[data-v-53f22562]{position:relative;display:flex}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{position:relative;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;outline:none;cursor:pointer;transition:all .3s}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:hover{color:var(--tabs-primary-color)}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562] svg{fill:currentColor}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-line-active[data-v-53f22562]{color:var(--tabs-primary-color);text-shadow:0 0 .25px currentcolor}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-disabled[data-v-53f22562]{color:#00000040;cursor:not-allowed}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-disabled[data-v-53f22562]:hover{color:#00000040}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar[data-v-53f22562]{position:absolute;background-color:var(--tabs-primary-color);pointer-events:none;border-radius:2px;transition:width .3s,left .3s,height .3s,top .3s,background-color}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar-disabled[data-v-53f22562]{background-color:#00000040}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .card-hidden[data-v-53f22562]{visibility:hidden}.tabs-wrap .tabs-nav-container .tabs-nav-wrap .nav-transition[data-v-53f22562]{transition:all .15s}.tabs-wrap .tabs-nav-container .tabs-center[data-v-53f22562]{justify-content:center}.tabs-wrap .tabs-nav-container .before-shadow-active[data-v-53f22562]:before{opacity:1}.tabs-wrap .tabs-nav-container .after-shadow-active[data-v-53f22562]:after{opacity:1}.tabs-wrap .tabs-page-container[data-v-53f22562]{flex:auto;min-width:0;min-height:0;overflow:hidden}.tabs-wrap .tabs-page-container .tabs-content-wrap[data-v-53f22562]{position:relative;display:flex;width:100%}.tabs-wrap .tabs-page-container .tabs-content-wrap .tabs-content[data-v-53f22562]{outline:none;flex:none;width:100%}.tabs-wrap .tabs-page-container .tabs-content-animated[data-v-53f22562]{transition:margin .3s}.tabs-top[data-v-53f22562]{flex-direction:column}.tabs-top .tabs-nav-container[data-v-53f22562]{margin-bottom:16px}.tabs-top .tabs-nav-container .tabs-prefix[data-v-53f22562]{padding-right:12px}.tabs-top .tabs-nav-container .tabs-suffix[data-v-53f22562]{padding-left:12px}.tabs-top .tabs-nav-container[data-v-53f22562]:before{right:0;left:0;bottom:0;border-bottom:1px solid rgba(5,5,5,.06)}.tabs-top .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:before{top:0;bottom:0;width:32px;left:0;box-shadow:inset 10px 0 8px -8px #00000014}.tabs-top .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:after{top:0;bottom:0;width:32px;right:0;box-shadow:inset -10px 0 8px -8px #00000014}.tabs-top .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-left:32px}.tabs-top .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar[data-v-53f22562]{height:2px;bottom:0}.tabs-top.tabs-card .tabs-nav-container[data-v-53f22562],.tabs-top.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:8px 8px 0 0}.tabs-top.tabs-card.tabs-small .tabs-nav-container[data-v-53f22562],.tabs-top.tabs-card.tabs-small .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:6px 6px 0 0}.tabs-bottom[data-v-53f22562]{flex-direction:column}.tabs-bottom .tabs-nav-container[data-v-53f22562]{order:1;margin-top:16px}.tabs-bottom .tabs-nav-container .tabs-prefix[data-v-53f22562]{padding-right:12px}.tabs-bottom .tabs-nav-container .tabs-suffix[data-v-53f22562]{padding-left:12px}.tabs-bottom .tabs-nav-container[data-v-53f22562]:before{right:0;left:0;top:0;border-bottom:1px solid rgba(5,5,5,.06)}.tabs-bottom .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:before{top:0;bottom:0;width:32px;left:0;box-shadow:inset 10px 0 8px -8px #00000014}.tabs-bottom .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:after{top:0;bottom:0;width:32px;right:0;box-shadow:inset -10px 0 8px -8px #00000014}.tabs-bottom .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-left:32px}.tabs-bottom .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar[data-v-53f22562]{height:2px;top:0}.tabs-bottom .tabs-page-container[data-v-53f22562]{order:0}.tabs-bottom.tabs-card .tabs-nav-container[data-v-53f22562],.tabs-bottom.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:0 0 8px 8px}.tabs-bottom.tabs-card.tabs-small .tabs-nav-container[data-v-53f22562],.tabs-bottom.tabs-card.tabs-small .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:0 0 6px 6px}.tabs-left .tabs-nav-container[data-v-53f22562]{flex-direction:column;min-width:40px;margin-right:24px}.tabs-left .tabs-nav-container .tabs-prefix[data-v-53f22562]{padding-bottom:12px}.tabs-left .tabs-nav-container .tabs-suffix[data-v-53f22562]{padding-top:12px}.tabs-left .tabs-nav-container[data-v-53f22562]:before{top:0;bottom:0;right:0;border-left:1px solid rgba(5,5,5,.06)}.tabs-left .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]{flex-direction:column}.tabs-left .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:before{right:0;left:0;height:32px;top:0;box-shadow:inset 0 10px 8px -8px #00000014}.tabs-left .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:after{right:0;left:0;height:32px;bottom:0;box-shadow:inset 0 -10px 8px -8px #00000014}.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list[data-v-53f22562]{flex:1 0 auto;flex-direction:column}.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:8px 24px;text-align:center}.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-top:16px}.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar[data-v-53f22562]{width:2px;right:0}.tabs-left.tabs-card .tabs-nav-container[data-v-53f22562],.tabs-left.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:8px 0 0 8px}.tabs-left.tabs-card.tabs-small .tabs-nav-container[data-v-53f22562],.tabs-left.tabs-card.tabs-small .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:6px 0 0 6px}.tabs-right .tabs-nav-container[data-v-53f22562]{order:1;flex-direction:column;min-width:40px;margin-left:24px}.tabs-right .tabs-nav-container .tabs-prefix[data-v-53f22562]{padding-bottom:12px}.tabs-right .tabs-nav-container .tabs-suffix[data-v-53f22562]{padding-top:12px}.tabs-right .tabs-nav-container[data-v-53f22562]:before{top:0;bottom:0;left:0;border-left:1px solid rgba(5,5,5,.06)}.tabs-right .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]{flex-direction:column}.tabs-right .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:before{right:0;left:0;height:32px;top:0;box-shadow:inset 0 10px 8px -8px #00000014}.tabs-right .tabs-nav-container .tabs-nav-wrap[data-v-53f22562]:after{right:0;left:0;height:32px;bottom:0;box-shadow:inset 0 -10px 8px -8px #00000014}.tabs-right .tabs-nav-container .tabs-nav-wrap .tabs-nav-list[data-v-53f22562]{flex:1 0 auto;flex-direction:column}.tabs-right .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:8px 24px;text-align:center}.tabs-right .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-bar[data-v-53f22562]{width:2px;left:0}.tabs-right.tabs-card .tabs-nav-container[data-v-53f22562],.tabs-right.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:0 8px 8px 0}.tabs-right.tabs-card.tabs-small .tabs-nav-container[data-v-53f22562],.tabs-right.tabs-card.tabs-small .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{border-radius:0 6px 6px 0}.tabs-small .tabs-nav-container[data-v-53f22562]{font-size:14px}.tabs-small.tabs-top:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562],.tabs-small.tabs-bottom:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:8px 0}.tabs-middle .tabs-nav-container[data-v-53f22562]{font-size:14px}.tabs-middle.tabs-top:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562],.tabs-middle.tabs-bottom:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:12px 0}.tabs-large .tabs-nav-container[data-v-53f22562]{font-size:16px}.tabs-large.tabs-top:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562],.tabs-large.tabs-bottom:not(.tabs-card) .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:16px 0}.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:8px 16px;background:#00000005;border:1px solid rgba(5,5,5,.06);transition:all .3s cubic-bezier(.645,.045,.355,1)}.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-card-active[data-v-53f22562]{color:var(--tabs-primary-color);background:#fff;text-shadow:0 0 .25px currentcolor}.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-disabled[data-v-53f22562]{color:#00000040;cursor:not-allowed}.tabs-card .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-disabled[data-v-53f22562]:hover{color:#00000040}.tabs-card.tabs-top .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-left:2px}.tabs-card.tabs-top .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-card-active[data-v-53f22562]{border-bottom-color:#fff}.tabs-card.tabs-bottom .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-left:2px}.tabs-card.tabs-bottom .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-card-active[data-v-53f22562]{border-top-color:#fff}.tabs-card.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-top:2px}.tabs-card.tabs-left .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-card-active[data-v-53f22562]{border-right-color:#fff}.tabs-card.tabs-right .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]:not(:first-child){margin-top:2px}.tabs-card.tabs-right .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-card-active[data-v-53f22562]{border-left-color:#fff}.tabs-card.tabs-small .tabs-nav-container .tabs-nav-wrap .tabs-nav-list .tab-item[data-v-53f22562]{padding:6px 16px}