@vaadin/vaadin-lumo-styles/src/components/tabs.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_tabs {
  :host {
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  :host([hidden]) {
    display: none !important;
  }

  :host([orientation='vertical']) {
    display: block;
    box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
  }

  :host([orientation='vertical']) [part='tabs'] {
    height: 100%;
    overflow-y: auto;
    width: 100%;
    margin: 0.5rem 0;
  }

  :host(:not([orientation='vertical'])) {
    box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
    position: relative;
    min-height: var(--lumo-size-l);
  }

  :host([orientation='horizontal']) [part='tabs'] {
    flex-grow: 1;
    display: flex;
    align-self: stretch;
    overflow-x: auto;
    margin: 0 0.75rem;
  }

  :host([orientation='horizontal']) [part='tabs'] ::slotted(vaadin-tab:not([theme~='icon-on-top'])) {
    justify-content: center;
  }

  /*
  This seems more future-proof than `overflow: -moz-scrollbars-none` which is marked obsolete
  and is no longer guaranteed to work:
  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions
*/
  @-moz-document url-prefix() {
    :host([orientation='horizontal']) [part='tabs'] {
      overflow: hidden;
    }
  }

  :host([orientation='horizontal']) [part='tabs']::-webkit-scrollbar {
    display: none;
  }

  [part='back-button'],
  [part='forward-button'] {
    pointer-events: none;
    opacity: 0;
    cursor: default;
    position: absolute;
    z-index: 1;
    font-family: lumo-icons;
    color: var(--lumo-tertiary-text-color);
    font-size: var(--lumo-icon-size-m);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 100%;
    transition: 0.2s opacity;
    top: 0;
  }

  [part='forward-button']:hover,
  [part='back-button']:hover {
    color: inherit;
  }

  :host([overflow~='start']) [part='back-button'],
  :host([overflow~='end']) [part='forward-button'] {
    pointer-events: auto;
    opacity: 1;
  }

  [part='back-button']::after {
    content: var(--lumo-icons-angle-left);
  }

  [part='forward-button']::after {
    content: var(--lumo-icons-angle-right);
  }

  :host([orientation='vertical']) [part='back-button'],
  :host([orientation='vertical']) [part='forward-button'] {
    display: none;
  }

  /* Tabs overflow */

  [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: none;
    mask-image: var(--_lumo-tabs-overflow-mask-image);
  }

  /* Horizontal tabs overflow */

  /* Both ends overflowing */
  :host([overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(
      90deg,
      transparent 2em,
      #000 4em,
      #000 calc(100% - 4em),
      transparent calc(100% - 2em)
    );
  }

  /* End overflowing */
  :host([overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
  }

  /* Start overflowing */
  :host([overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
  }

  /* Vertical tabs overflow */

  /* Both ends overflowing */
  :host([overflow~='start'][overflow~='end'][orientation='vertical']) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
  }

  /* End overflowing */
  :host([overflow~='end'][orientation='vertical']) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
  }

  /* Start overflowing */
  :host([overflow~='start'][orientation='vertical']) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
  }

  :host [part='tabs'] ::slotted(:not(vaadin-tab)) {
    margin-left: var(--lumo-space-m);
  }

  /* Centered */

  :host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:first-of-type) {
    margin-inline-start: auto;
  }

  :host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:last-of-type) {
    margin-inline-end: auto;
  }

  /* Small */

  :host([theme~='small']),
  :host([theme~='small']) [part='tabs'] {
    min-height: var(--lumo-size-m);
  }

  :host([theme~='small']) [part='tabs'] ::slotted(vaadin-tab) {
    font-size: var(--lumo-font-size-s);
  }

  /* Minimal */

  :host([theme~='minimal']) {
    box-shadow: none;
    --_lumo-tab-marker-display: none;
  }

  /* Hide-scroll-buttons */

  :host([theme~='hide-scroll-buttons']) [part='back-button'],
  :host([theme~='hide-scroll-buttons']) [part='forward-button'] {
    display: none;
  }

  :host([theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
    [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 2em,
      #000 calc(100% - 2em),
      transparent 100%
    );
  }

  :host([theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
  }

  :host([theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
  }

  /* Equal-width tabs */
  :host([theme~='equal-width-tabs']) {
    flex: auto;
  }

  :host([theme~='equal-width-tabs']) [part='tabs'] ::slotted(vaadin-tab) {
    flex: 1 0 0%;
  }

  /* RTL specific styles */

  :host(:not([dir='rtl'])) [part='forward-button'] {
    right: 0;
  }

  :host([dir='rtl']) [part='back-button']::after {
    content: var(--lumo-icons-angle-right);
  }

  :host([dir='rtl']) [part='forward-button']::after {
    content: var(--lumo-icons-angle-left);
  }

  :host([dir='rtl'][orientation='vertical']) {
    box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
  }

  :host([dir='rtl']) [part='forward-button'] {
    left: 0;
  }

  :host([dir='rtl']) [part='tabs'] ::slotted(:not(vaadin-tab)) {
    margin-left: 0;
    margin-right: var(--lumo-space-m);
  }

  /* Both ends overflowing */
  :host([dir='rtl'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(
      -90deg,
      transparent 2em,
      #000 4em,
      #000 calc(100% - 4em),
      transparent calc(100% - 2em)
    );
  }

  /* End overflowing */
  :host([dir='rtl'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
  }

  /* Start overflowing */
  :host([dir='rtl'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
  }

  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
    [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(
      -90deg,
      transparent,
      #000 2em,
      #000 calc(100% - 2em),
      transparent 100%
    );
  }

  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
  }

  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
  }
}