Further sidebar optimizations for mobile

server/files/stylesheets/semantic.css

@@ -219,6 +219,7 @@ a:hover {
   top: 0px;
   left: -1px;
   min-width: 320px;
+  width: calc(100% - 15px);
   z-index: 900;
 
   -webkit-box-sizing: border-box;
@@ -1149,6 +1150,7 @@ body#example.index {
   padding: 1em 0em;
 /*  clear: both;*/
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 }
 #example .example .grid i.code {
   right: 25%;

src/definitions/behaviors/state.js

@@ -18,6 +18,7 @@ $.fn.state = function(parameters) {
 
     moduleSelector  = $allModules.selector || '',
 
+    hasTouch        = ('ontouchstart' in document.documentElement),
     time            = new Date().getTime(),
     performance     = [],
 
@@ -26,12 +27,12 @@ $.fn.state = function(parameters) {
     queryArguments  = [].slice.call(arguments, 1),
 
     // shortcuts
-    error         = settings.error,
-    metadata      = settings.metadata,
-    className     = settings.className,
-    namespace     = settings.namespace,
-    states        = settings.states,
-    text          = settings.text,
+    error           = settings.error,
+    metadata        = settings.metadata,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    states          = settings.states,
+    text            = settings.text,
 
     eventNamespace  = '.' + namespace,
     moduleNamespace = namespace + '-module',

src/definitions/elements/button.less

@@ -54,6 +54,8 @@
   user-select: none;
   box-sizing: border-box;
   transition: @transition;
+
+  -webkit-tap-highlight-color: @tapColor;
 }
 
 

src/definitions/modules/sidebar.js

@@ -660,7 +660,7 @@ $.fn.sidebar.settings = {
   performance     : true,
 
   animation       : 'scale down',
-  mobileAnimation : 'slide along',
+  mobileAnimation : 'reveal',
 
   context         : 'body',
   useCSS          : true,

src/definitions/modules/sidebar.less

@@ -47,6 +47,7 @@
 
 /* Sets 3D Perspective */
 .pushable {
+  background: @canvasBackground !important;
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -58,6 +59,7 @@
 
 .pushable > .pusher {
   position: relative;
+  background: @canvasBackground;
   left: 0;
   height: 100%;
   transition: transform @animationDuration;
@@ -108,18 +110,6 @@
      Pushed
 ---------------*/
 
-/* Add Canvas BG */
-.pushable.pushed,
-.pushable.hide,
-.pushable.show {
-  background: @canvasBackground !important;
-}
-
-/* Remove Scroll */
-.pushable.pushed > .pusher > .page {
-  // overflow: hidden;
-}
-
 /* Show Dimmer */
 .pushable.pushed > .pusher > .page:after {
   width: 100% !important;
@@ -133,6 +123,13 @@
   transition: none !important;
 }
 
+/* Remove Scroll on Page
+.pushable.pushed > .pusher > .page {
+  // overflow: hidden;
+}
+*/
+
+
 /*--------------
      Visible
 ---------------*/

src/themes/packages/default/elements/button.variables

@@ -9,6 +9,7 @@
 @verticalMargin: 0em;
 @horizontalMargin: 0.25em;
 @textTransform: none;
+@tapColor: transparent;
 
 @fontWeight: bold;
 @textColor: rgba(0, 0, 0, 0.6);

src/themes/packages/default/modules/sidebar.variables

@@ -2,7 +2,7 @@
              Sidebar
 *******************************/
 
-@sidebarWidth: 300px;
+@sidebarWidth: 280px;
 @sidebarBackground: @black;
 @sidebarTransition: transform 0.5s ease;