bih/spotify-ruby

//
// Site header (components/_site-header.scss)
//

// ----- General ----- 
.site-header {
  border-bottom: 1px solid rgba($color-dark-green, 0.15);
  height: 5.625rem;
  position: absolute;
  width: 100%;
}

// ----- Notice ----- 

.site-header__notice {
  background: $color-yellow;

  p {
    margin: 0;
    text-align: center;
  }
}

// ----- Navigation ----- 
.site-header__logo {
  @include link-reset;
  color: $color-dark-green;
  display: block;
  float: left;
  font-family: $font-family-secondary;
  font-size: 2em;
  font-weight: bold;
  line-height: 5.625rem;

  &:hover,
  &:focus,
  &:active {
    color: $color-dark-green;
  }

  img {
    height: calc(5.625rem - 1px);
  }
}

// ----- Navigation ----- 
.site-header__nav {
  @include list-horizontal;
  @include clearfix;
  float: right;
  margin-bottom: 0;

  li {
    + li {
      margin-left: 2.5rem;
    }
  }

  a {
    @include link-reset;
    border-bottom: 1px solid;
    border-color: transparent;
    display: block;
    font-family: $font-family-secondary;
    font-size: 0.875em;
    font-weight: 500;
    line-height: calc(5.625rem - 1px);
    text-transform: uppercase;
    transition: border-color 0.2s;

    &:hover,
    &:focus,
    &:active {
      border-color: $color-dark-green;
    }
  }
}

// ----- Offcanvas ----- 
.offcanvas {
  background-color: $color-white;
  bottom: 0;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  text-align: center;
  top: 0;
  transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
  visibility: hidden;
  @include translate(0, -1.875rem);
  width: 100%;
  z-index: $z-index-offcanvas;

  .offcanvas-expanded & {
    opacity: 1;
    visibility: visible;
    @include translate(0, 0);
  }
}

// ----- Offcanvas navigation ----- 
.offcanvas__nav {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: scroll;
  padding-bottom: 5rem;
  padding-top: 5rem;

  li {
    padding: 0;

    &::before {
      display: none;
    }

    + li {
      margin-top: 1.25rem;
    }
  }

  a {
    @include link-reset;
    color: $color-dark-green;
    font-family: $font-family-secondary;
    text-transform: uppercase;
  }
}

// ----- Offcanvas toggle ----- 
.offcanvas-toggle {
  cursor: pointer;
  height: calc(5.625rem - 1px);
  position: fixed;
  right: 0;
  top: 0;
  width: 5.625rem;
  @include translate3d(0, 0, 0);
  z-index: $z-index-offcanvas-toggle;

  span {
    background-color: $color-dark-green;
    display: block;
    height: 2px;
    left: 1.875rem;
    position: absolute;
    transition: top 0.2s, transform 0.2s, opacity 0.2s;
    width: 1.875rem;

    &:first-child {
      top: 2.125rem;
    }

    &:nth-child(2) {
      top: 2.6875rem;
    }

    &:last-child {
      top: 3.25rem;
    }
  }

  .offcanvas-expanded & {
    span {
      &:first-child,
      &:last-child {
        top: 2.6875rem;
      }

      &:first-child {
        @include rotate(45);
      }

      &:last-child {
        @include rotate(-45);
      }

      &:nth-child(2) {
        opacity: 0;
      }
    }
  }
}