thinkful-ui/src/AppBar/app-bar.less

Shared navigation and UI resources for Thinkful.

@import "~tfstyleguide/vars";

@nav-height: 46px;

.app-nav-container {
  position: relative;
  z-index: 10;
  color: @white;
  background-color: @blue;
  margin-bottom: 30px;
}


.app-nav {
  position: relative;
  height: @nav-height;
  top: 0px;
  max-width: @grid-width;
  margin: 0 auto;
  z-index: 15;
}

.app-nav-main {
  margin-bottom: 0;
  > * {
    display: none;
  }
  @media @tablet {
    display: block;
    padding-left: 30px;
  }
  @media @bigger {
    padding-left: 0;
  }
}

.app-nav-list {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  border-top: 1px solid @blue75;
  transform: translate(-100%, @nav-height);
  transition: transform 0.35s ease,
  opacity 0.28s ease,
  max-width 0.35s ease,
  max-height 0.22s ease;

  .app-nav-separator {
    border: none;
    border-top: 1px solid @blue75;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;

    @media @tablet {
      border-color: @gray25;
    }
  }

  @media @tablet {
    right: 30px;
    left: auto;
    min-width: 176px;
    max-height: 0px;
    border: 1px solid @gray25;
    border-top: 0;
    box-shadow: 0 1px 2px @gray25;

    transform: translate(0, @nav-height);
  }

  @media @bigger {
    right: 0;
  }
}

.app-nav__visible .app-nav-list {
  transform: translate(0px, @nav-height);
  max-width: 768px;
  opacity: 1;

  @media @tablet {
    max-width: none;
    max-height: 360px;
  }
}

.app-nav-list li,
.app-nav-main li {
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;

  &::before {
    content: none;
    display: none;
  }
}

.app-nav-main li {
  @media @tablet {
    display: inline-block;

    + li {
      margin-left: 15px;
    }
  }
}

.app-nav-logo {
  position: absolute;
  display: inline-block;
  left: 20px;
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  font-size: 0;

  @media @tablet {
    display: none;
  }

  @media screen and (min-width: 960px) {
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
  }
}

.app-nav-link {
  .proxima-light;
  display: block;
  text-decoration: none;
  font-size: 16px;
  line-height: 28px;
  height: @nav-height; // line-height bugginess.
  letter-spacing: 0.5px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-right: 20px;
  padding-left: 20px;
  margin-left: 0;
  cursor: pointer;

  color: @white;
  background-color: @blue;

  &.active {
    .proxima-bold;
  }

  &:hover,
  &:active,
  &:focus {
    // color: @blue25;
  }

  &:visited,
  &:focus {
    outline: none;
  }

  @media @tablet {
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: left;
    // color: @blue;
    &:hover,
    &:active,
    &:focus {
      // color: @blue75;
    }
  }

  &.app-nav-link__in-menu {
    @media @tablet {
      color: @blue;
      background-color: @gray5;
      text-align: center;
      transition: color 0.19s ease,
      background-color 0.19s ease;

      &:hover {
        background-color: @blue25;
        color: @blue125;
      }
    }
  }

  &.app-nav-link__mobile-only {
    @media @tablet {
      display: none;
    }
    + .search-bar {
      display: none;
    }
  }

  &.app-nav-link__mobile-only__search {
    display: none;
  }

  &.app-nav-link__toggle {
    height: @nav-height;
    position: absolute;
    right: 0px;
    top: 0;
    padding-right: 20px;
    padding-left: 20px;
    cursor: pointer;

    @media @tablet {
      right: 30px;
    }

    @media @bigger {
      right: 0;
    }
  }
}

.app-nav-link-down-arrow {
  vertical-align: middle;
  position: relative;
  top: 1px;
  padding-left: 5px;
}

[class^="icon-"].app-nav-icon,
.tui-icon.app-nav-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  font-size: 28px;
  line-height: 28px;
  vertical-align: middle;
  padding-right: 4px;

  @media @big {
    padding-right: 6px;
  }
}

.app-nav-burger {
  &::before {
    content: "Menu";
  }

  display: inline-block;
  min-width: 60px;
  vertical-align: top;
  line-height: 28px;
  padding-right: 15px;
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 1px;

}

.app-nav__visible .app-nav-burger {
  &::before {
    content: "Close";
  }
}

.app-nav-gravatar {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  background-color: @white;
  border-radius: 100%;
}

.app-nav-course-dropdown {
  position: relative;
  display: none;

  @media @tablet {
    display: inline-block;
    vertical-align: top;
  }
}

.app-nav-course-dropdown-content {
  position: absolute;
  top: 100%;
  right: -120px;
  background-color: @white;
  border: 1px solid @gray25;
  border-top-color: @gray15;
  border-radius: 3px;
  padding: 0 30px;
  width: 600px;
  box-shadow: 0 1px 3px fade(@gray50, 25%);

  transform: translateY(-5px);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;

  &.app-nav-course-dropdown-content__visible {
    transform: translateY(0px);
    pointer-events: all;
    opacity: 1;
  }

  &::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 143px;
    height: 14px;
    width: 14px;
    background-color: @white;
    transform: rotate(45deg);
    border-top: 1px solid @gray15;
    border-left: 1px solid @gray15;
  }

  @media @big {
    right: -80px;
    &::before {
      right: 103px;
    }
  }
}

/* Course dropdown content */
.app-nav-section-header {
  .subheading;
}

.app-nav-courses {
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: 15px;
  white-space: normal;
  .grid-container();

  &.app-nav-courses__center {
    text-align: center;
  }
}

.app-nav-courses-link {
  display: inline-block;
  width: 50%;
  line-height: 30px;
  padding-right: 30px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: @gray75;

  &:hover {
    color: @blue;
    background-color: @gray15;
  }
  .icon-navigateright {
    position: relative;
    top: 2px;
    padding-left: 3px;
  }
}

.app-nav-courses-link-text {
  .body-text-small();
  display: inline-block;
  vertical-align: middle;
}

.app-nav-courses-icon {
  vertical-align: middle;
  height: 30px;
  width: auto;
  margin-right: 15px;
}



/* Unauthed navigation */
.app-nav-container.app-nav-container__unauthed {
  color: @white;
  background-color: @white;
  border-bottom: 1px solid @gray15;

  .app-nav-link {
    color: @blue;
    background-color: @white;
  }

  .app-nav-logo {
    @media @tablet {
      transform: translate(0, -50%);
      left: 30px;
    }
    @media @bigger {
      left: 0;
    }
  }

  .app-nav-link {
    @media @tablet {
      padding-left: 0.75em;
      padding-right: 0.75em;
    }
  }

  .app-nav-icon {
    display: none;
  }

  .app-nav-link__toggle {
    @media @tablet {
      display: none;
    }
  }

  .app-nav-list {
    @media @tablet {
      display: inline-block;
      opacity: 1;
      overflow: visible;
      width: content-width;
      max-width: none;
      max-height: @nav-height;
      transition: none;
      transform: translate(0);
      border: none;
      box-shadow: none;

      li {
        display: inline-block;
      }

    }
  }
}

/* Search */
.app-nav-search-mobile {
  margin-bottom: 0;
  li {
    list-style-type: none;
  }
  @media @tablet {
    display: none;
  }
}