@dnb/eufemia/components/tabs/style/dnb-tabs.min.css

DNB Eufemia Design System UI Library

.dnb-tabs{--tablist-border-color--default:grey;--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-font-color:dimgray;--tab-title-background--hover:#a9a9a9;--tab-title-color--hover:inherit;--tab-title-border--hover:#000;--tab-title-background--disabled:inherit;--tab-title-color--disabled:#d3d3d3;--tab-title-border--active-selected:#000;--tab-title-color--active-selected:#000;--tab-title-font-weight--selected:var(--font-weight-medium)}.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{display:flex;flex:0 1 auto}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs__tabs__tablist{overflow-x:auto}@media (prefers-reduced-motion:reduce){.dnb-tabs__tabs__tablist{scroll-behavior:auto}}.dnb-tabs__tabs__tablist{overscroll-behavior:contain}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-width,.5rem)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs__tablist{-ms-overflow-style:none;scrollbar-width:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{flex:1;justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;position:absolute;width:100%;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__tabs--breakout:before{left:-100vw;width:100vw}.dnb-tabs__tabs:not(.dnb-section):before{background-color:var(--tablist-border-color--default);box-shadow:100vw 0 0 0 var(--tablist-border-color--default)}.dnb-tabs__scroll-nav-button{position:absolute;right:-2px;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;transition:opacity .6s ease-out}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-core-style .dnb-tabs__button,.dnb-tabs__button{position:relative;z-index:1}.dnb-core-style .dnb-tabs__button:has(.dnb-badge),.dnb-tabs__button:has(.dnb-badge){margin-right:1.5rem}.dnb-core-style .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;-webkit-text-decoration:none;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap}.dnb-core-style .dnb-tabs__button__title,.dnb-tabs__button__title{color:var(--tab-title-font-color);display:block;font-size:var(--tab-title-font-size);font-weight:var(--tab-title-font-weight);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button__title:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button__title:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover:not([disabled]){color:var(--tab-title-color--hover)}.dnb-core-style .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:var(--tab-title-background--hover)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:var(--tab-title-border--hover);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-core-style .dnb-tabs__button[disabled],.dnb-tabs__button[disabled]{background-color:var(--tab-title-background--disabled)}.dnb-core-style .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title,.dnb-core-style .dnb-tabs__button[disabled] .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:var(--tab-title-color--disabled)}.dnb-core-style .dnb-tabs__button span[hidden],.dnb-tabs__button span[hidden]{font-weight:var(--tab-title-font-weight--selected)}.dnb-core-style .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs__button:focus:before,html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-core-style .dnb-tabs__button:focus,.dnb-tabs__button:focus{overflow:visible}.dnb-core-style .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{background-color:var(--tab-focus-background-color,none);border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-core-style .dnb-tabs__button:not([disabled]).selected:after,.dnb-core-style .dnb-tabs__button:not([disabled]):active:after,.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:var(--tab-title-border--active-selected);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title,.dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-core-style .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs__button__title,.dnb-core-style .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:var(--tab-title-color--active-selected)}.dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title,.dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title{font-weight:var(--tab-title-font-weight--selected)}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}.dnb-tabs__button__snap{transition:padding 1s var(--easing-default);will-change:padding}.dnb-tabs__button__snap:has(.dnb-badge){margin-right:-.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}.dnb-tabs__cached--hidden *{height:0!important}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;pointer-events:none;position:absolute;right:-.5rem;top:.125rem;z-index:calc(var(--section-z-index) + 1)}html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tabs__button__title>.dnb-badge{margin-left:.25rem;position:absolute;top:auto}