ihk24/storybook/stories/components/header/header.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

@media(min-width: 1200px) {
  .magazine-start, .magazine-article, .header-collapsed {
    --header-height: 100px;

    .page-header {
      --logo-size: 60px;

      &::before, &.scrolled::before {
        box-shadow: none;
        height: var(--header-height);
      }
    }
  }
}

.page-header {
  --logo-size: 75px;
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  z-index: 100;
  height: var(--header-height);
  transition: 0.25s $easeOutQuad;
  padding: 0;
  margin: 0;
  border: 0;

  &:before {
    content: "";
    @include full-size;
    box-shadow: 0 1px 0 rgba(#fff, 0);
    background-color: var(--theme-color-background);
    transition: 0.25s $easeOutQuad;
  }

  @media(max-width: 1199px) {
    --logo-size: 60px;
  }

  @media(min-width: 768px) {
    &.scrolled, &.nav-open, &.search-open {
      --header-height: 100px;
      --logo-size: 60px;

      ~ * {
        --header-height: 100px;
      }

      &:before {;
        box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
      }

      nav {
        top: var(--header-height);
        height: calc(var(--viewport-height, 1vh) * 100 - var(--header-height));
        transition: transform 0.25s $easeOutQuad, visibility 0s linear 0s;
        visibility: visible;
      }
    }
  }

  @media(max-width: 767px) {
    justify-content: flex-end;
    --logo-size: 44px;

    &:before {
      box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
    }
  }

  @media(max-width: 567px) {
    .logo-overlay {
      content: "";
      position: absolute;
      display: block;
      left: 90px;
      top: 0;
      height: 44px;
      width: 100vw;
      background-color: var(--theme-color-background);
      @include hide(0.3s);
    }

    .contact-nav, .open-search {
      @include hide;
    }
    &.scrolled {
      .contact-nav, .open-search {
        @include show(0.3s);
      }
      .logo-overlay {
        @include show;
        pointer-events: none;
      }
    }

    .logo img, .logo object {
      max-width: calc(100vw - 110px);
    }
  }

  .logo {
    position: relative;
    margin-left: 34px;
    margin-right: auto;
    padding: 8px 12px 8px 8px;
    border-radius: 4px;
    transition: 0.2s ease;
    @include focus-visible;

    img {
      height: var(--logo-size);
      display: block;
      width: auto;
      max-width: none;
      transition: 0.25s $easeOutQuad;
      transform: translate3d(0, 0, 0) scale(1);

      @media(max-width: 1199px) {
        transition: none;
      }
    }

    canvas {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      height: calc(100% - 20px);
      width: calc(100% - 16px);
      background-color: white;
      margin: 8px 12px 8px 8px;
    }

    @media(max-width: 767px) {
      position: fixed;
      display: flex;
      align-items: center;
      top: 0;
      left: 0;
      margin: 18px 20px;
      padding: 0;
      height: 44px;
      width: calc(100vw - 110px);

      img {
        position: relative;
        display: block;
        height: auto;
        max-height: 44px;
        max-width: calc(100vw - 110px);
        width: 100%;
        object-fit: contain;
        object-position: left center;
      }
    }

    @media(max-width: 359px) {
      margin: 13px 16px;

      img {
        max-width: calc(100vw - 100px);
      }
    }
  }

  .toggle-nav {
    position: relative;
    display: block;
    border: 2px solid var(--theme-color-primary-dimmed-04);
    background-color: transparent;
    padding: 18px 20px 18px 72px;
    margin: 0 30px 0 20px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    border-radius: 4px;
    color: var(--theme-color-primary);
    @include focus-visible;

    @media(max-width: 767px) {
      font-size: 0;
      line-height: 0;
      padding: 0;
      width: 56px;
      height: 56px;
      margin-right: 12px;
      margin-left: 8px;
    }

    &:before, &:after, span:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 40px;
      width: 38px;
      height: 2px;
      border-radius: 2px;
      background-color: var(--theme-color-primary);
      margin: 0 -19px;
      transform: translate3d(0, -1px, 0) rotate(0deg);
      transition: margin 0.2s ease 0.2s, transform 0.2s ease 0s, background-color 0.2s ease 0s, opacity 0.2s ease 0s;

      @media(max-width: 767px) {
        left: 50%;
      }
    }
    &:before {
      margin-top: -12px;
    }
    &:after {
      margin-top: 12px;
    }

    @media(max-width: 359px) {
      width: 50px;
      height: 50px;

      &:before, &:after, span:before {
        width: 32px;
        margin-left: -16px;
      }
      &:before {
        margin-top: -10px;
      }
      &:after {
        margin-top: 10px;
      }
    }
  }

  .open-search, .contact-nav a {
    background-color: transparent;
    border: 0;
    position: relative;
    display: block;
    padding: 20px 20px 20px 54px;
    margin: 0 2px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    text-decoration: none;
    color: var(--theme-color-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: 0.25s $easeOutQuad;
    @include focus-visible;

    @media(max-width: 999px) {
      font-size: 0;
      line-height: 0;
      padding: 5px;
      margin-right: 5px;
    }

    &:before {
      @include icon-suche;
      font-family: 'Icons', sans-serif;
      position: absolute;
      left: 14px;
      top: 50%;
      width: var(--icon-size);
      height: var(--icon-size);
      font-size: var(--icon-size);
      font-weight: 400;
      line-height: 1;
      margin: calc(var(--icon-size) / -2) 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;

      @media(max-width: 999px) {
        position: relative;
        display: block;
        margin: 0;
        left: 0;
      }
    }
  }

  .contact-nav {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;

    a {
      &.phone{
        &:before {
          @include icon-telefon;
          margin-left: 3px;
        }
      }

      &.contact:before, &.website:before {
        @include icon-kontakt;
      }
      &.mail:before {
        @include icon-email;
      }
      &.chat:before {
        @include icon-chat;
      }
      &.login:before{
        @include icon-login-header;
      }
    }
  }

  .search form {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--viewport-height, 1vh) * 100 - 100px);
    background-color: var(--theme-color-primary-dimmed-04);
    @include hide;

    @media(max-width: 767px) {
      height: calc(var(--viewport-height, 1vh) * 100 - 80px);
    }

    .outer {
      position: relative;
      padding-bottom: 10px;
    }

    .container {
      margin: auto;
    }
  }

  .form-nav {
    width: 100%;
    background-color: var(--theme-color-white);

    .secondary {
      background-color: var(--theme-color-primary-dimmed-04);
    }
  }

  .close-search {
    position: absolute;
    right: 30px;
    top: 50%;
    padding: 20px 22px 20px 70px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    border: 0;
    border-radius: 4px;
    color: var(--theme-color-white);
    background-color: var(--theme-color-primary);
    @include focus-visible;
    @include hide;
    z-index: 2;
    margin-top: -35px;

    @media (max-width: 1199px) and (min-width: 768px) {
      right: 20px;
    }

    @media(max-width: 767px) {
      font-size: 0;
      line-height: 0;
      padding: 0;
      right: 12px;
      margin-top: -28px;
      width: 56px;
      height: 56px;
    }

    &:before, &:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 36px;
      width: 38px;
      height: 2px;
      border-radius: 2px;
      background-color: var(--theme-color-white);
      margin: -1px -19px;
      transform: translate3d(0, 0, 0) rotate(45deg);
      transition: 0.3s ease;

      @media(max-width: 767px) {
        left: 50%;
      }
    }

    &:after {
      transform: translate3d(0, 0, 0) rotate(-45deg);
    }
  }

  &.search-open {
    .logo {
      z-index: 1;
    }
    &:after {
      content: "";
      @include full-size;
      background-color: var(--theme-color-white);
    }
    .search form, .close-search {
      @include show;
    }
  }

  &.nav-open {
    .toggle-nav {
      background-color: var(--theme-color-primary);
      border-color: var(--theme-color-primary);
      color: var(--theme-color-white);
      transition: 0.2s ease 0s;

      &:before, &:after, span:before {
        margin-top: 0;
        transition: margin 0.2s ease 0s, transform 0.2s ease 0.2s, background-color 0.2s ease 0s, opacity 0.2s ease 0.2s;
        background-color: var(--theme-color-white);
      }
    }
    .toggle-nav:before {
      transform: translate3d(0, -1px, 0) rotate(45deg);

    }
    .toggle-nav:after {
      transform: translate3d(0, -1px, 0) rotate(-45deg);
    }
    .toggle-nav span:before {
      opacity: 0;
    }

    nav {
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s $easeOutQuad, visibility 0s linear 0s;
      visibility: visible;

      .overlay-holder {
        @include show;
        opacity: 0.6;
      }
    }

    &:not(.scrolled) {
      ~ .page-wrapper, ~ .page-content {
        @media(min-width: 768px) {
          border-top-width: 100px;
        }
      }
    }
  }

  ~ .page-wrapper, ~ .page-content {
    transition: 0.25s $easeOutQuad;
  }

  @media(max-width: 1199px) and (min-width: 768px) {
    height: 100px;

    &:before {
      box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
    }

    .logo {
      height: 66px;
      margin-left: 20px;
    }

    .toggle-nav {
      margin-right: 20px;
    }

    nav {
      top: 100px;
      height: calc(var(--viewport-height, 1vh) * 100 - 100px);
    }
  }

  button::-moz-focus-inner {
    border: 0;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }
}

.toplink {
  position: fixed;
  right: 0;
  bottom: 105px;
  background-color: var(--theme-color-primary);
  color: white;
  width: 90px;
  height: 45px;
  display: flex;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  @include hide;
  box-shadow: 0 0 0 1px rgba(#fff, 0.2);
  z-index: -1;

  &:hover, &:active, &:focus {
    color: white;
    text-decoration: none;
  }

  &:before {
    @include icon-pfeil-oben;
    font-family: 'Icons', sans-serif;
    font-size: var(--icon-size);
    line-height: 1;
    margin-right: 6px;
  }

  @media(max-width: 767px) {
    font-size: 0;
    width: 54px;
    bottom: 64px;
    justify-content: flex-start;
    padding-left: 10px;

    &:before {
      margin-right: 0;
    }
  }
}

.show-toplink .toplink {
  @include show;
}

.mobile .page-header {
  .primary a {
    -webkit-tap-highlight-color: rgba(var(--theme-color-primary-rgb), 0.1);
  }

  li.open > a {
    background-color: var(--theme-color-primary-dimmed-04);
  }
}

.desktop .page-header {
  &:not(.nav-open) .toggle-nav:hover {
    background-color: var(--theme-color-primary-dimmed-04);
  }

  .open-search:hover, .contact-nav a:hover {
    color: var(--theme-color-secondary-intensed);
  }
}
/*
[data-browser="ie"] {
  .page-header .logo img {
    height: 50px;
  }

  .page-header .search form {
    display: block;

    .form-nav {
      position: absolute;
      bottom: 0;
    }

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0;
      transform: translate(-50%, -50%);
    }
  }
}
*/