@syncfusion/ej2-navigations 17.2.55-1205479 → 17.3.14-96615

package/styles/menu/_layout.scss

@@ -1,637 +1,638 @@
-@import '../context-menu/layout-mixin.scss';
-@include export-module('menu-layout') {
-  /*! menu layout */
-  .e-menu-wrapper {
-    border: $menu-ul-border;
-    border-radius: $cmenu-ul-border-radius;
-    display: inline-block;
-    line-height: 0;
-
-    @at-root {
-      & ul {
-        @include ul-layout;
-        font-size: $menu-font-size;
-        padding: $menu-ul-padding;
-        text-align: left;
-        white-space: nowrap;
-
-        &.e-vertical {
-          min-width: 120px;
-
-          & .e-menu-item {
-            display: list-item;
-
-            &.e-blankicon {
-              padding-left: $menu-blank-icon;
-            }
-          }
-
-          & .e-separator {
-            @include separator-size;
-          }
-        }
-
-        &.e-menu {
-          display: inline-block;
-
-          &:not(.e-vertical) {
-            padding: $menu-ul-header-padding;
-
-            & .e-separator {
-              border-right-style: $menu-li-border-style;
-              border-right-width: $menu-li-border-width;
-              padding: $menu-separator-padding;
-            }
-          }
-        }
-
-        & .e-menu-item  {
-          @include li-layout;
-          display: inline-flex;
-          height: $menu-li-height;
-          line-height: $menu-li-height;
-          padding: $menu-li-padding;
-          vertical-align: top;
-          white-space: nowrap;
-
-          & .e-menu-icon {
-            font-size: $menu-icon-font-size;
-            height: auto;
-            line-height: $menu-li-height;
-            margin-right: $menu-icon-margin-right;
-            text-align: center;
-            width: $menu-icon-width;
-          }
-
-          & .e-caret {
-            font-size: $menu-caret-font-size;
-            height: auto;
-            line-height: $menu-li-height;
-            position: absolute;
-            right: $menu-caret-right;
-            width: auto;
-          }
-
-          &.e-menu-caret-icon {
-            padding-right: $menu-caret-li-padding;
-          }
-
-          &.e-disabled {
-            cursor: auto;
-            opacity: $menu-disable-opacity;
-            pointer-events: none;
-          }
-        }
-      }
-
-      & .e-ul {
-        @include ul-size;
-        min-width: $cmenu-min-width;
-
-        & .e-menu-item {
-          @include li-size;
-          display: list-item;
-
-          & .e-caret {
-            font-size: $submenu-caret-font-size;
-          }
-
-          & .e-menu-icon {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    &.e-menu-icon-right {
-      & .e-menu-header .e-menu-icon {
-        float: right;
-      }
-
-      & .e-menu-header .e-menu-title {
-        padding: $menu-header-icon-padding;
-      }
-    }
-
-    & .e-menu-header {
-      display: none;
-      font-family: $font-family;
-      font-size: $menu-icon-font-size;
-      font-weight: $font-weight;
-      height: $menu-li-height;
-      line-height: $menu-li-height;
-      text-align: left;
-      white-space: nowrap;
-
-      & .e-menu-title,
-      & .e-menu-icon {
-        display: inline-block;
-        line-height: inherit;
-      }
-
-      & .e-menu-icon {
-        cursor: pointer;
-        float: left;
-        outline: none;
-        padding: $menu-header-icon-padding;
-      }
-    }
-
-    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
-      @if $skin-name == 'bootstrap4' {
-        padding: 4px $menu-hscroll-nav-size;
-      }
-      @else {
-        padding: 0 $menu-hscroll-nav-size;
-      }
-
-      & .e-scroll-nav {
-        width: $menu-hscroll-nav-size;
-
-        &:focus,
-        &:hover {
-          border: 0;
-        }
-
-        &.e-scroll-right-nav {
-          border-left: $menu-srollbar-ul-border;
-        }
-
-        &.e-scroll-left-nav {
-          border-right: $menu-srollbar-ul-border;
-        }
-      }
-
-      & .e-hscroll-bar {
-        overflow-y: hidden;
-      }
-    }
-
-    & .e-scroll-nav .e-nav-arrow {
-      font-size: $menu-scroll-nav-icon-size;
-
-      &.e-nav-left-arrow {
-        transform: rotate(180deg);
-      }
-
-      &.e-nav-up-arrow {
-        transform: rotate(180deg);
-      }
-    }
-
-    &.e-rtl .e-scroll-nav .e-nav-arrow {
-      &.e-nav-left-arrow {
-        transform: rotate(0deg);
-      }
-
-      &.e-nav-right-arrow {
-        transform: rotate(180deg);
-      }
-    }
-
-    &.e-popup.e-menu-popup {
-      border: $cmenu-ul-border;
-      box-shadow: $cmenu-sub-ul-box-shadow;
-      overflow: hidden;
-      position: absolute;
-    }
-
-    & .e-menu-vscroll.e-vscroll {
-      &:not(.e-scroll-device) {
-        padding: $menu-vscroll-nav-size 0;
-      }
-
-      &.e-scroll-device {
-        & .e-scroll-nav.e-scroll-down-nav {
-          transform: none;
-          width: 100%;
-
-          & .e-nav-down-arrow {
-            transform: none;
-          }
-        }
-      }
-
-      & .e-vscroll-bar {
-        height: 100%;
-        width: inherit;
-
-        & .e-vscroll-content {
-          width: inherit;
-        }
-      }
-
-      & .e-scroll-nav {
-        height: $menu-vscroll-nav-size;
-      }
-    }
-
-    &.e-scrollable {
-      display: block;
-
-      & .e-menu {
-        display: block;
-        overflow: auto;
-      }
-    }
-  }
-
-  .e-rtl.e-menu-wrapper ul {
-    & .e-menu-item {
-      @include rtl-li-layout;
-      text-align: right;
-
-      & .e-menu-icon {
-        margin-left: $menu-icon-margin-right;
-      }
-
-      & .e-caret {
-        left: $menu-caret-right;
-      }
-
-      &.e-menu-caret-icon {
-        padding-left: $menu-caret-li-padding;
-        padding-right: $menu-li-right-padding;
-      }
-    }
-
-    &.e-vertical {
-      & .e-menu-item {
-        &.e-blankicon {
-          padding-right: $menu-blank-icon;
-        }
-      }
-    }
-
-    &.e-ul {
-      & .e-menu-item {
-        @include rtl-li-size;
-      }
-    }
-  }
-
-  .e-bigger .e-menu-wrapper ul,
-  .e-bigger.e-menu-wrapper ul {
-    font-size: $menu-bigger-font-size;
-
-    & .e-menu-item {
-      height: $menu-bigger-li-height;
-      line-height: $menu-bigger-li-height;
-      padding: $menu-bigger-li-padding;
-
-      & .e-menu-icon {
-        font-size: $menu-icon-bigger-font-size;
-        line-height: $menu-bigger-li-height;
-        margin-right: $menu-bigger-icon-margin-right;
-        width: $menu-icon-width;
-      }
-
-      &.e-menu-caret-icon {
-        padding-right: $menu-bigger-caret-li-padding;
-      }
-
-      & .e-caret {
-        font-size: $menu-bigger-caret-font-size;
-        line-height: $menu-bigger-li-height;
-        right: $menu-bigger-caret-right;
-      }
-
-      &.e-separator {
-        padding: $menu-separator-bigger-padding;
-      }
-    }
-
-    &.e-menu {
-      &:not(.e-vertical) {
-        padding: $menu-ul-bigger-header-padding;
-      }
-
-      &.e-vertical {
-        & .e-menu-item {
-          &.e-separator {
-            @include separator-bigger-size;
-          }
-
-          &.e-blankicon {
-            padding-left: $menu-blank-icon-bigger;
-          }
-        }
-      }
-    }
-
-    &.e-ul {
-      @include bigger-ul-size;
-      max-width: $cmenu-bigger-max-width;
-      min-width: $cmenu-bigger-min-width;
-
-      & .e-menu-item  {
-        @include bigger-li-size;
-        padding: $cmenu-li-padding;
-
-        & .e-caret {
-          font-size: $submenu-bigger-caret-font-size;
-          right: $cmenu-caret-right;
-        }
-
-        &.e-menu-caret-icon {
-          padding-right: $cmenu-caret-li-padding;
-        }
-
-        & .e-menu-icon {
-          margin-right: $cmenu-icon-margin-right;
-          width: auto;
-        }
-      }
-    }
-  }
-
-  .e-bigger .e-menu-wrapper,
-  .e-bigger.e-menu-wrapper {
-    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
-      padding: 0 $menu-bigger-hscroll-nav-size;
-
-      & .e-scroll-nav {
-        width: $menu-bigger-hscroll-nav-size;
-      }
-    }
-
-    & .e-menu-vscroll.e-vscroll {
-      &:not(.e-scroll-device) {
-        padding: $menu-bigger-vscroll-nav-size 0;
-      }
-
-      & .e-scroll-nav {
-        height: $menu-bigger-vscroll-nav-size;
-      }
-    }
-
-    &.e-menu-popup {
-      box-shadow: $cmenu-parent-ul-box-shadow;
-    }
-
-    & .e-scroll-nav .e-icons {
-      font-size: $menu-bigger-scroll-nav-icon-size;
-    }
-  }
-
-  .e-bigger .e-rtl.e-menu-wrapper ul,
-  .e-bigger.e-rtl.e-menu-wrapper ul {
-    & .e-menu-item {
-      text-align: right;
-
-      & .e-menu-icon {
-        margin-left: $menu-bigger-icon-margin-right;
-        margin-right: 0;
-      }
-
-      & .e-caret {
-        left: $menu-bigger-caret-right;
-        margin-left: 0;
-        right: auto;
-      }
-
-      &.e-menu-caret-icon {
-        padding-left: $menu-bigger-caret-li-padding;
-        padding-right: $menu-bigger-li-right-padding;
-      }
-    }
-
-    &.e-vertical {
-      & .e-menu-item {
-        &.e-blankicon {
-          padding-right: $menu-blank-icon-bigger;
-        }
-      }
-    }
-
-    &.e-ul {
-      & .e-menu-item {
-        & .e-menu-icon {
-          margin-left: $cmenu-icon-margin-right;
-        }
-
-        & .e-caret {
-          left: $cmenu-caret-right;
-        }
-
-        &.e-menu-caret-icon {
-          padding-left: $cmenu-caret-li-padding;
-          padding-right: $cmenu-li-right-padding;
-        }
-
-        &.e-blankicon {
-          @include bigger-rtl-blank-icon;
-        }
-      }
-    }
-  }
-
-  .e-menu-wrapper.e-hamburger {
-    border: 0;
-    display: block;
-    position: relative;
-
-    & .e-menu-header:not(.e-vertical) {
-      border: $menu-ul-border;
-      display: block;
-    }
-
-    & .e-popup.e-menu-popup {
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      display: block;
-      position: relative;
-      width: 100%;
-    }
-
-    & ul {
-      &.e-menu {
-        border: $menu-ul-border;
-        overflow-y: auto;
-        width: 100%;
-
-        &.e-menu-parent.e-hide-menu {
-          display: none;
-        }
-
-        & .e-menu-item {
-          text-indent: $menu-li-text-indent;
-
-          &.e-blankicon {
-            text-indent: $menu-li-text-indent + $menu-icon-font-size + $menu-icon-margin-right;
-          }
-
-          & .e-menu-icon {
-            display: inline;
-            text-indent: 0;
-          }
-
-          // sass-lint:disable-all
-          & .e-caret {
-            -webkit-transition: -webkit-transform .3s ease-in-out;
-            transition: -webkit-transform .3s ease-in-out;
-            transition: transform .3s ease-in-out;
-            text-indent: 0;
-          }
-
-          &.e-selected > .e-caret {
-            -webkit-transform: rotate(-180deg);
-            transform: rotate(-180deg);
-          }
-          // sass-lint:enable-all
-        }
-      }
-
-      &.e-menu:not(.e-vertical) {
-        border-top: 0;
-        display: block;
-        padding: 0;
-        position: absolute;
-      }
-
-      &.e-ul {
-        font-size: $menu-font-size;
-        padding: 0;
-
-        & .e-menu-item {
-          line-height: $menu-li-height;
-          text-indent: inherit;
-
-          &.e-blankicon {
-            padding: 0;
-            text-indent: inherit;
-          }
-
-          & .e-caret {
-            font-size: $menu-caret-font-size;
-            right: $menu-caret-right;
-          }
-        }
-      }
-
-      & .e-menu-item {
-        display: list-item;
-        height: auto;
-        padding: 0;
-
-        &.e-menu-caret-icon {
-          padding: 0;
-        }
-
-        & .e-menu-url {
-          display: inline-block;
-          text-indent: 0;
-          width: 100%;
-        }
-
-        &.e-blankicon {
-          padding: 0;
-        }
-
-        &.e-separator {
-          @include separator-size;
-        }
-      }
-    }
-  }
-
-  .e-rtl.e-menu-wrapper.e-hamburger ul {
-    & .e-menu-item {
-      & .e-menu-caret-icon {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      & .e-menu-icon {
-        margin-left: 0;
-        text-indent: inherit;
-      }
-
-      & .e-caret {
-        left: $menu-caret-right;
-        right: auto;
-      }
-    }
-  }
-
-  .e-bigger .e-menu-wrapper.e-hamburger  ul,
-  .e-bigger.e-menu-wrapper.e-hamburger  ul {
-    & .e-ul {
-      max-width: 100%;
-
-      & .e-menu-item {
-        height: auto;
-        line-height: $menu-bigger-li-height;
-        padding: 0;
-      }
-    }
-  }
-
-  .e-bigger .e-menu-wrapper.e-hamburger,
-  .e-bigger.e-menu-wrapper.e-hamburger {
-    & .e-menu-header {
-      font-size: $menu-icon-bigger-font-size;
-      height: $menu-bigger-li-height;
-      line-height: $menu-bigger-li-height;
-    }
-
-    & ul.e-menu {
-      & .e-menu-item {
-        text-indent: $menu-bigger-li-text-indent;
-
-        &.e-blankicon {
-          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
-        }
-      }
-
-      & .e-ul {
-        font-size: $menu-bigger-font-size;
-
-        & .e-menu-item {
-          text-indent: inherit;
-
-          & .e-caret {
-            font-size: $menu-bigger-caret-font-size;
-            right: $menu-bigger-caret-right;
-          }
-        }
-      }
-    }
-  }
-
-  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
-  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger {
-    & ul.e-menu {
-      & .e-menu-item {
-        padding: 0;
-        text-indent: $menu-bigger-li-text-indent;
-
-        &.e-blankicon {
-          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
-        }
-
-        & .e-menu-icon {
-          margin-left: 0;
-          text-indent: inherit;
-        }
-
-        &.e-menu-caret-icon {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        & .e-caret {
-          left: $menu-caret-right;
-          right: auto;
-        }
-      }
-
-      & .e-ul {
-        & .e-menu-item {
-          text-indent: inherit;
-        }
-      }
-    }
-  }
-}
+@import '../context-menu/layout-mixin.scss';
+@include export-module('menu-layout') {
+  /*! menu layout */
+  .e-menu-wrapper {
+    border: $menu-ul-border;
+    border-radius: $cmenu-ul-border-radius;
+    display: inline-block;
+    line-height: 0;
+
+    @at-root {
+      & ul {
+        @include ul-layout;
+        font-size: $menu-font-size;
+        padding: $menu-ul-padding;
+        text-align: left;
+        white-space: nowrap;
+
+        &.e-vertical {
+          min-width: 120px;
+
+          & .e-menu-item {
+            display: list-item;
+
+            &.e-blankicon {
+              padding-left: $menu-blank-icon;
+            }
+          }
+
+          & .e-separator {
+            @include separator-size;
+          }
+        }
+
+        &.e-menu {
+          display: inline-block;
+
+          &:not(.e-vertical) {
+            padding: $menu-ul-header-padding;
+
+            & .e-separator {
+              border-right-style: $menu-li-border-style;
+              border-right-width: $menu-li-border-width;
+              padding: $menu-separator-padding;
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          @include li-layout;
+          display: inline-flex;
+          height: $menu-li-height;
+          line-height: $menu-li-height;
+          padding: $menu-li-padding;
+          vertical-align: top;
+          white-space: nowrap;
+
+          & .e-menu-icon {
+            font-size: $menu-icon-font-size;
+            height: auto;
+            line-height: $menu-li-height;
+            margin-right: $menu-icon-margin-right;
+            text-align: center;
+            width: $menu-icon-width;
+          }
+
+          & .e-caret {
+            font-size: $menu-caret-font-size;
+            height: auto;
+            line-height: $menu-li-height;
+            position: absolute;
+            right: $menu-caret-right;
+            width: auto;
+          }
+
+          &.e-menu-caret-icon {
+            padding-right: $menu-caret-li-padding;
+          }
+
+          &.e-disabled {
+            cursor: auto;
+            opacity: $menu-disable-opacity;
+            pointer-events: none;
+          }
+        }
+      }
+
+      & .e-ul {
+        @include ul-size;
+        min-width: $cmenu-min-width;
+
+        & .e-menu-item {
+          @include li-size;
+          display: list-item;
+
+          & .e-caret {
+            font-size: $submenu-caret-font-size;
+          }
+
+          & .e-menu-icon {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    &.e-menu-icon-right {
+      & .e-menu-header .e-menu-icon {
+        float: right;
+      }
+
+      & .e-menu-header .e-menu-title {
+        padding: $menu-header-icon-padding;
+      }
+    }
+
+    & .e-menu-header {
+      display: none;
+      font-family: $font-family;
+      font-size: $menu-icon-font-size;
+      font-weight: $font-weight;
+      height: $menu-li-height;
+      line-height: $menu-li-height;
+      text-align: left;
+      white-space: nowrap;
+
+      & .e-menu-title,
+      & .e-menu-icon {
+        display: inline-block;
+        line-height: inherit;
+      }
+
+      & .e-menu-icon {
+        cursor: pointer;
+        float: left;
+        outline: none;
+        padding: $menu-header-icon-padding;
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
+      @if $skin-name == 'bootstrap4' {
+        padding: 4px $menu-hscroll-nav-size;
+      }
+      @else {
+        padding: 0 $menu-hscroll-nav-size;
+      }
+
+      & .e-scroll-nav {
+        width: $menu-hscroll-nav-size;
+
+        &:focus,
+        &:hover {
+          border: 0;
+        }
+
+        &.e-scroll-right-nav {
+          border-left: $menu-srollbar-ul-border;
+        }
+
+        &.e-scroll-left-nav {
+          border-right: $menu-srollbar-ul-border;
+        }
+      }
+
+      & .e-hscroll-bar {
+        overflow-y: hidden;
+      }
+    }
+
+    & .e-scroll-nav .e-nav-arrow {
+      font-size: $menu-scroll-nav-icon-size;
+
+      &.e-nav-left-arrow {
+        transform: rotate(180deg);
+      }
+
+      &.e-nav-up-arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.e-rtl .e-scroll-nav .e-nav-arrow {
+      &.e-nav-left-arrow {
+        transform: rotate(0deg);
+      }
+
+      &.e-nav-right-arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.e-popup.e-menu-popup {
+      border: $cmenu-ul-border;
+      box-shadow: $cmenu-sub-ul-box-shadow;
+      overflow: hidden;
+      position: absolute;
+    }
+
+    & .e-menu-vscroll.e-vscroll {
+      &:not(.e-scroll-device) {
+        padding: $menu-vscroll-nav-size 0;
+      }
+
+      &.e-scroll-device {
+        & .e-scroll-nav.e-scroll-down-nav {
+          transform: none;
+          width: 100%;
+
+          & .e-nav-down-arrow {
+            transform: none;
+          }
+        }
+      }
+
+      & .e-vscroll-bar {
+        height: 100%;
+        width: inherit;
+
+        & .e-vscroll-content {
+          width: inherit;
+        }
+      }
+
+      & .e-scroll-nav {
+        height: $menu-vscroll-nav-size;
+      }
+    }
+
+    &.e-scrollable {
+      display: block;
+
+      & .e-menu {
+        display: block;
+        overflow: auto;
+      }
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul {
+    & .e-menu-item {
+      @include rtl-li-layout;
+      text-align: right;
+
+      & .e-menu-icon {
+        margin-left: $menu-icon-margin-right;
+      }
+
+      & .e-caret {
+        left: $menu-caret-right;
+      }
+
+      &.e-menu-caret-icon {
+        padding-left: $menu-caret-li-padding;
+        padding-right: $menu-li-right-padding;
+      }
+    }
+
+    &.e-vertical {
+      & .e-menu-item {
+        &.e-blankicon {
+          padding-right: $menu-blank-icon;
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-menu-item {
+        @include rtl-li-size;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper ul,
+  .e-bigger.e-menu-wrapper ul {
+    font-size: $menu-bigger-font-size;
+
+    & .e-menu-item {
+      height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-height;
+      padding: $menu-bigger-li-padding;
+
+      & .e-menu-icon {
+        font-size: $menu-icon-bigger-font-size;
+        line-height: $menu-bigger-li-height;
+        margin-right: $menu-bigger-icon-margin-right;
+        width: $menu-icon-width;
+      }
+
+      &.e-menu-caret-icon {
+        padding-right: $menu-bigger-caret-li-padding;
+      }
+
+      & .e-caret {
+        font-size: $menu-bigger-caret-font-size;
+        line-height: $menu-bigger-li-height;
+        right: $menu-bigger-caret-right;
+      }
+
+      &.e-separator {
+        padding: $menu-separator-bigger-padding;
+      }
+    }
+
+    &.e-menu {
+      &:not(.e-vertical) {
+        padding: $menu-ul-bigger-header-padding;
+      }
+
+      &.e-vertical {
+        & .e-menu-item {
+          &.e-separator {
+            @include separator-bigger-size;
+          }
+
+          &.e-blankicon {
+            padding-left: $menu-blank-icon-bigger;
+          }
+        }
+      }
+    }
+
+    &.e-ul {
+      @include bigger-ul-size;
+      max-width: $cmenu-bigger-max-width;
+      min-width: $cmenu-bigger-min-width;
+
+      & .e-menu-item  {
+        @include bigger-li-size;
+        padding: $cmenu-li-padding;
+
+        & .e-caret {
+          font-size: $submenu-bigger-caret-font-size;
+          right: $cmenu-caret-right;
+        }
+
+        &.e-menu-caret-icon {
+          padding-right: $cmenu-caret-li-padding;
+        }
+
+        & .e-menu-icon {
+          margin-right: $cmenu-icon-margin-right;
+          width: auto;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper,
+  .e-bigger.e-menu-wrapper {
+    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
+      padding: 0 $menu-bigger-hscroll-nav-size;
+
+      & .e-scroll-nav {
+        width: $menu-bigger-hscroll-nav-size;
+      }
+    }
+
+    & .e-menu-vscroll.e-vscroll {
+      &:not(.e-scroll-device) {
+        padding: $menu-bigger-vscroll-nav-size 0;
+      }
+
+      & .e-scroll-nav {
+        height: $menu-bigger-vscroll-nav-size;
+      }
+    }
+
+    &.e-menu-popup {
+      box-shadow: $cmenu-parent-ul-box-shadow;
+    }
+
+    & .e-scroll-nav .e-icons {
+      font-size: $menu-bigger-scroll-nav-icon-size;
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper ul,
+  .e-bigger.e-rtl.e-menu-wrapper ul {
+    & .e-menu-item {
+      text-align: right;
+
+      & .e-menu-icon {
+        margin-left: $menu-bigger-icon-margin-right;
+        margin-right: 0;
+      }
+
+      & .e-caret {
+        left: $menu-bigger-caret-right;
+        margin-left: 0;
+        right: auto;
+      }
+
+      &.e-menu-caret-icon {
+        padding-left: $menu-bigger-caret-li-padding;
+        padding-right: $menu-bigger-li-right-padding;
+      }
+    }
+
+    &.e-vertical {
+      & .e-menu-item {
+        &.e-blankicon {
+          padding-right: $menu-blank-icon-bigger;
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-menu-item {
+        & .e-menu-icon {
+          margin-left: $cmenu-icon-margin-right;
+        }
+
+        & .e-caret {
+          left: $cmenu-caret-right;
+        }
+
+        &.e-menu-caret-icon {
+          padding-left: $cmenu-caret-li-padding;
+          padding-right: $cmenu-li-right-padding;
+        }
+
+        &.e-blankicon {
+          @include bigger-rtl-blank-icon;
+        }
+      }
+    }
+  }
+
+  .e-menu-wrapper.e-hamburger {
+    border: 0;
+    display: block;
+    position: relative;
+
+    & .e-menu-header:not(.e-vertical) {
+      border: $menu-ul-border;
+      display: block;
+    }
+
+    & .e-popup.e-menu-popup {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      display: block;
+      position: relative;
+      width: 100%;
+    }
+
+    & ul {
+      &.e-menu {
+        border: $menu-ul-border;
+        overflow-y: auto;
+        width: 100%;
+
+        &.e-menu-parent.e-hide-menu {
+          display: none;
+        }
+
+        & .e-menu-item {
+          text-indent: $menu-li-text-indent;
+
+          &.e-blankicon {
+            text-indent: $menu-li-text-indent + $menu-icon-font-size + $menu-icon-margin-right;
+          }
+
+          & .e-menu-icon {
+            display: inline;
+            text-indent: 0;
+          }
+
+          // sass-lint:disable-all
+          & .e-caret {
+            -webkit-transition: -webkit-transform .3s ease-in-out;
+            transition: -webkit-transform .3s ease-in-out;
+            transition: transform .3s ease-in-out;
+            text-indent: 0;
+          }
+
+          &.e-selected > .e-caret {
+            -webkit-transform: rotate(-180deg);
+            transform: rotate(-180deg);
+          }
+          // sass-lint:enable-all
+        }
+      }
+
+      &.e-menu:not(.e-vertical) {
+        border-top: 0;
+        display: block;
+        padding: 0;
+        position: absolute;
+      }
+
+      &.e-ul {
+        font-size: $menu-font-size;
+        padding: 0;
+
+        & .e-menu-item {
+          line-height: $menu-li-height;
+          text-indent: inherit;
+
+          &.e-blankicon {
+            padding: 0;
+            text-indent: inherit;
+          }
+
+          & .e-caret {
+            font-size: $menu-caret-font-size;
+            right: $menu-caret-right;
+          }
+        }
+      }
+
+      & .e-menu-item {
+        display: list-item;
+        height: auto;
+        padding: 0;
+
+        &.e-menu-caret-icon {
+          padding: 0;
+        }
+
+        & .e-menu-url {
+          display: inline-block;
+          min-width: 120px;
+          text-indent: 0;
+          width: 100%;
+        }
+
+        &.e-blankicon {
+          padding: 0;
+        }
+
+        &.e-separator {
+          @include separator-size;
+        }
+      }
+    }
+  }
+
+  .e-rtl.e-menu-wrapper.e-hamburger ul {
+    & .e-menu-item {
+      & .e-menu-caret-icon {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      & .e-menu-icon {
+        margin-left: 0;
+        text-indent: inherit;
+      }
+
+      & .e-caret {
+        left: $menu-caret-right;
+        right: auto;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger  ul,
+  .e-bigger.e-menu-wrapper.e-hamburger  ul {
+    & .e-ul {
+      max-width: 100%;
+
+      & .e-menu-item {
+        height: auto;
+        line-height: $menu-bigger-li-height;
+        padding: 0;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger,
+  .e-bigger.e-menu-wrapper.e-hamburger {
+    & .e-menu-header {
+      font-size: $menu-icon-bigger-font-size;
+      height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-height;
+    }
+
+    & ul.e-menu {
+      & .e-menu-item {
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+      }
+
+      & .e-ul {
+        font-size: $menu-bigger-font-size;
+
+        & .e-menu-item {
+          text-indent: inherit;
+
+          & .e-caret {
+            font-size: $menu-bigger-caret-font-size;
+            right: $menu-bigger-caret-right;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger {
+    & ul.e-menu {
+      & .e-menu-item {
+        padding: 0;
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+
+        & .e-menu-icon {
+          margin-left: 0;
+          text-indent: inherit;
+        }
+
+        &.e-menu-caret-icon {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        & .e-caret {
+          left: $menu-caret-right;
+          right: auto;
+        }
+      }
+
+      & .e-ul {
+        & .e-menu-item {
+          text-indent: inherit;
+        }
+      }
+    }
+  }
+}