learningtapestry/lcms-engine

View on GitHub
app/assets/stylesheets/lcms/engine/layout/_navigation.scss

Summary

Maintainability
Test Coverage
.o-top-bar {
  @include top-bar-container;

  // Stack on small screens by default
  @include top-bar-stacked;
  min-height: $ub-nav-height;
  width: 100%;
  z-index: $reveal-zindex;

  @include e(item) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  @include breakpoint($topbar-unstack-breakpoint) {
    @include top-bar-unstack;

    @include e(item) {
      flex: 0 0 auto;
    }
  }

  @include e(wrapper) {
    @include breakpoint($topbar-unstack-breakpoint) {
      align-items: center;
      display: flex !important; // stylelint-disable-line declaration-no-important
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 100%;
    }
  }
}

/* To prevent FOUC */
.no-js {
  @include breakpoint($topbar-unstack-breakpoint down) {
    .o-top-bar {
      display: none;
    }
  }

  @include breakpoint($topbar-unstack-breakpoint) {
    .c-header-title__h-menu {
      display: none;
    }
  }
}