Fixes sidebar direction issues

Former-commit-id: a0678058b3
Former-commit-id: 42ce40d14f

build/minified/modules/sidebar.js

@@ -141,13 +141,15 @@ $.fn.sidebar = function(parameters) {
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
-            style = ''
-              + '<style type="text/css" title="' + namespace + '">'
-              + 'body.pushed {'
-              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-              + '}'
-              + '</style>'
-            ;
+            if(direction !== className.bottom) {
+              style = ''
+                + '<style type="text/css" title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + '}'
+                + '</style>'
+              ;
+            }
             $head.append(style);
             module.refresh();
             module.debug('Adding body css to head', $style);
@@ -187,17 +189,17 @@ $.fn.sidebar = function(parameters) {
 
         get: {
           direction: function() {
-            if($module.hasClass('top')) {
-              return 'top';
+            if($module.hasClass(className.top)) {
+              return className.top;
             }
-            else if($module.hasClass('right')) {
-              return 'right';
+            else if($module.hasClass(className.right)) {
+              return className.right;
             }
-            else if($module.hasClass('bottom')) {
-              return 'bottom';
+            else if($module.hasClass(className.bottom)) {
+              return className.bottom;
             }
             else {
-              return 'left';
+              return className.left;
             }
           },
           transitionEvent: function() {

build/packaged/modules/sidebar.js

@@ -141,13 +141,15 @@ $.fn.sidebar = function(parameters) {
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
-            style = ''
-              + '<style type="text/css" title="' + namespace + '">'
-              + 'body.pushed {'
-              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-              + '}'
-              + '</style>'
-            ;
+            if(direction !== className.bottom) {
+              style = ''
+                + '<style type="text/css" title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + '}'
+                + '</style>'
+              ;
+            }
             $head.append(style);
             module.refresh();
             module.debug('Adding body css to head', $style);
@@ -187,17 +189,17 @@ $.fn.sidebar = function(parameters) {
 
         get: {
           direction: function() {
-            if($module.hasClass('top')) {
-              return 'top';
+            if($module.hasClass(className.top)) {
+              return className.top;
             }
-            else if($module.hasClass('right')) {
-              return 'right';
+            else if($module.hasClass(className.right)) {
+              return className.right;
             }
-            else if($module.hasClass('bottom')) {
-              return 'bottom';
+            else if($module.hasClass(className.bottom)) {
+              return className.bottom;
             }
             else {
-              return 'left';
+              return className.left;
             }
           },
           transitionEvent: function() {

build/uncompressed/elements/button.css

@@ -258,7 +258,7 @@
 .ui.disabled.button.hover,
 .ui.disabled.button.down {
   cursor: default;
-  color: #DDDDDD;
+  color: #DDDDDD !important;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
   text-shadow: none !important;

build/uncompressed/modules/sidebar.css

@@ -77,14 +77,6 @@ body {
   -ms-transform: translateX(0%);
   transform: translateX(0%);
 }
-.ui.active.top.sidebar,
-.ui.active.bottom.sidebar {
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
-}
 .ui.active.right.sidebar {
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -92,6 +84,20 @@ body {
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
 }
+.ui.active.top.sidebar {
+  -webkit-transform: translateY(0%);
+  -moz-transform: translateY(0%);
+  -o-transform: translateY(0%);
+  -ms-transform: translateY(0%);
+  transform: translateY(0%);
+}
+.ui.active.bottom.sidebar {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
 /*******************************
            Variations
 *******************************/

build/uncompressed/modules/sidebar.js

@@ -141,13 +141,15 @@ $.fn.sidebar = function(parameters) {
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
-            style = ''
-              + '<style type="text/css" title="' + namespace + '">'
-              + 'body.pushed {'
-              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-              + '}'
-              + '</style>'
-            ;
+            if(direction !== className.bottom) {
+              style = ''
+                + '<style type="text/css" title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + '}'
+                + '</style>'
+              ;
+            }
             $head.append(style);
             module.refresh();
             module.debug('Adding body css to head', $style);
@@ -187,17 +189,17 @@ $.fn.sidebar = function(parameters) {
 
         get: {
           direction: function() {
-            if($module.hasClass('top')) {
-              return 'top';
+            if($module.hasClass(className.top)) {
+              return className.top;
             }
-            else if($module.hasClass('right')) {
-              return 'right';
+            else if($module.hasClass(className.right)) {
+              return className.right;
             }
-            else if($module.hasClass('bottom')) {
-              return 'bottom';
+            else if($module.hasClass(className.bottom)) {
+              return className.bottom;
             }
             else {
-              return 'left';
+              return className.left;
             }
           },
           transitionEvent: function() {

node/docpad.coffee

@@ -2,8 +2,9 @@
 # It is simply a CoffeeScript Object which is parsed by CSON
 docpadConfig = {
 
- 	outPath: '../docs'
- 	
+ 	outPath: '../docs',
+ 	renderPasses: 1,
+
  	enabledPlugins:
 	 	handlebars: false
 	 	html2coffee: false
@@ -23,7 +24,7 @@ docpadConfig = {
   # Check Version
   # Whether or not to check for newer versions of DocPad
   checkVersion: true  # default
-  
+
   documentsPaths: [  # default
     'documents'
   ]

node/src/documents/modules/sidebar.html

@@ -29,16 +29,23 @@ type   : 'UI Module'
 </div>
 <div class="ui right sidebar vertical menu">
   <div class="header item">Right Sidebar menu</div>
-  <div class="item">One</div>
-  <div class="item">Two</div>
-  <div class="item">Three</div>
+  <a class="item">One</a>
+  <a class="item">Two</a>
+  <a class="item">Three</a>
 </div>
 <div class="ui top sidebar menu">
   <div class="header item">Top Sidebar menu</div>
-  <div class="item">One</div>
-  <div class="item">Two</div>
-  <div class="item">Three</div>
+  <a class="item">One</a>
+  <a class="item">Two</a>
+  <a class="item">Three</a>
 </div>
+<div class="ui bottom sidebar menu">
+  <div class="header item">Bottom Sidebar menu</div>
+  <a class="item">One</a>
+  <a class="item">Two</a>
+  <a class="item">Three</a>
+</div>
+
 
 <div class="segment">
   <div class="container">

node/src/files/components/semantic/elements/button.css

@@ -258,7 +258,7 @@
 .ui.disabled.button.hover,
 .ui.disabled.button.down {
   cursor: default;
-  color: #DDDDDD;
+  color: #DDDDDD !important;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
   text-shadow: none !important;

node/src/files/components/semantic/modules/sidebar.css

@@ -77,14 +77,6 @@ body {
   -ms-transform: translateX(0%);
   transform: translateX(0%);
 }
-.ui.active.top.sidebar,
-.ui.active.bottom.sidebar {
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
-}
 .ui.active.right.sidebar {
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -92,6 +84,20 @@ body {
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
 }
+.ui.active.top.sidebar {
+  -webkit-transform: translateY(0%);
+  -moz-transform: translateY(0%);
+  -o-transform: translateY(0%);
+  -ms-transform: translateY(0%);
+  transform: translateY(0%);
+}
+.ui.active.bottom.sidebar {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
 /*******************************
            Variations
 *******************************/

node/src/files/components/semantic/modules/sidebar.js

@@ -141,13 +141,15 @@ $.fn.sidebar = function(parameters) {
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
-            style = ''
-              + '<style type="text/css" title="' + namespace + '">'
-              + 'body.pushed {'
-              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-              + '}'
-              + '</style>'
-            ;
+            if(direction !== className.bottom) {
+              style = ''
+                + '<style type="text/css" title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + '}'
+                + '</style>'
+              ;
+            }
             $head.append(style);
             module.refresh();
             module.debug('Adding body css to head', $style);
@@ -187,17 +189,17 @@ $.fn.sidebar = function(parameters) {
 
         get: {
           direction: function() {
-            if($module.hasClass('top')) {
-              return 'top';
+            if($module.hasClass(className.top)) {
+              return className.top;
             }
-            else if($module.hasClass('right')) {
-              return 'right';
+            else if($module.hasClass(className.right)) {
+              return className.right;
             }
-            else if($module.hasClass('bottom')) {
-              return 'bottom';
+            else if($module.hasClass(className.bottom)) {
+              return className.bottom;
             }
             else {
-              return 'left';
+              return className.left;
             }
           },
           transitionEvent: function() {

node/src/files/stylesheets/semantic.css

@@ -630,7 +630,7 @@ a:hover {
   left: 50%;
   margin-left: -685px;
 }
-#example.pushed .sticky-wrapper.stuck .peek {
+#example.left.pushed .sticky-wrapper.stuck .peek {
   padding-left: 132.5px;
 }
 
@@ -1031,7 +1031,7 @@ body.progress .ui.progress .bar {
     margin-left: 0px;
     left: 95px;
   }
-  #example.pushed .sticky-wrapper.stuck .peek {
+  #example.left.pushed .sticky-wrapper.stuck .peek {
     padding-left: 275px;
   }
 }
@@ -1079,7 +1079,7 @@ body.progress .ui.progress .bar {
   #example .sticky-wrapper.stuck .peek {
     margin-left: -780px;
   }
-  #example.pushed .main.menu {
+  #example.left.pushed .main.menu {
     margin-left: -132px;
   }
 }

src/elements/button.less

@@ -349,7 +349,7 @@
 .ui.disabled.button.hover,
 .ui.disabled.button.down {
   cursor: default;
-  color: #DDDDDD;
+  color: #DDDDDD !important;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
 

src/modules/sidebar.js

@@ -141,13 +141,15 @@ $.fn.sidebar = function(parameters) {
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
-            style = ''
-              + '<style type="text/css" title="' + namespace + '">'
-              + 'body.pushed {'
-              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-              + '}'
-              + '</style>'
-            ;
+            if(direction !== className.bottom) {
+              style = ''
+                + '<style type="text/css" title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + '}'
+                + '</style>'
+              ;
+            }
             $head.append(style);
             module.refresh();
             module.debug('Adding body css to head', $style);
@@ -187,17 +189,17 @@ $.fn.sidebar = function(parameters) {
 
         get: {
           direction: function() {
-            if($module.hasClass('top')) {
-              return 'top';
+            if($module.hasClass(className.top)) {
+              return className.top;
             }
-            else if($module.hasClass('right')) {
-              return 'right';
+            else if($module.hasClass(className.right)) {
+              return className.right;
             }
-            else if($module.hasClass('bottom')) {
-              return 'bottom';
+            else if($module.hasClass(className.bottom)) {
+              return className.bottom;
             }
             else {
-              return 'left';
+              return className.left;
             }
           },
           transitionEvent: function() {

src/modules/sidebar.less

@@ -94,22 +94,27 @@ body {
   -ms-transform: translateX(0%);
   transform: translateX(0%);
 }
+.ui.active.right.sidebar {
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  -o-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
 
-.ui.active.top.sidebar,
-.ui.active.bottom.sidebar {
+.ui.active.top.sidebar {
   -webkit-transform: translateY(0%);
   -moz-transform: translateY(0%);
   -o-transform: translateY(0%);
   -ms-transform: translateY(0%);
   transform: translateY(0%);
 }
-
-.ui.active.right.sidebar {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
+.ui.active.bottom.sidebar {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
 }