hudozka/src/style/hmenu.scss

@import "variables";

$hmenu-margin: 6px;
$hmenu-icon-width: 32px;
$hmenu-icon-height: 32px;

.no-scroll {
  overflow: hidden;
}

.HMenu {
  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  height: 100%;
  padding: 0 0 $half-margin;

  position: relative;

  list-style: none;
}

.HMenu--folded.HMenu--closed {
  li {
    margin: 0;
  }
}

.HMenu--folded.HMenu--open {
  li {
    margin: 0 0 $single-margin;
  }
}

.HMenu--folded.HMenu--closed {
  justify-content: center;
}

.HMenu--folded.HMenu--closed .HMenu__item{
  display: none;
}

.HMenu--folded .HMenu__item.HMenu__item--cur{
  display: block;
}






.HMenu__toggle {
  position: absolute;
  left: 0;
  height: $hmenu-icon-height;

  margin: $hmenu-margin;

  display: flex;

  a {
    text-decoration: none;
    border: none;

    width: $hmenu-icon-width;
    height: $hmenu-icon-height;
    background-size: 100%;
  }

  a:hover {
    text-decoration: none;
    border: none;
  }
}

.HMenu--folded.HMenu--closed {
  .HMenu__toggle {
    a {
      background-image: url(/graphics/hmenu-b.png);
    }

    a:hover {
      background-image: url(/graphics/hmenu-hover-b.png);
    }
  }
}

.HMenu--folded.HMenu--open {
  .HMenu__toggle {
    a {
      background-image: url(/graphics/hmenu-close-b.png);
    }

    a:hover {
      background-image: url(/graphics/hmenu-close-hover-b.png);
    }
  }
}





.HMenu--unfolded {
  margin-left: 1em;

  li {
    margin: 0 1em .5em .5em;
  }

  .HMenu__toggle {
    display: none;
  }
}


.HMenu--folded.HMenu--open {
  z-index: 100;

  display: flex;
  align-items: center;

  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  //background-color: rgba(169, 144, 97, 0.95);
  background-color: rgba(255, 255, 255, 0.95);

  flex-direction: column;
  text-align: center;

  overflow-y: auto;

  font-size: 1.5rem;

  /*transition: opacity 0.5s ease-in-out;*/
  /*-webkit-transition: opacity 0.5s ease-in-out;*/
}



._HMenu--folded li:last-child {
  margin-bottom: 2em;
}

@media (max-width: $mobile-width) {
  .HMenu--folded .HMenu__item {
    max-width: 10em;
  }

  .HMenu--folded.HMenu--closed {
    .HMenu__toggle {
      a {
        background-image: url(/graphics/hmenu-b.png);
      }

      a:hover {
        background-image: url(/graphics/hmenu-b.png);
      }
    }
  }

  .HMenu--folded.HMenu--open {
    .HMenu__toggle {
      a {
        background-image: url(/graphics/hmenu-close-b.png);
      }

      a:hover {
        background-image: url(/graphics/hmenu-close-b.png);
      }
    }
  }
}