<div class="smartbar">
    <ul>
        <li>
            <div class="button-group button-toggle">
                <a class="button button-small toggle-active" href="/foo"><svg width="12" height="12" class="icon icon-grid-big"><use xlink:href="/assets/svg/core.svg#grid-big" /></svg> Grid</a>
                <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> List</a>
            </div>

        </li>
        <li>
            <div class="breadcrumb tab-active">
                <a href="/grandparent">Grandparent Item</a>
                <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                <a href="/grandparent/parent">Parent Item</a>
                <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                <a href="/grandparent/parent/me">Current Item</a>
            </div>

        </li>
        <li>
            <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>
        </li>
        <li class="smartbar-end smartbar-util">
            <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>
        </li>
        <li class="smartbar-util">
            <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>
        </li>
        <li class="smartbar-util">
            <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>
        </li>
    </ul>
</div>
<div class="smartbar">
	<ul>
		<li>
			{{ render '@smartbar-toggle' }}
		</li>
		<li>
			{{ render '@smartbar-breadcrumb--active' }}
		</li>
		<li>
			{{ render '@smartbar-tab--default' }}
		</li>
		<li class="smartbar-end smartbar-util">
			{{ render '@smartbar-tab--default' }}
		</li>
		<li class="smartbar-util">
			{{ render '@smartbar-tab--default' }}
		</li>
		<li class="smartbar-util">
			{{ render '@smartbar-tab--button' }}
		</li>
	</ul>
</div>
/* No context defined for this component. */
  • Content:
    .smartbar {
      background-color: palette(ui,lighter);
      border: 1px solid palette(ui, keyline);
      margin: $half-gutter $main-gutter $half-gutter $main-gutter;
    }
    
    .smartbar ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
    }
    
    .smartbar.with-panels ul {
      border-bottom: 1px solid palette(ui, keyline);
    }
    
    .smartbar li {
      display: inline-block;
      @include font-scale(sm, helvetica);
    }
    
    /* icon-specific tweaks */
    .smartbar .icon-o-navigate-right,
    .smartbar .icon-o-navigate-left {
      margin-top: 4px;
    }
  • URL: /components/raw/tabbed-smartbar/smartbar.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/03-organisms/01-tabbed-smartbar/smartbar.scss
  • Size: 541 Bytes

There are no notes for this item.