Violin.css

# Tabs: Horizontal Icons

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

              <i class="material-icons inv-tab__icon ">sd_card</i>

            Access

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

              <i class="material-icons inv-tab__icon ">face</i>

            Profile

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

              <i class="material-icons inv-tab__icon ">power</i>

            Reports

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

              <i class="material-icons inv-tab__icon ">time_to_leave</i>

            Address

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

              <i class="material-icons inv-tab__icon ">notifications</i>

            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",
              "icon": "sd_card"
            }
          },
          {
            "tab": {
              "text": "Profile",
              "modifier": "inv-tab--active",
              "icon": "face"
            }
          },
          {
            "tab": {
              "text": "Reports",
              "icon": "power"
            }
          },
          {
            "tab": {
              "text": "Address",
              "icon": "time_to_leave"
            }
          },
          {
            "tab": {
              "text": "Notifications",
              "icon": "notifications"
            }
          }
        ],
        "modifier": "inv-tabs--horizontal"
      }
    }

`
File:

- 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

- Handle: @tabs--horizontal-icons
- Variants (10): Default , Blocked , Icons , Numbers , Horizontal , Horizontal Icons , Horizontal Numbers , Horizontal Icons Only , Fill Icons , Fixed Tab
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/tabs/tabs.hbs

There are no notes for this item.