Adds sidebar widths, shadow by default

src/definitions/collections/menu.less

@@ -1367,7 +1367,7 @@
 .ui.borderless.menu .item:before,
 .ui.borderless.menu .item .menu .item:before,
 .ui.menu .borderless.item:before {
-  background: none;
+  background: none !important;
 }
 
 /*-------------------

src/definitions/modules/sidebar.js

@@ -75,7 +75,8 @@ $.fn.sidebar = function(parameters) {
           transitionEvent = module.get.transitionEvent();
 
           // cache on initialize
-          if( module.is.legacy() ) {
+          if( module.is.legacy() || settings.legacy) {
+            settings.transition = 'overlay';
             settings.useLegacy = true;
           }
 
@@ -193,7 +194,7 @@ $.fn.sidebar = function(parameters) {
                 + ' }'
                 + '</style>'
             ;
-            $context.append(style);
+            $head.append(style);
             $style = $('style[title=' + namespace + ']');
             module.debug('Adding sizing css to head', $style);
           }
@@ -423,7 +424,7 @@ $.fn.sidebar = function(parameters) {
               module.remove.animating();
               module.remove.transition();
               module.remove.bodyCSS();
-              if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
+              if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
                 module.scrollBack();
               }
               $.proxy(callback, element)();
@@ -453,6 +454,7 @@ $.fn.sidebar = function(parameters) {
             $pusher.addClass(className.dimmed);
           }
           $context
+            .css('position', 'relative')
             .animate(properties, settings.duration, settings.easing, function() {
               module.remove.animating();
               module.bind.clickaway();
@@ -480,6 +482,7 @@ $.fn.sidebar = function(parameters) {
             $pusher.removeClass(className.dimmed);
           }
           $context
+            .css('position', 'relative')
             .animate(properties, settings.duration, settings.easing, function() {
               module.remove.animating();
               $.proxy(callback, module)();
@@ -489,6 +492,7 @@ $.fn.sidebar = function(parameters) {
 
         scrollToTop: function() {
           module.verbose('Scrolling to top of page to avoid animation issues');
+          currentScroll = $(window).scrollTop();
           $module.scrollTop(0);
           window.scrollTo(0, 0);
         },
@@ -875,11 +879,10 @@ $.fn.sidebar.settings = {
 
   context           : 'body',
   exclusive         : false,
-
   closable          : true,
   dimPage           : true,
   scrollLock        : false,
-  returnScroll      : true,
+  returnScroll      : false,
 
   useLegacy         : false,
   duration          : 500,

src/definitions/modules/sidebar.less

@@ -43,6 +43,9 @@
   overflow-y: auto !important;
   z-index: @topLayer;
 }
+
+
+/* 3D Rendering Fix */
 .ui.sidebar * {
   backface-visibility: hidden;
   transform: rotateZ(0deg);
@@ -52,6 +55,18 @@
    Direction
 ---------------*/
 
+.ui.left.sidebar {
+  right: auto;
+  left: 0px;
+  transform: translate3d(-100%, 0, 0);
+}
+
+.ui.right.sidebar {
+  right: 0px !important;
+  left: auto !important;
+  transform: translate3d(100%, 0%, 0);
+}
+
 .ui.top.sidebar,
 .ui.bottom.sidebar {
   width: 100% !important;
@@ -59,24 +74,12 @@
   overflow-y: visible !important;
 }
 
-.ui.left.sidebar {
-  right: auto;
-  left: 0px;
-  transform: translate3d(-100%, 0, 0);
-}
-
 .ui.top.sidebar {
   top: 0px !important;
   bottom: auto !important;
   transform: translate3d(0, -100%, 0);
 }
 
-.ui.right.sidebar {
-  right: 0px !important;
-  left: auto !important;
-  transform: translate3d(100%, 0%, 0);
-}
-
 .ui.bottom.sidebar {
   top: auto !important;
   bottom: 0px !important;
@@ -179,6 +182,15 @@
   visibility: visible;
 }
 
+.ui.left.visible.sidebar,
+.ui.right.visible.sidebar {
+  box-shadow: @horizontalBoxShadow;
+}
+
+.ui.top.visible.sidebar,
+.ui.bottom.visible.sidebar {
+  box-shadow: @verticalBoxShadow;
+}
 
 /*--------------
      Mobile
@@ -196,11 +208,31 @@
           Variations
 *******************************/
 
-.ui.sidebar,
-.ui.vertical.sidebar.menu {
+/*--------------
+     Width
+---------------*/
+
+/* Left / Right */
+.ui[class*="very thin"].left.sidebar,
+.ui[class*="very thin"].right.sidebar {
+  width: @sidebarVeryThinWidth;
+}
+.ui.thin.left.sidebar,
+.ui.thin.right.sidebar {
+  width: @sidebarThinWidth;
+}
+.ui.left.sidebar,
+.ui.right.sidebar {
   width: @sidebarWidth;
 }
-
+.ui.wide.left.sidebar,
+.ui.wide.right.sidebar {
+  width: @sidebarWideWidth;
+}
+.ui[class*="very wide"].left.sidebar,
+.ui[class*="very wide"].right.sidebar {
+  width: @sidebarVeryWideWidth;
+}
 
 /*******************************
           Animations

src/themes/default/collections/menu.variables

@@ -252,7 +252,7 @@
 /* Labeled Icon */
 @labeledIconSize: 1.5em;
 @labeledIconMinWidth: 6em;
-@labeledIconTextMargin: 0.3em;
+@labeledIconTextMargin: 0.5em;
 
 /* Text */
 @textMenuTransition: opacity 0.2s ease;

src/themes/default/modules/sidebar.variables

@@ -2,20 +2,38 @@
              Sidebar
 *******************************/
 
-@sidebarWidth: 260px;
-@sidebarHeight: 50px;
+/*-------------------
+       Element
+--------------------*/
 
 @dimmerColor: rgba(0, 0, 0, 0.4);
-
 @canvasBackground: @lightBlack;
 @perspective: 1500px;
-
 @duration: 500ms;
 @easing: ease;
 
+@boxShadow: 0px 0px 20px @borderColor;
+@horizontalBoxShadow: @boxShadow;
+@verticalBoxShadow: @boxShadow;
+
+/* Indexes */
 @bottomLayer: 1;
 @middleLayer: 2;
 @fixedLayer: 101;
 @topLayer: 102;
-
 @dimmerLayer: 1000;
+
+
+/*-------------------
+       Variations
+--------------------*/
+
+/* Width */
+@sidebarVeryThinWidth: 60px;
+@sidebarThinWidth: 150px;
+@sidebarWidth: 260px;
+@sidebarWideWidth: 350px;
+@sidebarVeryWideWidth: 475px;
+
+/* Height */
+@sidebarHeight: auto;