PDJ Brandbox

nav-social 

<nav class="socialNav">
    <ul class="socialNav__list">
        <li class="socialNav__item socialNav__item--youtube">
            <a href="https://www.youtube.com/user/pioneerdjglobal" class="socialNav__link" target="_blank">
                <span class="socialNav__symbol">
                    <svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70">
                        <path fill="currentColor" d="M97.91 10.93a12.513 12.513 0 0 0-8.84-8.84C81.27 0 50 0 50 0S18.73 0 10.93 2.09a12.53 12.53 0 0 0-8.84 8.84C0 18.73 0 35 0 35s0 16.27 2.09 24.07c1.15 4.31 4.54 7.69 8.84 8.84C18.73 70 50 70 50 70s31.27 0 39.07-2.09c4.31-1.15 7.69-4.54 8.84-8.84C100 51.27 100 35 100 35s0-16.27-2.09-24.07ZM39.99 50V20l25.98 15-25.98 15Z" />
                    </svg>

                </span>

                <span class="screenReader">YouTube</span>
            </a>
        </li>

        <li class="socialNav__item socialNav__item--instagram">
            <a href="https://www.instagram.com/pioneerdjglobal/" class="socialNav__link" target="_blank">
                <span class="socialNav__symbol">
                    <svg class="icon-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path fill="currentColor" d="M50 9.01c13.35 0 14.93.05 20.21.29 13.55.62 19.88 7.05 20.5 20.5.24 5.27.29 6.85.29 20.2s-.05 14.93-.29 20.2c-.62 13.44-6.93 19.88-20.5 20.5-5.27.24-6.85.29-20.21.29s-14.93-.05-20.2-.29c-13.58-.62-19.88-7.08-20.5-20.5-.24-5.27-.29-6.85-.29-20.2s.05-14.93.29-20.2c.62-13.45 6.93-19.88 20.5-20.5 5.27-.24 6.85-.29 20.2-.29ZM50 0C36.42 0 34.72.06 29.39.3 11.23 1.13 1.14 11.21.3 29.38.05 34.72 0 36.42 0 50s.06 15.28.3 20.62c.83 18.16 10.91 28.25 29.08 29.08 5.34.24 7.04.3 20.62.3s15.28-.06 20.62-.3c18.14-.83 28.26-10.91 29.08-29.08.25-5.33.3-7.04.3-20.62s-.06-15.28-.3-20.61C98.88 11.25 88.8 1.14 70.62.31 65.28.06 63.58 0 50 0Zm0 24.32c-14.18 0-25.68 11.5-25.68 25.68S35.82 75.68 50 75.68 75.68 64.18 75.68 50 64.18 24.32 50 24.32Zm0 42.35c-9.2 0-16.67-7.46-16.67-16.67S40.79 33.33 50 33.33 66.67 40.79 66.67 50 59.21 66.67 50 66.67Zm26.69-49.36c-3.32 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.68-6-6-6Z" />
                    </svg>

                </span>

                <span class="screenReader">Instagram</span>
            </a>
        </li>

        <li class="socialNav__item socialNav__item--facebook">
            <a href="https://www.facebook.com/pioneer.dj.global" class="socialNav__link" target="_blank">
                <span class="socialNav__symbol">
                    <svg class="icon-facebook" viewBox="0 0 256.8 482.7">
                        <path fill="currentColor" d="M175.2,0.6C120.4,6.7,86,38.4,78.1,90.3c-1.8,11.6-1.9,15.4-1.9,53.2l0,39.4H0l0.2,43.4l0.2,43.3l38,0.2l38,0.2l-0.2,105.6 l-0.2,105.6h4c2.7,0,4.1,0.2,4.2,0.8c0.2,0.6,8.5,0.8,38.9,0.8s38.7-0.2,38.9-0.8c0.2-0.5,1.6-0.8,4.2-0.8h4L170,375.6L169.8,270 l34.4,0c18.9,0,34.7-0.2,35-0.5c0.6-0.4,1.3-3.8,4.4-24.1c0.6-4.1,1.4-9.1,1.7-11.1c0.6-3.9,1.4-9.2,2.5-16.1 c0.4-2.4,0.9-5.8,1.2-7.6c0.6-3.9,1.5-9.4,2.4-15.6c0.4-2.5,0.9-5.8,1.2-7.4c0.3-1.6,0.5-3.3,0.5-3.8c0-0.8-5.7-0.9-41.7-0.9h-41.7 l0-30.1c0-30.2,0.2-33.5,2.3-41.9c3.8-15.1,15.5-25.9,31.6-29.3c7.9-1.7,11.4-1.9,31.6-1.9h21.5L256.7,43l-0.2-36.7l-2.1-0.5 c-1.2-0.3-4-0.7-6.3-1c-2.3-0.3-7.3-1-11.1-1.5C214.3,0.3,188.1-0.8,175.2,0.6" />
                    </svg>

                </span>

                <span class="screenReader">Facebook</span>
            </a>
        </li>

        <li class="socialNav__item socialNav__item--x">
            <a href="https://twitter.com/PioneerDJglobal" class="socialNav__link" target="_blank">
                <span class="socialNav__symbol">
                    <svg class="icon-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.85 100">
                        <path fill="currentColor" d="M58.23 42.34 94.66 0h-8.63L54.4 36.77 29.14 0H0l38.2 55.6L0 100h8.63l33.4-38.83L68.71 100h29.14L58.23 42.34ZM46.41 56.09l-3.87-5.54L11.74 6.5H25l24.85 35.55 3.87 5.54L86.03 93.8H72.77L46.41 56.09Z" />
                    </svg>

                </span>

                <span class="screenReader">X</span>
            </a>
        </li>
    </ul>
</nav>
 
<nav class="socialNav">
  <ul class="socialNav__list">
    <li class="socialNav__item socialNav__item--youtube">
      <a href="https://www.youtube.com/user/pioneerdjglobal" class="socialNav__link" target="_blank">
        <span class="socialNav__symbol">
          {{render '@icon-youtube' }}
        </span>

        <span class="screenReader">YouTube</span>
      </a>
    </li>

    <li class="socialNav__item socialNav__item--instagram">
      <a href="https://www.instagram.com/pioneerdjglobal/" class="socialNav__link" target="_blank">
        <span class="socialNav__symbol">
          {{render '@icon-instagram' }}
        </span>

        <span class="screenReader">Instagram</span>
      </a>
    </li>

    <li class="socialNav__item socialNav__item--facebook">
      <a href="https://www.facebook.com/pioneer.dj.global" class="socialNav__link" target="_blank">
        <span class="socialNav__symbol">
          {{render '@icon-facebook' }}
        </span>

        <span class="screenReader">Facebook</span>
      </a>
    </li>

    <li class="socialNav__item socialNav__item--x">
      <a href="https://twitter.com/PioneerDJglobal" class="socialNav__link" target="_blank">
        <span class="socialNav__symbol">
          {{render '@icon-twitter' }}
        </span>

        <span class="screenReader">X</span>
      </a>
    </li>
  </ul>
</nav>
 
/* No context defined. */
  • Content: 
    .socialNav {
  // background-color: var(--color--neutrals-9);
  // color: var(--color--neutrals-0);

  &__list {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__item {
    flex: 0 1 auto;
    margin-left: var(--gap--4);

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

  &__link {
    text-decoration: none;
    color: var(--color--neutrals-0);

    opacity: 1;
    transition: opacity 150ms ease-out;

    &:hover {
      color: var(--color--neutrals-0);
      opacity: .7;
    }
  }

  &__symbol {
    $iconSize: 24px;

    display: block;
    width: $iconSize;
    height: $iconSize;

    .socialNav__item--facebook & {
      width: 16px;
    }

    .socialNav__item--twitter &,
    .socialNav__item--x & {
      width: 20px;
      height: 20px;
    }

    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
  • URL: /components/raw/nav-social/nav-social.scss
  • Filesystem Path: ../src/03_molecules/nav-social/nav-social.scss
  • Size: 937 Bytes

No notes defined.