Violin.css

Tabs: Horizontal Numbers 

<ul class="inv-tabs inv-tabs--horizontal">
    <li class="inv-tab " data-message="">
        <a class="inv-tab__link" href="#">

            <span class="inv-tab__number">1</span>

            Access Data

        </a>
    </li>
    <li class="inv-tab inv-tab--active" data-message="">
        <a class="inv-tab__link" href="#">

            <span class="inv-tab__number">2</span>

            Profile

        </a>
    </li>
    <li class="inv-tab " data-message="">
        <a class="inv-tab__link" href="#">

            <span class="inv-tab__number">3</span>

            Reports

        </a>
    </li>
    <li class="inv-tab " data-message="">
        <a class="inv-tab__link" href="#">

            <span class="inv-tab__number">4</span>

            Address

        </a>
    </li>
    <li class="inv-tab " data-message="">
        <a class="inv-tab__link" href="#">

            <span class="inv-tab__number">5</span>

            Notifications

        </a>
    </li>
</ul>
 
<ul class="inv-tabs {{ tabs.modifier }}">
  {{#each tabs.list}}
    <li class="inv-tab {{ this.tab.modifier }}" data-message="{{ this.tab.message }}">
      <a class="inv-tab__link" href="#" >

        {{#if this.tab.icon}}
          <i class="material-icons inv-tab__icon {{ this.tab.icon-modifier }}">{{ this.tab.icon }}</i>
        {{/if}}

        {{#if this.tab.number}}
          <span class="inv-tab__number">{{ this.tab.number }}</span>
        {{/if}}

        {{ this.tab.text }}

      </a>
    </li>
  {{/each}}
</ul>
 
{
  "tabs": {
    "list": [
      {
        "tab": {
          "text": "Access Data",
          "number": 1
        }
      },
      {
        "tab": {
          "text": "Profile",
          "modifier": "inv-tab--active",
          "number": 2
        }
      },
      {
        "tab": {
          "text": "Reports",
          "number": 3
        }
      },
      {
        "tab": {
          "text": "Address",
          "number": 4
        }
      },
      {
        "tab": {
          "text": "Notifications",
          "number": 5
        }
      }
    ],
    "modifier": "inv-tabs--horizontal"
  }
}
  • Content: 
    .inv-tabs {
  display: flex;
  flex-direction: column;
  max-width: 184px;
  margin: 0;
  padding: 0;
}

.inv-tab {
  border-left: 3px solid var(--color-system--light);
  box-sizing: border-box;
  padding: 5px 8px 5px 16px;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.inv-tab > .inv-tab__link:hover {
  color: var(--color-system--regular);
}

.inv-tab > .inv-tab__link:hover > .inv-tab__number {
  background-color: var(--color-system--regular);
}

.inv-tab > .inv-tab__link:active {
  color: var(--color-default--dark);
}

.inv-tab > .inv-tab__link:active > .inv-tab__number {
  background-color: var(--color-default--dark);
}

.inv-tab--active {
  color: var(--color-primary--regular);
  border-left: 6px solid var(--color-primary--regular);
  padding-left: 12px;
}

.inv-tab--active > .inv-tab__link {
  color: var(--color-primary--regular);
}

.inv-tab--active > .inv-tab__link:hover {
  color: var(--color-primary--regular);
}

.inv-tab--active > .inv-tab__link > .inv-tab__number {
  background-color: var(--color-primary--regular);
}

.inv-tab--active > .inv-tab__link:hover > .inv-tab__number {
  background-color: var(--color-primary--regular);
}

.inv-tab__link {
  display: flex;
  align-items: center;
  color: var(--color-default--regular);
  font-size: var(--font-content--size);
  font-weight: bold;
  text-decoration: none;
  position: relative;
}

.inv-tab__icon {
  padding-right: 4px;
}

.inv-tab__icon--only {
  padding-right: 0;
}

.inv-tab__number {
  min-height: 18px;
  min-width: 18px;
  border-radius: 3px;
  background-color: var(--color-default--regular);
  color: var(--color-system--white);
  margin-right: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inv-tabs--horizontal {
  flex-direction: row;
  max-width: unset;
}

.inv-tabs--horizontal > .inv-tab {
  border-left: unset;
  border-bottom: 3px solid var(--color-system--light);
  min-height: 48px;
  padding: 15px 8px 11px 8px;
}

.inv-tabs--horizontal > .inv-tab--active {
  border-bottom: 6px solid var(--color-primary--regular);
  padding-bottom: 8px;
}

.inv-tabs--horizontal > .inv-tab--blocked::before {
  top: 50px;
}

.inv-tabs--horizontal > .inv-tab--blocked::after {
  top: 26px;
}

.inv-tabs--fill > .inv-tab {
  width: 100%;
  justify-content: center;
}

.inv-tab--fixed {
  max-width: 41px;
}

.inv-tab--section-divider {
  border-left: unset;
  min-height: 16px;
  height: 16px;
}

.inv-tab--section-divider > .inv-tab__link::before,
.inv-tab--section-divider > .inv-tab__link::after {
  display: none;
}

.inv-tab--blocked-tooltip,
.inv-tab--blocked {
  position: relative;
}

.inv-tab--blocked-tooltip::before,
.inv-tab--blocked::before {
  content: attr(data-message);
  position: absolute;
  font-family: var(--font-family);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  white-space: pre-wrap;
  line-height: 19px;
  color: var(--color-system--white);
  background-color: var(--color-system--dark);
  border-radius: 12px;
  box-shadow: var(--shadow-16) var(--color-default--shadow);
  max-width: 232px;
  width: 232px;
  padding: 16px;
  top: 37px;
  left: 8px;
  z-index: var(--z-index-2);
  transition: opacity 0.5s;
  opacity: 0;
  visibility: hidden;
}

.inv-tab--blocked-tooltip::after,
.inv-tab--blocked::after {
  content: '';
  position: absolute;
  border-left: solid 12px transparent;
  border-right: solid 12px transparent;
  border-top: solid 12px transparent;
  border-bottom: solid 12px var(--color-system--dark);
  top: 13px;
  left: 24px;
  z-index: var(--z-index-2);
  transition: opacity 0.5s;
  opacity: 0;
  visibility: hidden;
}

.inv-tab--blocked-tooltip::before,
.inv-tab--blocked-tooltip::after,
.inv-tab--blocked:hover::before,
.inv-tab--blocked:hover::after {
  opacity: 1;
  visibility: visible;
}
  • URL: /components/raw/tabs/tabs.css
  • Filesystem Path: src/components/tabs/tabs.css
  • Size: 3.8 KB

There are no notes for this item.