From c91069405f60f46c63589c7de69d22577f71981b Mon Sep 17 00:00:00 2001
From: Fred Heusschen <fredheusschen@hotmail.com>
Date: Sun, 17 Jan 2021 17:01:37 +0100
Subject: [PATCH] package update

---
 dist/mmenu-light.css                          |   2 +-
 src/modules/offcanvas-drawer/_index.scss      | 161 +++++-----
 .../sliding-panels-navigation/_index.scss     | 295 +++++++++---------
 3 files changed, 227 insertions(+), 231 deletions(-)

diff --git a/dist/mmenu-light.css b/dist/mmenu-light.css
index 15eedce..8a1655f 100644
--- a/dist/mmenu-light.css
+++ b/dist/mmenu-light.css
@@ -7,4 +7,4 @@
  *
  * License: CC-BY-4.0
  * http://creativecommons.org/licenses/by/4.0/
- */:root{--mm-ocd-width:80%;--mm-ocd-min-width:200px;--mm-ocd-max-width:440px}body.mm-ocd-opened{overflow-y:hidden;-ms-scroll-chaining:none;overscroll-behavior:none}.mm-ocd{position:fixed;top:0;right:0;bottom:100%;left:0;z-index:9999;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:contain;background:rgba(0,0,0,0);-webkit-transition-property:bottom,background-color;-o-transition-property:bottom,background-color;transition-property:bottom,background-color;-webkit-transition-duration:0s,.3s;-o-transition-duration:0s,.3s;transition-duration:0s,.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:.45s,.15s;-o-transition-delay:.45s,.15s;transition-delay:.45s,.15s}.mm-ocd--open{bottom:0;background:rgba(0,0,0,.25);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-ocd__content{position:absolute;top:0;bottom:0;z-index:2;width:80%;width:var(--mm-ocd-width);min-width:200px;min-width:var(--mm-ocd-min-width);max-width:440px;max-width:var(--mm-ocd-max-width);background:#fff;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.mm-ocd--left .mm-ocd__content{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mm-ocd--right .mm-ocd__content{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mm-ocd--open .mm-ocd__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-ocd__backdrop{position:absolute;top:0;bottom:0;z-index:3;width:calc(100% - 80%);width:calc(100% - var(--mm-ocd-width));min-width:calc(100% - 440px);min-width:calc(100% - var(--mm-ocd-max-width));max-width:calc(100% - 200px);max-width:calc(100% - var(--mm-ocd-min-width));background:rgba(3,2,1,0)}.mm-ocd--left .mm-ocd__backdrop{right:0}.mm-ocd--right .mm-ocd__backdrop{left:0}.mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{display:block;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:root{--mm-spn-item-height:50px;--mm-spn-item-indent:20px;--mm-spn-line-height:24px}.mm-spn{width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;overflow:hidden;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.mm-spn ul{-webkit-overflow-scrolling:touch;position:fixed;top:0;left:100%;bottom:0;z-index:2;width:130%;padding-right:30%;line-height:24px;line-height:var(--mm-spn-line-height);overflow:visible;overflow-y:auto;background:inherit;-webkit-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;transition:left .3s ease 0s;cursor:default}.mm-spn ul:after{content:'';display:block;height:50px;height:var(--mm-spn-item-height)}.mm-spn>ul{left:0}.mm-spn ul.mm-spn--open{left:0}.mm-spn ul.mm-spn--parent{left:-30%;overflow-y:hidden}.mm-spn li{position:relative;background:inherit;cursor:pointer}.mm-spn li:before{content:'';display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);right:25px;right:calc(var(--mm-spn-item-height)/ 2);z-index:0;width:10px;height:10px;border-top:2px solid;border-right:2px solid;-webkit-transform:rotate(45deg) translate(0,-50%);-ms-transform:rotate(45deg) translate(0,-50%);transform:rotate(45deg) translate(0,-50%);opacity:.4}.mm-spn li:after{content:'';display:block;margin-left:20px;margin-left:var(--mm-spn-item-indent);border-top:1px solid;opacity:.15}.mm-spn a,.mm-spn span{position:relative;z-index:1;padding:13px 20px;padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)}.mm-spn a{background:inherit;color:inherit;text-decoration:none}.mm-spn a:not(:last-child){width:calc(100% - 50px);width:calc(100% - var(--mm-spn-item-height))}.mm-spn a:not(:last-child):after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;border-right:1px solid;opacity:.15}.mm-spn span{background:0 0}.mm-spn.mm-spn--navbar{cursor:pointer}.mm-spn.mm-spn--navbar:before{content:'';display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);left:20px;left:var(--mm-spn-item-indent);width:10px;height:10px;margin-top:2px;border-top:2px solid;border-left:2px solid;-webkit-transform:rotate(-45deg) translate(50%,-50%);-ms-transform:rotate(-45deg) translate(50%,-50%);transform:rotate(-45deg) translate(50%,-50%);opacity:.4}.mm-spn.mm-spn--navbar.mm-spn--main{cursor:default}.mm-spn.mm-spn--navbar.mm-spn--main:before{content:none;display:none}.mm-spn.mm-spn--navbar:after{content:attr(data-mm-spn-title);display:block;position:absolute;top:0;left:0;right:0;height:50px;height:var(--mm-spn-item-height);padding:0 40px;padding:0 calc(var(--mm-spn-item-indent) * 2);line-height:50px;line-height:var(--mm-spn-item-height);opacity:.4;text-align:center;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.mm-spn.mm-spn--navbar.mm-spn--main:after{padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--navbar ul{top:51px;top:calc(var(--mm-spn-item-height) + 1px)}.mm-spn.mm-spn--navbar ul:before{content:'';display:block;position:fixed;top:inherit;z-index:2;width:100%;border-top:1px solid currentColor;opacity:.15}.mm-spn.mm-spn--light{color:#444;background:#f3f3f3}.mm-spn.mm-spn--dark{color:#ddd;background:#333}.mm-spn.mm-spn--vertical{overflow-y:auto}.mm-spn.mm-spn--vertical ul{width:100%;padding-right:0;position:static}.mm-spn.mm-spn--vertical ul ul{display:none;padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--vertical ul ul:after{height:25px;height:calc(var(--mm-spn-item-height)/ 2)}.mm-spn.mm-spn--vertical ul.mm-spn--open{display:block}.mm-spn.mm-spn--vertical li.mm-spn--open:before{-webkit-transform:rotate(135deg) translate(-50%,0);-ms-transform:rotate(135deg) translate(-50%,0);transform:rotate(135deg) translate(-50%,0)}.mm-spn.mm-spn--vertical ul ul li:last-child:after{content:none;display:none}
\ No newline at end of file
+ */:root{--mm-ocd-width:80%;--mm-ocd-min-width:200px;--mm-ocd-max-width:440px}body.mm-ocd-opened{overflow-y:hidden;-ms-scroll-chaining:none;overscroll-behavior:none}.mm-ocd{position:fixed;top:0;right:0;bottom:100%;left:0;z-index:9999;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:contain;background:rgba(0,0,0,0);-webkit-transition-property:bottom,background-color;-o-transition-property:bottom,background-color;transition-property:bottom,background-color;-webkit-transition-duration:0s,.3s;-o-transition-duration:0s,.3s;transition-duration:0s,.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:.45s,.15s;-o-transition-delay:.45s,.15s;transition-delay:.45s,.15s}.mm-ocd--open{bottom:0;background:rgba(0,0,0,.25);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-ocd__content{position:absolute;top:0;bottom:0;z-index:2;width:80%;width:var(--mm-ocd-width);min-width:200px;min-width:var(--mm-ocd-min-width);max-width:440px;max-width:var(--mm-ocd-max-width);background:#fff;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.mm-ocd--left .mm-ocd__content{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mm-ocd--right .mm-ocd__content{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mm-ocd--open .mm-ocd__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-ocd__backdrop{position:absolute;top:0;bottom:0;z-index:3;width:calc(100% - 80%);width:calc(100% - var(--mm-ocd-width));min-width:calc(100% - 440px);min-width:calc(100% - var(--mm-ocd-max-width));max-width:calc(100% - 200px);max-width:calc(100% - var(--mm-ocd-min-width));background:rgba(3,2,1,0)}.mm-ocd--left .mm-ocd__backdrop{right:0}.mm-ocd--right .mm-ocd__backdrop{left:0}.mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{display:block;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:root{--mm-spn-item-height:50px;--mm-spn-item-indent:20px;--mm-spn-line-height:24px}.mm-spn{width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;overflow:hidden;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.mm-spn ul{-webkit-overflow-scrolling:touch;position:fixed;top:0;left:100%;bottom:0;z-index:2;width:130%;padding-right:30%;line-height:24px;line-height:var(--mm-spn-line-height);overflow:visible;overflow-y:auto;background:inherit;-webkit-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;transition:left .3s ease 0s;cursor:default}.mm-spn ul:after{content:"";display:block;height:50px;height:var(--mm-spn-item-height)}.mm-spn>ul{left:0}.mm-spn ul.mm-spn--open{left:0}.mm-spn ul.mm-spn--parent{left:-30%;overflow-y:hidden}.mm-spn li{position:relative;background:inherit;cursor:pointer}.mm-spn li:before{content:"";display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);right:25px;right:calc(var(--mm-spn-item-height)/ 2);z-index:0;width:10px;height:10px;border-top:2px solid;border-right:2px solid;-webkit-transform:rotate(45deg) translate(0,-50%);-ms-transform:rotate(45deg) translate(0,-50%);transform:rotate(45deg) translate(0,-50%);opacity:.4}.mm-spn li:after{content:"";display:block;margin-left:20px;margin-left:var(--mm-spn-item-indent);border-top:1px solid;opacity:.15}.mm-spn a,.mm-spn span{position:relative;z-index:1;padding:13px 20px;padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)}.mm-spn a{background:inherit;color:inherit;text-decoration:none}.mm-spn a:not(:last-child){width:calc(100% - 50px);width:calc(100% - var(--mm-spn-item-height))}.mm-spn a:not(:last-child):after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;border-right:1px solid;opacity:.15}.mm-spn span{background:0 0}.mm-spn.mm-spn--navbar{cursor:pointer}.mm-spn.mm-spn--navbar:before{content:'';display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);left:20px;left:var(--mm-spn-item-indent);width:10px;height:10px;margin-top:2px;border-top:2px solid;border-left:2px solid;-webkit-transform:rotate(-45deg) translate(50%,-50%);-ms-transform:rotate(-45deg) translate(50%,-50%);transform:rotate(-45deg) translate(50%,-50%);opacity:.4}.mm-spn.mm-spn--navbar.mm-spn--main{cursor:default}.mm-spn.mm-spn--navbar.mm-spn--main:before{content:none;display:none}.mm-spn.mm-spn--navbar:after{content:attr(data-mm-spn-title);display:block;position:absolute;top:0;left:0;right:0;height:50px;height:var(--mm-spn-item-height);padding:0 40px;padding:0 calc(var(--mm-spn-item-indent) * 2);line-height:50px;line-height:var(--mm-spn-item-height);opacity:.4;text-align:center;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.mm-spn.mm-spn--navbar.mm-spn--main:after{padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--navbar ul{top:51px;top:calc(var(--mm-spn-item-height) + 1px)}.mm-spn.mm-spn--navbar ul:before{content:'';display:block;position:fixed;top:inherit;z-index:2;width:100%;border-top:1px solid currentColor;opacity:.15}.mm-spn.mm-spn--light{color:#444;background:#f3f3f3}.mm-spn.mm-spn--dark{color:#ddd;background:#333}.mm-spn.mm-spn--vertical{overflow-y:auto}.mm-spn.mm-spn--vertical ul{width:100%;padding-right:0;position:static}.mm-spn.mm-spn--vertical ul ul{display:none;padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--vertical ul ul:after{height:25px;height:calc(var(--mm-spn-item-height)/ 2)}.mm-spn.mm-spn--vertical ul.mm-spn--open{display:block}.mm-spn.mm-spn--vertical li.mm-spn--open:before{-webkit-transform:rotate(135deg) translate(-50%,0);-ms-transform:rotate(135deg) translate(-50%,0);transform:rotate(135deg) translate(-50%,0)}.mm-spn.mm-spn--vertical ul ul li:last-child:after{content:none;display:none}
\ No newline at end of file
diff --git a/src/modules/offcanvas-drawer/_index.scss b/src/modules/offcanvas-drawer/_index.scss
index ae2f373..84cd778 100644
--- a/src/modules/offcanvas-drawer/_index.scss
+++ b/src/modules/offcanvas-drawer/_index.scss
@@ -1,5 +1,5 @@
 //  SCSS Variables
-$prefix: '.mm-ocd';
+$prefix: ".mm-ocd";
 
 $mmocd_width: 80% !default;
 $mmocd_min_width: 200px !default;
@@ -9,106 +9,105 @@ $mmocd_transition_duration: 0.3s !default;
 
 //  CSS variables
 :root {
-    /** Width for the drawer. */
-    --mm-ocd-width: #{$mmocd_width};
+  /** Width for the drawer. */
+  --mm-ocd-width: #{$mmocd_width};
 
-    /** Min-width for the drawer. */
-    --mm-ocd-min-width: #{$mmocd_min_width};
+  /** Min-width for the drawer. */
+  --mm-ocd-min-width: #{$mmocd_min_width};
 
-    /** Max-width for the drawer. */
-    --mm-ocd-max-width: #{$mmocd_max_width};
+  /** Max-width for the drawer. */
+  --mm-ocd-max-width: #{$mmocd_max_width};
 }
 
 //  The rest of the page
 body#{$prefix}-opened {
-    //  Somewhat prevents scrolling.
-    overflow-y: hidden;
-    overscroll-behavior: none;
+  //  Somewhat prevents scrolling.
+  overflow-y: hidden;
+  overscroll-behavior: none;
 }
 
 //  The wrapper
 #{$prefix} {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 100%;
-    left: 0;
-    z-index: 9999;
-    overflow: hidden;
-    overscroll-behavior: contain;
-    background: rgba(#000, 0);
-    transition: {
-        property: bottom, background-color;
-        duration: 0s, $mmocd_transition_duration;
-        timing-function: ease;
-        delay: $mmocd_transition_duration * 1.5,
-            $mmocd_transition_duration * 0.5;
-    }
-
-    &--open {
-        bottom: 0;
-        background: rgba(#000, 0.25);
-        transition-delay: 0s;
-    }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 9999;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  background: rgba(#000, 0);
+  transition: {
+    property: bottom, background-color;
+    duration: 0s, $mmocd_transition_duration;
+    timing-function: ease;
+    delay: $mmocd_transition_duration * 1.5, $mmocd_transition_duration * 0.5;
+  }
+
+  &--open {
+    bottom: 0;
+    background: rgba(#000, 0.25);
+    transition-delay: 0s;
+  }
 }
 
 //  The content
 #{$prefix}__content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-
-    width: $mmocd_width; // IE11 fallback
-    width: var(--mm-ocd-width);
-    min-width: $mmocd_min_width; // IE11 fallback
-    min-width: var(--mm-ocd-min-width);
-    max-width: $mmocd_max_width; // IE11 fallback
-    max-width: var(--mm-ocd-max-width);
-
-    background: #fff;
-    transition: {
-        property: transform;
-        duration: $mmocd_transition_duration;
-        timing-function: ease;
-    }
-
-    #{$prefix}--left & {
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    #{$prefix}--right & {
-        right: 0;
-        transform: translate3d(100%, 0, 0);
-    }
-
-    #{$prefix}--open & {
-        transform: translate3d(0, 0, 0);
-    }
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+
+  width: $mmocd_width; // IE11 fallback
+  width: var(--mm-ocd-width);
+  min-width: $mmocd_min_width; // IE11 fallback
+  min-width: var(--mm-ocd-min-width);
+  max-width: $mmocd_max_width; // IE11 fallback
+  max-width: var(--mm-ocd-max-width);
+
+  background: #fff;
+  transition: {
+    property: transform;
+    duration: $mmocd_transition_duration;
+    timing-function: ease;
+  }
+
+  #{$prefix}--left & {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  #{$prefix}--right & {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  #{$prefix}--open & {
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 //  The backdrop
 #{$prefix}__backdrop {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 3;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
 
-    width: calc(100% - #{$mmocd_width}); // IE11 fallback
-    width: calc(100% - var(--mm-ocd-width));
-    min-width: calc(100% - #{$mmocd_max_width}); // IE11 fallback
-    min-width: calc(100% - var(--mm-ocd-max-width));
-    max-width: calc(100% - #{$mmocd_min_width}); // IE11 fallback
-    max-width: calc(100% - var(--mm-ocd-min-width));
+  width: calc(100% - #{$mmocd_width}); // IE11 fallback
+  width: calc(100% - var(--mm-ocd-width));
+  min-width: calc(100% - #{$mmocd_max_width}); // IE11 fallback
+  min-width: calc(100% - var(--mm-ocd-max-width));
+  max-width: calc(100% - #{$mmocd_min_width}); // IE11 fallback
+  max-width: calc(100% - var(--mm-ocd-min-width));
 
-    background: rgba(3, 2, 1, 0);
+  background: rgba(3, 2, 1, 0);
 
-    #{$prefix}--left & {
-        right: 0;
-    }
+  #{$prefix}--left & {
+    right: 0;
+  }
 
-    #{$prefix}--right & {
-        left: 0;
-    }
+  #{$prefix}--right & {
+    left: 0;
+  }
 }
diff --git a/src/modules/sliding-panels-navigation/_index.scss b/src/modules/sliding-panels-navigation/_index.scss
index f95115e..8077342 100644
--- a/src/modules/sliding-panels-navigation/_index.scss
+++ b/src/modules/sliding-panels-navigation/_index.scss
@@ -1,4 +1,4 @@
-$prefix: '.mm-spn';
+$prefix: ".mm-spn";
 
 /** Animation duration. */
 $mmspn_transition_duration: 0.3s;
@@ -31,188 +31,185 @@ $mmspn_line_height: 24px !default;
 $mmspn_panel_offset: 30% !default;
 
 %mmspn-reset {
-    display: block;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
+  display: block;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
 
 :root {
-    /** Height for menu items. */
-    --mm-spn-item-height: #{$mmspn_item_height};
+  /** Height for menu items. */
+  --mm-spn-item-height: #{$mmspn_item_height};
 
-    /** Indent for menu items. */
-    --mm-spn-item-indent: #{$mmspn_item_indent};
+  /** Indent for menu items. */
+  --mm-spn-item-indent: #{$mmspn_item_indent};
 
-    /** Line height for menu items. */
-    --mm-spn-line-height: #{$mmspn_line_height};
+  /** Line height for menu items. */
+  --mm-spn-line-height: #{$mmspn_line_height};
 }
 
 //  The menu
 #{$prefix} {
-    @extend %mmspn-reset;
+  @extend %mmspn-reset;
 
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 
-    //  Prevent the entire menu from highlighting when clicking the navbar
-    -webkit-tap-highlight-color: transparent;
+  //  Prevent the entire menu from highlighting when clicking the navbar
+  -webkit-tap-highlight-color: transparent;
 
-    //  Enables smooth scrolling.
-    -webkit-overflow-scrolling: touch;
+  //  Enables smooth scrolling.
+  -webkit-overflow-scrolling: touch;
 
-    //  Prevent any content being visible outside the menu
-    overflow: hidden;
-    clip-path: inset(0 0 0 0);
+  //  Prevent any content being visible outside the menu
+  overflow: hidden;
+  clip-path: inset(0 0 0 0);
 
-    //  This creates a new viewport from the menu so the panels can be fixed
-    transform: translateX(0px);
+  //  This creates a new viewport from the menu so the panels can be fixed
+  transform: translateX(0px);
 }
 
 //  Listviews
 #{$prefix} {
-    //  All listviews.
-    ul {
-        @extend %mmspn-reset;
+  //  All listviews.
+  ul {
+    @extend %mmspn-reset;
 
-        //  Enables smooth scrolling.
-        -webkit-overflow-scrolling: touch;
+    //  Enables smooth scrolling.
+    -webkit-overflow-scrolling: touch;
 
-        position: fixed;
-        top: 0;
-        left: 100%;
-        bottom: 0;
-        z-index: 2; // Needs a z-index to be above its parent.
-
-        //  Fix for weird iOS Safari issue:
-        //  A fixed element is not visible outside of its parent if its parent is scrollable.
-        width: 100% + $mmspn_panel_offset;
-        padding-right: $mmspn_panel_offset;
-        //  /Fix
-
-        line-height: $mmspn_line_height; // IE11 fallback
-        line-height: var(--mm-spn-line-height);
-
-        overflow: visible;
-        overflow-y: auto;
-        background: inherit;
-        transition: left $mmspn_transition_duration ease 0s;
-
-        cursor: default;
-
-        //  Because padding-bottom doesn't work if it is scrollable.
-        &:after {
-            content: '';
-            display: block;
-            height: $mmspn_item_height; // IE11 fallback
-            height: var(--mm-spn-item-height);
-        }
+    position: fixed;
+    top: 0;
+    left: 100%;
+    bottom: 0;
+    z-index: 2; // Needs a z-index to be above its parent.
+
+    //  Fix for weird iOS Safari issue:
+    //  A fixed element is not visible outside of its parent if its parent is scrollable.
+    width: 100% + $mmspn_panel_offset;
+    padding-right: $mmspn_panel_offset;
+    //  /Fix
+
+    line-height: $mmspn_line_height; // IE11 fallback
+    line-height: var(--mm-spn-line-height);
+
+    overflow: visible;
+    overflow-y: auto;
+    background: inherit;
+    transition: left $mmspn_transition_duration ease 0s;
+
+    cursor: default;
+
+    //  Because padding-bottom doesn't work if it is scrollable.
+    &:after {
+      content: "";
+      display: block;
+      height: $mmspn_item_height; // IE11 fallback
+      height: var(--mm-spn-item-height);
     }
+  }
+
+  //  First level listview.
+  > ul {
+    left: 0;
+  }
+
+  //  Listview opened.
+  ul#{$prefix}--open {
+    left: 0;
+  }
+
+  //  Child listview opened.
+  ul#{$prefix}--parent {
+    left: -$mmspn_panel_offset;
+    overflow-y: hidden;
+  }
+}
 
-    //  First level listview.
-    > ul {
-        left: 0;
-    }
+//  Listitems
+#{$prefix} {
+  li {
+    @extend %mmspn-reset;
 
-    //  Listview opened.
-    ul#{$prefix}--open {
-        left: 0;
+    position: relative;
+    background: inherit;
+    cursor: pointer;
+
+    //  The arrow.
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: $mmspn_item_height / 2; // IE11 fallback
+      top: calc(var(--mm-spn-item-height) / 2);
+      right: $mmspn_item_height / 2; // IE11 fallback
+      right: calc(var(--mm-spn-item-height) / 2);
+      z-index: 0;
+
+      width: $mmspn_arrow_size;
+      height: $mmspn_arrow_size;
+      border-top: $mmspn_arrow_weight solid;
+      border-right: $mmspn_arrow_weight solid;
+      transform: rotate(45deg) translate(0, -50%);
+      opacity: $mmspn_arrow_opac;
     }
 
-    //  Child listview opened.
-    ul#{$prefix}--parent {
-        left: -$mmspn_panel_offset;
-        overflow-y: hidden;
-    }
-}
+    //  The border.
+    &:after {
+      content: "";
+      display: block;
+      margin-left: $mmspn_item_indent; // IE11 fallback
+      margin-left: var(--mm-spn-item-indent);
 
-//  Listitems
-#{$prefix} {
-    li {
-        @extend %mmspn-reset;
-
-        position: relative;
-        background: inherit;
-        cursor: pointer;
-
-        //  The arrow.
-        &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            top: $mmspn_item_height / 2; // IE11 fallback
-            top: calc(var(--mm-spn-item-height) / 2);
-            right: $mmspn_item_height / 2; // IE11 fallback
-            right: calc(var(--mm-spn-item-height) / 2);
-            z-index: 0;
-
-            width: $mmspn_arrow_size;
-            height: $mmspn_arrow_size;
-            border-top: $mmspn_arrow_weight solid;
-            border-right: $mmspn_arrow_weight solid;
-            transform: rotate(45deg) translate(0, -50%);
-            opacity: $mmspn_arrow_opac;
-        }
-
-        //  The border.
-        &:after {
-            content: '';
-            display: block;
-            margin-left: $mmspn_item_indent; // IE11 fallback
-            margin-left: var(--mm-spn-item-indent);
-
-            border-top: 1px solid;
-            opacity: $mmspn_border_opac;
-        }
+      border-top: 1px solid;
+      opacity: $mmspn_border_opac;
     }
+  }
 }
 
 //  Anchors
 #{$prefix} {
-    a,
-    span {
-        @extend %mmspn-reset;
-
-        position: relative;
-        z-index: 1;
-        padding: (($mmspn_item_height - $mmspn_line_height) / 2)
-            $mmspn_item_indent; // IE11 fallback
-        padding: calc(
-                (var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2
-            )
-            var(--mm-spn-item-indent);
-    }
+  a,
+  span {
+    @extend %mmspn-reset;
 
-    a {
-        background: inherit;
-        color: inherit;
-        text-decoration: none;
-
-        //  Show arrow for opening the submenu.
-        &:not(:last-child) {
-            width: calc(100% - #{$mmspn_item_height}); // IE11 fallback
-            width: calc(100% - var(--mm-spn-item-height));
-
-            //  Border on the right.
-            &:after {
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                border-right: 1px solid;
-                opacity: $mmspn_border_opac;
-            }
-        }
-    }
+    position: relative;
+    z-index: 1;
+    padding: (($mmspn_item_height - $mmspn_line_height) / 2) $mmspn_item_indent; // IE11 fallback
+    padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2)
+      var(--mm-spn-item-indent);
+  }
+
+  a {
+    background: inherit;
+    color: inherit;
+    text-decoration: none;
 
     //  Show arrow for opening the submenu.
-    span {
-        background: transparent;
+    &:not(:last-child) {
+      width: calc(100% - #{$mmspn_item_height}); // IE11 fallback
+      width: calc(100% - var(--mm-spn-item-height));
+
+      //  Border on the right.
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        border-right: 1px solid;
+        opacity: $mmspn_border_opac;
+      }
     }
+  }
+
+  //  Show arrow for opening the submenu.
+  span {
+    background: transparent;
+  }
 }
 
-@import 'navbar';
-@import 'themes';
-@import 'vertical';
+@import "navbar";
+@import "themes";
+@import "vertical";