PDJ Brandbox

nav-profile 

<nav class="profileNav">
    <div class="profileNav__item">
        <a href="https://pioneerdj.com/en/account/register/" class="profileNav__link">
            <span class="profileNav__label">Register</span>
        </a>
    </div>

    <div id="LoginRegister" class="profileNav__item">
        <a href="https://pioneerdj.com/en/account/login/?relPath=en%2Flanding%2Fdjm-v10-6-channel-professional-dj-mixer%2F" class="profileNav__link">
            <span class="profileNav__label">Log in</span>
        </a>
    </div>

    <div class="profileNav__item profileNav__item--lang">
        <a href="https://pioneerdj.com/selectCountry/" class="profileNav__link flag flag-INT" style="margin:0;width:20px"></a>
    </div>
</nav>

<script type="text/javascript">
    synchroniseLoginStatus();
</script>
 
<nav class="profileNav">
  <div class="profileNav__item">
    <a href="https://pioneerdj.com/en/account/register/" class="profileNav__link">
      <span class="profileNav__label">Register</span>
    </a>
  </div>

  <div id="LoginRegister" class="profileNav__item">
    <a href="https://pioneerdj.com/en/account/login/?relPath=en%2Flanding%2Fdjm-v10-6-channel-professional-dj-mixer%2F" class="profileNav__link">
      <span class="profileNav__label">Log in</span>
    </a>
  </div>

  <div class="profileNav__item profileNav__item--lang">
    <a href="https://pioneerdj.com/selectCountry/" class="profileNav__link flag flag-INT" style="margin:0;width:20px"></a>
  </div>
</nav>

<script type="text/javascript">
  synchroniseLoginStatus();
</script>
 
/* No context defined. */
  • Content: 
    .profileNav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.profileNav__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: 16px;

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

.profileNav__item--lang {
  flex: 0 0 24px;
  width: 24px;
  margin-left: auto;
  justify-content: center;

  @media all and (min-width: 768px) {
    width: 56px;
    height: 55px;
    margin-left: 32px;
    padding: 0 16px;
    background-color: #3B3B53;
    flex-basis: 56px;

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

.profileNav__link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 100%;
  color: #FFF;
  font-size: 12px;
  text-decoration: underline;

  &:hover {
    color: #FFF;
  }
}

.profileNav__avatar {
  display: block;
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
  margin-right: 8px;
  border-radius: 50%;
}

.profileNav__label {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  • URL: /components/raw/nav-profile/nav-profile.scss
  • Filesystem Path: ../src/03_molecules/nav-profile/nav-profile.scss
  • Size: 1.1 KB

No notes defined.