ivue-material-plus/dist/unplugin-vue-components/styles/ivue-tabs.css

A high quality UI components Library with Vue.js

:root{--ivue-tabs-container-height:36px;--ivue-tabs-fixed-width-min-width:72px;--ivue-tabs-fixed-width-media-min-width:160px;--ivue-tabs-tab-max-width:264px;--ivue-tabs-tab-padding:8px 12px;--ivue-tabs-slider-height:4px;--ivue-tabs-icon-width:32px;--ivue-tabs-icon-position:4px}.ivue-tabs{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ivue-tabs-bar{position:relative}.ivue-tabs-wrapper{overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:1px solid var(--ivue-border-color);-webkit-transition:all .6s cubic-bezier(.86,0,.07,1);transition:all .6s cubic-bezier(.86,0,.07,1)}.ivue-tabs-container{position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--ivue-tabs-container-height);list-style-type:none;white-space:nowrap;-webkit-transition:-webkit-transform .6s cubic-bezier(.86,0,.07,1);transition:-webkit-transform .6s cubic-bezier(.86,0,.07,1);transition:transform .6s cubic-bezier(.86,0,.07,1);transition:transform .6s cubic-bezier(.86,0,.07,1),-webkit-transform .6s cubic-bezier(.86,0,.07,1)}.ivue-tabs-container--fixed-width .ivue-tabs-tab{min-width:var(--ivue-tabs-fixed-width-min-width)}@media only screen and (min-width:600px){.ivue-tabs-container--fixed-width .ivue-tabs-tab{min-width:var(--ivue-tabs-fixed-width-media-min-width)}}.ivue-tabs-container--fixed-width .ivue-tabs-tab{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:normal;text-align:center;vertical-align:middle}.ivue-tabs-container--auto-width .ivue-tabs-tab{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ivue-tabs-container--centered .ivue-tabs-slider-wrapper+.ivue-tabs-tab{margin-left:auto}.ivue-tabs-container--centered>.ivue-tabs-tab:first-child{margin-left:auto}.ivue-tabs-container--centered>.ivue-tabs-tab:last-child{margin-right:auto}.ivue-tabs-container--right>.ivue-tabs-tab:first-child{margin-left:auto}.ivue-tabs-container--right .ivue-tabs-slider-wrapper+.ivue-tabs-tab{margin-left:auto}.ivue-tabs-container--overflow .ivue-tabs-tab{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.ivue-tabs-tab{position:relative;padding:var(--ivue-tabs-tab-padding);-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;max-width:var(--ivue-tabs-tab-max-width);-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;height:100%;cursor:pointer;text-decoration:none;-webkit-transition:color .3s cubic-bezier(.4,0,.2,1);transition:color .3s cubic-bezier(.4,0,.2,1);color:var(--ivue-title-color);opacity:.7;font-size:var(--ivue-font-base-size);font-weight:500}.ivue-tabs-tab-disabled{pointer-events:none;color:var(--ivue-disabled-color)}.ivue-tabs-tab-active{opacity:1;color:var(--ivue-title-color)}.ivue-tabs-slider-wrapper{position:absolute;bottom:0;margin:0;-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1)}.ivue-tabs-slider{width:100%;height:var(--ivue-tabs-slider-height);border-radius:var(--ivue-tabs-slider-height);background:currentColor}.ivue-tabs-content{width:100%;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1)}.ivue-tabs-items{overflow:hidden;position:relative}.ivue-tabs .ivue-tabs-icon{position:absolute;top:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:var(--ivue-tabs-icon-width);color:var(--ivue-title-color);-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1)}.ivue-tabs .ivue-tabs-icon--prev{left:var(--ivue-tabs-icon-position)}.ivue-tabs .ivue-tabs-icon--next{right:var(--ivue-tabs-icon-position)}.tab-reverse-transition-enter-from{position:absolute;top:0;-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.tab-reverse-transition-leave,.tab-reverse-transition-leave-to{top:0;position:absolute;-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.tab-transition-enter-from{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.tab-transition-leave,.tab-transition-leave-active{position:absolute;top:0}.tab-transition-leave-to{position:absolute;-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fade--transition-leave-active,.fade-transition-enter-active{-webkit-transition:opacity .3s cubic-bezier(.25,.8,.5,1);transition:opacity .3s cubic-bezier(.25,.8,.5,1)}.fade-transition-enter-from,.fade-transition-leave-to{opacity:0}