update kitchen sink example grid, rebuild dist

dist/components/grid.css

@@ -137,8 +137,8 @@
 -------------------------*/
 
 .ui.page.grid {
-  padding-left: 13%;
-  padding-right: 13%;
+  padding-left: 8%;
+  padding-right: 8%;
   width: auto;
 }
 
@@ -154,7 +154,8 @@
     width: auto;
     padding-left: 0em;
     padding-right: 0em;
-    margin: 0em;
+    margin-left: 0em;
+    margin-right: 0em;
   }
 }
 @media only screen and (min-width: 768px) {
@@ -162,8 +163,8 @@
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 8%;
-    padding-right: 8%;
+    padding-left: 4em;
+    padding-right: 4em;
   }
 }
 @media only screen and (min-width: 992px) {
@@ -171,8 +172,8 @@
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 13%;
-    padding-right: 13%;
+    padding-left: 8%;
+    padding-right: 8%;
   }
 }
 @media only screen and (min-width: 1400px) {
@@ -180,8 +181,8 @@
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 18%;
-    padding-right: 18%;
+    padding-left: 15%;
+    padding-right: 15%;
   }
 }
 @media only screen and (min-width: 1920px) {

dist/components/menu.css

@@ -906,6 +906,7 @@
 ---------------*/
 
 .ui.text.menu {
+  display: inline-block;
   background: none transparent;
   margin: 1rem -1rem;
   border-radius: 0px;

dist/components/sidebar.css

@@ -75,7 +75,7 @@
      Fixed
 ---------------*/
 
-.pushable > .ui.fixed {
+.pushable > .fixed {
   position: fixed;
   -webkit-transition: -webkit-transform 0.5s ease;
           transition: transform 0.5s ease;

dist/components/visibility.js

@@ -68,6 +68,9 @@ $.fn.visibility = function(parameters) {
           if(settings.type == 'image') {
             module.setup.image();
           }
+          if(settings.type == 'fixed') {
+            module.setup.fixed();
+          }
 
           requestAnimationFrame(module.checkVisibility);
         },
@@ -163,6 +166,36 @@ $.fn.visibility = function(parameters) {
                 });
               });
             }
+          },
+          fixed: function() {
+            module.verbose('Setting up fixed on element pass');
+            $module
+              .visibility({
+                once: false,
+                continuous: false,
+                onTopPassed: function() {
+                  $module
+                    .addClass(className.fixed)
+                    .css({
+                      position: 'fixed',
+                      top: settings.offset + 'px'
+                    })
+                  ;
+                  if(settings.animation && $.fn.transition !== undefined) {
+                    $module.transition(settings.transition, settings.duration);
+                  }
+                },
+                onTopPassedReverse: function() {
+                  $module
+                    .removeClass(className.fixed)
+                    .css({
+                      position: '',
+                      top: ''
+                    })
+                  ;
+                }
+              })
+            ;
           }
         },
 
@@ -175,10 +208,11 @@ $.fn.visibility = function(parameters) {
               .attr('src', src)
             ;
             if(offScreen) {
+              module.verbose('Image outside browser, avoiding animation')
               $module.show();
             }
             else {
-              if($.fn.transition !== undefined) {
+              if(settings.transition && $.fn.transition !== undefined) {
                 $module.transition(settings.transition, settings.duration);
               }
               else {
@@ -201,12 +235,6 @@ $.fn.visibility = function(parameters) {
           if( $.isPlainObject(module.cache) ) {
             module.cache.screen = {};
             module.cache.element = {};
-            if(!settings.once) {
-              module.cache.occurred = {};
-            }
-          }
-          else {
-
           }
         },
 
@@ -216,6 +244,8 @@ $.fn.visibility = function(parameters) {
           module.save.direction();
           module.save.screenCalculations();
           module.save.elementCalculations();
+
+          console.log(module.cache.occurred, element);
           // percentage
           module.passed();
 
@@ -866,6 +896,10 @@ $.fn.visibility.settings = {
   name                   : 'Visibility',
   namespace              : 'visibility',
 
+  className: {
+    fixed: 'fixed'
+  },
+
   debug                  : false,
   verbose                : false,
   performance            : true,
@@ -875,12 +909,14 @@ $.fn.visibility.settings = {
 
   context                : window,
 
-  // visibility check delay in ms
+  // visibility check delay in ms (defaults to animationFrame)
   throttle               : false,
 
-  // special visibility type
+  // special visibility type (image, fixed)
   type                   : false,
-  transition             : 'fade in',
+
+  // image only settings
+  transition             : false,
   duration               : 500,
 
   // array of callbacks for percentage

dist/semantic.css

@@ -9060,8 +9060,8 @@ i.flag.zimbabwe:before {
 -------------------------*/
 
 .ui.page.grid {
-  padding-left: 13%;
-  padding-right: 13%;
+  padding-left: 8%;
+  padding-right: 8%;
   width: auto;
 }
 
@@ -9080,7 +9080,8 @@ i.flag.zimbabwe:before {
     width: auto;
     padding-left: 0em;
     padding-right: 0em;
-    margin: 0em;
+    margin-left: 0em;
+    margin-right: 0em;
   }
 }
 
@@ -9089,8 +9090,8 @@ i.flag.zimbabwe:before {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 8%;
-    padding-right: 8%;
+    padding-left: 4em;
+    padding-right: 4em;
   }
 }
 
@@ -9099,8 +9100,8 @@ i.flag.zimbabwe:before {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 13%;
-    padding-right: 13%;
+    padding-left: 8%;
+    padding-right: 8%;
   }
 }
 
@@ -9109,8 +9110,8 @@ i.flag.zimbabwe:before {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 18%;
-    padding-right: 18%;
+    padding-left: 15%;
+    padding-right: 15%;
   }
 }
 
@@ -18078,6 +18079,7 @@ ol.ui.horizontal.list li:before,
 ---------------*/
 
 .ui.text.menu {
+  display: inline-block;
   background: none transparent;
   margin: 1rem -1rem;
   border-radius: 0px;
@@ -22970,7 +22972,7 @@ th {
      Fixed
 ---------------*/
 
-.pushable > .ui.fixed {
+.pushable > .fixed {
   position: fixed;
   -webkit-transition: -webkit-transform 0.5s ease;
   transition: transform 0.5s ease;

dist/semantic.js

@@ -15831,6 +15831,9 @@ $.fn.visibility = function(parameters) {
           if(settings.type == 'image') {
             module.setup.image();
           }
+          if(settings.type == 'fixed') {
+            module.setup.fixed();
+          }
 
           requestAnimationFrame(module.checkVisibility);
         },
@@ -15926,6 +15929,36 @@ $.fn.visibility = function(parameters) {
                 });
               });
             }
+          },
+          fixed: function() {
+            module.verbose('Setting up fixed on element pass');
+            $module
+              .visibility({
+                once: false,
+                continuous: false,
+                onTopPassed: function() {
+                  $module
+                    .addClass(className.fixed)
+                    .css({
+                      position: 'fixed',
+                      top: settings.offset + 'px'
+                    })
+                  ;
+                  if(settings.animation && $.fn.transition !== undefined) {
+                    $module.transition(settings.transition, settings.duration);
+                  }
+                },
+                onTopPassedReverse: function() {
+                  $module
+                    .removeClass(className.fixed)
+                    .css({
+                      position: '',
+                      top: ''
+                    })
+                  ;
+                }
+              })
+            ;
           }
         },
 
@@ -15938,10 +15971,11 @@ $.fn.visibility = function(parameters) {
               .attr('src', src)
             ;
             if(offScreen) {
+              module.verbose('Image outside browser, avoiding animation')
               $module.show();
             }
             else {
-              if($.fn.transition !== undefined) {
+              if(settings.transition && $.fn.transition !== undefined) {
                 $module.transition(settings.transition, settings.duration);
               }
               else {
@@ -15964,12 +15998,6 @@ $.fn.visibility = function(parameters) {
           if( $.isPlainObject(module.cache) ) {
             module.cache.screen = {};
             module.cache.element = {};
-            if(!settings.once) {
-              module.cache.occurred = {};
-            }
-          }
-          else {
-
           }
         },
 
@@ -15979,6 +16007,8 @@ $.fn.visibility = function(parameters) {
           module.save.direction();
           module.save.screenCalculations();
           module.save.elementCalculations();
+
+          console.log(module.cache.occurred, element);
           // percentage
           module.passed();
 
@@ -16629,6 +16659,10 @@ $.fn.visibility.settings = {
   name                   : 'Visibility',
   namespace              : 'visibility',
 
+  className: {
+    fixed: 'fixed'
+  },
+
   debug                  : false,
   verbose                : false,
   performance            : true,
@@ -16638,12 +16672,14 @@ $.fn.visibility.settings = {
 
   context                : window,
 
-  // visibility check delay in ms
+  // visibility check delay in ms (defaults to animationFrame)
   throttle               : false,
 
-  // special visibility type
+  // special visibility type (image, fixed)
   type                   : false,
-  transition             : 'fade in',
+
+  // image only settings
+  transition             : false,
   duration               : 500,
 
   // array of callbacks for percentage

examples/kitchensink.html

@@ -29,7 +29,7 @@
         <div class="ui divider"></div>
       </div>
     </div>
-    <div class="three column demo row">
+    <div class="three column doubling stackable demo row">
       <div class="column">
         <div class="no example">
           <h4 class="ui header">