PDJ Brandbox

nav-external 

<nav class="externalNav">
    <ul class="externalNav__list">
        <li class="externalNav__item">
            <a href="http://www.kuvo.com/" class="externalNav__link" target="_blank">
                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/kuvo-org.png')"></span>
                KUVO
            </a>
        </li>

        <li class="externalNav__item">
            <a href="http://www.pioneerdjradio.com/" class="externalNav__link" target="_blank">
                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/dj-radio-org.png')"></span>
                Radio
            </a>
        </li>

        <li class="externalNav__item">
            <a href="http://www.pioneerdjinibiza.com" class="externalNav__link" target="_blank">
                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/ibiza-org.png')"></span>
                Ibiza
            </a>
        </li>

        <li class="externalNav__item">
            <a href="http://www.pioneerproaudio.com" class="externalNav__link" target="_blank">
                <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/pro-audio-gold.png')"></span>
                Pioneer Pro Audio
            </a>
        </li>
    </ul>
</nav>
 
<nav class="externalNav">
  <ul class="externalNav__list">
    <li class="externalNav__item">
      <a href="http://www.kuvo.com/" class="externalNav__link" target="_blank">
        <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/kuvo-org.png')"></span>
        KUVO
      </a>
    </li>

    <li class="externalNav__item">
      <a href="http://www.pioneerdjradio.com/" class="externalNav__link" target="_blank">
        <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/dj-radio-org.png')"></span>
        Radio
      </a>
    </li>

    <li class="externalNav__item">
      <a href="http://www.pioneerdjinibiza.com" class="externalNav__link" target="_blank">
        <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/ibiza-org.png')"></span>
        Ibiza
      </a>
    </li>

    <li class="externalNav__item">
      <a href="http://www.pioneerproaudio.com" class="externalNav__link" target="_blank">
        <span class="externalNav__symbol" style="background-image: url('https://www.pioneerdj.com/-/media/pioneerdj/images/navigation/pro-audio-gold.png')"></span>
        Pioneer Pro Audio
      </a>
    </li>
  </ul>
</nav>
 
/* No context defined. */
  • Content: 
    .externalNav {
  display: block;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;

  .theme-2020 & {
    max-width: var(--section--8);
  }
}

.externalNav__list {
  padding: 0;
  margin: 0;
  list-style: none;
  column-count: 2;
  column-gap: var(--gap--8);
}

@media all and (min-width: 1024px) {
  .externalNav__list {
    display: flex;
    align-items: center;
  }
}

.externalNav__item {
  margin-bottom: 8px;
  break-inside: avoid;

  @media all and (min-width: 1024px) {
    flex: 0 0 auto;
    margin-bottom: 0;
    margin-left: var(--gap--8);
  }

  &:first-child {
    margin-left: 0;
  }
}

.externalNav__link {
  transition: color 300ms;
  display: inline-flex;
  align-items: center;
  height: 34px;
  color: #C1C1C1;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;

  .theme-2020 & {
    color: inherit;
  }

  &:hover {
    color: #25F6D6;

    .theme-2020 & {
      color: var(--color--neutrals-0);
    }
  }
}

.externalNav__symbol {
  transition: box-shadow 300ms;
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #1A1928;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .externalNav__link:hover & {
    box-shadow: 0 0 0 2px #25F6D6;

    .theme-2020 & {
      box-shadow: 0 0 0 2px var(--color--neutrals-0);
    }
  }
}
  • URL: /components/raw/nav-external/nav-external.scss
  • Filesystem Path: ../src/03_molecules/nav-external/nav-external.scss
  • Size: 1.4 KB

No notes defined.