ihk24/templates/source/sass/partials/objects/_nav.scss

@charset "UTF-8";
@import "../components/mixins";
@import "../components/icons";

.page-header nav {
  display: flex;
  flex-direction: column;

  .primary {
    position: relative;
    flex-grow: 1;

    img {
      max-height: 44px;
      margin-top: -3px;
      margin-bottom: -3px;
    }

    ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      overflow-y: hidden;
      overflow-x: hidden;
      background-color: white;
      z-index: 0;
      transition: transform 0.3s $easeOutCubic, z-index 0s linear 0.3s;
      box-shadow: 0 50vh 0 0 white;
      pointer-events: none;

      &:before {
        content: "";
        @include fullsize;
        background-color: $color-white;
        background-color: var(--theme-color-background, $color-white);
        z-index: 2;
        @include hide;
        background-image: url("../../../img/loader.gif");
        background-size: 100px;
        background-position: center 50px;
        background-repeat: no-repeat;
      }

      &:after {
        content: "";
        @include fullsize;
        background-color: $color-primary;
        background-color: var(--theme-color-primary, $color-primary);
        opacity: 0.1;
        transition: 0.3s $easeInOutSine;
      }

      &.loading:before {
        @include show;
      }

      &.current {
        transform: translate3d(0, 0, 0);
        transition: transform 0.3s $easeOutCubic, z-index 0s linear 0s;
        overflow-y: auto;
        pointer-events: all;

        &:after {
          opacity: 0;
          pointer-events: none;
        }

        ul {
          transform: translate3d(100%, 0, 0);

          &:after {
            opacity: 0;
          }
        }
      }
    }

    li {
      &.open > ul {
        transform: translate3d(0, 0, 0);
        z-index: 1;
      }

      &.back {
        position: sticky;
        text-align: left;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;

        a {
          background-color: $color-primary-light-04;
          background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
          padding-left: 60px;
          padding-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          //white-space: nowrap;
          justify-content: flex-start;
          @include focusvisible(true);

          &:before {
            left: 18px;
            transform: rotate(180deg);
          }

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

            &:before {
              left: 12px;
            }
          }
        }
      }
      &.magazine-nav {
        position: relative;

        &:before {
          content: "";
          @include fullsize;
          background: linear-gradient(90deg, $color-gradient-01 20%, $color-gradient-02 70%, $color-gradient-03 100%);
          background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 20%, var(--theme-color-gradient-02, $color-gradient-02) 70%, var(--theme-color-gradient-03, $color-gradient-03) 100%);
          transition: 0.3s ease;
          width: 100%;
        }

        &:hover {
          &:before {
            width: 120%;
          }
          a {
            background-color: transparent;
          }
        }

        a {
          color: white;
          background-color: transparent !important;

          &:before {
            @include icon-magazine;
          }
        }
      }
      &.link, &.overview, &.miscellaneous {
        a {
          color: $color-secondary-dark;
          color: var(--theme-color-secondary-intensed, $color-secondary-dark);
        }
      }
      &.link a:before, &.miscellaneous a:before {
        @include icon-content;
        margin-top: -14px;
      }
      &.overview a:before {
        @include icon-liste;
        margin-top: -14px;
      }
      &.back:hover {
        text-decoration: none;
      }
      &.link.extranet a:before, &.miscellaneous.extranet a:before {
        @include icon-content-stern;
      }
      &.link.intranet a:before, &.miscellaneous.intranet a:before {
        @include icon-content-schloss;
      }
      &.link.download a:before, &.miscellaneous.download a:before {
        @include icon-download;
      }
      &.overview.extranet a:before {
        @include icon-liste-stern;
        margin-top: -14px;
      }
      &.overview.intranet a:before {
        @include icon-liste-schloss;
        margin-top: -14px;
      }
      &.deep.extranet a:before {
        @include icon-pfeil-rechts-stern;
      }
      &.deep.intranet a:before {
        @include icon-pfeil-rechts-schloss;
      }
      &.miscellaneous.external a:before {
        @include icon-link-external;
      }
    }

    a {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: "Korb";
      font-size: 22px;
      line-height: 26px;
      padding: 12px 60px 12px 20px;
      min-height: 61px;
      text-decoration: none;
      transition: 0.3s $easeOutSine;
      border-bottom: 1px solid rgba($color-primary, 0.1);
      border-bottom: 1px solid rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.1);
      @include focusvisible(true);

      &.active {
        background-color: $color-grey-light;
        background-color: var(--theme-grey-light, $color-grey-light);
        padding-left: 12px;
        border-left: 8px solid $color-secondary-dark;
        border-left: 8px solid var(--theme-color-secondary-intensed, $color-secondary-dark);
      }

      &:before {
        @include icon-pfeil-rechts;
        position: absolute;
        width: 30px;
        height: 30px;
        font-family: "Icons";
        font-size: 30px;
        line-height: 1;
        right: 18px;
        top: 50%;
        margin-top: -15px;
        text-align: center;
      }

      @media(max-width: 359px), (max-width: 767px) and (orientation: landscape) {
        font-size: 18px;
        line-height: 22px;
        min-height: 43px;
        padding: 10px 50px 10px 20px;

        &:before {
          font-size: 24px;
          line-height: 30px;
          right: 12px;
        }
      }

      &:hover {
        text-decoration: none;
      }
    }
  }
}

.page-header {
  .secondary {
    position: relative;
    z-index: 1;
    background-color: $color-primary-light-04;
    background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
    text-align: left;

    ul {
      padding: 15px 14px;
      list-style: none;
      margin: 0;
      font-size: 18px;
      line-height: 20px;

      @media(max-width: 359px) {
        font-size: 16px;
        line-height: 20px;
        padding: 10px;
      }
    }

    li {
      display: inline-block;
    }

    @media (max-width: 767px) and (orientation: landscape) {
      position: absolute;
      right: 100%;
      top: 0;
      width: calc(100vw - 420px);
      min-width: 35vw;

      li {
        display: block;
      }
    }

    a {
      position: relative;
      display: block;
      padding: 5px 6px;
      transition: 0.3s $easeOutQuad;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      text-underline-offset: 2px;
      transition: 0.3s ease;
      @include focusvisible;

      @media(max-width: 359px) {
        padding: 5px;
      }
    }
  }

  .meta {
    position: relative;
    z-index: 1;
    padding: 0 12px;

    > ul {
      display: flex;
      justify-content: flex-start;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    ul {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        padding: 0;
      }
    }

    .icons {
      margin-left: auto;

      .login {
        a{
          @extend .icon-login-flyout;

          &:before {
            font-family: "Icons";
            font-size: 24px;
            line-height: 30px;
            float: right;
            margin-left: 5px;
          }

          &:hover {
            text-decoration-color: transparent;
          }
        }

      }

      li:not(.login) a {
        font-size: 0;
        line-height: 0;
        text-decoration: none;

        &:before {
          font-family: "Icons";
          font-size: 24px;
          line-height: 30px;
        }

        &:hover {
          text-decoration-color: transparent;
        }
      }

      .sign-language a {
        @extend .icon-gebaerdensprache;
      }
      .simple-language a {
        @extend .icon-leichte-sprache;
      }
    }

    a {
      display: block;
      font-size: 18px;
      line-height: 30px;
      margin: 10px 0;
      padding: 5px 8px;
      text-decoration: none;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      text-underline-offset: 2px;
      transition: 0.3s ease;
      text-align: center;
      border: 0;
      background-color: transparent;
      cursor: pointer;
      @include focusvisible;

      @media(max-width: 359px) {
        font-size: 16px;
        padding: 5px;
      }

      &:hover {
        text-decoration-color: $color-primary;
        text-decoration-color: var(--theme-color-primary, $color-primary);
      }
    }
  }
}

.desktop .page-header {
  nav {
    .primary li.back a:hover {
      background-color: $color-primary-light-03;
      background-color: var(--theme-color-primary-dimmed-03, $color-primary-light-03);
    }

    .primary a:hover {
      background-color: $color-grey-light;
      background-color: var(--theme-grey-light, $color-grey-light);

      &:not(.focus-visible) {
        box-shadow: 0 -1px 0 0 rgba($color-primary, 0.06);
        box-shadow: 0 -1px 0 0 rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.06);
      }
    }
  }

  .secondary a:hover, .meta ul:not(.icons) a:hover {
    text-decoration-color: transparent;
  }
}

[data-browser="ie"] .page-header nav .primary a {
  display: -ms-flexbox;

  &:after {
    content: "";
    position: relative;
    display: block;
    width: 0;
    height: 36px;
  }
}