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: 50%;
      left: 50%;
      height: 100%;
      max-height: 50px;
      margin: auto 0;
      transition: max-height .4s;
      transform: translate(-50%, -50%);
    }


    .cart-cta {
      position: absolute;
      top: 20px;
      right: 70px;
      font-size: $font-34;
      padding: 0 4px !important;
      color: $black;

      .counter {
        position: absolute;
        left: 50%;
        top: 14px;
        transform: translateX(-50%);
        @include font-style($font-sans, 'semibold', $font-14);
      }
    }


    .hamburger {
      position: absolute;
      top: 20px;
      right: 20px;
    }

    .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;
      }
      .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;
      }
      .menu-container {
        .menu-label {
          //display: block;
          opacity: 1;
        }
      }
    }
    &.sticky {
      .header-wrapper {
        min-height: $header-height-sticky;
      }
    }
  }
}