iolovolio/components/header/header.scss

@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: $white;
  color: $black;
  z-index: 200;

  .header-wrapper {
    display: flex;
    position: relative;
    transition: min-height .4s;
    min-height: $header-height-mobile;

    .logo {
      position: absolute;
      top: 32px;
      left: 50%;
      height: 100%;
      max-height: 50px;
      margin: auto 0;
      transition: max-height .4s, top .3s;
      transform: translateX(-50%);
    }


    .ctas {
      position: absolute;
      top: 28px;
      left: 20px;
      font-size: $font-34;
      padding: 0 !important;
      color: $black;
      transition: top .3s;

      .cart-cta,
      .account-cta {
        position: relative;
        display: inline-flex;
        padding: 0 4px !important;
        color: $black;

        .counter {
          position: absolute;
          left: 10px;
          top: 14px;
          width: 22px;
          text-align: center;
          @include font-style($font-sans, 'semibold', $font-14);
        }

        .label {
          display: none;
          height: 15px;
          line-height: 15px;
          margin: 12px 0 auto 0;
          text-transform: uppercase;
          @include font-style($font-sans, 'regular', $font-12);
        }
      }

    }

    .hamburger {
      position: absolute;
      top: 32px;
      right: 20px;
      transition: top .3s;
    }

    .menu-container {
      margin: 60px 0 20px auto;

      .menu-label {
        //display: none;
        position: absolute;
        right: 35px;
        top: 60px;
        opacity: 0;
        transition: transform .4s, right .4s, opacity .4s;
        transform-origin: right;
        transform: rotate(-90deg);
        -webkit-backface-visibility: hidden;

        .label {
          @include font-style($font-serif, 'regular', $font-18);
          color: $brown;
          transition: font-size .4s;
          -webkit-backface-visibility: hidden;
        }
      }

      .menu {
        text-align: right;
        display: none;
        opacity: 0;
        padding-top: 20px;
        transition: opacity .4s;

        .item {
          padding: 0 5px;

          .label {
            @include font-style($font-serif, 'regular', $font-18);
            color: $olive-dark;
          }

          &:first-of-type {
            padding-top: 5px;
          }
        }
      }

      &.active {
        .menu-label {
          opacity: 1 !important;
          transform: rotate(0deg);
          right: 20px;
          .label {
            font-size:$font-14;
          }
        }

        .menu {
          opacity: 1;
        }

      }
    }
  }

  &.sticky {
    .header-wrapper {
      min-height: $header-height-mobile-sticky;
      .logo {
        max-height: 50px;
        top: 18px;
      }

      .ctas {
        top: 14px;
      }

      .hamburger {
        top: 18px;
      }

      .menu-container {
        .menu-label {
          opacity: 0;
        }
      }
    }
  }

  &.is-home {
    background: transparent;
    .header-wrapper {
      .logo {
        display: none;
      }
    }
  }
}




@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-header {
    .header-wrapper {
      min-height: $header-height;
      .logo {
        max-height: 70px;
      }

      .ctas {
        .cart-cta,
        .account-cta {
          .label {
            display: block;
          }
        }
      }

      .menu-container {
        .menu-label {
          //display: block;
          opacity: 1;
        }
      }
    }
    &.sticky {
      .header-wrapper {
        min-height: $header-height-sticky;
      }
    }
  }
}