<div class="vgr-primary-navigation">
    <div class="vgr-container">
        <nav role="navigation">
            <ul class="vgr-unstyled-list vgr-clearfix">
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link" data-selected>Link 1</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 2</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 3</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 4</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<div class="vgr-primary-navigation">
  <div class="vgr-container">
    <nav role="navigation">
      <ul class="vgr-unstyled-list vgr-clearfix">
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link" data-selected>Link 1</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 2</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 3</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 4</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .vgr-primary-navigation {
    
      $primary-navigation-text-color: $color-white;
      $primary-navigation-background-color: $theme-color-dark;
    
    
      background-color: $primary-navigation-background-color;
      color: $primary-navigation-text-color;
      font-size: $large-font-size;
    
      &__item {
        display: inline;
      }
    
      &__link {
        display: block;
        color: $primary-navigation-text-color;
        text-decoration: none;
        transition: .15s ease-out;
    
        &:hover,
        &:focus {
          background: $theme-color-darkest;
          color: $primary-navigation-text-color;
          box-shadow: inset 0 -4px 0 $primary-navigation-text-color;
        }
      }
    
      .selected {
        box-shadow: inset 0 -4px 0 #FF9400;
      }
    
      @media print {
        display: none;
      }
    }
    
  • URL: /components/raw/primary-navigation/_primary-navigation.scss
  • Filesystem Path: components/navigation/primary-navigation/_primary-navigation.scss
  • Size: 728 Bytes
  • Handle: @primary-navigation
  • Preview:
  • Filesystem Path: components/navigation/primary-navigation/primary-navigation.html
  • Referenced by (1): @page

There are no notes for this item.