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

DNB Eufemia Design System UI Library

/*
 * Tabs component
 *
 */
/*
 * Utilities
 */
/*
 * Tabs component
 *
 */
/*
* Button mixins
*
*/
.dnb-tabs {
  --tablist-border-color--default: var(
    --token-color-stroke-neutral-subtle
  );
  --tab-title-font-color: var(--token-color-text-neutral-alternative);
  --tab-title-font-weight: var(--font-weight-regular);
  --tab-title-font-size: var(--font-size-basis);
  --tab-title-background--hover: var(
    --token-color-background-action-hover-subtle
  );
  --tab-title-color--hover: var(--token-color-text-action-hover);
  --tab-title-border--hover: var(--token-color-stroke-action-hover);
  --tab-title-background--disabled: inherit;
  --tab-title-color--disabled: var(--token-color-text-action-disabled);
  --tab-title-border--active: var(--token-color-stroke-action-pressed);
  --tab-title-color--active: var(--token-color-text-action-pressed);
  --tab-title-border--selected: var(--token-color-stroke-selected);
  --tab-title-color--selected: var(--token-color-text-selected);
  --tab-title-font-weight--selected: var(--font-weight-medium);
}
.dnb-tabs__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}
.dnb-tabs__tabs__tablist {
  display: flex;
  flex: 0 1 auto;
}
.dnb-tabs__tabs__tablist:focus-visible {
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  border-radius: var(--token-radius-md);
}
.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 {
  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, 0.5rem);
  }
  .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
    height: var(--scrollbar-track-width, 0.5rem);
  }
  .dnb-tabs__tabs__tablist::-webkit-scrollbar {
    border-radius: var(--scrollbar-thumb-width, 0.5rem);
    background-color: var(--scrollbar-track-color, #eee);
  }
  .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, 0.5rem);
  }
}
.dnb-tabs__tabs__tablist {
  /* Hide scrollbar for Chrome, Safari */
  /* stylelint-disable-next-line */
}
.dnb-tabs__tabs__tablist::-webkit-scrollbar {
  display: none;
}
.dnb-tabs__tabs__tablist {
  scrollbar-width: none; /* Firefox */
}
.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 {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.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;
  z-index: 2;
  right: -2px;
}
.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 600ms ease-out;
}
.dnb-tabs__scroll-nav-button--visible {
  display: flex;
  pointer-events: initial;
  opacity: 1;
}
.dnb-tabs__scroll-nav-button--hide {
  pointer-events: none;
  opacity: 0 !important;
}
.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-visible {
  border-radius: 0;
}
.dnb-tabs__button, .dnb-core-style .dnb-tabs__button {
  position: relative;
  z-index: 1;
}
.dnb-tabs__button:has(.dnb-badge), .dnb-core-style .dnb-tabs__button:has(.dnb-badge) {
  margin-right: 1.5rem;
}
.dnb-tabs__button, .dnb-core-style .dnb-tabs__button {
  user-select: none;
  /* stylelint-disable-next-line */
  -webkit-user-select: none;
  margin: 0;
  padding: 0 0.125rem; /* 1/16*4 */
  background-color: transparent;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  outline: none;
  border: none;
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  transition: margin 400ms ease-out;
}
.dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button__title {
  font-weight: var(--tab-title-font-weight);
  font-size: var(--tab-title-font-size);
  text-align: center;
  display: block;
  color: var(--tab-title-font-color);
  padding: 0.5rem 0 0.25rem;
}
.dnb-tabs__button__title .dnb-icon, .dnb-core-style .dnb-tabs__button__title .dnb-icon {
  font-size: var(--font-size-small);
  transform: translateY(-0.125rem);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled], html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]) {
  background-color: var(--tab-title-background--hover);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]) .dnb-tabs__button__title, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]) .dnb-tabs__button__title {
  color: var(--tab-title-color--hover);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled])::after, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled])::after {
  height: 2px;
  border-radius: var(--token-radius-sm);
  background-color: var(--tab-title-border--hover);
}
.dnb-tabs__button .dnb-dummy, .dnb-core-style .dnb-tabs__button .dnb-dummy {
  display: flex;
  flex-direction: column;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.dnb-tabs__button .dnb-dummy, .dnb-core-style .dnb-tabs__button .dnb-dummy {
  margin-top: 0.25rem;
}
.dnb-tabs__button::after, .dnb-core-style .dnb-tabs__button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.dnb-tabs__button[disabled], .dnb-core-style .dnb-tabs__button[disabled] {
  background-color: var(--tab-title-background--disabled);
}
.dnb-tabs__button[disabled] .dnb-tabs__button__title, .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button[disabled] .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title {
  color: var(--tab-title-color--disabled);
}
.dnb-tabs__button span[hidden], .dnb-core-style .dnb-tabs__button span[hidden] {
  font-weight: var(--tab-title-font-weight--selected);
}
.dnb-tabs__button, .dnb-core-style .dnb-tabs__button {
  /* stylelint-disable no-descending-specificity */
}
.dnb-tabs__button:not([disabled]):active, .dnb-core-style .dnb-tabs__button:not([disabled]):active {
  background-color: var(--token-color-background-action-pressed-subtle);
}
.dnb-tabs__button:not([disabled]):active::after, .dnb-core-style .dnb-tabs__button:not([disabled]):active::after {
  height: 2px;
  border-radius: var(--token-radius-sm);
  background-color: var(--tab-title-border--active);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):active, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]):active {
  background-color: var(--token-color-background-action-pressed-subtle);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):active::after, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:hover:not([disabled]):active::after {
  background-color: var(--tab-title-border--active);
}
.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title, .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-core-style .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs__button__title {
  color: var(--tab-title-color--active);
}
.dnb-tabs__button:not([disabled]).selected::after, .dnb-core-style .dnb-tabs__button:not([disabled]).selected::after {
  height: 2px;
  border-radius: var(--token-radius-sm);
  background-color: var(--tab-title-border--selected);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:not([disabled]).selected:hover[disabled], html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:not([disabled]).selected:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]) {
  background-color: var(--token-color-background-action-hover-subtle);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:not([disabled]).selected:hover:not([disabled])::after, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:not([disabled]).selected:hover:not([disabled])::after {
  background-color: var(--token-color-stroke-action-hover);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]):active, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]):active {
  background-color: var(--token-color-background-action-pressed-subtle);
}
html:not([data-whatintent=touch]) .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]):active::after, html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs__button:not([disabled]).selected:hover:not([disabled]):active::after {
  background-color: var(--token-color-stroke-action-pressed);
}
.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title, .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]).selected .dnb-core-style .dnb-tabs__button__title {
  color: var(--tab-title-color--selected);
  font-weight: var(--tab-title-font-weight--selected);
}
.dnb-tabs__button:not([disabled]).selected:active .dnb-tabs__button__title, .dnb-tabs__button:not([disabled]).selected:active .dnb-core-style .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]).selected:active .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]).selected:active .dnb-core-style .dnb-tabs__button__title {
  color: var(--token-color-text-action-pressed);
}
.dnb-tabs__button:not(:hover):focus-visible::before, .dnb-core-style .dnb-tabs__button:not(:hover):focus-visible::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -0.5rem;
  bottom: 0;
  right: -0.5rem;
  height: inherit;
  border-radius: inherit;
  outline: none;
}
html[data-whatinput=keyboard] .dnb-tabs__button:not(:hover):focus-visible::before, html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs__button:not(:hover):focus-visible::before {
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-tabs__button:not(:hover):focus-visible, .dnb-core-style .dnb-tabs__button:not(:hover):focus-visible {
  overflow: visible;
}
.dnb-tabs__button:not(:hover):focus-visible::before, .dnb-core-style .dnb-tabs__button:not(:hover):focus-visible::before {
  top: 0.5rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: 0.5rem;
  z-index: -1;
  border-radius: var(--token-radius-xl);
  background-color: var(--token-color-background-action-focus-subtle);
}
.dnb-tabs__button:not([disabled]):focus-visible .dnb-tabs__button__title, .dnb-tabs__button:not([disabled]).selected:focus-visible .dnb-tabs__button__title, .dnb-tabs__button:not([disabled]):focus-visible .dnb-core-style .dnb-tabs__button__title, .dnb-tabs__button:not([disabled]).selected:focus-visible .dnb-core-style .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]):focus-visible .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]).selected:focus-visible .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]):focus-visible .dnb-core-style .dnb-tabs__button__title, .dnb-core-style .dnb-tabs__button:not([disabled]).selected:focus-visible .dnb-core-style .dnb-tabs__button__title {
  color: var(--token-color-text-action-focus);
}
.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: 0.5rem;
}
.dnb-tabs__button__snap {
  will-change: padding;
  transition: padding 1s var(--easing-default);
}
.dnb-tabs__button__snap:has(.dnb-badge) {
  margin-right: -0.5rem;
}
html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus-visible {
  margin-left: 0.5rem;
}
html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus-visible {
  margin-right: 0.5rem;
}
.dnb-tabs__cached {
  opacity: 1;
  transition: opacity 1s var(--easing-default);
}
.dnb-tabs__cached--hidden {
  opacity: 0;
  visibility: hidden;
  height: 0 !important;
  overflow: hidden;
}
.dnb-tabs__cached--hidden * {
  height: 0 !important;
}
html[data-visual-test] .dnb-tabs .dnb-tabs__cached, 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__scroll-nav-button {
  transition: none !important;
}
.dnb-tabs__content:focus-visible {
  position: relative;
}
.dnb-tabs__content:focus-visible::before {
  content: "";
  position: absolute;
  z-index: calc(var(--section-z-index) + 1);
  pointer-events: none;
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  top: 0.125rem;
  max-width: 100vw;
  border-radius: var(--token-radius-md);
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-tabs__button__title > .dnb-badge {
  position: absolute;
  top: auto;
  margin-left: 0.25rem;
}