PDJ Brandbox

nav-legal 

<nav class="legalNav">
    <ul class="legalNav__list">
        <li class="legalNav__item">
            <a href="https://alphatheta.com/" class="legalNav__link">
                <strong>&copy; AlphaTheta</strong>
            </a>
        </li>

        <li class="legalNav__item">
            <a href="https://pioneerdj.com/en/company/privacy-policy/" class="legalNav__link">Privacy policy</a>
        </li>

        <li class="legalNav__item">
            <a href="https://pioneerdj.com/en/company/terms-of-use/" class="legalNav__link">terms of use</a>
        </li>

        <li class="legalNav__item">
            <a href="https://pioneerdj.com/en/company/trademarks/" class="legalNav__link">trademarks</a>
        </li>

    </ul>
</nav>
 
<nav class="legalNav">
  <ul class="legalNav__list">
    <li class="legalNav__item">
      <a href="https://alphatheta.com/" class="legalNav__link">
        <strong>&copy; AlphaTheta</strong>
      </a>
    </li>

    <li class="legalNav__item">
      <a href="https://pioneerdj.com/en/company/privacy-policy/" class="legalNav__link">Privacy policy</a>
    </li>

    <li class="legalNav__item">
      <a href="https://pioneerdj.com/en/company/terms-of-use/" class="legalNav__link">terms of use</a>
    </li>

    <li class="legalNav__item">
      <a href="https://pioneerdj.com/en/company/trademarks/" class="legalNav__link">trademarks</a>
    </li>

    {{#if cookies }}
    <li class="legalNav__item">
      <a href="https://www.pioneerdj.com/en/company/cookie-policy/" class="legalNav__link">cookie policy</a>
    </li>

    <li class="legalNav__item">
      <!-- OneTrust Cookies Settings button start -->
      <button id="ot-sdk-btn" class="ot-sdk-show-settings legalNav__link">Cookie Settings</button>
      <!-- OneTrust Cookies Settings button end -->
    </li>
    {{/if}}
  </ul>
</nav>
 
cookies: false
  • Content: 
    .legalNav {
  display: block;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;

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

.legalNav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;

  @media all and (min-width: 1024px) {
    justify-content: flex-start;
  }
}

.legalNav__item {
  flex: 0 1 auto;
  margin-left: var(--gap--4);
  padding-right: var(--gap--4);
  border-right: 1px solid #C1C1C1;

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

.legalNav__item:first-child {
  margin-bottom: 8px;
  margin-left: 0;
  border-right: none;

  flex-basis: 100%;

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

.legalNav__item:nth-child(2) {
  margin-left: 0;

  @media all and (min-width: 1024px) {
    margin-left: var(--gap--4);
  }
}

.legalNav__item:last-child {
  padding-right: 0;
  border-right: none;
}

.legalNav__link,
.legalNav__item .text-bold {
  color: #C1C1C1;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;

  .theme-2020 & {
    color: inherit;
  }

  &:hover {
    text-decoration: underline;
  }
}
  • URL: /components/raw/nav-legal/nav-legal.scss
  • Filesystem Path: ../src/03_molecules/nav-legal/nav-legal.scss
  • Size: 1.2 KB

No notes defined.