@stories-js/core/dist/collection/components/tab-bar/tab-bar.css

Stories web components to build stories

:host {
  /**
   * @prop --background: Background of the tab bar
   * @prop --border: Border of the tab bar
   * @prop --color: Color of the tab bar
   */
  padding-left: var(--stories-safe-area-left);
  padding-right: var(--stories-safe-area-right);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 40px;
  padding-bottom: var(--stories-safe-area-bottom, 0);
  border-top: var(--border);
  background: var(--background);
  color: var(--color);
  text-align: center;
  contain: strict;
  user-select: none;
  z-index: 10;
  /* stylelint-disable-next-line declaration-no-important */
  box-sizing: content-box !important;
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  :host {
    padding-left: unset;
    padding-right: unset;
    -webkit-padding-start: var(--stories-safe-area-left);
    padding-inline-start: var(--stories-safe-area-left);
    -webkit-padding-end: var(--stories-safe-area-right);
    padding-inline-end: var(--stories-safe-area-right);
  }
}

:host(.stories-color) ::slotted(stories-tab-button) {
  --background-focused: var(--stories-color-shade);
  --color-selected: var(--stories-color-contrast);
}

:host(.stories-color) ::slotted(.tab-selected) {
  color: var(--stories-color-contrast);
}

:host(.stories-color),
:host(.stories-color) ::slotted(stories-tab-button) {
  color: rgba(var(--stories-color-contrast-rgb), 0.7);
}

:host(.stories-color),
:host(.stories-color) ::slotted(stories-tab-button) {
  background: var(--stories-color-base);
}

:host(.stories-color) ::slotted(stories-tab-button.stories-focused) {
  background: var(--background-focused);
}

:host(.tab-bar-hidden) {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}