Adds animation support to search, adds less variables to search, fixes some issues with sticky on reposition

src/definitions/modules/popup.js

@@ -87,6 +87,9 @@ $.fn.popup = function(parameters) {
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
+          if( !module.exists() ) {
+            module.create();
+          }
           module.instantiate();
         },
 
@@ -192,7 +195,7 @@ $.fn.popup = function(parameters) {
             $.proxy(settings.onCreate, $popup)();
           }
           else {
-            module.error(error.content);
+            module.error(error.content, element);
           }
         },
 
@@ -823,13 +826,13 @@ $.fn.popup.settings = {
   context        : 'body',
   position       : 'top center',
   delay          : {
-    show : 300,
+    show : 50,
     hide : 150
   },
   inline         : false,
   preserve       : false,
 
-  duration       : 250,
+  duration       : 200,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 

src/definitions/modules/search.js

@@ -347,14 +347,12 @@ $.fn.search = function(parameters) {
               if(settings.maxResults > 0) {
                 response.results = $.makeArray(response.results).slice(0, settings.maxResults);
               }
-              if(response.results.length > 0) {
                 if($.isFunction(template)) {
                   html = template(response);
                 }
                 else {
                   module.error(error.noTemplate, false);
                 }
-              }
             }
             else {
               html = module.message(error.noResults, 'empty');
@@ -372,19 +370,37 @@ $.fn.search = function(parameters) {
           },
           show: function() {
             if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') {
-              $results
-                .stop()
-                .fadeIn(200)
-              ;
+              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                module.debug('Showing results with css animations');
+                $results
+                  .transition(settings.transition + ' in', settings.duration)
+                ;
+              }
+              else {
+                module.debug('Showing results with javascript');
+                $results
+                  .stop()
+                  .fadeIn(settings.duration, settings.easing)
+                ;
+              }
               $.proxy(settings.onResultsOpen, $results)();
             }
           },
           hide: function() {
             if($results.filter(':visible').size() > 0) {
-              $results
-                .stop()
-                .fadeOut(200)
-              ;
+              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                module.debug('Hiding results with css animations');
+                $results
+                  .transition(settings.transition + ' out', settings.duration)
+                ;
+              }
+              else {
+                module.debug('Hiding results with javascript');
+                $results
+                  .stop()
+                  .fadeIn(settings.duration, settings.easing)
+                ;
+              }
               $.proxy(settings.onResultsClose, $results)();
             }
           },
@@ -622,7 +638,7 @@ $.fn.search.settings = {
 
   automatic      : 'true',
   type           : 'simple',
-  hideDelay      : 600,
+  hideDelay      : 300,
   minCharacters  : 3,
   searchThrottle : 300,
   maxResults     : 7,
@@ -633,6 +649,10 @@ $.fn.search.settings = {
     'description'
   ],
 
+  transition : 'scale',
+  duration   : 300,
+  easing     : 'easeOutExpo',
+
   // api config
   apiSettings: false,
 

src/definitions/modules/search.less

@@ -9,6 +9,15 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'search';
+
+@import '../../semantic.config';
+
 /*******************************
              Search
 *******************************/
@@ -22,27 +31,15 @@
 }
 
 .ui.search input {
-  -webkit-border-radius: 500rem;
-  -moz-border-radius: 500rem;
-  border-radius: 500rem;
+  border-radius: @promptBorderRadius;
 }
 
 /*--------------
-     Button
+     Icon
 ---------------*/
 
-.ui.search > .button {
-  position: relative;
-  z-index: 2;
-  float: right;
-  margin: 0px 0px 0px -15px;
-  padding: 6px 15px 7px;
-  -webkit-border-radius: 0px 15px 15px 0px;
-  -moz-border-radius: 0px 15px 15px 0px;
-  border-radius: 0px 15px 15px 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+.ui.search .prompt ~ .search.icon {
+  cursor: pointer;
 }
 
 /*--------------
@@ -53,78 +50,71 @@
   display: none;
 
   position: absolute;
-  z-index: 999;
+  z-index: 998;
   top: 100%;
-  left: 0px;
+  left: 0%;
 
   overflow: hidden;
-  background-color: #FFFFFF;
-
-  margin-top: 0.5em;
-  width: 380px;
-  font-size: 0.875em;
-  line-height: 1.2;
-  color: #555555;
-
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-
-  -webkit-box-shadow:
-    0px 0px 1px 1px rgba(0, 0, 0, 0.1),
-    0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
-  ;
-  -moz-box-shadow:
-    0px 0px 1px 1px rgba(0, 0, 0, 0.1),
-    0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
-  ;
-  box-shadow:
-    0px 0px 1px 1px rgba(0, 0, 0, 0.1),
-    0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
-  ;
+  background: @resultsBackground;
+
+  margin-top: @resultsDistance;
+  width: @resultsWidth;
+
+  border-radius: @resultsBorderRadius;
+  box-shadow: @resultsBoxShadow;
 }
+
+/*--------------
+    Result
+---------------*/
+
 .ui.search .result {
+  font-family: @pageFont;
   cursor: pointer;
   overflow: hidden;
-  padding: 0.5em 1em;
+  font-size: @resultFontSize;
+  padding: @resultVerticalPadding @resultHorizontalPadding;
+  color: @resultTextColor;
+  line-height: @resultLineHeight;
 }
 .ui.search .result:first-child {
   border-top: none;
 }
+
+/* Image */
 .ui.search .result .image {
-  background: #F0F0F0;
-  margin-right: 10px;
-  float: left;
+  float: @resultImageFloat;
   overflow: hidden;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  height: 30px;
+  background: @resultImageBackground;
+  width: @resultImageWidth;
+  height: @resultImageHeight;
+  border-radius: @resultImageBorderRadius;
 }
 .ui.search .result .image img {
   display: block;
-  width: 73px;
-  height: 30px;
-}
-.ui.search .result .image ~ .info {
-  float: none;
-  margin-left: 80px;
+  width: auto;
+  height: 100%;
 }
 
-.ui.search .result .info {
-  float: left;
+/*--------------
+      Info
+---------------*/
+
+.ui.search .result .image + .content {
+  margin: @resultImageMargin;
 }
+
 .ui.search .result .title {
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.8);
+  font-family: @resultTitleFont;
+  font-weight: @resultTitleFontWeight;
+  color: @resultTitleColor;
 }
 .ui.search .result .description {
-  color: rgba(0, 0, 0, 0.6);
+  color: @resultDescriptionColor;
 }
 .ui.search .result .price {
-  float: right;
-  color: #5BBD72;
-  font-weight: bold;
+  float: @resultPriceFloat;
+  color: @resultPriceColor;
 }
 
 /*--------------
@@ -132,70 +122,34 @@
 ---------------*/
 
 .ui.search .message {
-  padding: 1em;
-}
-.ui.search .message .text .title {
-  margin: 0em 0em 0.5rem;
-
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.8);
-}
-.ui.search .message .text .description {
-  margin: 0em;
-  font-size: 1rem;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-
-/*--------------
-    Categories
----------------*/
-
-.ui.search .results .category {
-  background-color: #FAFAFA;
-
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-
-  -webkit-transition: background 0.2s ease-in;
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  -ms-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-.ui.search .results .category:first-child {
-  border-top: none;
+  padding: @messageVerticalPadding @messageHorizontalPadding;
 }
-
-.ui.search .results .category > .name {
-  float: left;
-  padding: 12px 0px 0px 8px;
-  font-weight: bold;
-  color: #777777;
-  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+.ui.search .message .header {
+  font-family: @headerFont;
+  font-size: @messageHeaderFontSize;
+  font-weight: @messageHeaderFontWeight;
+  color: @messageHeaderColor;
 }
-.ui.search .results .category .result {
-  background-color: #FFFFFF;
-  margin-left: 80px;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+.ui.search .message .description {
+  margin-top: @messageDescriptionDistance;
+  font-size: @messageDescriptionFontSize;
+  color: @messageDescriptionColor;
 }
 
 /* View All Results */
 .ui.search .all {
   display: block;
-
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #FAFAFA;
-  height: 2em;
-  line-height: 2em;
-  color: rgba(0, 0, 0, 0.6);
-
-  font-weight: bold;
-  text-align: center;
+  border-top: @allResultsBorder;
+  background-color: @allResultsBackground;
+  height: @allResultsHeight;
+  line-height: @allResultsHeight;
+  color: @allResultsColor;
+  font-weight: @allResultsFontWeight;
+  text-align: @allResultsAlign;
 }
 
 
+
 /*******************************
             States
 *******************************/
@@ -205,11 +159,11 @@
 ---------------*/
 
 .ui.search .result:hover,
-.ui.search .category .result:hover {
-  background-color: #F8F8F8;
+.ui.search .results .category .result:hover {
+  background: @resultHoverBackground;
 }
 .ui.search .all:hover {
-  background-color: #F0F0F0;
+  background: @allResultsHoverBackground;
 }
 
 /*--------------
@@ -217,7 +171,7 @@
 ---------------*/
 
 .ui.search.loading .input .icon {
-  background: url(../../themes/packages/default/assets/images/loader-mini.gif) no-repeat 50% 50%;
+  background: url(@loaderPath) no-repeat 50% 50%;
 }
 .ui.search.loading .input .icon:before,
 .ui.search.loading .input .icon:after {
@@ -230,44 +184,82 @@
 ---------------*/
 
 .ui.search .results .category.active {
-  background-color: #F1F1F1;
+  background-color: @categoryActiveBackground;
 }
 .ui.search .results .category.active > .name {
-  color: #333333;
+  color: @categoryNameActiveColor;
 }
 
 .ui.search .result.active,
-.ui.search .category .result.active {
-  background-color: #FBFBFB;
+.ui.search .results .category .result.active {
+  border-left-color: @resultActiveBorderLeft;
+  background-color: @resultActiveBackground;
+  box-shadow: @resultActiveBoxShadow;
 }
 .ui.search .result.active .title {
-  color: #000000;
+  color: @resultActiveTitleColor;
 }
 .ui.search .result.active .description {
-  color: #555555;
+  color: @resultActiveDescriptionColor;
 }
 
-
-
 /*******************************
-           Variations
+           Types
 *******************************/
 
 
+/*-------------------
+     Left / Right
+--------------------*/
 
-/* Large */
-.ui.search .large.result .image,
-.ui.search .large.result .image img {
-  width: 50px;
-  height: 50px;
+.ui.right.aligned.search .results {
+  right: 0%;
+  left: auto;
 }
-.ui.search .large.results .indented.info {
-  margin-left: 65px;
+
+/*--------------
+    Categories
+---------------*/
+
+.ui.search .results .category {
+  background: @categoryBackground;
+  box-shadow: @categoryBoxShadow;
 }
-.ui.search .large.results .info .title {
-  font-size: 16px;
+.ui.search .results .category,
+.ui.search .results .category .result {
+  position: relative;
+  transition: @categoryResultTransition;
 }
-.ui.search .large.results .info .description {
-  font-size: 11px;
+.ui.search .results .category:first-child {
+  box-shadow: none;
+}
+
+.ui.search .results .category > .name {
+  font-family: @categoryNameFont;
+  float: @categoryNameFontSize;
+  float: @categoryNameFloat;
+  padding: @categoryNamePadding;
+  font-weight: @categoryNameFontWeight;
+  color: @categoryNameColor;
+}
+.ui.search .results .category .result {
+  background-color: @categoryResultBackground;
+  margin-left: @categoryNameWidth;
+  border-left: @categoryResultLeftBorder;
+  border-bottom: @categoryResultTopBorder;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui.search {
+  font-size: @medium;
+}
+
+.ui.large.search {
+  font-size: @large;
 }
 
+.loadUIOverrides();

src/definitions/modules/sticky.js

@@ -71,13 +71,17 @@ $.fn.sticky = function(parameters) {
             return;
           }
 
-          module.verbose('Initializing sticky', settings, $container);
 
+          if(module.supports.sticky()) {
+            // needs to enable native ios support
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
             .on('scroll' + eventNamespace, module.event.scroll)
           ;
 
+          module.verbose('Initializing sticky', settings, $container);
+
           module.save.positions();
 
           module.instantiate();
@@ -117,11 +121,24 @@ $.fn.sticky = function(parameters) {
 
         refresh: function(hardRefresh) {
           module.reset();
-          module.save.positions();
-          $.proxy(settings.onReposition, element)();
           if(hardRefresh) {
             $container = $module.offsetParent();
           }
+          module.save.positions();
+          $.proxy(settings.onReposition, element)();
+        },
+
+        supports: {
+          sticky: function() {
+            var
+              $element = $('<div/>'),
+              element = $element.get()
+            ;
+            $element
+              .addClass(className.supported)
+            ;
+            return($element.css('position').match('sticky'));
+          }
         },
 
         save: {
@@ -213,9 +230,13 @@ $.fn.sticky = function(parameters) {
 
         set: {
           containerSize: function() {
-            if($container.get(0).tagName === 'HTML') {
+            var
+              tagName = $container.get(0).tagName
+            ;
+            if(tagName === 'HTML' || tagName == 'body') {
               if($module.is(':visible')) {
-                module.error(error.container, $container.get(0).tagName, $module);
+                module.error(error.container, tagName, $module);
+                $container = $module.offsetParent();
               }
             }
             else {
@@ -264,21 +285,24 @@ $.fn.sticky = function(parameters) {
             currentOffset  = module.get.currentOffset(),
             newOffset      = module.get.newOffset(scrollTop),
             elementPassed  = (screen.bottom > element.top + element.height),
-            bottomEdge     = (cache.element.height + screen.top)
+            fixedBottom     = (cache.element.height + screen.top)
           ;
+
           module.save.scroll(scrollTop);
+
           if( module.is.fixed() ) {
             if(fits) {
-              // exit top of container
+              // if module is fixed top
               if(module.is.top()) {
                 if( screen.top < element.top ) {
                   module.unfix();
                 }
-                else if( bottomEdge > context.bottom ) {
+                else if( fixedBottom > context.bottom ) {
                   module.debug('Top attached rail has reached bottom of container');
                   module.bindBottom();
                 }
               }
+              // if module is fixed bottom
               if(module.is.bottom() ) {
                 // top edge
                 if( (screen.bottom - element.height) < element.top) {
@@ -290,7 +314,7 @@ $.fn.sticky = function(parameters) {
                   module.bindBottom();
                 }
               }
-              if( bottomEdge > context.bottom ) {
+              if( fixedBottom > context.bottom ) {
                 module.bindBottom();
               }
             }
@@ -334,6 +358,10 @@ $.fn.sticky = function(parameters) {
             }
           }
           else {
+            // determine if needs to be bound
+            if(screen.top + element.height > context.bottom) {
+              module.bindBottom();
+            }
             if(fits) {
               // fix to bottom of screen on way back up
               if(module.is.bottom() ) {
@@ -348,7 +376,7 @@ $.fn.sticky = function(parameters) {
                   }
                 }
               }
-              else if(screen.top > element.top && screen.top < context.bottom - element.height) {
+              else if(screen.top >= element.top && screen.top < context.bottom - element.height) {
                 module.stickTop();
               }
             }
@@ -357,7 +385,6 @@ $.fn.sticky = function(parameters) {
                 module.stickBottom();
               }
             }
-
           }
         },
 
@@ -642,10 +669,11 @@ $.fn.sticky.settings = {
   },
 
   className : {
-    bound  : 'bound',
-    fixed  : 'fixed',
-    top    : 'top',
-    bottom : 'bottom'
+    bound     : 'bound',
+    fixed     : 'fixed',
+    supported : 'native',
+    top       : 'top',
+    bottom    : 'bottom'
   }
 
 };

src/definitions/modules/sticky.less

@@ -1,17 +1,50 @@
+ /*
+ * # Semantic - Sticky
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'sticky';
+
+@import '../../semantic.config';
+
+/*******************************
+            Sticky
+*******************************/
+
 .ui.sticky {
   position: static;
 }
 
+/*******************************
+            States
+*******************************/
+
+/* Bound */
 .ui.sticky.bound {
   position: absolute;
   left: auto;
   right: auto;
 }
+
+/* Fixed */
 .ui.sticky.fixed {
   position: fixed;
   left: auto;
   right: auto;
 }
+
+/* Bound/Fixed Position */
 .ui.sticky.bound.top,
 .ui.sticky.fixed.top {
   top: 0px;
@@ -21,4 +54,17 @@
 .ui.sticky.fixed.bottom {
   top: auto;
   bottom: 0px;
-}
+}
+
+
+/*******************************
+            Types
+*******************************/
+
+.ui.native.sticky {
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  position: sticky;
+}

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

@@ -37,10 +37,10 @@
 /* Special Message */
 @messageVerticalPadding: 1em;
 @messageHorizontalPadding: 1em;
-@messageTitleFontSize: 1.25em;
-@messageTitleFontWeight: bold;
-@messageTitleColor: @textColor;
-@messageDescriptionDistance: 0.5rem;
+@messageHeaderFontSize: 1.2em;
+@messageHeaderFontWeight: bold;
+@messageHeaderColor: @textColor;
+@messageDescriptionDistance: 0.25rem;
 @messageDescriptionFontSize: 1rem;
 @messageDescriptionColor: @textColor;
 
@@ -88,7 +88,7 @@
 @categoryNameFont: @pageFont;
 @categoryNameFontSize: 0.9em;
 @categoryNameFloat: left;
-@categoryNamePadding: 0.5em 0em 0em 1em;
+@categoryNamePadding: 0.4em 0em 0em 1em;
 @categoryNameFontWeight: bold;
 @categoryNameColor: @lightTextColor;