Your IP : 216.73.216.84

Current Path : /home/helpink/www/media/astroid/assets/vendor/astroid/scss/
Upload File :
Current File : /home/helpink/www/media/astroid/assets/vendor/astroid/scss/_mobilemenu.scss

$burger-layer-width: 30px !default;
$close-btn-height: 50px !default;
$menu-indicator-width: 60px !default;

.astroid-mobilemenu {
   position: fixed;
   top: 0;
   left: 0;
   background-color: var(--as-mobilemenu-backgroundcolor);
   color: var(--as-mobilemenu-menu-text-color);
   z-index: $zindex-popover;
   visibility: hidden;
   height: 100%;
   width: 250px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   -webkit-transition: all .5s;
   transition: all .5s;
   max-width: 100vw !important;

   &.dir-right {
      right: 0;
      left: auto;
   }

   a small {
      display: block !important;
   }

   .burger-menu-button {
      padding: 10px;
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
   }
   .menu-indicator {
      color: var(--as-mobilemenu-menu-link-color);
   }
   .astroid-mobilemenu-container .astroid-mobilemenu-inner {
      .dropdown-menus {
         background-color: var(--as-mobilemenu-backgroundcolor);
      }
      .menu-item {
         a {
            color: var(--as-mobilemenu-menu-link-color);
            &:hover {
               background-color: var(--as-mobilemenu-hover-background-color);
            }
         }
         &.active {
            background-color: var(--as-mobilemenu-menu-active-bg-color);
            > a, > .nav-header {
               color: var(--as-mobilemenu-menu-active-link-color);
            }
         }
         &.nav-item-active {
            background-color: var(--as-mobilemenu-menu-active-bg-color);
            > a, > a + .menu-indicator {
               color: var(--as-mobilemenu-menu-active-link-color);
            }
         }
      }
   }
}

.offcanvas-right {
   .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus {
      left: auto;
      right: -100%;

      &.menu_open {
         left: auto;
         right: 0;
      }
   }
}

.astroid-mobilemenu-container .astroid-mobilemenu-inner {
   ul {
      padding: 0;
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: auto;

      >li.menu-item:first-child {
         border-top: 1px solid var(--bs-border-color);
      }

      li.menu-item.menu-go-back {
         margin-top: $close-btn-height;
         border-top: 0;
      }
   }

   .menu-item {
      border-bottom: 1px solid var(--bs-border-color);
      display: table;
      width: 100%;
   }

   .menu-item a,
   .menu-item span.separator,
   .menu-item span.nav-header {
      cursor: pointer;
      outline: 0;
      width: calc(100% - #{$menu-indicator-width});
      text-decoration: none;
      vertical-align: middle;
      display: table-cell;
      color: $black;
      padding: 15px;
   }

   .menu-item.divider.parent {
      position: relative;

      span.separator~.menu-indicator {
         &:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
         }

         border-left: 0;
      }
   }

   .menu-item.nav-item-divider.nav-item-parent {
      position: relative;

      a.item-link-separator~.menu-indicator {
         &:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
         }

         border-left: 0;
      }
   }

   .menu-item .menu-indicator {
      width: $menu-indicator-width;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
      border-left: 1px solid var(--bs-border-color);
      cursor: pointer;
   }

   .dropdown-menus {
      position: fixed;
      left: -150%;
      top: 0;
      height: 100vh;
      width: 100% !important;
      transition: all .5s;
      background-color: $white;

      .menu-indicator-back {
         text-align: left;
         width: 100%;
         cursor: pointer;
         display: block;
         padding: 15px;
         box-sizing: border-box;
      }

      .menu-indicator-back i {
         margin-right: 10px;
      }

      .dropdown-menus-item {
         width: 100%;
      }

      &.menu_open {
         left: 0;
         z-index: 1;
      }
   }
}

.burger-menu-button {
   text-align: right;
   line-height: 0;
   margin: 0;
}

.astroid-mobilemenu-open {

   .close-offcanvas,
   .close-offcanvas:hover {
      color: $black;
      display: inline-block;
      margin: 0;
      position: relative;
      right: 5px;
      box-sizing: content-box;
      z-index: 999999;
   }

   .burger-menu-button .inner,
   .burger-menu-button .inner::before,
   .burger-menu-button .inner::after {
      background-color: var(--as-mobilemenu-menu-active-icon-color);
      opacity: 1;
   }
}

body.astroid-mobilemenu-opened {
   max-height: 100vh;
   overflow: hidden;

   .astroid-mobilemenu-open {
      overflow-x: hidden;
   }

   .astroid-content:after {
      width: 100%;
      height: 100%;
      opacity: 1;
      -webkit-transition: opacity .5s;
      transition: opacity .5s;
   }

   .astroid-mobilemenu:after {
      width: 0;
      height: 0;
      opacity: 0;
      -webkit-transition: opacity .5s, width .1s .5s, height .1s .5s;
      transition: opacity .5s, width .1s .5s, height .1s .5s;
   }
}

.rtl {
   .astroid-mobilemenu-container .astroid-mobilemenu-inner {
      .dropdown-menus .menu-indicator-back {
         text-align: right;
         i {
            margin-left: 10px;
            margin-right: 0;
         }
         > i {
            transform: rotate(180deg);
         }
      }
      .menu-item .menu-indicator {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
      }
   }
}