Contents

.nav-tabs {
  border-bottom: none;

  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;

  gap: 0.325rem;

  --#{$prefix}nav-link-padding-x: 1.25rem;
  --#{$prefix}nav-link-padding-y: 0.625rem;

  &::-webkit-scrollbar {
    height: 4px;
  }

  &::-webkit-scrollbar-track {
    background: $nav-tabs-link-bg;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(black, 0.1);
  }

  .nav-item {
    margin-bottom: 0;
  }

  .nav-link {
    font-weight: 500;

    transition: $nav-tabs-link-transition;

    background-color: $nav-tabs-link-bg;
    color: $nav-tabs-link-color;

    &:not(.active):hover {
      background-color: $nav-tabs-link-hover-bg;
      color: $nav-tabs-link-hover-color;
    }
  }

  .align-right {
    margin-left: auto;

    & + .align-right {
      margin-left: 0;
    }
  }

  .badge {
    font-size: 0.65em;
    margin-left: 0.3125rem;
    vertical-align: 1px;

    // Default badge color when no badge- classes specified
    &:not([class*="badge-"]) {
      background: $gray-600;
      color: color-contrast($gray-600);
    }
  }
}

@include media-breakpoint-down(md) {
  .nav-tabs {
    --#{$prefix}nav-link-padding-x: 0.625rem;

    gap: 0.175rem;

    .nav-link {
      font-size: 0.8125rem;
    }
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
trestle-0.10.1	frontend/css/components/_tabs.scss
trestle-0.10.0	frontend/css/components/_tabs.scss
trestle-0.10.0.pre2	frontend/css/components/_tabs.scss