toggles/checks and vertical submenus fix

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "jQuery.mmenu",
 	"main": "src/js/jquery.mmenu.min.js",
-	"version": "4.5.5",
+	"version": "4.5.6",
 	"homepage": "http://mmenu.frebsite.nl/",
 	"authors": [
 		"Fred Heusschen <[email protected]>"

mmenu.jquery.json

@@ -1,6 +1,6 @@
 {
 	"name": "mmenu",
-	"version": "4.5.5",
+	"version": "4.5.6",
 	"title": "jQuery mmenu",
 	"description": "The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.",
 	"keywords": [

src/css/addons/jquery.mmenu.toggles.css

@@ -10,7 +10,7 @@ label.mm-toggle,
 label.mm-check {
   margin: 0;
   position: absolute;
-  top: 50%;
+  bottom: 50%;
   z-index: 1; }
   label.mm-toggle:before,
   label.mm-check:before {
@@ -21,7 +21,7 @@ label.mm-toggle {
   border-radius: 30px;
   width: 50px;
   height: 30px;
-  margin-top: -15px; }
+  margin-bottom: -15px; }
   label.mm-toggle:before {
     border-radius: 30px;
     width: 28px;
@@ -34,7 +34,7 @@ input.mm-toggle:checked ~ label.mm-toggle:before {
 label.mm-check {
   width: 30px;
   height: 30px;
-  margin-top: -15px; }
+  margin-bottom: -15px; }
   label.mm-check:before {
     border-left: 3px solid;
     border-bottom: 3px solid;
@@ -48,6 +48,14 @@ label.mm-check {
 input.mm-check:checked ~ label.mm-check:before {
   opacity: 1; }
 
+.mm-menu.mm-vertical .mm-list > li label.mm-toggle, .mm-menu.mm-vertical .mm-list > li label.mm-check {
+  bottom: auto;
+  margin-bottom: 0; }
+.mm-menu.mm-vertical .mm-list > li label.mm-toggle {
+  top: 5px; }
+.mm-menu.mm-vertical .mm-list > li label.mm-check {
+  top: 5px; }
+
 label.mm-toggle, label.mm-check {
   right: 20px; }
 

src/css/jquery.mmenu.all.css

@@ -179,14 +179,16 @@
     border-color: transparent; }
 .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
   display: block; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen {
+.mm-menu.mm-vertical .mm-list > li > a.mm-subopen {
   height: 40px; }
-  .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
+  .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after {
     top: 16px;
-    right: 16px; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened.mm-label > a.mm-subopen {
+    right: 16px;
+    bottom: auto; }
+.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg); }
+.mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen {
   height: 25px; }
 
 html.mm-opened .mm-page {
@@ -609,7 +611,7 @@ label.mm-toggle,
 label.mm-check {
   margin: 0;
   position: absolute;
-  top: 50%;
+  bottom: 50%;
   z-index: 1; }
   label.mm-toggle:before,
   label.mm-check:before {
@@ -620,7 +622,7 @@ label.mm-toggle {
   border-radius: 30px;
   width: 50px;
   height: 30px;
-  margin-top: -15px; }
+  margin-bottom: -15px; }
   label.mm-toggle:before {
     border-radius: 30px;
     width: 28px;
@@ -633,7 +635,7 @@ input.mm-toggle:checked ~ label.mm-toggle:before {
 label.mm-check {
   width: 30px;
   height: 30px;
-  margin-top: -15px; }
+  margin-bottom: -15px; }
   label.mm-check:before {
     border-left: 3px solid;
     border-bottom: 3px solid;
@@ -647,6 +649,14 @@ label.mm-check {
 input.mm-check:checked ~ label.mm-check:before {
   opacity: 1; }
 
+.mm-menu.mm-vertical .mm-list > li label.mm-toggle, .mm-menu.mm-vertical .mm-list > li label.mm-check {
+  bottom: auto;
+  margin-bottom: 0; }
+.mm-menu.mm-vertical .mm-list > li label.mm-toggle {
+  top: 5px; }
+.mm-menu.mm-vertical .mm-list > li label.mm-check {
+  top: 5px; }
+
 label.mm-toggle, label.mm-check {
   right: 20px; }
 

src/css/jquery.mmenu.css

@@ -179,14 +179,16 @@
     border-color: transparent; }
 .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
   display: block; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen {
+.mm-menu.mm-vertical .mm-list > li > a.mm-subopen {
   height: 40px; }
-  .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
+  .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after {
     top: 16px;
-    right: 16px; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened.mm-label > a.mm-subopen {
+    right: 16px;
+    bottom: auto; }
+.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg); }
+.mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen {
   height: 25px; }
 
 html.mm-opened .mm-page {

src/css/jquery.mmenu.oncanvas.css

@@ -176,14 +176,16 @@
     border-color: transparent; }
 .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
   display: block; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen {
+.mm-menu.mm-vertical .mm-list > li > a.mm-subopen {
   height: 40px; }
-  .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
+  .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after {
     top: 16px;
-    right: 16px; }
-.mm-menu.mm-vertical .mm-list > li.mm-opened.mm-label > a.mm-subopen {
+    right: 16px;
+    bottom: auto; }
+.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg); }
+.mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen {
   height: 25px; }
 
 html.mm-opened .mm-page {

src/js/addons/jquery.mmenu.dragopen.js

@@ -44,7 +44,7 @@
 			if ( Hammer.VERSION < 2 )
 			{
 				$[ _PLUGIN_ ].deprecated( 'Older version of the Hammer library', 'version 2 or newer' );
-				return false;
+				return;
 			}
 
 			//	Set up variables
@@ -142,7 +142,6 @@
 					function( e )
 					{
 						pointer_pos = e.center[ drag.typeLower ];
-//						pointer_pos = e[ 'client' + drag.typeUpper ];
 						switch( that.opts.offCanvas.position )
 						{
 							case 'right':

src/js/addons/jquery.mmenu.toggles.js

@@ -54,7 +54,7 @@
 						$prnt.prepend( $inpt );
 
 						$('<label for="' + id + '" class="' + _c[ cl ] + '"></label>')
-							.insertBefore( $prnt.children().last() );
+							.insertBefore( $prnt.children( 'a' ).last() );
 					}
 				}
 			);

src/js/jquery.mmenu.oncanvas.js

@@ -1,5 +1,5 @@
 /*	
- * jQuery mmenu v4.5.5
+ * jQuery mmenu v4.5.6
  * @requires jQuery 1.7.0 or later
  *
  * mmenu.frebsite.nl
@@ -15,7 +15,7 @@
 (function( $ ) {
 
 	var _PLUGIN_	= 'mmenu',
-		_VERSION_	= '4.5.5';
+		_VERSION_	= '4.5.6';
 
 
 	//	Plugin already excists

src/js/umd/addons/jquery.mmenu.toggles.umd.js

@@ -23,5 +23,5 @@
  *
  * Copyright (c) Fred Heusschen
  */
-!function(t){function e(t){return t}function s(t){return t}function c(){r=!0,n=t[i]._c,o=t[i]._d,l=t[i]._e,n.add("toggle check"),h=t[i].glbl}var i="mmenu",a="toggles";t[i].prototype["_init_"+a]=function(i){r||c();var o=this.vars[a+"_added"];this.vars[a+"_added"]=!0,o||(this.opts[a]=e(this.opts[a]),this.conf[a]=s(this.conf[a]));var l=this;this.opts[a],this.conf[a],this.__refactorClass(t("input",i),this.conf.classNames[a].toggle,"toggle"),this.__refactorClass(t("input",i),this.conf.classNames[a].check,"check"),t("input."+n.toggle,i).add("input."+n.check,i).each(function(){var e=t(this),s=e.closest("li"),c=e.hasClass(n.toggle)?"toggle":"check",i=e.attr("id")||l.__getUniqueId();s.children('label[for="'+i+'"]').length||(e.attr("id",i),s.prepend(e),t('<label for="'+i+'" class="'+n[c]+'"></label>').insertBefore(s.children().last()))})},t[i].addons.push(a),t[i].defaults[a]={},t[i].configuration.classNames[a]={toggle:"Toggle",check:"Check"};var n,o,l,h,r=!1}(jQuery);
+!function(t){function e(t){return t}function s(t){return t}function c(){r=!0,n=t[a]._c,o=t[a]._d,l=t[a]._e,n.add("toggle check"),h=t[a].glbl}var a="mmenu",i="toggles";t[a].prototype["_init_"+i]=function(a){r||c();var o=this.vars[i+"_added"];this.vars[i+"_added"]=!0,o||(this.opts[i]=e(this.opts[i]),this.conf[i]=s(this.conf[i]));var l=this;this.opts[i],this.conf[i],this.__refactorClass(t("input",a),this.conf.classNames[i].toggle,"toggle"),this.__refactorClass(t("input",a),this.conf.classNames[i].check,"check"),t("input."+n.toggle,a).add("input."+n.check,a).each(function(){var e=t(this),s=e.closest("li"),c=e.hasClass(n.toggle)?"toggle":"check",a=e.attr("id")||l.__getUniqueId();s.children('label[for="'+a+'"]').length||(e.attr("id",a),s.prepend(e),t('<label for="'+a+'" class="'+n[c]+'"></label>').insertBefore(s.children("a").last()))})},t[a].addons.push(i),t[a].defaults[i]={},t[a].configuration.classNames[i]={toggle:"Toggle",check:"Check"};var n,o,l,h,r=!1}(jQuery);
 }));

src/scss/addons/jquery.mmenu.toggles.scss

@@ -17,7 +17,7 @@ label.mm-check
 {
 	margin: 0;
 	position: absolute;
-	top: 50%;
+	bottom: 50%;
 	z-index: 1;
 
 	&:before
@@ -33,7 +33,7 @@ label.mm-toggle
 	border-radius: $mm_toggleHeight;
 	width: $mm_toggleWidth;
 	height: $mm_toggleHeight;
-	margin-top: -( $mm_toggleHeight / 2 );
+	margin-bottom: -( $mm_toggleHeight / 2 );
 
 	&:before
 	{
@@ -52,7 +52,7 @@ label.mm-check
 {
 	width: $mm_checkWidth;
 	height: $mm_checkHeight;
-	margin-top: -( $mm_checkHeight / 2 );
+	margin-bottom: -( $mm_checkHeight / 2 );
 
 	&:before
 	{
@@ -71,6 +71,31 @@ input.mm-check:checked ~ label.mm-check:before
 	opacity: 1;
 }
 
+
+// vertical submenu
+.mm-menu.mm-vertical .mm-list
+{
+	> li label
+	{
+		&.mm-toggle,
+		&.mm-check
+		{
+			bottom: auto;
+			margin-bottom: 0;
+		}
+		&.mm-toggle
+		{
+			top: ( $mm_btnSize - $mm_toggleHeight ) / 2;
+
+		}
+		&.mm-check
+		{
+			top: ( $mm_btnSize - $mm_checkHeight ) / 2;
+		}
+	}
+}
+
+
 // positioning
 label
 {

src/scss/inc/_borders.scss → src/scss/inc/_mixins.scss

@@ -1,3 +1,27 @@
+//	Arrows
+@mixin mm_arrow
+{
+	content: '';
+	border: 2px solid transparent;
+	display: inline-block;
+	width: 7px;
+	height: 7px;
+
+	@include mm_webkit-prefix( "transform", rotate( -45deg ) );
+}
+@mixin mm_arrow-prev
+{
+	border-right: none;
+	border-bottom: none;
+}
+@mixin mm_arrow-next
+{
+	border-top: none;
+	border-left: none;
+}
+
+
+//	Borders
 @mixin mm_border( $border, $pseudo, $size, $pos1, $pos2 )
 {
 	&:#{$pseudo}

src/scss/inc/_variables.scss

@@ -55,8 +55,7 @@ $mm_toggleCheckedColor	: #4bd963 !default;
 
 @import "sizing";
 @import "colors";
-@import "arrows";
-@import "borders";
+@import "mixins";
 
 
 //	Misc mixins

src/scss/jquery.mmenu.oncanvas.scss

@@ -269,17 +269,23 @@
 	{
 		display: block;
 	}
-	> li.mm-opened
+	> li
 	{
 		> a.mm-subopen
 		{
 			height: $mm_btnSize;
 			&:after
 			{
-				@include mm_webkit-prefix( "transform", rotate( 45deg ) );
-
 				top: 16px;
 				right: 16px;
+				bottom: auto;
+			}
+		}
+		&.mm-opened
+		{
+			> a.mm-subopen:after
+			{
+				@include mm_webkit-prefix( "transform", rotate( 45deg ) );
 			}
 		}
 		&.mm-label > a.mm-subopen