ocular/base/styles/_header.scss

// Copyright (c) 2018 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

@import 'variables';

header {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 300ms;
  max-height: $topbar-height;
  line-height: $topbar-height;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
  z-index: 101;

  .header-content {
    padding: 0 1rem;
    width: 100%;
  }

  .bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: $black;
  }

  .logo {
    color: $white !important;
    font-weight: 500;
    text-transform: capitalize;
  }

  .menu-toggle {
    height: $topbar-height;
    width: $topbar-height;
    margin-left: auto;
    font-size: 24px;
    color: $white;
    cursor: pointer;
    display: none;
  }

  .links {
    margin-left: auto;
    color: $white-40;

    .Stars {
      margin-left: 0.5rem;
      padding: 3px 0;
      min-width: 3.5rem;
      color: $white;
    }

    a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.5rem;
      height: 100%;
      color: $white-40;
      border-style: solid;
      border-width: 3px 0 3px 0;
      border-color: transparent;
      margin-left: 1rem;

      &:hover {
        border-top-color: $white-40;
      }
    }

    a.active {
      color: $white;
      border-top-color: $primary;
      border-top-image: $gradient-1;
      border-image-slice: 2;
    }

    .icon {
      line-height: 0;
      margin-left: 4px;
    }
  }
}

.site-links {
  position: fixed;
  padding-left: 24px;
  padding-right: 40px;
  margin-left: -24px;
  transition: all 300ms;
  max-height: $topbar-height;
  overflow: hidden;

  &:after {
    content: '▾';
    display: block;
    position: absolute;
    top: 0;
    right: 12px;
    color: $black-40;
  }

  .site-link {
    width: 100%;
    text-transform: capitalize;

    a {
      width: 100%;
      color: $white;
    }

    &:nth-child(n+2) {
      opacity: 0.5;
    }
    &:hover {
      opacity: 1 !important;
    }
  }

  &:hover {
    background: $black;
    max-height: $topbar-height * 5;
  }

}

@media screen and (max-width: $mobile) {
  header {

    .header-content {
      padding-right: 0;
    }

    .menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .links {
      display: block;
      margin-top: $topbar-height;
      transition: max-height 300ms;
      max-height: 0;
      position: fixed;
      width: 100%;
      z-index: 5;
      left: 0;
      overflow: hidden;
      background: $black;
      a {
        height: initial;
        line-height: $topbar-height;
        margin-left: 0;
        border-width: 0;
        border-style: none;
      }
    }

    &.open {
      .bg {
        opacity: 1 !important;
      }
      .links {
        display: block;
        max-height: $topbar-maxheight;
      }
    }
  }
}