project/submission/MichelinStar/Netflex System/assets/backend/frontend/ultimate/include/scss/front/headers/_header-absolute-positions.scss
/*------------------------------------
  Absolute Positions
------------------------------------*/

.u-header--abs {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      &-top,
      &-bottom,
      &-top-2nd-screen {
        &#{$infix} {
          position: absolute;
        }
      }

      &-top#{$infix} {
        top: 0;
        bottom: auto;
      }

      &-top-2nd-screen#{$infix} {
        &:not(.js-header-fix-moment) {
          top: 100%;
          bottom: auto;
        }

        &[data-header-fix-effect] {
          transition: none;
        }
      }

      &-bottom#{$infix}:not(.js-header-fix-moment) {
        top: auto;
        bottom: 0;
      }

      &-bottom {
        &#{$infix}:not(.js-header-fix-moment) {
          .u-header__sub-menu {
            top: auto;
            bottom: 100%;

            .u-header__sub-menu {
              top: 0;
              bottom: auto;
            }
          }

          [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
            @include border-top-radius($header-sub-menu-top-border-radius);
            @include border-bottom-radius(0);
            box-shadow: $header-absolute-bottom-submenu-box-shadow;
          }

          .slideInUp {
            animation-name: absoluteSlideInUp;
          }
        }
      }
    }
  }
}

// Medium Devices
@include media-breakpoint-between(md, md) {
  .u-header--abs-bottom-md {
    &:not(.js-header-fix-moment) {
      .navbar-expand-md {
        .hs-mega-menu {
          bottom: 52.8%;
        }
      }
    }
  }
}

// Small to Medium Devices
@include media-breakpoint-between(sm, md) {
  .u-header--abs-bottom,
  .u-header--abs-bottom-sm {
    &:not(.js-header-fix-moment) {
      .navbar-expand-md {
        .hs-mega-menu {
          bottom: 52.8%;
        }
      }
    }
  }
}

// Long list of links, can lead to a bug, since the header can not calculate the height when.
// For this reason, max-height is given to avoid header disappearing issues on collapse.
.u-header--abs-top__inner,
.u-header--abs-bottom__inner,
.u-header--abs-top-2nd-screen__inner {
  max-height: $header-absolute-top-height;

  &.mCS_destroyed {
    position: static !important;
  }
}

[class*="u-header--abs"] {
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 0 24px;
  }
}

/* Disable box-shadow on mobile device */
.u-header--abs {
  &-top-2nd-screen,
  &-bottom {
    &:not(.js-header-fix-moment) {
      [class*="navbar-expand"] {
        .u-header__navbar-nav {
          .u-header__sub-menu {
            box-shadow: none;
          }
        }
      }
    }
  }
}

@keyframes absoluteSlideInUp {
  from {
    transform: translate3d(0, -10px, 0);
  }
}