Anastasia / cloud-bank

$MenuMobBg: $mainColor;
$MenuLneWrappBg:#fff;
$MenuLineBg: $mainColor;
//блок с полосками

//общая высота блока
$menu-mob-height:42;

//ширина и высота полосок
$menu-mob-div-width:22;
$menu-mob-div-height:2;
//отступ полосок
$menu-mob-div-margin-top:4;
////////////////////////
$allHeight:($menu-mob-div-height*3)+($menu-mob-div-margin-top*2);
$menu-mob-div-margin-topFirst:($menu-mob-height - $allHeight)/2;
$menu-mob-div-margin-topAll:$menu-mob-div-margin-topFirst + ($menu-mob-div-margin-top*2) + ($menu-mob-div-height*2);
///////////////////////
.menu_mob {
  position: relative;
  cursor: pointer;
  background: $MenuLneWrappBg;
  width: 40px;
  height:  $menu-mob-height + px;
  float: left;
  margin-top: 11px;
}

.menu_mob div {
  position: absolute;
  width: $menu-mob-div-width + px;
  height: $menu-mob-div-height + px;
  background: $MenuLineBg;
  top: 0;
  margin-top: $menu-mob-div-margin-topAll + px;
  left: 50%;
  margin-left: -($menu-mob-div-width/2) + px;
}
.menu_mob div:first-child {
  margin-top: $menu-mob-div-margin-topFirst + px;
}
.menu_mob div:first-child:before {
  width: 100%;
  height: 100%;
  position: absolute;
  background: $MenuLineBg;
  top: 0;
  left: 0;
  margin-top: $menu-mob-div-height + $menu-mob-div-margin-top + px;
  content: '';
}

//блок с скрытым меню

$menu-mob-hidden-width:340;
$menu-mob-hidden-bg: $MenuMobBg;
$menu-mob-hidden-li-border-bg:$mainTextColor;
$menu-mob-hidden-li-height:40;
$close-menu-mob:$link-color;

.mob-overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #000;
  @include Opacity(0.8);
  top: 0;
  left: 0;
  cursor: default;
}

#menu-mob-hidden {
  display: none;
  width: $menu-mob-hidden-width + px;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  margin-left: - $menu-mob-hidden-width +px;
  height: 100%;
  overflow-y: scroll;
  background: $menu-mob-hidden-bg;
  @include Transition(0.2);

  &.opens {
    display: block;
    &.visible {
      margin-left: 0;
    }
  }

  > ul {
    overflow: hidden;
  }
  ul {
    width: 100%;
    float: left;
    padding: 0;

    li {
      list-style: none;
      width: 100%;
      border-top: 1px solid $menu-mob-hidden-li-border-bg;

      float: left;

      &.bg-mob-menu {
        background: $menu-mob-hidden-li-border-bg;
      }

      &:first-child {

      }

      a {
        height: $menu-mob-hidden-li-height + px;
        display: block;
        line-height: $menu-mob-hidden-li-height + px;
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        float: left;
        width: 100%;
        position: relative;
        padding-left: 20px;
        @include Transition(0.05);
        &:active {
          @include Scale(1.05);
        }
      }

      ul {
        display: none;
        @include Transition(0.2);
        li {


          a {

          }
        }
      }
      &.has_ul {
        position: relative;

        a {
          padding-left: 20px;
        }
        ul {
          li {
            background: $footerTextColor;
            a {

              li {
              }
            }
          }
        }
        ul {
          li {
            a {
              padding-left: 30px;
            }
            ul {
              li {
                a {
                  padding-left: 45px;
                }
                ul {
                  li {
                    a {
                      padding-left: 50px;
                    }
                    ul {
                      li {
                        a {
                          padding-left: 60px;
                        }
                        ul {
                          li {
                            a {
                              padding-left: 70px;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &:before {
          @include ArrowMenu(9, 5);
          right: 15px;
          margin-top: 0;
          top: ($menu-mob-hidden-li-height - 4)/2 + px;
        }

        &.open {
          li {
            a {

            }
          }
        }
      }
    }

    .open {
      ul {
        li {

        }
      }
      &:before {
        @include Rotate(180);
      }
    }
    .open > {
      ul {
        display: block;
        li {
          a {

          }
        }
      }

    }

  }
}


.close-menu-mob {
  position: relative;
  width: 100%;
  height: $menu-mob-hidden-li-height + 12 + px;
  background: $close-menu-mob;
  text-transform: uppercase;
  color: #fff;
  line-height: $menu-mob-hidden-li-height + 12 + px;
  font-size: 18px;
  font-weight: 700;
  padding-left: 15px;
}
.close_mob {
  content: '';
  position: absolute;
  right: 10px;
  top: 0;
  width: 32px;
  height: 100%;
  cursor: pointer;

  &:before {
    font-family: FontAwesome;
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    color: #fff;
    line-height: $menu-mob-hidden-li-height + 12 + px;
    text-align: center;
    font-size: 21px;
    content: "\f00d";
    @include Transition(0.05);
  }
  &:active {
    &:before {
      @include Scale(1.35);
    }
  }

}
.mob-catalog-close {
  @extend .close-menu-mob;
  &:before {
    @extend .close_mob;
  }
}

.off-scroll {
  overflow-y: hidden;
  height: 100%;
  position: relative;
}

@media (max-width: 992px) {
  .off-scroll {
    position: fixed;
  }
}

@media (max-width: 767px) {
  .menu_mob {
    margin-top: 6px;
  }
}