richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/1243/head
jlukic 10 years ago
parent
24f136794b
commit
779c8cfc19
22 changed files with 200 additions and 135 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE-NOTES.md
  2. 14
      dist/components/header.css
  3. 2
      dist/components/header.min.css
  4. 4
      dist/components/message.css
  5. 2
      dist/components/message.min.css
  6. 2
      dist/components/modal.css
  7. 2
      dist/components/modal.min.css
  8. 12
      dist/components/reveal.css
  9. 2
      dist/components/reveal.min.css
  10. 78
      dist/components/search.css
  11. 33
      dist/components/search.js
  12. 2
      dist/components/search.min.css
  13. 2
      dist/components/search.min.js
  14. 6
      dist/components/transition.js
  15. 2
      dist/components/transition.min.js
  16. 112
      dist/semantic.css
  17. 39
      dist/semantic.js
  18. 2
      dist/semantic.min.css
  19. 4
      dist/semantic.min.js
  20. 3
      src/definitions/modules/search.less
  21. 6
      src/definitions/modules/transition.js
  22. 5
      src/themes/default/modules/search.variables

1
RELEASE-NOTES.md
View File

@ -74,6 +74,7 @@
- **Transition** - Transitions now will handle multiple display types more consistently - **Transition** - Transitions now will handle multiple display types more consistently
- **Transition** - Transition now has a new ``start`` callback, before animation starts - **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** - 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 ** ** Bug Fixes **
- See Closed GitHub Issues - See Closed GitHub Issues

14
dist/components/header.css
View File

@ -29,7 +29,7 @@
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.ui.header .sub.header { .ui.header .sub.header {
font-size: 1.1rem;
font-size: 1.0714rem;
font-weight: normal; font-weight: normal;
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
@ -410,11 +410,11 @@ a.ui.inverted.yellow.header:hover {
--------------------*/ --------------------*/
.ui.dividing.header { .ui.dividing.header {
padding-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
.ui.dividing.header .sub.header { .ui.dividing.header .sub.header {
padding-bottom: 0.5rem;
padding-bottom: 0.25rem;
} }
.ui.dividing.header .icon { .ui.dividing.header .icon {
margin-bottom: 0.2em; margin-bottom: 0.2em;
@ -485,19 +485,19 @@ a.ui.inverted.yellow.header:hover {
/* Attached Sizes */ /* Attached Sizes */
.ui.tiny.attached.header { .ui.tiny.attached.header {
font-size: 0.875em;
font-size: 0.8571em;
} }
.ui.small.attached.header { .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) { .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
font-size: 1em; font-size: 1em;
} }
.ui.large.attached.header { .ui.large.attached.header {
font-size: 1.1em;
font-size: 1.0714em;
} }
.ui.huge.attached.header { .ui.huge.attached.header {
font-size: 1.2em;
font-size: 1.1428em;
} }
/*------------------- /*-------------------

2
dist/components/header.min.css
File diff suppressed because it is too large
View File

4
dist/components/message.css
View File

@ -21,7 +21,7 @@
margin: 1em 0em; margin: 1em 0em;
background: #efefef; background: #efefef;
padding: 1em 1.5em; padding: 1em 1.5em;
line-height: 1.33;
line-height: 1.3;
color: rgba(0, 0, 0, 0.8); 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; -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; transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
@ -108,7 +108,7 @@
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
margin: 0em; margin: 0em;
top: 1.165em;
top: 1.15em;
right: 0.5em; right: 0.5em;
opacity: 0.7; opacity: 0.7;
-webkit-transition: opacity 0.1s linear -webkit-transition: opacity 0.1s linear

2
dist/components/message.min.css
File diff suppressed because it is too large
View File

2
dist/components/modal.css
View File

@ -80,7 +80,7 @@
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff; background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
background: 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; padding: 1.2rem 2rem;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
font-size: 1.6em; font-size: 1.6em;

2
dist/components/modal.min.css
File diff suppressed because it is too large
View File

12
dist/components/reveal.css
View File

@ -26,8 +26,8 @@
top: 0em !important; top: 0em !important;
left: 0em !important; left: 0em !important;
z-index: 4 !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 { .ui.reveal > .hidden.content {
position: relative !important; position: relative !important;
@ -54,8 +54,8 @@
display: block; display: block;
float: left; float: left;
margin: 0em; 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 { .ui.slide.reveal > .visible.content {
position: relative !important; position: relative !important;
@ -186,8 +186,8 @@
---------------*/ ---------------*/
.ui.rotate.reveal > .visible.content { .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); -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);

2
dist/components/reveal.min.css
View File

@ -8,4 +8,4 @@
* http://opensource.org/licenses/MIT * 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}

78
dist/components/search.css
View File

@ -55,15 +55,14 @@
.ui.search > .results { .ui.search > .results {
display: none; display: none;
position: absolute; position: absolute;
z-index: 998;
top: 100%; top: 100%;
left: 0%; left: 0%;
overflow: hidden;
background: #ffffff; background: #ffffff;
margin-top: 0.5em; margin-top: 0.5em;
width: 380px;
width: 16em;
border-radius: 0.25em; border-radius: 0.25em;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
z-index: 998;
} }
/*-------------- /*--------------
@ -74,14 +73,14 @@
cursor: pointer; cursor: pointer;
display: block; display: block;
overflow: hidden; overflow: hidden;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 1em;
padding: 0.5em 1em; padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
line-height: 1.33; 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 */ /* Image */
@ -144,10 +143,9 @@
/* View All Results */ /* View All Results */
.ui.search > .results > .action { .ui.search > .results > .action {
display: block; display: block;
border-top: 1px solid rgba(39, 41, 43, 0.15);
border-top: none;
background: #f0f0f0; background: #f0f0f0;
height: 2em;
line-height: 2em;
padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -198,11 +196,11 @@
---------------*/ ---------------*/
.ui.search > .results .result:hover, .ui.search > .results .result:hover,
.ui.search > .results .category .result:hover {
.ui.category.search > .results .category .result:hover {
background: #fafafa; 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); color: rgba(0, 0, 0, 0.8);
} }
.ui.search > .results .result.active, .ui.search > .results .result.active,
.ui.search > .results .category .result.active {
.ui.category.search > .results .category .result.active {
position: relative; position: relative;
border-left-color: transparent; border-left-color: transparent;
background: #f0f0f0; 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 Categories
---------------*/ ---------------*/
.ui.category.search .results {
width: 28em;
}
/* Category */ /* Category */
.ui.search > .results .category {
.ui.category.search > .results .category {
background: #f0f0f0; background: #f0f0f0;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid rgba(39, 41, 43, 0.15); border-bottom: 1px solid rgba(39, 41, 43, 0.15);
-webkit-transition: background 0.2s ease, border-color 0.2s ease; -webkit-transition: background 0.2s ease, border-color 0.2s ease;
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; border-bottom: none;
} }
/* Category Result */ /* Category Result */
.ui.search > .results .category .result {
.ui.category.search > .results .category .result {
background: #ffffff; background: #ffffff;
margin-left: 100px; margin-left: 100px;
border-left: 1px solid rgba(39, 41, 43, 0.15); 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; -webkit-transition: background 0.2s ease, border-color 0.2s ease;
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; border-bottom: none;
} }
/* Category Result Name */ /* Category Result Name */
.ui.search > .results .category > .name {
.ui.category.search > .results .category > .name {
width: 100px;
background: #f0f0f0; background: #f0f0f0;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 1em;
width: 100px;
float: 1em; float: 1em;
float: left; float: left;
padding: 0.4em 1em; padding: 0.4em 1em;
@ -296,6 +284,32 @@
Variations 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 { .ui.search {
font-size: 1em; font-size: 1em;
} }

33
dist/components/search.js
View File

@ -63,21 +63,22 @@ $.fn.search = function(parameters) {
? 'propertychange' ? 'propertychange'
: 'keyup' : 'keyup'
; ;
// attach events
$prompt
.on('focus' + eventNamespace, module.event.focus)
.on('blur' + eventNamespace, module.event.blur)
.on('keydown' + eventNamespace, module.handleKeyboard)
;
if(settings.automatic) { if(settings.automatic) {
$prompt $prompt
.on(inputEvent + eventNamespace, module.search.throttle) .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 $searchButton
.on('click' + eventNamespace, module.search.query) .on('click' + eventNamespace, module.search.query)
; ;
$results $results
.on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('click' + eventNamespace, selector.result, module.results.select) .on('click' + eventNamespace, selector.result, module.results.select)
; ;
module.instantiate(); module.instantiate();
@ -115,12 +116,20 @@ $.fn.search = function(parameters) {
module.results.show(); module.results.show();
} }
}, },
blur: function() {
mousedown: function() {
module.resultsClicked = true;
},
mouseup: function() {
module.resultsClicked = false;
},
blur: function(event) {
module.search.cancel(); module.search.cancel();
$module $module
.removeClass(className.focus) .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) { handleKeyboard: function(event) {
@ -677,7 +686,7 @@ $.fn.search.settings = {
automatic : 'true', automatic : 'true',
hideDelay : 0, hideDelay : 0,
searchDelay : 200,
searchDelay : 300,
maxResults : 7, maxResults : 7,
cache : true, cache : true,
@ -861,10 +870,10 @@ $.fn.search.settings = {
html += '</a>'; html += '</a>';
}); });
if(response.resultPage) {
if(response.action) {
html += '' html += ''
+ '<a href="' + response.resultPage.url + '" class="all">'
+ response.resultPage.text
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '</a>'; + '</a>';
} }
return html; return html;

2
dist/components/search.min.css
View File

@ -8,4 +8,4 @@
* http://opensource.org/licenses/MIT * 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}

2
dist/components/search.min.js
File diff suppressed because it is too large
View File

6
dist/components/transition.js
View File

@ -440,6 +440,9 @@ $.fn.transition = function() {
return $.fn.transition.settings; return $.fn.transition.settings;
}, },
displayType: function() { displayType: function() {
if(settings.displayType) {
return settings.displayType;
}
if($module.data(metadata.displayType) === undefined) { if($module.data(metadata.displayType) === undefined) {
// create fake element to determine display state // create fake element to determine display state
module.can.transition(true); module.can.transition(true);
@ -816,6 +819,9 @@ $.fn.transition.settings = {
// whether EXACT animation can occur twice in a row // whether EXACT animation can occur twice in a row
allowRepeats : false, allowRepeats : false,
// Override final display type on visible
displayType : false,
// animation duration // animation duration
animation : 'fade', animation : 'fade',
duration : '500ms', duration : '500ms',

2
dist/components/transition.min.js
File diff suppressed because it is too large
View File

112
dist/semantic.css
View File

@ -10291,7 +10291,7 @@ i.flag.zimbabwe:before {
} }
.ui.header .sub.header { .ui.header .sub.header {
font-size: 1.1rem;
font-size: 1.0714rem;
font-weight: normal; font-weight: normal;
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
@ -10742,12 +10742,12 @@ a.ui.inverted.yellow.header:hover {
--------------------*/ --------------------*/
.ui.dividing.header { .ui.dividing.header {
padding-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
.ui.dividing.header .sub.header { .ui.dividing.header .sub.header {
padding-bottom: 0.5rem;
padding-bottom: 0.25rem;
} }
.ui.dividing.header .icon { .ui.dividing.header .icon {
@ -10830,11 +10830,11 @@ a.ui.inverted.yellow.header:hover {
/* Attached Sizes */ /* Attached Sizes */
.ui.tiny.attached.header { .ui.tiny.attached.header {
font-size: 0.875em;
font-size: 0.8571em;
} }
.ui.small.attached.header { .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) { .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 { .ui.large.attached.header {
font-size: 1.1em;
font-size: 1.0714em;
} }
.ui.huge.attached.header { .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; margin: 1em 0em;
background: #efefef; background: #efefef;
padding: 1em 1.5em; padding: 1em 1.5em;
line-height: 1.33;
line-height: 1.3;
color: rgba(0, 0, 0, 0.8); 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; -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; 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; cursor: pointer;
position: absolute; position: absolute;
margin: 0em; margin: 0em;
top: 1.165em;
top: 1.15em;
right: 0.5em; right: 0.5em;
opacity: 0.7; opacity: 0.7;
-webkit-transition: opacity 0.1s linear; -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; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff; background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
background: 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; padding: 1.2rem 2rem;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
font-size: 1.6em; font-size: 1.6em;
@ -21619,8 +21619,8 @@ th {
top: 0em !important; top: 0em !important;
left: 0em !important; left: 0em !important;
z-index: 4 !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 { .ui.reveal > .hidden.content {
@ -21647,8 +21647,8 @@ th {
display: block; display: block;
float: left; float: left;
margin: 0em; 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 { .ui.slide.reveal > .visible.content {
@ -21803,8 +21803,8 @@ th {
---------------*/ ---------------*/
.ui.rotate.reveal > .visible.content { .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); -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
@ -21952,15 +21952,14 @@ th {
.ui.search > .results { .ui.search > .results {
display: none; display: none;
position: absolute; position: absolute;
z-index: 998;
top: 100%; top: 100%;
left: 0%; left: 0%;
overflow: hidden;
background: #ffffff; background: #ffffff;
margin-top: 0.5em; margin-top: 0.5em;
width: 380px;
width: 16em;
border-radius: 0.25em; border-radius: 0.25em;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
z-index: 998;
} }
/*-------------- /*--------------
@ -21971,15 +21970,15 @@ th {
cursor: pointer; cursor: pointer;
display: block; display: block;
overflow: hidden; overflow: hidden;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 1em;
padding: 0.5em 1em; padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
line-height: 1.33; 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 */ /* Image */
@ -22050,10 +22049,9 @@ th {
.ui.search > .results > .action { .ui.search > .results > .action {
display: block; display: block;
border-top: 1px solid rgba(39, 41, 43, 0.15);
border-top: none;
background: #f0f0f0; background: #f0f0f0;
height: 2em;
line-height: 2em;
padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -22103,12 +22101,12 @@ th {
---------------*/ ---------------*/
.ui.search > .results .result:hover, .ui.search > .results .result:hover,
.ui.search > .results .category .result:hover {
.ui.category.search > .results .category .result:hover {
background: #fafafa; 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 .result.active,
.ui.search > .results .category .result.active {
.ui.category.search > .results .category .result.active {
position: relative; position: relative;
border-left-color: transparent; border-left-color: transparent;
background: #f0f0f0; background: #f0f0f0;
@ -22143,27 +22141,17 @@ th {
Types Types
*******************************/ *******************************/
/*-------------------
Left / Right
--------------------*/
.ui[class*="left aligned"].search > .results {
right: auto;
left: 0%;
}
.ui[class*="right aligned"].search > .results {
right: 0%;
left: auto;
}
/*-------------- /*--------------
Categories Categories
---------------*/ ---------------*/
.ui.category.search .results {
width: 28em;
}
/* Category */ /* Category */
.ui.search > .results .category {
.ui.category.search > .results .category {
background: #f0f0f0; background: #f0f0f0;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid rgba(39, 41, 43, 0.15); 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; 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; border-bottom: none;
} }
/* Category Result */ /* Category Result */
.ui.search > .results .category .result {
.ui.category.search > .results .category .result {
background: #ffffff; background: #ffffff;
margin-left: 100px; margin-left: 100px;
border-left: 1px solid rgba(39, 41, 43, 0.15); 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; 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; border-bottom: none;
} }
/* Category Result Name */ /* Category Result Name */
.ui.search > .results .category > .name {
.ui.category.search > .results .category > .name {
width: 100px;
background: #f0f0f0; background: #f0f0f0;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 1em;
width: 100px;
float: 1em; float: 1em;
float: left; float: left;
padding: 0.4em 1em; padding: 0.4em 1em;
@ -22208,6 +22196,32 @@ th {
Variations 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 { .ui.search {
font-size: 1em; font-size: 1em;
} }

39
dist/semantic.js
View File

@ -9183,21 +9183,22 @@ $.fn.search = function(parameters) {
? 'propertychange' ? 'propertychange'
: 'keyup' : 'keyup'
; ;
// attach events
$prompt
.on('focus' + eventNamespace, module.event.focus)
.on('blur' + eventNamespace, module.event.blur)
.on('keydown' + eventNamespace, module.handleKeyboard)
;
if(settings.automatic) { if(settings.automatic) {
$prompt $prompt
.on(inputEvent + eventNamespace, module.search.throttle) .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 $searchButton
.on('click' + eventNamespace, module.search.query) .on('click' + eventNamespace, module.search.query)
; ;
$results $results
.on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('click' + eventNamespace, selector.result, module.results.select) .on('click' + eventNamespace, selector.result, module.results.select)
; ;
module.instantiate(); module.instantiate();
@ -9235,12 +9236,20 @@ $.fn.search = function(parameters) {
module.results.show(); module.results.show();
} }
}, },
blur: function() {
mousedown: function() {
module.resultsClicked = true;
},
mouseup: function() {
module.resultsClicked = false;
},
blur: function(event) {
module.search.cancel(); module.search.cancel();
$module $module
.removeClass(className.focus) .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) { handleKeyboard: function(event) {
@ -9797,7 +9806,7 @@ $.fn.search.settings = {
automatic : 'true', automatic : 'true',
hideDelay : 0, hideDelay : 0,
searchDelay : 200,
searchDelay : 300,
maxResults : 7, maxResults : 7,
cache : true, cache : true,
@ -9981,10 +9990,10 @@ $.fn.search.settings = {
html += '</a>'; html += '</a>';
}); });
if(response.resultPage) {
if(response.action) {
html += '' html += ''
+ '<a href="' + response.resultPage.url + '" class="all">'
+ response.resultPage.text
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '</a>'; + '</a>';
} }
return html; return html;
@ -14934,6 +14943,9 @@ $.fn.transition = function() {
return $.fn.transition.settings; return $.fn.transition.settings;
}, },
displayType: function() { displayType: function() {
if(settings.displayType) {
return settings.displayType;
}
if($module.data(metadata.displayType) === undefined) { if($module.data(metadata.displayType) === undefined) {
// create fake element to determine display state // create fake element to determine display state
module.can.transition(true); module.can.transition(true);
@ -15310,6 +15322,9 @@ $.fn.transition.settings = {
// whether EXACT animation can occur twice in a row // whether EXACT animation can occur twice in a row
allowRepeats : false, allowRepeats : false,
// Override final display type on visible
displayType : false,
// animation duration // animation duration
animation : 'fade', animation : 'fade',
duration : '500ms', duration : '500ms',

2
dist/semantic.min.css
File diff suppressed because it is too large
View File

4
dist/semantic.min.js
File diff suppressed because it is too large
View File

3
src/definitions/modules/search.less
View File

@ -68,11 +68,9 @@
display: none; display: none;
position: absolute; position: absolute;
z-index: 998;
top: 100%; top: 100%;
left: 0%; left: 0%;
overflow: hidden;
background: @resultsBackground; background: @resultsBackground;
margin-top: @resultsDistance; margin-top: @resultsDistance;
@ -80,6 +78,7 @@
border-radius: @resultsBorderRadius; border-radius: @resultsBorderRadius;
box-shadow: @resultsBoxShadow; box-shadow: @resultsBoxShadow;
z-index: @resultsZIndex;
} }
/*-------------- /*--------------

6
src/definitions/modules/transition.js
View File

@ -440,6 +440,9 @@ $.fn.transition = function() {
return $.fn.transition.settings; return $.fn.transition.settings;
}, },
displayType: function() { displayType: function() {
if(settings.displayType) {
return settings.displayType;
}
if($module.data(metadata.displayType) === undefined) { if($module.data(metadata.displayType) === undefined) {
// create fake element to determine display state // create fake element to determine display state
module.can.transition(true); module.can.transition(true);
@ -816,6 +819,9 @@ $.fn.transition.settings = {
// whether EXACT animation can occur twice in a row // whether EXACT animation can occur twice in a row
allowRepeats : false, allowRepeats : false,
// Override final display type on visible
displayType : false,
// animation duration // animation duration
animation : 'fade', animation : 'fade',
duration : '500ms', duration : '500ms',

5
src/themes/default/modules/search.variables
View File

@ -21,7 +21,7 @@
@promptBoxShadow: 0em 0em 0em 0em transparent inset; @promptBoxShadow: 0em 0em 0em 0em transparent inset;
/* Result Box */ /* Result Box */
@resultsWidth: 190px;
@resultsWidth: 16em;
@resultsBackground: #FFFFFF; @resultsBackground: #FFFFFF;
@resultsDistance: 0.5em; @resultsDistance: 0.5em;
@resultsBorderRadius: 0.25em; @resultsBorderRadius: 0.25em;
@ -102,6 +102,7 @@
@resultActiveBoxShadow: 3px 0px 3px 0px @borderColor; @resultActiveBoxShadow: 3px 0px 3px 0px @borderColor;
@resultActiveTitleColor: @darkTextColor; @resultActiveTitleColor: @darkTextColor;
@resultActiveDescriptionColor: @darkTextColor; @resultActiveDescriptionColor: @darkTextColor;
@resultsZIndex: 998;
/******************************* /*******************************
@ -117,7 +118,7 @@
border-color 0.2s ease border-color 0.2s ease
; ;
@categoryResultsWidth: 380px;
@categoryResultsWidth: 28em;
@categoryResultBackground: @white; @categoryResultBackground: @white;
@categoryResultLeftBorder: 1px solid @borderColor; @categoryResultLeftBorder: 1px solid @borderColor;

Write Preview
Loading…
Cancel
Save