vue-devui/tabs/style.css

DevUI components based on Vite and Vue3

:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 12px);background:transparent;list-style:none}.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li{cursor:pointer;border:2px solid transparent}.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-aide-text, #71757f)}.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active{outline:none}.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs .devui-tabs__new-tab,.devui-tabs__nav--pills .devui-tabs__new-tab{padding:2px 0 0}.devui-tabs__nav--options{background:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-dividing-line, #f2f2f3);border-radius:var(--devui-border-radius, 2px);padding:2px;width:fit-content}.devui-tabs__nav--options>li{cursor:pointer;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li span>a{border:none;color:var(--devui-aide-text, #71757f);line-height:26px;padding:0 16px}.devui-tabs__nav--options>li span>a:hover,.devui-tabs__nav--options>li span>a:focus,.devui-tabs__nav--options>li span>a:active{outline:none}.devui-tabs__nav--options>li.active{background:var(--devui-global-bg, #f6f6f8)}.devui-tabs__nav--options>li.active span>a{color:var(--devui-brand, #5e7ce0);padding:0 16px}.devui-tabs__nav--options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--options>li.disabled a{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-tabs__nav--options>li.active span>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled) span>a:hover{color:var(--devui-brand, #5e7ce0);background:transparent}.devui-tabs__nav--options .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--options .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f2f3);width:fit-content;display:flex;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;position:relative;z-index:1}.devui-tabs__nav--slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--slider>li a{cursor:pointer;border:none;color:var(--devui-aide-text, #71757f);line-height:28px;padding:0 16px}.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active{outline:none}.devui-tabs__nav--slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--slider>li.disabled a{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-tabs__nav--slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--slider .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-aide-text, #71757f);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active{outline:none}.devui-tabs__nav--wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--wrapped>li.disabled a{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-tabs__nav--wrapped>li.active{border:1px solid var(--devui-dividing-line, #f2f2f3);background:var(--devui-global-bg, #f6f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;margin:-1px;border-bottom-color:transparent}.devui-tabs__nav--wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs{border-bottom:1px var(--devui-line, #d7d8da) solid}.devui-tabs__nav--tabs li{margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs li:first-child{margin-left:0}.devui-tabs__nav--pills>li{margin-left:32px}.devui-tabs__nav--pills>li:first-child{margin-left:0}.devui-tabs__nav{display:flex;align-items:center;list-style:none;padding-left:0;overflow-y:hidden;overflow-x:scroll;user-select:none;scrollbar-width:none;-ms-overflow-style:none}.devui-tabs__nav::-webkit-scrollbar{display:none}.devui-tabs__nav li a{text-decoration:none}.devui-tabs__nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-tabs__nav--right,.devui-tabs__nav--left{margin:0}.devui-tabs__nav--right .devui-tabs__nav-slider-animation,.devui-tabs__nav--left .devui-tabs__nav-slider-animation{transition:top var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--right .devui-tabs__new-tab,.devui-tabs__nav--left .devui-tabs__new-tab{text-align:center}.devui-tabs__nav--right{display:block;float:right;border-bottom:none;margin-left:10px}.devui-tabs__nav--right>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--right>li:after{display:none}.devui-tabs__nav--right>li:before{content:" ";position:absolute;top:0;left:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--right>li.active:before{height:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--left{display:block;float:left;border-bottom:none;margin-right:10px}.devui-tabs__nav--left>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--left>li:after{content:" ";position:absolute;top:0;right:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--left>li.active:after{height:100%;width:2px;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav-content{display:flex;align-items:center}.devui-tabs__nav--options{padding-left:2px}.devui-tabs__nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12));top:1px;height:30px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__new-tab .devui-icon__container:hover,.devui-tabs__close-btn .devui-icon__container:hover{color:var(--devui-text, #252b3a)}.devui-tabs__new-tab .devui-icon__container>i,.devui-tabs__close-btn .devui-icon__container>i{transition:none}.devui-tabs__new-tab .devui-icon__container{color:var(--devui-aide-text, #71757f)}.devui-tabs__close-btn{margin-left:12px}.devui-tabs__close-btn .devui-icon__container{color:var(--devui-form-control-line, #d7d8da)}.devui-tabs--right .devui-tabs__nav--options,.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--options,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--options>li:after,.devui-tabs--right .devui-tabs__nav--wrapped>li:after,.devui-tabs--left .devui-tabs__nav--options>li:after,.devui-tabs--left .devui-tabs__nav--wrapped>li:after{display:none}.devui-tabs--right .devui-tabs__nav--options>li:before,.devui-tabs--right .devui-tabs__nav--wrapped>li:before,.devui-tabs--left .devui-tabs__nav--options>li:before,.devui-tabs--left .devui-tabs__nav--wrapped>li:before{display:none}.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:none}.devui-tabs--right .devui-tabs__nav--wrapped>li,.devui-tabs--left .devui-tabs__nav--wrapped>li{padding:8px 16px}.devui-tabs--right .devui-tabs__nav--slider>li:after,.devui-tabs--left .devui-tabs__nav--slider>li:after{display:none}.devui-tabs--right .devui-tabs__nav--slider>li:before,.devui-tabs--left .devui-tabs__nav--slider>li:before{display:none}.devui-tabs--right .devui-tabs__nav--slider .devui-tabs__nav-slider-animation,.devui-tabs--left .devui-tabs__nav--slider .devui-tabs__nav-slider-animation{left:1px}.devui-tabs--right .devui-tabs__nav--wrapped{border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--wrapped>li a{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs--right .devui-tabs__nav--wrapped>li.active{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-left-color:transparent}.devui-tabs--right .devui-tabs__nav--tabs{border-left:1px solid var(--devui-line, #d7d8da)}.devui-tabs--left .devui-tabs__nav--wrapped{border-right:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--left .devui-tabs__nav--wrapped>li a{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs--left .devui-tabs__nav--wrapped>li.active{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-right-color:transparent}.devui-tabs--left .devui-tabs__nav--tabs{border-right:1px solid var(--devui-line, #d7d8da)}.devui-tab__content{margin-top:10px;overflow:hidden;padding:10px 0}