Tab

<!-- Default -->
<a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>

<!-- Active -->
<a href="/options" class="tab-active"><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>

<!-- Button -->
<button type="submit" name="btnUndo" id="btnUndo" value="Undo" class="button">
<svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Undo</span>
</button>

<!-- Default -->
<a href="/options" class="{{ state }}">{{ icon 'core/menu' 14 }} <span>Reorder</span></a>

<!-- Active -->
<a href="/options" class="{{ state }}">{{ icon 'core/menu' 14 }} <span>Reorder</span></a>

<!-- Button -->
<button type="submit" name="btnUndo" id="btnUndo" value="Undo" class="button">
{{ icon 'core/menu' 14 }} <span>Undo</span>
</button>
/* Default */
{
  "text": "Reorder"
}

/* Active */
{
  "text": "Reorder",
  "state": "tab-active"
}

/* Button */
{
  "text": "Reorder"
}

  • Content:
    .smartbar li.smartbar-end {
      margin-left: auto;
      border-right: none;
      border-left: 1px solid palette(ui, keyline);
    }
    
    .smartbar li {
      border-right: 1px solid palette(ui, keyline);
    }
    
    .smartbar li.smartbar-end ~ li {
      border-left: 1px solid palette(ui, keyline);
      border-right: none;
    }
    
    .smartbar li a,
    .smartbar li button {
      display: inline-block;
      padding: 5px 10px;
      padding: .5rem 1rem;
      text-decoration: none;
      color: palette(type, base);
      line-height: 1.25rem;
    }
    
    .smartbar li a.tab-active,
    .smartbar li button.tab-active {
      background-color: #fff;
    }
    
    .smartbar svg {
      fill: palette(type, base);
      display: none;
    }
    
    .smartbar a svg,
    .smartbar button svg {
      vertical-align: top;
      margin-top: 2px;
      margin-right: 4px;
    }
    
    .smartbar svg.end {
      margin-left: 4px;
      margin-right: 0;
    }
    
    .smartbar li:hover svg {
      fill: palette(type);
    }
    
    .smartbar li a:hover,
    .smartbar li button:hover,
    .smartbar li:hover a,
    .smartbar li:hover button {
      color: palette(type);
    }
    
    .smartbar .tab-active {
      border-bottom: 1px solid #fff;
      margin-bottom: -1px;
      //padding-top: 1px;
    }
    
    .smartbar .smartbar-util svg {
      display: inline-block;
      margin-right: 0;
    } 
    
    .smartbar .smartbar-util span {
      display: none;
    }
    
    .smartbar .button-toggle {
      margin-top: -1px;
    }
    
    @include media(">bp-m") {
      .smartbar svg {
        display: inline-block;
      }
    
      .smartbar .smartbar-util span {
        display: inline-block;
      }
    
      .smartbar a svg,
      .smartbar button svg,
      .smartbar .smartbar-util svg {
        margin-right: 4px;
      }
    }
  • URL: /components/raw/smartbar-tab/smartbar-tab.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/01-atoms/02-smartbar-tab/smartbar-tab.scss
  • Size: 1.5 KB

Tabs can be on the left (default) or the right of the smart bar. The ‘right’ variant is to send the tab to the right hand side.