HIDA - Helmholtz Information and Data Science Academy

Tab Bar 

<div class="tab-bar"><a class="tab-bar__item tab-bar__item--active" href="#"><span class="tab-bar__item__text">News</span></a><a class="tab-bar__item" href="#"><span class="tab-bar__item__text">Aus der Forschung</span></a></div>
 
#{tag || 'div'}.tab-bar()&attributes(attr)
  each item in items
    a.tab-bar__item(
      class=item.active && 'tab-bar__item--active',
      href=item.href
    )
      span.tab-bar__item__text #{item.title}
 
{
  "items": [
    {
      "active": true,
      "title": "News",
      "href": "#"
    },
    {
      "title": "Aus der Forschung",
      "href": "#"
    }
  ]
}
  • Content: 
    .tab-bar {
  border-bottom: 1px solid $color-gray;
  display: flex;
  flex-wrap: nowrap;
  opacity: 1;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow-x: auto;
  pointer-events: all;
  scrollbar-width: none;
  width: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tab-bar__item {
  border-bottom: 6px solid transparent;
  color: $color-gray;
  display: inline-block;
  font-family: $font-family-secondary;
  font-size: 2.8rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.1rem;
  line-height: calc(3.2 / 2.8);
  padding-bottom: 0.8rem;
  transition: color 0.2s;
  white-space: nowrap;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-dark;
    }
  }

  &:not(:first-child) {
    margin-left: 2.5rem;

    @include mq($from: m) {
      margin-left: 4rem;
    }
  }

  @include mq($from: m) {
    font-size: 3.2rem;
    letter-spacing: -0.125rem;
    line-height: calc(3.6 / 3.2);
  }

  @include mq($from: l) {
    font-size: 3.8rem;
    letter-spacing: -0.15rem;
    line-height: calc(4.3 / 3.8);
  }
}

.tab-bar__item--active {
  border-bottom: 6px solid $color-dark;
  color: $color-dark;
}
  • URL: /components/raw/tab-bar/tab-bar.scss
  • Filesystem Path: src/components/molecules/tab-bar/tab-bar.scss
  • Size: 1.2 KB

There are no notes for this item.