Allow final display state to be specified in transition settings, fixes for search sizes

10 years ago · 779c8cfc19
22 changed files with 200 additions and 135 deletions
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@ -74,6 +74,7 @@
 - **Transition** - Transitions now will handle multiple display types more consistently
 - **Transition** - Transition now has a new ``start`` callback, before animation starts
 - **Transition** - Complete callback now does not occur if animation is interrupted before completing
+- **Transition** - You can now specify the final displayType of a transitioning element in metadata or settings (not just automatically detected)

 ** Bug Fixes **
 - See Closed GitHub Issues
--- a/dist/components/header.css
+++ b/dist/components/header.css
@ -29,7 +29,7 @@
  color: rgba(0, 0, 0, 0.8);
 }
 .ui.header .sub.header {
-  font-size: 1.1rem;
+  font-size: 1.0714rem;
  font-weight: normal;
  margin: 0em;
  padding: 0em;
@ -410,11 +410,11 @@ a.ui.inverted.yellow.header:hover {
 --------------------*/

 .ui.dividing.header {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .ui.dividing.header .sub.header {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
 }
 .ui.dividing.header .icon {
  margin-bottom: 0.2em;
@ -485,19 +485,19 @@ a.ui.inverted.yellow.header:hover {

 /* Attached Sizes */
 .ui.tiny.attached.header {
-  font-size: 0.875em;
+  font-size: 0.8571em;
 }
 .ui.small.attached.header {
-  font-size: 0.9em;
+  font-size: 0.9285em;
 }
 .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 1em;
 }
 .ui.large.attached.header {
-  font-size: 1.1em;
+  font-size: 1.0714em;
 }
 .ui.huge.attached.header {
-  font-size: 1.2em;
+  font-size: 1.1428em;
 }

 /*-------------------
--- a/dist/components/header.min.css
+++ b/dist/components/header.min.css
--- a/dist/components/message.css
+++ b/dist/components/message.css
@ -21,7 +21,7 @@
  margin: 1em 0em;
  background: #efefef;
  padding: 1em 1.5em;
-  line-height: 1.33;
+  line-height: 1.3;
  color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
          transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
@ -108,7 +108,7 @@
  cursor: pointer;
  position: absolute;
  margin: 0em;
-  top: 1.165em;
+  top: 1.15em;
  right: 0.5em;
  opacity: 0.7;
  -webkit-transition: opacity 0.1s linear
--- a/dist/components/message.min.css
+++ b/dist/components/message.min.css
--- a/dist/components/modal.css
+++ b/dist/components/modal.css
@ -80,7 +80,7 @@
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
-  margin: 1em 0em 1rem;
+  margin: 0em;
  padding: 1.2rem 2rem;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 1.6em;
--- a/dist/components/modal.min.css
+++ b/dist/components/modal.min.css
--- a/dist/components/reveal.css
+++ b/dist/components/reveal.css
@ -26,8 +26,8 @@
  top: 0em !important;
  left: 0em !important;
  z-index: 4 !important;
-  -webkit-transition: all 0.2s ease 0.15s;
-          transition: all 0.2s ease 0.15s;
+  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+          transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }
 .ui.reveal > .hidden.content {
  position: relative !important;
@ -54,8 +54,8 @@
  display: block;
  float: left;
  margin: 0em;
-  -webkit-transition: top 0.2s ease 0.15s, left 0.2s ease 0.15s, right 0.2s ease 0.15s, bottom 0.2s ease 0.15s;
-          transition: top 0.2s ease 0.15s, left 0.2s ease 0.15s, right 0.2s ease 0.15s, bottom 0.2s ease 0.15s;
+  -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+          transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }
 .ui.slide.reveal > .visible.content {
  position: relative !important;
@ -186,8 +186,8 @@
 ---------------*/

 .ui.rotate.reveal > .visible.content {
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
+  -webkit-transition-duration: 0.8s;
+          transition-duration: 0.8s;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
--- a/dist/components/reveal.min.css
+++ b/dist/components/reveal.min.css
@ -8,4 +8,4 @@
 * http://opensource.org/licenses/MIT
 *
 */
-.ui.reveal{display:inline-block;position:relative!important;z-index:3!important;font-size:0!important}.ui.reveal>.visible.content{position:absolute!important;top:0!important;left:0!important;z-index:4!important;-webkit-transition:all .2s ease .15s;transition:all .2s ease .15s}.ui.reveal>.hidden.content{position:relative!important;z-index:3!important}.ui.slide.reveal{position:relative!important;display:block;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>.content{display:block;float:left;margin:0;-webkit-transition:top .2s ease .15s,left .2s ease .15s,right .2s ease .15s,bottom .2s ease .15s;transition:top .2s ease .15s,left .2s ease .15s,right .2s ease .15s,bottom .2s ease .15s}.ui.slide.reveal>.visible.content{position:relative!important}.ui.slide.reveal>.hidden.content{position:absolute!important;left:100%!important;width:100%!important}.ui.slide.reveal:hover>.visible.content{left:-100%!important}.ui.slide.reveal:hover>.hidden.content{left:0!important}.ui.right.slide.reveal>.visible.content{left:0}.ui.right.slide.reveal>.hidden.content{left:auto!important;right:100%!important}.ui.right.slide.reveal:hover>.visible.content{left:100%!important;right:auto!important}.ui.right.slide.reveal:hover>.hidden.content{left:auto!important;right:0!important}.ui.up.slide.reveal>.visible.content{top:0!important;left:0!important;right:auto!important;bottom:auto!important}.ui.up.slide.reveal>.hidden.content{top:100%!important;left:0!important;right:auto!important;bottom:auto!important}.ui.slide.up.reveal:hover>.visible.content{top:-100%!important;left:0!important}.ui.slide.up.reveal:hover>.hidden.content{top:0!important;left:0!important}.ui.down.slide.reveal>.visible.content{top:auto!important;right:auto!important;bottom:auto!important;bottom:0!important}.ui.down.slide.reveal>.hidden.content{top:auto!important;right:auto!important;bottom:100%!important;left:0!important}.ui.slide.down.reveal:hover>.visible.content{left:0!important;bottom:-100%!important}.ui.slide.down.reveal:hover>.hidden.content{left:0!important;bottom:0!important}.ui.fade.reveal>.visible.content{opacity:1}.ui.fade.reveal:hover>.visible.content{opacity:0}.ui.move.left.reveal>.visible.content,.ui.move.reveal>.visible.content{left:auto!important;top:auto!important;bottom:auto!important;right:0!important}.ui.move.left.reveal:hover>.visible.content,.ui.move.reveal:hover>.visible.content{right:100%!important}.ui.move.right.reveal>.visible.content{right:auto!important;top:auto!important;bottom:auto!important;left:0!important}.ui.move.right.reveal:hover>.visible.content{left:100%!important}.ui.move.up.reveal>.visible.content{right:auto!important;left:auto!important;top:auto!important;bottom:0!important}.ui.move.up.reveal:hover>.visible.content{bottom:100%!important}.ui.move.down.reveal>.visible.content{right:auto!important;left:auto!important;top:0!important;bottom:auto!important}.ui.move.down.reveal:hover>.visible.content{top:100%!important}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.rotate.reveal>.visible.content,.ui.rotate.right.reveal>.visible.content{-webkit-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>.visible.content{-webkit-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.disabled.reveal{opacity:1!important}.ui.disabled.reveal>.content{-webkit-transition:none!important;transition:none!important}.ui.disabled.reveal:hover>.visible.content{position:static!important;display:block!important;opacity:1!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}.ui.disabled.reveal:hover>.hidden.content{display:none!important}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>.content{-webkit-transition-delay:0s!important;transition-delay:0s!important}.ui.reveal>.content{font-size:1rem!important}
+.ui.reveal{display:inline-block;position:relative!important;z-index:3!important;font-size:0!important}.ui.reveal>.visible.content{position:absolute!important;top:0!important;left:0!important;z-index:4!important;-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>.hidden.content{position:relative!important;z-index:3!important}.ui.slide.reveal{position:relative!important;display:block;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>.content{display:block;float:left;margin:0;-webkit-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.slide.reveal>.visible.content{position:relative!important}.ui.slide.reveal>.hidden.content{position:absolute!important;left:100%!important;width:100%!important}.ui.slide.reveal:hover>.visible.content{left:-100%!important}.ui.slide.reveal:hover>.hidden.content{left:0!important}.ui.right.slide.reveal>.visible.content{left:0}.ui.right.slide.reveal>.hidden.content{left:auto!important;right:100%!important}.ui.right.slide.reveal:hover>.visible.content{left:100%!important;right:auto!important}.ui.right.slide.reveal:hover>.hidden.content{left:auto!important;right:0!important}.ui.up.slide.reveal>.visible.content{top:0!important;left:0!important;right:auto!important;bottom:auto!important}.ui.up.slide.reveal>.hidden.content{top:100%!important;left:0!important;right:auto!important;bottom:auto!important}.ui.slide.up.reveal:hover>.visible.content{top:-100%!important;left:0!important}.ui.slide.up.reveal:hover>.hidden.content{top:0!important;left:0!important}.ui.down.slide.reveal>.visible.content{top:auto!important;right:auto!important;bottom:auto!important;bottom:0!important}.ui.down.slide.reveal>.hidden.content{top:auto!important;right:auto!important;bottom:100%!important;left:0!important}.ui.slide.down.reveal:hover>.visible.content{left:0!important;bottom:-100%!important}.ui.slide.down.reveal:hover>.hidden.content{left:0!important;bottom:0!important}.ui.fade.reveal>.visible.content{opacity:1}.ui.fade.reveal:hover>.visible.content{opacity:0}.ui.move.left.reveal>.visible.content,.ui.move.reveal>.visible.content{left:auto!important;top:auto!important;bottom:auto!important;right:0!important}.ui.move.left.reveal:hover>.visible.content,.ui.move.reveal:hover>.visible.content{right:100%!important}.ui.move.right.reveal>.visible.content{right:auto!important;top:auto!important;bottom:auto!important;left:0!important}.ui.move.right.reveal:hover>.visible.content{left:100%!important}.ui.move.up.reveal>.visible.content{right:auto!important;left:auto!important;top:auto!important;bottom:0!important}.ui.move.up.reveal:hover>.visible.content{bottom:100%!important}.ui.move.down.reveal>.visible.content{right:auto!important;left:auto!important;top:0!important;bottom:auto!important}.ui.move.down.reveal:hover>.visible.content{top:100%!important}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.8s;transition-duration:.8s;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.rotate.reveal>.visible.content,.ui.rotate.right.reveal>.visible.content{-webkit-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>.visible.content{-webkit-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.disabled.reveal{opacity:1!important}.ui.disabled.reveal>.content{-webkit-transition:none!important;transition:none!important}.ui.disabled.reveal:hover>.visible.content{position:static!important;display:block!important;opacity:1!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}.ui.disabled.reveal:hover>.hidden.content{display:none!important}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>.content{-webkit-transition-delay:0s!important;transition-delay:0s!important}.ui.reveal>.content{font-size:1rem!important}
--- a/dist/components/search.css
+++ b/dist/components/search.css
@ -55,15 +55,14 @@
 .ui.search > .results {
  display: none;
  position: absolute;
-  z-index: 998;
  top: 100%;
  left: 0%;
-  overflow: hidden;
  background: #ffffff;
  margin-top: 0.5em;
-  width: 380px;
+  width: 16em;
  border-radius: 0.25em;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
+  z-index: 998;
 }

 /*--------------
@ -74,14 +73,14 @@
  cursor: pointer;
  display: block;
  overflow: hidden;
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.33;
+  border-bottom: 1px solid rgba(39, 41, 43, 0.15);
 }
-.ui.search > .results .result:first-child {
-  border-top: none;
+.ui.search > .results .result:last-child {
+  border-bottom: none;
 }

 /* Image */
@ -144,10 +143,9 @@
 /* View All Results */
 .ui.search > .results > .action {
  display: block;
-  border-top: 1px solid rgba(39, 41, 43, 0.15);
+  border-top: none;
  background: #f0f0f0;
-  height: 2em;
-  line-height: 2em;
+  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  text-align: center;
@ -198,11 +196,11 @@
 ---------------*/

 .ui.search > .results .result:hover,
-.ui.search > .results .category .result:hover {
+.ui.category.search > .results .category .result:hover {
  background: #fafafa;
 }
-.ui.search .all:hover {
-  background: #fafafa;
+.ui.search .action:hover {
+  background: #e0e0e0;
 }

 /*--------------
@ -216,7 +214,7 @@
  color: rgba(0, 0, 0, 0.8);
 }
 .ui.search > .results .result.active,
-.ui.search > .results .category .result.active {
+.ui.category.search > .results .category .result.active {
  position: relative;
  border-left-color: transparent;
  background: #f0f0f0;
@ -235,38 +233,28 @@
 *******************************/


-/*-------------------
-     Left / Right
--------------------*/
-
-.ui[class*="left aligned"].search > .results {
-  right: auto;
-  left: 0%;
-}
-.ui[class*="right aligned"].search > .results {
-  right: 0%;
-  left: auto;
-}
-
 /*--------------
    Categories
 ---------------*/

+.ui.category.search .results {
+  width: 28em;
+}

 /* Category */
-.ui.search > .results .category {
+.ui.category.search > .results .category {
  background: #f0f0f0;
  box-shadow: none;
  border-bottom: 1px solid rgba(39, 41, 43, 0.15);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
          transition: background 0.2s ease, border-color 0.2s ease;
 }
-.ui.search > .results .category:last-child {
+.ui.category.search > .results .category:last-child {
  border-bottom: none;
 }

 /* Category Result */
-.ui.search > .results .category .result {
+.ui.category.search > .results .category .result {
  background: #ffffff;
  margin-left: 100px;
  border-left: 1px solid rgba(39, 41, 43, 0.15);
@ -274,16 +262,16 @@
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
          transition: background 0.2s ease, border-color 0.2s ease;
 }
-.ui.search > .results .category .result:last-child {
+.ui.category.search > .results .category .result:last-child {
  border-bottom: none;
 }

 /* Category Result Name */
-.ui.search > .results .category > .name {
+.ui.category.search > .results .category > .name {
+  width: 100px;
  background: #f0f0f0;
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1em;
-  width: 100px;
  float: 1em;
  float: left;
  padding: 0.4em 1em;
@ -296,6 +284,32 @@
           Variations
 *******************************/

+
+/*-------------------
+     Left / Right
+--------------------*/
+
+.ui[class*="left aligned"].search > .results {
+  right: auto;
+  left: 0%;
+}
+.ui[class*="right aligned"].search > .results {
+  right: 0%;
+  left: auto;
+}
+
+/*--------------
+    Fluid
+---------------*/
+
+.ui.fluid.search .results {
+  width: 100%;
+}
+
+/*--------------
+      Sizes
+---------------*/
+
 .ui.search {
  font-size: 1em;
 }
--- a/dist/components/search.js
+++ b/dist/components/search.js
@ -63,21 +63,22 @@ $.fn.search = function(parameters) {
                ? 'propertychange'
                : 'keyup'
          ;
-          // attach events
-          $prompt
-            .on('focus' + eventNamespace, module.event.focus)
-            .on('blur' + eventNamespace, module.event.blur)
-            .on('keydown' + eventNamespace, module.handleKeyboard)
-          ;
          if(settings.automatic) {
            $prompt
              .on(inputEvent + eventNamespace, module.search.throttle)
            ;
          }
+          $prompt
+            .on('focus' + eventNamespace, module.event.focus)
+            .on('blur' + eventNamespace, module.event.blur)
+            .on('keydown' + eventNamespace, module.handleKeyboard)
+          ;
          $searchButton
            .on('click' + eventNamespace, module.search.query)
          ;
          $results
+            .on('mousedown' + eventNamespace, module.event.mousedown)
+            .on('mouseup' + eventNamespace, module.event.mouseup)
            .on('click' + eventNamespace, selector.result, module.results.select)
          ;
          module.instantiate();
@ -115,12 +116,20 @@ $.fn.search = function(parameters) {
              module.results.show();
            }
          },
-          blur: function() {
+          mousedown: function() {
+            module.resultsClicked = true;
+          },
+          mouseup: function() {
+            module.resultsClicked = false;
+          },
+          blur: function(event) {
            module.search.cancel();
            $module
              .removeClass(className.focus)
            ;
-            module.timer = setTimeout(module.results.hide, settings.hideDelay);
+            if(!module.resultsClicked) {
+              module.timer = setTimeout(module.results.hide, settings.hideDelay);
+            }
          }
        },
        handleKeyboard: function(event) {
@ -677,7 +686,7 @@ $.fn.search.settings = {

  automatic      : 'true',
  hideDelay      : 0,
-  searchDelay    : 200,
+  searchDelay    : 300,
  maxResults     : 7,
  cache          : true,

@ -861,10 +870,10 @@ $.fn.search.settings = {
          html += '</a>';
        });

-        if(response.resultPage) {
+        if(response.action) {
          html += ''
-          + '<a href="' + response.resultPage.url + '" class="all">'
-          +   response.resultPage.text
+          + '<a href="' + response.action.url + '" class="action">'
+          +   response.action.text
          + '</a>';
        }
        return html;
--- a/dist/components/search.min.css
+++ b/dist/components/search.min.css
@ -8,4 +8,4 @@
 * http://opensource.org/licenses/MIT
 *
 */
-.ui.search{position:relative}.ui.search>.prompt{margin:0;outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);text-shadow:none;font-style:normal;font-weight:400;line-height:1.2;padding:.7em 1em;font-size:1em;background:#fff;border:1px solid rgba(39,41,43,.15);color:rgba(0,0,0,.8);box-shadow:0 0 transparent inset;-webkit-transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}.ui.search .prompt{border-radius:500rem}.ui.search .prompt~.search.icon{cursor:pointer}.ui.search>.results{display:none;position:absolute;z-index:998;top:100%;left:0;overflow:hidden;background:#fff;margin-top:.5em;width:380px;border-radius:.25em;box-shadow:0 1px 3px 1px rgba(0,0,0,.2)}.ui.search>.results .result{cursor:pointer;display:block;overflow:hidden;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;padding:.5em 1em;color:rgba(0,0,0,.8);line-height:1.33}.ui.search>.results .result:first-child{border-top:none}.ui.search>.results .result .image{float:right;overflow:hidden;background:0 0;width:5em;height:3em;border-radius:.25em}.ui.search>.results .result .image img{display:block;width:auto;height:100%}.ui.search>.results .result .image+.content{margin:0 6em 0 0}.ui.search>.results .result .title{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;font-size:1em;color:rgba(0,0,0,.85)}.ui.search>.results .result .description{margin-top:0;font-size:.9285em;color:rgba(0,0,0,.4)}.ui.search>.results .result .price{float:right;color:#5bbd72}.ui.search>.results>.message{padding:1em}.ui.search>.results>.message .header{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.1428em;font-weight:700;color:rgba(0,0,0,.8)}.ui.search>.results>.message .description{margin-top:.25rem;font-size:1em;color:rgba(0,0,0,.8)}.ui.search>.results>.action{display:block;border-top:1px solid rgba(39,41,43,.15);background:#f0f0f0;height:2em;line-height:2em;color:rgba(0,0,0,.8);font-weight:700;text-align:center}.ui.loading.search .input>.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285em 0 0 -.64285em;width:1.2857em;height:1.2857em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.search .input>.icon:after{position:absolute;content:'';top:50%;left:50%;margin:-.64285em 0 0 -.64285em;width:1.2857em;height:1.2857em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#aaa transparent transparent;border-style:solid;border-width:.2em;box-shadow:0 0 0 1px transparent}.ui.search .all:hover,.ui.search>.results .category .result:hover,.ui.search>.results .result:hover{background:#fafafa}.ui.search>.results .category.active{background:#f0f0f0}.ui.search>.results .category.active>.name{color:rgba(0,0,0,.8)}.ui.search>.results .category .result.active,.ui.search>.results .result.active{position:relative;border-left-color:transparent;background:#f0f0f0;box-shadow:3px 0 3px 0 rgba(39,41,43,.15)}.ui.search>.results .result.active .description,.ui.search>.results .result.active .title{color:rgba(0,0,0,.85)}.ui[class*="left aligned"].search>.results{right:auto;left:0}.ui[class*="right aligned"].search>.results{right:0;left:auto}.ui.search>.results .category{background:#f0f0f0;box-shadow:none;border-bottom:1px solid rgba(39,41,43,.15);-webkit-transition:background .2s ease,border-color .2s ease;transition:background .2s ease,border-color .2s ease}.ui.search>.results .category:last-child{border-bottom:none}.ui.search>.results .category .result{background:#fff;margin-left:100px;border-left:1px solid rgba(39,41,43,.15);border-bottom:1px solid rgba(39,41,43,.15);-webkit-transition:background .2s ease,border-color .2s ease;transition:background .2s ease,border-color .2s ease}.ui.search>.results .category .result:last-child{border-bottom:none}.ui.search>.results .category>.name{background:#f0f0f0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;width:100px;float:1em;float:left;padding:.4em 1em;font-weight:700;color:rgba(0,0,0,.4)}.ui.search{font-size:1em}.ui.large.search{font-size:1.1em}
+.ui.search{position:relative}.ui.search>.prompt{margin:0;outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);text-shadow:none;font-style:normal;font-weight:400;line-height:1.2;padding:.7em 1em;font-size:1em;background:#fff;border:1px solid rgba(39,41,43,.15);color:rgba(0,0,0,.8);box-shadow:0 0 transparent inset;-webkit-transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}.ui.search .prompt{border-radius:500rem}.ui.search .prompt~.search.icon{cursor:pointer}.ui.search>.results{display:none;position:absolute;top:100%;left:0;background:#fff;margin-top:.5em;width:16em;border-radius:.25em;box-shadow:0 1px 3px 1px rgba(0,0,0,.2);z-index:998}.ui.search>.results .result{cursor:pointer;display:block;overflow:hidden;font-size:1em;padding:.5em 1em;color:rgba(0,0,0,.8);line-height:1.33;border-bottom:1px solid rgba(39,41,43,.15)}.ui.search>.results .result:last-child{border-bottom:none}.ui.search>.results .result .image{float:right;overflow:hidden;background:0 0;width:5em;height:3em;border-radius:.25em}.ui.search>.results .result .image img{display:block;width:auto;height:100%}.ui.search>.results .result .image+.content{margin:0 6em 0 0}.ui.search>.results .result .title{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;font-size:1em;color:rgba(0,0,0,.85)}.ui.search>.results .result .description{margin-top:0;font-size:.9285em;color:rgba(0,0,0,.4)}.ui.search>.results .result .price{float:right;color:#5bbd72}.ui.search>.results>.message{padding:1em}.ui.search>.results>.message .header{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.1428em;font-weight:700;color:rgba(0,0,0,.8)}.ui.search>.results>.message .description{margin-top:.25rem;font-size:1em;color:rgba(0,0,0,.8)}.ui.search>.results>.action{display:block;border-top:none;background:#f0f0f0;padding:.5em 1em;color:rgba(0,0,0,.8);font-weight:700;text-align:center}.ui.loading.search .input>.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285em 0 0 -.64285em;width:1.2857em;height:1.2857em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.search .input>.icon:after{position:absolute;content:'';top:50%;left:50%;margin:-.64285em 0 0 -.64285em;width:1.2857em;height:1.2857em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#aaa transparent transparent;border-style:solid;border-width:.2em;box-shadow:0 0 0 1px transparent}.ui.category.search>.results .category .result:hover,.ui.search>.results .result:hover{background:#fafafa}.ui.search .action:hover{background:#e0e0e0}.ui.search>.results .category.active{background:#f0f0f0}.ui.search>.results .category.active>.name{color:rgba(0,0,0,.8)}.ui.category.search>.results .category .result.active,.ui.search>.results .result.active{position:relative;border-left-color:transparent;background:#f0f0f0;box-shadow:3px 0 3px 0 rgba(39,41,43,.15)}.ui.search>.results .result.active .description,.ui.search>.results .result.active .title{color:rgba(0,0,0,.85)}.ui.category.search .results{width:28em}.ui.category.search>.results .category{background:#f0f0f0;box-shadow:none;border-bottom:1px solid rgba(39,41,43,.15);-webkit-transition:background .2s ease,border-color .2s ease;transition:background .2s ease,border-color .2s ease}.ui.category.search>.results .category:last-child{border-bottom:none}.ui.category.search>.results .category .result{background:#fff;margin-left:100px;border-left:1px solid rgba(39,41,43,.15);border-bottom:1px solid rgba(39,41,43,.15);-webkit-transition:background .2s ease,border-color .2s ease;transition:background .2s ease,border-color .2s ease}.ui.category.search>.results .category .result:last-child{border-bottom:none}.ui.category.search>.results .category>.name{width:100px;background:#f0f0f0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;float:1em;float:left;padding:.4em 1em;font-weight:700;color:rgba(0,0,0,.4)}.ui[class*="left aligned"].search>.results{right:auto;left:0}.ui[class*="right aligned"].search>.results{right:0;left:auto}.ui.fluid.search .results{width:100%}.ui.search{font-size:1em}.ui.large.search{font-size:1.1em}
--- a/dist/components/search.min.js
+++ b/dist/components/search.min.js
--- a/dist/components/transition.js
+++ b/dist/components/transition.js
@ -440,6 +440,9 @@ $.fn.transition = function() {
            return $.fn.transition.settings;
          },
          displayType: function() {
+            if(settings.displayType) {
+              return settings.displayType;
+            }
            if($module.data(metadata.displayType) === undefined) {
              // create fake element to determine display state
              module.can.transition(true);
@ -816,6 +819,9 @@ $.fn.transition.settings = {
  // whether EXACT animation can occur twice in a row
  allowRepeats : false,

+  // Override final display type on visible
+  displayType : false,
+
  // animation duration
  animation  : 'fade',
  duration   : '500ms',
--- a/dist/components/transition.min.js
+++ b/dist/components/transition.min.js
--- a/dist/semantic.css
+++ b/dist/semantic.css
@ -10291,7 +10291,7 @@ i.flag.zimbabwe:before {
 }

 .ui.header .sub.header {
-  font-size: 1.1rem;
+  font-size: 1.0714rem;
  font-weight: normal;
  margin: 0em;
  padding: 0em;
@ -10742,12 +10742,12 @@ a.ui.inverted.yellow.header:hover {
 --------------------*/

 .ui.dividing.header {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 .ui.dividing.header .sub.header {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
 }

 .ui.dividing.header .icon {
@ -10830,11 +10830,11 @@ a.ui.inverted.yellow.header:hover {
 /* Attached Sizes */

 .ui.tiny.attached.header {
-  font-size: 0.875em;
+  font-size: 0.8571em;
 }

 .ui.small.attached.header {
-  font-size: 0.9em;
+  font-size: 0.9285em;
 }

 .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
@ -10842,11 +10842,11 @@ a.ui.inverted.yellow.header:hover {
 }

 .ui.large.attached.header {
-  font-size: 1.1em;
+  font-size: 1.0714em;
 }

 .ui.huge.attached.header {
-  font-size: 1.2em;
+  font-size: 1.1428em;
 }

 /*-------------------
@ -18917,7 +18917,7 @@ ol.ui.horizontal.list li:before,
  margin: 1em 0em;
  background: #efefef;
  padding: 1em 1.5em;
-  line-height: 1.33;
+  line-height: 1.3;
  color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
@ -19019,7 +19019,7 @@ ol.ui.horizontal.list li:before,
  cursor: pointer;
  position: absolute;
  margin: 0em;
-  top: 1.165em;
+  top: 1.15em;
  right: 0.5em;
  opacity: 0.7;
  -webkit-transition: opacity 0.1s linear;
@ -19444,7 +19444,7 @@ ol.ui.horizontal.list li:before,
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
-  margin: 1em 0em 1rem;
+  margin: 0em;
  padding: 1.2rem 2rem;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 1.6em;
@ -21619,8 +21619,8 @@ th {
  top: 0em !important;
  left: 0em !important;
  z-index: 4 !important;
-  -webkit-transition: all 0.2s ease 0.15s;
-  transition: all 0.2s ease 0.15s;
+  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }

 .ui.reveal > .hidden.content {
@ -21647,8 +21647,8 @@ th {
  display: block;
  float: left;
  margin: 0em;
-  -webkit-transition: top 0.2s ease 0.15s, left 0.2s ease 0.15s, right 0.2s ease 0.15s, bottom 0.2s ease 0.15s;
-  transition: top 0.2s ease 0.15s, left 0.2s ease 0.15s, right 0.2s ease 0.15s, bottom 0.2s ease 0.15s;
+  -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }

 .ui.slide.reveal > .visible.content {
@ -21803,8 +21803,8 @@ th {
 ---------------*/

 .ui.rotate.reveal > .visible.content {
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
+  -webkit-transition-duration: 0.8s;
+  transition-duration: 0.8s;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
@ -21952,15 +21952,14 @@ th {
 .ui.search > .results {
  display: none;
  position: absolute;
-  z-index: 998;
  top: 100%;
  left: 0%;
-  overflow: hidden;
  background: #ffffff;
  margin-top: 0.5em;
-  width: 380px;
+  width: 16em;
  border-radius: 0.25em;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
+  z-index: 998;
 }

 /*--------------
@ -21971,15 +21970,15 @@ th {
  cursor: pointer;
  display: block;
  overflow: hidden;
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.33;
+  border-bottom: 1px solid rgba(39, 41, 43, 0.15);
 }

-.ui.search > .results .result:first-child {
-  border-top: none;
+.ui.search > .results .result:last-child {
+  border-bottom: none;
 }

 /* Image */
@ -22050,10 +22049,9 @@ th {

 .ui.search > .results > .action {
  display: block;
-  border-top: 1px solid rgba(39, 41, 43, 0.15);
+  border-top: none;
  background: #f0f0f0;
-  height: 2em;
-  line-height: 2em;
+  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  text-align: center;
@ -22103,12 +22101,12 @@ th {
 ---------------*/

 .ui.search > .results .result:hover,
-.ui.search > .results .category .result:hover {
+.ui.category.search > .results .category .result:hover {
  background: #fafafa;
 }

-.ui.search .all:hover {
-  background: #fafafa;
+.ui.search .action:hover {
+  background: #e0e0e0;
 }

 /*--------------
@ -22124,7 +22122,7 @@ th {
 }

 .ui.search > .results .result.active,
-.ui.search > .results .category .result.active {
+.ui.category.search > .results .category .result.active {
  position: relative;
  border-left-color: transparent;
  background: #f0f0f0;
@ -22143,27 +22141,17 @@ th {
           Types
 *******************************/

-/*-------------------
-     Left / Right
--------------------*/
-
-.ui[class*="left aligned"].search > .results {
-  right: auto;
-  left: 0%;
-}
-
-.ui[class*="right aligned"].search > .results {
-  right: 0%;
-  left: auto;
-}
-
 /*--------------
    Categories
 ---------------*/

+.ui.category.search .results {
+  width: 28em;
+}
+
 /* Category */

-.ui.search > .results .category {
+.ui.category.search > .results .category {
  background: #f0f0f0;
  box-shadow: none;
  border-bottom: 1px solid rgba(39, 41, 43, 0.15);
@ -22171,13 +22159,13 @@ th {
  transition: background 0.2s ease, border-color 0.2s ease;
 }

-.ui.search > .results .category:last-child {
+.ui.category.search > .results .category:last-child {
  border-bottom: none;
 }

 /* Category Result */

-.ui.search > .results .category .result {
+.ui.category.search > .results .category .result {
  background: #ffffff;
  margin-left: 100px;
  border-left: 1px solid rgba(39, 41, 43, 0.15);
@ -22186,17 +22174,17 @@ th {
  transition: background 0.2s ease, border-color 0.2s ease;
 }

-.ui.search > .results .category .result:last-child {
+.ui.category.search > .results .category .result:last-child {
  border-bottom: none;
 }

 /* Category Result Name */

-.ui.search > .results .category > .name {
+.ui.category.search > .results .category > .name {
+  width: 100px;
  background: #f0f0f0;
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1em;
-  width: 100px;
  float: 1em;
  float: left;
  padding: 0.4em 1em;
@ -22208,6 +22196,32 @@ th {
           Variations
 *******************************/

+/*-------------------
+     Left / Right
+--------------------*/
+
+.ui[class*="left aligned"].search > .results {
+  right: auto;
+  left: 0%;
+}
+
+.ui[class*="right aligned"].search > .results {
+  right: 0%;
+  left: auto;
+}
+
+/*--------------
+    Fluid
+---------------*/
+
+.ui.fluid.search .results {
+  width: 100%;
+}
+
+/*--------------
+      Sizes
+---------------*/
+
 .ui.search {
  font-size: 1em;
 }
--- a/dist/semantic.js
+++ b/dist/semantic.js
@ -9183,21 +9183,22 @@ $.fn.search = function(parameters) {
                ? 'propertychange'
                : 'keyup'
          ;
-          // attach events
-          $prompt
-            .on('focus' + eventNamespace, module.event.focus)
-            .on('blur' + eventNamespace, module.event.blur)
-            .on('keydown' + eventNamespace, module.handleKeyboard)
-          ;
          if(settings.automatic) {
            $prompt
              .on(inputEvent + eventNamespace, module.search.throttle)
            ;
          }
+          $prompt
+            .on('focus' + eventNamespace, module.event.focus)
+            .on('blur' + eventNamespace, module.event.blur)
+            .on('keydown' + eventNamespace, module.handleKeyboard)
+          ;
          $searchButton
            .on('click' + eventNamespace, module.search.query)
          ;
          $results
+            .on('mousedown' + eventNamespace, module.event.mousedown)
+            .on('mouseup' + eventNamespace, module.event.mouseup)
            .on('click' + eventNamespace, selector.result, module.results.select)
          ;
          module.instantiate();
@ -9235,12 +9236,20 @@ $.fn.search = function(parameters) {
              module.results.show();
            }
          },
-          blur: function() {
+          mousedown: function() {
+            module.resultsClicked = true;
+          },
+          mouseup: function() {
+            module.resultsClicked = false;
+          },
+          blur: function(event) {
            module.search.cancel();
            $module
              .removeClass(className.focus)
            ;
-            module.timer = setTimeout(module.results.hide, settings.hideDelay);
+            if(!module.resultsClicked) {
+              module.timer = setTimeout(module.results.hide, settings.hideDelay);
+            }
          }
        },
        handleKeyboard: function(event) {
@ -9797,7 +9806,7 @@ $.fn.search.settings = {

  automatic      : 'true',
  hideDelay      : 0,
-  searchDelay    : 200,
+  searchDelay    : 300,
  maxResults     : 7,
  cache          : true,

@ -9981,10 +9990,10 @@ $.fn.search.settings = {
          html += '</a>';
        });

-        if(response.resultPage) {
+        if(response.action) {
          html += ''
-          + '<a href="' + response.resultPage.url + '" class="all">'
-          +   response.resultPage.text
+          + '<a href="' + response.action.url + '" class="action">'
+          +   response.action.text
          + '</a>';
        }
        return html;
@ -14934,6 +14943,9 @@ $.fn.transition = function() {
            return $.fn.transition.settings;
          },
          displayType: function() {
+            if(settings.displayType) {
+              return settings.displayType;
+            }
            if($module.data(metadata.displayType) === undefined) {
              // create fake element to determine display state
              module.can.transition(true);
@ -15310,6 +15322,9 @@ $.fn.transition.settings = {
  // whether EXACT animation can occur twice in a row
  allowRepeats : false,

+  // Override final display type on visible
+  displayType : false,
+
  // animation duration
  animation  : 'fade',
  duration   : '500ms',
--- a/dist/semantic.min.css
+++ b/dist/semantic.min.css
--- a/dist/semantic.min.js
+++ b/dist/semantic.min.js
--- a/src/definitions/modules/search.less
+++ b/src/definitions/modules/search.less
@ -68,11 +68,9 @@
  display: none;

  position: absolute;
-  z-index: 998;
  top: 100%;
  left: 0%;

-  overflow: hidden;
  background: @resultsBackground;

  margin-top: @resultsDistance;
@ -80,6 +78,7 @@

  border-radius: @resultsBorderRadius;
  box-shadow: @resultsBoxShadow;
+  z-index: @resultsZIndex;
 }

 /*--------------
--- a/src/definitions/modules/transition.js
+++ b/src/definitions/modules/transition.js
@ -440,6 +440,9 @@ $.fn.transition = function() {
            return $.fn.transition.settings;
          },
          displayType: function() {
+            if(settings.displayType) {
+              return settings.displayType;
+            }
            if($module.data(metadata.displayType) === undefined) {
              // create fake element to determine display state
              module.can.transition(true);
@ -816,6 +819,9 @@ $.fn.transition.settings = {
  // whether EXACT animation can occur twice in a row
  allowRepeats : false,

+  // Override final display type on visible
+  displayType : false,
+
  // animation duration
  animation  : 'fade',
  duration   : '500ms',
--- a/src/themes/default/modules/search.variables
+++ b/src/themes/default/modules/search.variables
@ -21,7 +21,7 @@
@promptBoxShadow: 0em 0em 0em 0em transparent inset;

 /* Result Box */
-@resultsWidth: 190px;
+@resultsWidth: 16em;
@resultsBackground: #FFFFFF;
@resultsDistance: 0.5em;
@resultsBorderRadius: 0.25em;
@ -102,6 +102,7 @@
@resultActiveBoxShadow: 3px 0px 3px 0px @borderColor;
@resultActiveTitleColor: @darkTextColor;
@resultActiveDescriptionColor: @darkTextColor;
+@resultsZIndex: 998;


 /*******************************
@ -117,7 +118,7 @@
  border-color 0.2s ease
 ;

-@categoryResultsWidth: 380px;
+@categoryResultsWidth: 28em;

@categoryResultBackground: @white;
@categoryResultLeftBorder: 1px solid @borderColor;