Violin.css

Tabs 

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

            Access Data

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

            Profile

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

            Reports

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

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

            Address

        </a>
    </li>
    <li class="inv-tab inv-tab--blocked" data-message="Preencha a etapa anterior antes de continuar. (Customizavel)">
        <a class="inv-tab__link" href="#">

            Notifications (hover)

        </a>
    </li>
</ul>


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

            Agendamento

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

            Nomeclatura

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

            Período

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

            Produtos

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

        </a>
    </li>
    <li class="inv-tab inv-tab--blocked-tooltip" data-message="Preencha a etapa anterior antes de continuar. (Customizavel)">
        <a class="inv-tab__link" href="#">

            Destinatários

        </a>
    </li>
</ul>


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

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

            Access Data

        </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>


<!-- Numbers -->
<ul class="inv-tabs ">
    <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>


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

            Access Data

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

            Profile

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

            Reports

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

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

            Address

        </a>
    </li>
    <li class="inv-tab inv-tab--blocked" data-message="Preencha a etapa anterior antes de continuar. (Customizavel)">
        <a class="inv-tab__link" href="#">

            Notifications (hover)

        </a>
    </li>
</ul>


<!-- Horizontal Icons -->
<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>


<!-- 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>


<!-- Horizontal Icons Only -->
<ul class="inv-tabs inv-tabs--horizontal inv-tabs--icons-only">
    <li class="inv-tab " data-message="">
        <a class="inv-tab__link" href="#">

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

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

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

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

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

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

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

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

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

        </a>
    </li>
</ul>


<!-- Fill Icons -->
<ul class="inv-tabs inv-tabs--horizontal inv-tabs--icons-only inv-tabs--fill">
    <li class="inv-tab inv-tab--active" data-message="">
        <a class="inv-tab__link" href="#">

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

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

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

        </a>
    </li>
</ul>


<!-- Fixed Tab -->
<ul class="inv-tabs inv-tabs--horizontal inv-tabs--icons-only inv-tabs--fill">
    <li class="inv-tab inv-tab--fixed" data-message="">
        <a class="inv-tab__link" href="#">

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

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

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

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

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

        </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>
 
/* Default */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "text": "Access Data"
        }
      },
      {
        "tab": {
          "text": "Profile",
          "modifier": "inv-tab--active"
        }
      },
      {
        "tab": {
          "text": "Reports"
        }
      },
      {
        "tab": {
          "modifier": "inv-tab--section-divider"
        }
      },
      {
        "tab": {
          "text": "Address"
        }
      },
      {
        "tab": {
          "text": "Notifications (hover)",
          "modifier": "inv-tab--blocked",
          "message": "Preencha a etapa anterior antes de continuar. (Customizavel)"
        }
      }
    ]
  }
}


/* Blocked */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "text": "Agendamento"
        }
      },
      {
        "tab": {
          "text": "Nomeclatura",
          "modifier": "inv-tab--active"
        }
      },
      {
        "tab": {
          "text": "Período"
        }
      },
      {
        "tab": {
          "text": "Produtos"
        }
      },
      {
        "tab": {
          "modifier": "inv-tab--section-divider"
        }
      },
      {
        "tab": {
          "text": "Destinatários",
          "modifier": "inv-tab--blocked-tooltip",
          "message": "Preencha a etapa anterior antes de continuar. (Customizavel)"
        }
      }
    ]
  }
}


/* Icons */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "text": "Access Data",
          "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"
        }
      }
    ]
  }
}


/* Numbers */
{
  "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
        }
      }
    ]
  }
}


/* Horizontal */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "text": "Access Data"
        }
      },
      {
        "tab": {
          "text": "Profile",
          "modifier": "inv-tab--active"
        }
      },
      {
        "tab": {
          "text": "Reports"
        }
      },
      {
        "tab": {
          "modifier": "inv-tab--section-divider"
        }
      },
      {
        "tab": {
          "text": "Address"
        }
      },
      {
        "tab": {
          "text": "Notifications (hover)",
          "modifier": "inv-tab--blocked",
          "message": "Preencha a etapa anterior antes de continuar. (Customizavel)"
        }
      }
    ],
    "modifier": "inv-tabs--horizontal"
  }
}


/* Horizontal Icons */
{
  "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"
  }
}


/* Horizontal Numbers */
{
  "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"
  }
}


/* Horizontal Icons Only */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "icon": "sd_card",
          "icon-modifier": "inv-tab__icon--only"
        }
      },
      {
        "tab": {
          "modifier": "inv-tab--active",
          "icon": "face",
          "icon-modifier": "inv-tab__icon--only"
        }
      },
      {
        "tab": {
          "icon": "power",
          "icon-modifier": "inv-tab__icon--only"
        }
      },
      {
        "tab": {
          "icon": "time_to_leave",
          "icon-modifier": "inv-tab__icon--only"
        }
      },
      {
        "tab": {
          "icon": "notifications",
          "icon-modifier": "inv-tab__icon--only"
        }
      }
    ],
    "modifier": "inv-tabs--horizontal inv-tabs--icons-only"
  }
}


/* Fill Icons */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "modifier": "inv-tab--active",
          "icon": "help"
        }
      },
      {
        "tab": {
          "icon": "question_answer"
        }
      }
    ],
    "modifier": "inv-tabs--horizontal inv-tabs--icons-only inv-tabs--fill"
  }
}


/* Fixed Tab */
{
  "tabs": {
    "list": [
      {
        "tab": {
          "modifier": "inv-tab--fixed",
          "icon": "keyboard_arrow_right"
        }
      },
      {
        "tab": {
          "modifier": "inv-tab--active",
          "icon": "help"
        }
      },
      {
        "tab": {
          "icon": "question_answer"
        }
      }
    ],
    "modifier": "inv-tabs--horizontal inv-tabs--icons-only inv-tabs--fill"
  }
}
  • 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.