Add indeterminate loader, theme fixes

dist/components/breadcrumb.css

@@ -88,28 +88,28 @@
 *******************************/
 
 .ui.mini.breadcrumb {
-  font-size: 0.7142em;
+  font-size: 0.65em;
 }
 .ui.tiny.breadcrumb {
-  font-size: 0.8571em;
+  font-size: 0.7em;
 }
 .ui.small.breadcrumb {
-  font-size: 0.9285em;
+  font-size: 0.75em;
 }
 .ui.breadcrumb {
   font-size: 1em;
 }
 .ui.large.breadcrumb {
-  font-size: 1.1428em;
+  font-size: 1.1em;
 }
 .ui.big.breadcrumb {
-  font-size: 1.2857em;
+  font-size: 1.05em;
 }
 .ui.huge.breadcrumb {
-  font-size: 1.4285em;
+  font-size: 1.3em;
 }
 .ui.massive.breadcrumb {
-  font-size: 1.7142em;
+  font-size: 1.5em;
 }
 
 

dist/components/breadcrumb.min.css

@@ -8,4 +8,4 @@
  * http://opensource.org/licenses/MIT
  *
  */
-.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .2rem;font-size:.9em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#009fda}.ui.breadcrumb a:hover{color:#00b2f3}.ui.breadcrumb .icon.divider{font-size:.7em;vertical-align:middle}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.7142em}.ui.tiny.breadcrumb{font-size:.8571em}.ui.small.breadcrumb{font-size:.9285em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.1428em}.ui.big.breadcrumb{font-size:1.2857em}.ui.huge.breadcrumb{font-size:1.4285em}.ui.massive.breadcrumb{font-size:1.7142em}
+.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .2rem;font-size:.9em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#009fda}.ui.breadcrumb a:hover{color:#00b2f3}.ui.breadcrumb .icon.divider{font-size:.7em;vertical-align:middle}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.65em}.ui.tiny.breadcrumb{font-size:.7em}.ui.small.breadcrumb{font-size:.75em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.1em}.ui.big.breadcrumb{font-size:1.05em}.ui.huge.breadcrumb{font-size:1.3em}.ui.massive.breadcrumb{font-size:1.5em}

dist/components/dropdown.js

@@ -77,9 +77,10 @@ $.fn.dropdown = function(parameters) {
           if(hasTouch) {
             module.bind.touchEvents();
           }
-          module.observeChanges();
           module.bind.mouseEvents();
           module.bind.keyboardEvents();
+
+          module.observeChanges();
           module.instantiate();
         },
 
@@ -259,20 +260,6 @@ $.fn.dropdown = function(parameters) {
                 .on(module.get.inputEvent(), selector.search, module.event.input)
               ;
             }
-            if( module.is.searchSelection() ) {
-              $module
-                .on('focus' + eventNamespace, selector.search, module.event.searchFocus)
-                .on('blur' + eventNamespace, selector.search, module.event.searchBlur)
-              ;
-            }
-            else {
-              $module
-                .on('mousedown', module.event.mousedown)
-                .on('mouseup', module.event.mouseup)
-                .on('focus' + eventNamespace, module.event.focus)
-                .on('blur' + eventNamespace, module.event.blur)
-              ;
-            }
           },
           touchEvents: function() {
             module.debug('Touch device detected binding touch events');
@@ -288,7 +275,13 @@ $.fn.dropdown = function(parameters) {
           },
           mouseEvents: function() {
             module.verbose('Mouse detected binding mouse events');
-            if( !module.is.searchSelection() ) {
+            if( module.is.searchSelection() ) {
+              $module
+                .on('focus' + eventNamespace, selector.search, module.event.searchFocus)
+                .on('blur' + eventNamespace, selector.search, module.event.searchBlur)
+              ;
+            }
+            else {
               if(settings.on == 'click') {
                 $module
                   .on('click' + eventNamespace, module.event.test.toggle)
@@ -305,6 +298,12 @@ $.fn.dropdown = function(parameters) {
                   .on(settings.on + eventNamespace, module.toggle)
                 ;
               }
+              $module
+                .on('mousedown', module.event.mousedown)
+                .on('mouseup', module.event.mouseup)
+                .on('focus' + eventNamespace, module.event.focus)
+                .on('blur' + eventNamespace, module.event.blur)
+              ;
             }
             $module
               .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
@@ -409,7 +408,8 @@ $.fn.dropdown = function(parameters) {
             module.show();
           },
           searchBlur: function(event) {
-            module.hide();
+            // give enough time for events to bubble
+            setTimeout(module.hide, 50);
           },
           input: function(event) {
             var
@@ -1338,7 +1338,7 @@ $.fn.dropdown.settings = {
   name           : 'Dropdown',
   namespace      : 'dropdown',
 
-  debug          : false,
+  debug          : true,
   verbose        : true,
   performance    : true,
 

dist/components/list.css

@@ -217,11 +217,28 @@ ol.ui.list ol,
             Coupling
 *******************************/
 
+.ui.menu .ui.list > .item,
+.ui.menu .ui.list .list > .item {
+  display: list-item;
+  table-layout: fixed;
+  list-style-type: none;
+  list-style-position: outside;
+  padding: 0.3em 0em;
+  line-height: 1.2;
+}
 .ui.menu .ui.list .list > .item:before,
 .ui.menu .ui.list > .item:before {
   border: none;
   background: none;
 }
+.ui.menu .ui.list .list > .item:first-child,
+.ui.menu .ui.list > .item:first-child {
+  padding-top: 0em;
+}
+.ui.menu .ui.list .list > .item:last-child,
+.ui.menu .ui.list > .item:last-child {
+  padding-bottom: 0em;
+}
 
 
 /*******************************
@@ -478,6 +495,7 @@ ul.ui.list li:before,
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list > .item:before {
   position: absolute;
+  top: auto;
   left: -1rem;
   content: '•';
   opacity: 1;

dist/components/popup.css

@@ -171,6 +171,19 @@
 }
 
 
+/*******************************
+            Coupling
+*******************************/
+
+
+/* Immediate Nested Grid */
+.ui.popup > .ui.grid:not(.padded) {
+  width: -webkit-calc(100% + 1.75rem);
+  width: calc(100% + 1.75rem);
+  margin: -0.7rem -0.875rem;
+}
+
+
 /*******************************
             States
 *******************************/

dist/components/popup.min.css

@@ -8,4 +8,4 @@
  * http://opensource.org/licenses/MIT
  *
  */
-.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #ccc;max-width:250px;background-color:#fff;padding:.8em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.8);border-radius:.2857rem;box-shadow:0 2px 4px rgba(0,0,0,.1)}.ui.popup>.header{padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup:before{position:absolute;content:'';width:.75em;height:.75em;background:#fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);z-index:2;box-shadow:1px 1px 0 0 #b3b3b3}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.bottom.center.popup:before{margin-left:-.325em;top:-.325em;left:50%;right:auto;bottom:auto;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup:before{top:-.325em;left:1em;right:auto;bottom:auto;margin-left:0;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.bottom.right.popup{margin-right:0}.ui.bottom.right.popup:before{top:-.325em;right:1em;bottom:auto;left:auto;margin-left:0;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.325em;left:50%;margin-left:-.325em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup:before{bottom:-.325em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup:before{bottom:-.325em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.325em;bottom:auto;left:auto;margin-top:-.325em;box-shadow:1px -1px 0 0 #b3b3b3}.ui.right.center.popup:before{top:50%;left:-.325em;bottom:auto;right:auto;margin-top:-.325em;box-shadow:-1px 1px 0 0 #b3b3b3}.ui.loading.popup{display:block;visibility:hidden;z-index:-1}.ui.animating.popup,.ui.visible.popup{display:block}.ui.wide.popup{width:350px;max-width:350px}.ui[class*="very wide"].popup{width:550px;max-width:550px}.ui.fluid.popup{width:100%;max-width:99999px}.ui.inverted.popup{background:#1b1c1d;color:#fff;border:none;box-shadow:none}.ui.inverted.popup .header{background-color:none;color:#fff}.ui.inverted.popup:before{background-color:#1b1c1d;box-shadow:none}.ui.flowing.popup{max-width:9999px}.ui.small.popup{font-size:.8rem}.ui.popup{font-size:.875rem}.ui.large.popup{font-size:1rem}.ui.huge.popup{font-size:1.1rem}
+.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #ccc;max-width:250px;background-color:#fff;padding:.8em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.8);border-radius:.2857rem;box-shadow:0 2px 4px rgba(0,0,0,.1)}.ui.popup>.header{padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup:before{position:absolute;content:'';width:.75em;height:.75em;background:#fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);z-index:2;box-shadow:1px 1px 0 0 #b3b3b3}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.bottom.center.popup:before{margin-left:-.325em;top:-.325em;left:50%;right:auto;bottom:auto;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup:before{top:-.325em;left:1em;right:auto;bottom:auto;margin-left:0;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.bottom.right.popup{margin-right:0}.ui.bottom.right.popup:before{top:-.325em;right:1em;bottom:auto;left:auto;margin-left:0;box-shadow:-1px -1px 0 0 #b3b3b3}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.325em;left:50%;margin-left:-.325em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup:before{bottom:-.325em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup:before{bottom:-.325em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.325em;bottom:auto;left:auto;margin-top:-.325em;box-shadow:1px -1px 0 0 #b3b3b3}.ui.right.center.popup:before{top:50%;left:-.325em;bottom:auto;right:auto;margin-top:-.325em;box-shadow:-1px 1px 0 0 #b3b3b3}.ui.popup>.ui.grid:not(.padded){width:-webkit-calc(100% + 1.75rem);width:calc(100% + 1.75rem);margin:-.7rem -.875rem}.ui.loading.popup{display:block;visibility:hidden;z-index:-1}.ui.animating.popup,.ui.visible.popup{display:block}.ui.wide.popup{width:350px;max-width:350px}.ui[class*="very wide"].popup{width:550px;max-width:550px}.ui.fluid.popup{width:100%;max-width:99999px}.ui.inverted.popup{background:#1b1c1d;color:#fff;border:none;box-shadow:none}.ui.inverted.popup .header{background-color:none;color:#fff}.ui.inverted.popup:before{background-color:#1b1c1d;box-shadow:none}.ui.flowing.popup{max-width:9999px}.ui.small.popup{font-size:.8rem}.ui.popup{font-size:.875rem}.ui.large.popup{font-size:1rem}.ui.huge.popup{font-size:1.1rem}

dist/semantic.css

@@ -340,15 +340,15 @@
 *******************************/
 
 .ui.mini.breadcrumb {
-  font-size: 0.7142em;
+  font-size: 0.65em;
 }
 
 .ui.tiny.breadcrumb {
-  font-size: 0.8571em;
+  font-size: 0.7em;
 }
 
 .ui.small.breadcrumb {
-  font-size: 0.9285em;
+  font-size: 0.75em;
 }
 
 .ui.breadcrumb {
@@ -356,19 +356,19 @@
 }
 
 .ui.large.breadcrumb {
-  font-size: 1.1428em;
+  font-size: 1.1em;
 }
 
 .ui.big.breadcrumb {
-  font-size: 1.2857em;
+  font-size: 1.05em;
 }
 
 .ui.huge.breadcrumb {
-  font-size: 1.4285em;
+  font-size: 1.3em;
 }
 
 .ui.massive.breadcrumb {
-  font-size: 1.7142em;
+  font-size: 1.5em;
 }
 
 /*******************************
@@ -15978,12 +15978,32 @@ ol.ui.list ol,
             Coupling
 *******************************/
 
+.ui.menu .ui.list > .item,
+.ui.menu .ui.list .list > .item {
+  display: list-item;
+  table-layout: fixed;
+  list-style-type: none;
+  list-style-position: outside;
+  padding: 0.3em 0em;
+  line-height: 1.2;
+}
+
 .ui.menu .ui.list .list > .item:before,
 .ui.menu .ui.list > .item:before {
   border: none;
   background: none;
 }
 
+.ui.menu .ui.list .list > .item:first-child,
+.ui.menu .ui.list > .item:first-child {
+  padding-top: 0em;
+}
+
+.ui.menu .ui.list .list > .item:last-child,
+.ui.menu .ui.list > .item:last-child {
+  padding-bottom: 0em;
+}
+
 /*******************************
             Types
 *******************************/
@@ -16263,6 +16283,7 @@ ul.ui.list li:before,
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list > .item:before {
   position: absolute;
+  top: auto;
   left: -1rem;
   content: '•';
   opacity: 1;
@@ -20012,6 +20033,18 @@ a.ui.nag {
   box-shadow: -1px 1px 0px 0px #b3b3b3;
 }
 
+/*******************************
+            Coupling
+*******************************/
+
+/* Immediate Nested Grid */
+
+.ui.popup > .ui.grid:not(.padded) {
+  width: -webkit-calc(100% + 1.75rem);
+  width: calc(100% + 1.75rem);
+  margin: -0.7rem -0.875rem;
+}
+
 /*******************************
             States
 *******************************/

dist/semantic.js

@@ -3567,9 +3567,10 @@ $.fn.dropdown = function(parameters) {
           if(hasTouch) {
             module.bind.touchEvents();
           }
-          module.observeChanges();
           module.bind.mouseEvents();
           module.bind.keyboardEvents();
+
+          module.observeChanges();
           module.instantiate();
         },
 
@@ -3749,20 +3750,6 @@ $.fn.dropdown = function(parameters) {
                 .on(module.get.inputEvent(), selector.search, module.event.input)
               ;
             }
-            if( module.is.searchSelection() ) {
-              $module
-                .on('focus' + eventNamespace, selector.search, module.event.searchFocus)
-                .on('blur' + eventNamespace, selector.search, module.event.searchBlur)
-              ;
-            }
-            else {
-              $module
-                .on('mousedown', module.event.mousedown)
-                .on('mouseup', module.event.mouseup)
-                .on('focus' + eventNamespace, module.event.focus)
-                .on('blur' + eventNamespace, module.event.blur)
-              ;
-            }
           },
           touchEvents: function() {
             module.debug('Touch device detected binding touch events');
@@ -3778,7 +3765,13 @@ $.fn.dropdown = function(parameters) {
           },
           mouseEvents: function() {
             module.verbose('Mouse detected binding mouse events');
-            if( !module.is.searchSelection() ) {
+            if( module.is.searchSelection() ) {
+              $module
+                .on('focus' + eventNamespace, selector.search, module.event.searchFocus)
+                .on('blur' + eventNamespace, selector.search, module.event.searchBlur)
+              ;
+            }
+            else {
               if(settings.on == 'click') {
                 $module
                   .on('click' + eventNamespace, module.event.test.toggle)
@@ -3795,6 +3788,12 @@ $.fn.dropdown = function(parameters) {
                   .on(settings.on + eventNamespace, module.toggle)
                 ;
               }
+              $module
+                .on('mousedown', module.event.mousedown)
+                .on('mouseup', module.event.mouseup)
+                .on('focus' + eventNamespace, module.event.focus)
+                .on('blur' + eventNamespace, module.event.blur)
+              ;
             }
             $module
               .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
@@ -3899,7 +3898,8 @@ $.fn.dropdown = function(parameters) {
             module.show();
           },
           searchBlur: function(event) {
-            module.hide();
+            // give enough time for events to bubble
+            setTimeout(module.hide, 50);
           },
           input: function(event) {
             var
@@ -4828,7 +4828,7 @@ $.fn.dropdown.settings = {
   name           : 'Dropdown',
   namespace      : 'dropdown',
 
-  debug          : false,
+  debug          : true,
   verbose        : true,
   performance    : true,
 

src/definitions/elements/loader.less

@@ -58,7 +58,7 @@
   width: 100%;
   height: 100%;
 
-  animation: loader-spin @loaderSpeed linear;
+  animation: loader @loaderSpeed linear;
   animation-iteration-count: infinite;
 
   border-radius: @circularRadius;
@@ -71,7 +71,7 @@
 }
 
 /* Active Animation */
-@keyframes loader-spin {
+@keyframes loader {
   from {
     transform: rotate(0deg);
   }
@@ -158,6 +158,11 @@
             States
 *******************************/
 
+.ui.indeterminate.loader:after {
+  animation-direction: @indeterminateDirection;
+  animation-duration: @indeterminateSpeed;
+}
+
 .ui.loader.active,
 .ui.loader.visible {
   display: block;

src/themes/default/elements/loader.variables

@@ -33,7 +33,8 @@
         States
 --------------------*/
 
-
+@indeterminateDirection: reverse;
+@indeterminateSpeed: (2 * @loaderSpeed);
 
 /*-------------------
       Variations

src/themes/pulsar/elements/loader.overrides

@@ -2,10 +2,10 @@
          Theme Overrides
 *******************************/
 
-@keyframes loader-spin {
+@keyframes loader {
   0% {
     transform: rotate(0deg);
-    opacity: 0.3;
+    opacity: 0;
   }
   20% {
     transform: rotate(360deg);
@@ -23,6 +23,6 @@
   }
   100% {
     transform: rotate(1800deg);
-    opacity: 0.3;
+    opacity: 0;
   }
 }