Adds first docs for modal, adds revisions to modal and dimmer

Former-commit-id: 5a515a3c6c08f8dd75125e88d3d3599d1d109b11
Former-commit-id: 249e072adb24b940280ac35e5195b4efc0de3744

build/minified/modules/dimmer.js

@@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) {
           if( module.is.dimmer() ) {
             $dimmer = $module;
             $module = $dimmer.parent();
-            module.debug('Module initialized as dimmer');
+            module.debug('Module initialized as dimmer', settings);
           }
           else {
             if( module.has.dimmer() ) {
               $dimmer = $module.children(selector.dimmer).first();
-              module.debug('Module initialized with found dimmer');
+              module.debug('Module initialized with found dimmer', settings);
             }
             else {
               module.create();
-              module.debug('Module initialized with created dimmer');
+              module.debug('Module initialized with created dimmer', settings);
             }
             if(settings.on == 'hover') {
               $module
@@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
+            callback = callback || function(){};
             module.set.dimmed();
             if($.fn.transition !== undefined) {
               $dimmer
-                .transition(settings.transition + ' in', function() {
+                .transition(settings.transition + ' in', settings.duration, function() {
                   module.set.active();
+                  callback();
                 })
               ;
             }
@@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(settings.duration, 1, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  callback();
                 })
               ;
             }
           },
-          hide: function() {
+          hide: function(callback) {
+            callback = callback || function(){};
             module.remove.dimmed();
             if($.fn.transition !== undefined) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition(settings.transition + ' out', settings.duration, function() {
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeOut(settings.duration, function() {
                   $dimmer.removeAttr('style');
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        show: function() {
+        show: function(callback) {
           module.debug('Showing dimmer', $dimmer);
           if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) {
-            module.animate.show();
+            module.animate.show(callback);
             $.proxy(settings.onShow, element)();
             $.proxy(settings.onChange, element)();
           }
@@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        hide: function() {
+        hide: function(callback) {
           if( module.is.active() || module.is.animating() ) {
             module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide();
+            module.animate.hide(callback);
             $.proxy(settings.onHide, element)();
             $.proxy(settings.onChange, element)();
           }

build/minified/modules/dropdown.js

@@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) {
                 $currentMenu = $(this).find(selector.menu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              console.log($currentMenu);
               if( $currentMenu.size() > 0 ) {
                 clearTimeout(dropdown.itemTimer);
                 dropdown.itemTimer = setTimeout(function() {

build/minified/modules/modal.js

@@ -19,21 +19,21 @@ $.fn.modal = function(parameters) {
       ? $.extend(true, {}, $.fn.modal.settings, parameters)
       : $.fn.modal.settings,
 
-    selector       = settings.selector,
-    className      = settings.className,
-    namespace      = settings.namespace,
-    error          = settings.error,
+    selector        = settings.selector,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    error           = settings.error,
 
-    eventNamespace = '.' + namespace,
+    eventNamespace  = '.' + namespace,
     moduleNamespace = 'module-' + namespace,
-    moduleSelector = $allModals.selector || '',
+    moduleSelector  = $allModals.selector || '',
 
-    time           = new Date().getTime(),
-    performance    = [],
+    time            = new Date().getTime(),
+    performance     = [],
 
-    query          = arguments[0],
-    methodInvoked  = (typeof query == 'string'),
-    queryArguments = [].slice.call(arguments, 1),
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
 
     invokedResponse
   ;
@@ -46,6 +46,8 @@ $.fn.modal = function(parameters) {
         $otherModals = $allModals.not($modal),
         $closeButton = $modal.find(selector.closeButton),
 
+        $dimmer,
+
         element      = this,
         instance     = $modal.data(moduleNamespace),
         modal
@@ -60,6 +62,7 @@ $.fn.modal = function(parameters) {
           ;
           $context
             .dimmer({
+              closable: settings.closable,
               duration: settings.duration,
               onShow: function() {
                 modal.add.keyboardShortcuts();
@@ -67,6 +70,7 @@ $.fn.modal = function(parameters) {
               },
               onHide: function() {
                 if($modal.is(':visible')) {
+                  $context.off('.dimmer');
                   modal.hide();
                   $.proxy(settings.onHide, this)();
                 }
@@ -74,6 +78,14 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
+          $dimmer = $context.children(selector.dimmer);
+          if( $modal.parent()[0] !== $dimmer[0] ) {
+            modal.debug('Moving element inside dimmer', $context);
+            $modal
+              .detach()
+              .appendTo($dimmer)
+            ;
+          }
           modal.cache.sizes();
           modal.instantiate();
         },
@@ -118,18 +130,27 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        toggle: function() {
+          if( modal.is.active() ) {
+            modal.hide();
+          }
+          else {
+            modal.show();
+          }
+        },
+
         show: function() {
           modal.set.type();
           modal.set.position();
-          modal.hideOthers();
+          modal.hideAll();
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' in', settings.duration)
+              .transition(settings.transition + ' in', settings.duration, modal.set.active)
             ;
           }
           else {
             $modal
-              .fadeIn(settings.duration, settings.easing)
+              .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
           $context.dimmer('show');
@@ -142,17 +163,17 @@ $.fn.modal = function(parameters) {
           ;
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' out', settings.duration, settings.unDim)
+              .transition(settings.transition + ' out', settings.duration, modal.remove.active)
             ;
           }
           else {
             $modal
-              .fadeOut(settings.duration, settings.easing, settings.unDim)
+              .fadeOut(settings.duration, settings.easing, modal.remove.active)
             ;
           }
         },
 
-        hideOthers: function() {
+        hideAll: function() {
           $otherModals
             .filter(':visible')
             .modal('hide')
@@ -169,6 +190,9 @@ $.fn.modal = function(parameters) {
         },
 
         remove: {
+          active: function() {
+            $modal.removeClass(className.active);
+          },
           keyboardShortcuts: function() {
             modal.verbose('Removing keyboard shortcuts');
             $document
@@ -195,7 +219,16 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        is: {
+          active: function() {
+            return $modal.hasClass(className.active);
+          }
+        },
+
         set: {
+          active: function() {
+            $modal.addClass('active');
+          },
           type: function() {
             if(modal.can.fit()) {
               modal.verbose('Modal fits on screen');
@@ -257,7 +290,7 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.debug.apply(console, arguments);
             }
           }
@@ -268,13 +301,13 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.verbose.apply(console, arguments);
             }
           }
         },
         error: function() {
-          modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
+          modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
           modal.error.apply(console, arguments);
         },
         performance: {
@@ -301,7 +334,7 @@ $.fn.modal = function(parameters) {
           },
           display: function() {
             var
-              title = settings.moduleName + ':',
+              title = settings.name + ':',
               totalTime = 0
             ;
             time = false;
@@ -406,35 +439,33 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name  : 'Modal',
+  name        : 'Modal',
   namespace   : 'modal',
-
   verbose     : true,
   debug       : true,
   performance : true,
 
-  selector   : {
-    closeButton : '.close'
-  },
+  offset      : 0,
+  transition  : 'scale',
+  duration    : 500,
+  easing      : 'easeOutExpo',
+
+  closable    : true,
+  context     : 'body',
+
+  onShow      : function(){},
+  onHide      : function(){},
 
+  selector    : {
+    closeButton : '.close, .actions .button',
+    dimmer: '.ui.dimmer'
+  },
   error : {
     method : 'The method you called is not defined.'
   },
-
   className : {
     scrolling : 'scrolling'
   },
-
-  onShow     : function(){},
-  onHide     : function(){},
-
-  transition : 'scale',
-
-  context    : 'body',
-  offset     : -25,
-
-  duration   : 400,
-  easing     : 'easeOutExpo'
 };
 
 

build/packaged/modules/dimmer.js

@@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) {
           if( module.is.dimmer() ) {
             $dimmer = $module;
             $module = $dimmer.parent();
-            module.debug('Module initialized as dimmer');
+            module.debug('Module initialized as dimmer', settings);
           }
           else {
             if( module.has.dimmer() ) {
               $dimmer = $module.children(selector.dimmer).first();
-              module.debug('Module initialized with found dimmer');
+              module.debug('Module initialized with found dimmer', settings);
             }
             else {
               module.create();
-              module.debug('Module initialized with created dimmer');
+              module.debug('Module initialized with created dimmer', settings);
             }
             if(settings.on == 'hover') {
               $module
@@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
+            callback = callback || function(){};
             module.set.dimmed();
             if($.fn.transition !== undefined) {
               $dimmer
-                .transition(settings.transition + ' in', function() {
+                .transition(settings.transition + ' in', settings.duration, function() {
                   module.set.active();
+                  callback();
                 })
               ;
             }
@@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(settings.duration, 1, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  callback();
                 })
               ;
             }
           },
-          hide: function() {
+          hide: function(callback) {
+            callback = callback || function(){};
             module.remove.dimmed();
             if($.fn.transition !== undefined) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition(settings.transition + ' out', settings.duration, function() {
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeOut(settings.duration, function() {
                   $dimmer.removeAttr('style');
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        show: function() {
+        show: function(callback) {
           module.debug('Showing dimmer', $dimmer);
           if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) {
-            module.animate.show();
+            module.animate.show(callback);
             $.proxy(settings.onShow, element)();
             $.proxy(settings.onChange, element)();
           }
@@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        hide: function() {
+        hide: function(callback) {
           if( module.is.active() || module.is.animating() ) {
             module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide();
+            module.animate.hide(callback);
             $.proxy(settings.onHide, element)();
             $.proxy(settings.onChange, element)();
           }

build/packaged/modules/dropdown.js

@@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) {
                 $currentMenu = $(this).find(selector.menu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              console.log($currentMenu);
               if( $currentMenu.size() > 0 ) {
                 clearTimeout(dropdown.itemTimer);
                 dropdown.itemTimer = setTimeout(function() {

build/packaged/modules/modal.js

@@ -19,21 +19,21 @@ $.fn.modal = function(parameters) {
       ? $.extend(true, {}, $.fn.modal.settings, parameters)
       : $.fn.modal.settings,
 
-    selector       = settings.selector,
-    className      = settings.className,
-    namespace      = settings.namespace,
-    error          = settings.error,
+    selector        = settings.selector,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    error           = settings.error,
 
-    eventNamespace = '.' + namespace,
+    eventNamespace  = '.' + namespace,
     moduleNamespace = 'module-' + namespace,
-    moduleSelector = $allModals.selector || '',
+    moduleSelector  = $allModals.selector || '',
 
-    time           = new Date().getTime(),
-    performance    = [],
+    time            = new Date().getTime(),
+    performance     = [],
 
-    query          = arguments[0],
-    methodInvoked  = (typeof query == 'string'),
-    queryArguments = [].slice.call(arguments, 1),
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
 
     invokedResponse
   ;
@@ -46,6 +46,8 @@ $.fn.modal = function(parameters) {
         $otherModals = $allModals.not($modal),
         $closeButton = $modal.find(selector.closeButton),
 
+        $dimmer,
+
         element      = this,
         instance     = $modal.data(moduleNamespace),
         modal
@@ -60,6 +62,7 @@ $.fn.modal = function(parameters) {
           ;
           $context
             .dimmer({
+              closable: settings.closable,
               duration: settings.duration,
               onShow: function() {
                 modal.add.keyboardShortcuts();
@@ -67,6 +70,7 @@ $.fn.modal = function(parameters) {
               },
               onHide: function() {
                 if($modal.is(':visible')) {
+                  $context.off('.dimmer');
                   modal.hide();
                   $.proxy(settings.onHide, this)();
                 }
@@ -74,6 +78,14 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
+          $dimmer = $context.children(selector.dimmer);
+          if( $modal.parent()[0] !== $dimmer[0] ) {
+            modal.debug('Moving element inside dimmer', $context);
+            $modal
+              .detach()
+              .appendTo($dimmer)
+            ;
+          }
           modal.cache.sizes();
           modal.instantiate();
         },
@@ -118,18 +130,27 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        toggle: function() {
+          if( modal.is.active() ) {
+            modal.hide();
+          }
+          else {
+            modal.show();
+          }
+        },
+
         show: function() {
           modal.set.type();
           modal.set.position();
-          modal.hideOthers();
+          modal.hideAll();
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' in', settings.duration)
+              .transition(settings.transition + ' in', settings.duration, modal.set.active)
             ;
           }
           else {
             $modal
-              .fadeIn(settings.duration, settings.easing)
+              .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
           $context.dimmer('show');
@@ -142,17 +163,17 @@ $.fn.modal = function(parameters) {
           ;
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' out', settings.duration, settings.unDim)
+              .transition(settings.transition + ' out', settings.duration, modal.remove.active)
             ;
           }
           else {
             $modal
-              .fadeOut(settings.duration, settings.easing, settings.unDim)
+              .fadeOut(settings.duration, settings.easing, modal.remove.active)
             ;
           }
         },
 
-        hideOthers: function() {
+        hideAll: function() {
           $otherModals
             .filter(':visible')
             .modal('hide')
@@ -169,6 +190,9 @@ $.fn.modal = function(parameters) {
         },
 
         remove: {
+          active: function() {
+            $modal.removeClass(className.active);
+          },
           keyboardShortcuts: function() {
             modal.verbose('Removing keyboard shortcuts');
             $document
@@ -195,7 +219,16 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        is: {
+          active: function() {
+            return $modal.hasClass(className.active);
+          }
+        },
+
         set: {
+          active: function() {
+            $modal.addClass('active');
+          },
           type: function() {
             if(modal.can.fit()) {
               modal.verbose('Modal fits on screen');
@@ -257,7 +290,7 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.debug.apply(console, arguments);
             }
           }
@@ -268,13 +301,13 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.verbose.apply(console, arguments);
             }
           }
         },
         error: function() {
-          modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
+          modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
           modal.error.apply(console, arguments);
         },
         performance: {
@@ -301,7 +334,7 @@ $.fn.modal = function(parameters) {
           },
           display: function() {
             var
-              title = settings.moduleName + ':',
+              title = settings.name + ':',
               totalTime = 0
             ;
             time = false;
@@ -406,35 +439,33 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name  : 'Modal',
+  name        : 'Modal',
   namespace   : 'modal',
-
   verbose     : true,
   debug       : true,
   performance : true,
 
-  selector   : {
-    closeButton : '.close'
-  },
+  offset      : 0,
+  transition  : 'scale',
+  duration    : 500,
+  easing      : 'easeOutExpo',
+
+  closable    : true,
+  context     : 'body',
+
+  onShow      : function(){},
+  onHide      : function(){},
 
+  selector    : {
+    closeButton : '.close, .actions .button',
+    dimmer: '.ui.dimmer'
+  },
   error : {
     method : 'The method you called is not defined.'
   },
-
   className : {
     scrolling : 'scrolling'
   },
-
-  onShow     : function(){},
-  onHide     : function(){},
-
-  transition : 'scale',
-
-  context    : 'body',
-  offset     : -25,
-
-  duration   : 400,
-  easing     : 'easeOutExpo'
 };
 
 

build/uncompressed/collections/menu.css

@@ -94,15 +94,15 @@
 .ui.menu .item .menu a.item.hover,
 .ui.menu .item .menu .link.item:hover,
 .ui.menu .item .menu .link.item.hover {
-  color: rgba(35, 35, 35, 0.95);
+  color: rgba(0, 0, 0, 0.85);
 }
 .ui.menu .dropdown.item .menu .item a:hover {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, 0.85);
 }
 /* Active */
 .ui.menu .active.item,
 .ui.menu .active.item a {
-  color: rgba(0, 0, 0, 0.95);
+  color: rgba(0, 0, 0, 0.85);
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
@@ -172,8 +172,8 @@
 .ui.menu .item > p:first-child {
   margin-top: 0px;
 }
-.ui.menu .item > p:only-child {
-  margin: 0px;
+.ui.menu .item > p:last-child {
+  margin-bottom: 0px;
 }
 /*--------------
      Inputs
@@ -211,12 +211,18 @@
 /*--------------
     Dropdowns
 ---------------*/
+.ui.menu .dropdown.item .menu {
+  margin: 1px 0px 0px 0px;
+}
+.ui.menu .simple.dropdown.item .menu {
+  margin: 0px !important;
+}
 .ui.menu .dropdown.item .menu .item {
   width: 100%;
   color: rgba(0, 0, 0, 0.75);
 }
 .ui.menu .dropdown.item .menu .active.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
 }
 .ui.menu .ui.dropdown .menu .item:before {
   display: none;
@@ -228,7 +234,7 @@
 .ui.menu .item > a > .label {
   background-color: #9DA6AB;
   color: #FFFFFF;
-  margin: -0.3em 0em -0.3em 0.5em;
+  margin: -0.15em 0em -0.15em 0.5em;
   padding: 0.3em 0.8em;
   vertical-align: baseline;
 }
@@ -250,7 +256,6 @@
 /*--------------
       Hover
 ---------------*/
-/* Pseudo states cautiously used for convenience */
 .ui.link.menu .item:hover,
 .ui.menu .item.hover,
 .ui.menu .link.item:hover,
@@ -260,12 +265,10 @@
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.02);
 }
-.ui.menu .ui.dropdown.active,
-.ui.menu .ui.dropdown.hover,
-.ui.menu .ui.dropdown:hover {
-  border-top: none;
-  padding-top: 0.83em;
+.ui.menu .ui.dropdown.active {
   background-color: rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: none;
+  box-shadow: none;
   -webkit-border-bottom-right-radius: 0em;
   -moz-border-bottom-right-radius: 0em;
   border-bottom-right-radius: 0em;
@@ -289,18 +292,19 @@
      Active
 ---------------*/
 .ui.menu .active.item {
-  padding-top: 0.63em;
-  border-top: 0.2em solid rgba(50, 50, 50, 0.8);
-  color: rgba(0, 0, 0, 0.95);
   background-color: rgba(0, 0, 0, 0.01);
+  color: rgba(0, 0, 0, 0.95);
+  -webkit-box-shadow: 0em 0.2em 0em inset;
+  -moz-box-shadow: 0em 0.2em 0em inset;
+  box-shadow: 0em 0.2em 0em inset;
 }
 .ui.vertical.menu .active.item {
-  border-left: 0.2em solid rgba(50, 50, 50, 0.8);
-  padding-top: 0.83em;
-  padding-left: 0.76em;
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
+  -moz-box-shadow: 0.2em 0em 0em inset;
+  -webkit-box-shadow: 0.2em 0em 0em inset;
+  box-shadow: 0.2em 0em 0em inset;
 }
 .ui.vertical.menu > .active.item:first-child {
   -webkit-border-radius: 0em 0.1875em 0em 0em;
@@ -409,10 +413,10 @@
 .ui.vertical.menu .dropdown.item > i {
   float: right;
 }
-.ui.vertical.menu .simple.dropdown.item .menu {
+.ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
-  margin: 0em;
+  margin: 0px 0px 0px 1px;
 }
 .ui.vertical.menu .dropdown.item .menu .item {
   font-size: 0.875rem;
@@ -421,6 +425,11 @@
 .ui.vertical.menu .dropdown.item .menu .item .icon {
   margin-right: 0em;
 }
+.ui.vertical.menu .dropdown.item.active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 /*--- Sub Menu ---*/
 .ui.vertical.menu .item > .menu {
   margin: 0.5em -0.95em 0em;
@@ -439,8 +448,8 @@
 /*--------------
      Tiered
 ---------------*/
-.ui.tiered.menu > .menu > .item {
-  color: rgba(0, 0, 0, 0.5);
+.ui.tiered.menu > .sub.menu > .item {
+  color: rgba(0, 0, 0, 0.4);
 }
 .ui.tiered.menu > .menu > .item:hover,
 .ui.tiered.menu > .menu > .item.hover {
@@ -454,6 +463,8 @@
   background-color: rgba(0, 0, 0, 0.01);
   border-radius: 0em;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
   color: #FFFFFF;
 }
@@ -468,6 +479,8 @@
   background-color: transparent;
   border-radius: 0 0 0 0;
   border-top: medium none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
   color: rgba(0, 0, 0, 0.7);
 }
@@ -533,6 +546,9 @@
   border-right: 1px solid #DCDDDE;
   border-top: 1px solid #DCDDDE;
   padding-top: 0.83em;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
   -webkit-border-radius: 5px 5px 0 0;
   -moz-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
@@ -556,19 +572,19 @@
 .ui.pagination.menu .active.item {
   border-top: none;
   padding-top: 0.83em;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: transparent;
 }
 /*--------------
    Secondary
 ---------------*/
 .ui.secondary.menu {
   background-color: transparent;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 .ui.secondary.menu > .item {
   -webkit-box-shadow: none;
@@ -587,7 +603,12 @@
 }
 .ui.secondary.menu .link.item,
 .ui.secondary.menu a.item {
-  color: rgba(0, 0, 0, 0.4);
+  opacity: 0.8;
+  -webkit-transition: opacity 0.2s ease;
+  -moz-transition: opacity 0.2s ease;
+  -o-transition: opacity 0.2s ease;
+  -ms-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 .ui.secondary.menu .header.item {
   border-right: 0.1em solid rgba(0, 0, 0, 0.1);
@@ -599,14 +620,15 @@
 /* hover */
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
-  color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
 }
 /* active */
 .ui.secondary.menu > .active.item {
-  border-top: none;
   background-color: rgba(0, 0, 0, 0.08);
-  padding-top: 0.5em;
-  color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 .ui.secondary.vertical.menu > .active.item {
   -webkit-border-radius: 0.3125em;
@@ -645,7 +667,7 @@
   font-weight: bold;
 }
 .ui.secondary.pointing.menu .text.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
 }
 .ui.secondary.pointing.menu > .item {
   margin: 0em 0em -3px;
@@ -684,6 +706,9 @@
 .ui.secondary.pointing.menu > .item.active {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 /*---------------------
    Secondary Vertical
@@ -779,7 +804,7 @@
   box-shadow: none;
 }
 .ui.text.menu > .item {
-  opacity: 0.6;
+  opacity: 0.8;
   margin: 0em 1em;
   padding: 0em;
   height: auto !important;
@@ -789,7 +814,6 @@
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  color: rgba(0, 0, 0, 0.6);
   -webkit-transition: opacity 0.2s ease
   ;
   -moz-transition: opacity 0.2s ease
@@ -873,25 +897,6 @@
 .ui.inverted.text.menu .item.active {
   background-color: transparent;
 }
-/* colors */
-.ui.green.text.menu .active.item {
-  color: #A1CF64;
-}
-.ui.red.text.menu .active.item {
-  color: #D95C5C;
-}
-.ui.blue.text.menu .active.item {
-  color: #6ECFF5;
-}
-.ui.purple.text.menu .active.item {
-  color: #564F8A;
-}
-.ui.orange.text.menu .active.item {
-  color: #F05940;
-}
-.ui.teal.text.menu .active.item {
-  color: #00B5AD;
-}
 /*--------------
     Icon Only
 ---------------*/
@@ -901,15 +906,16 @@
   display: inline-block;
   height: auto;
 }
-.ui.icon.menu .item {
+.ui.icon.menu > .item {
+  height: auto;
   text-align: center;
   color: rgba(60, 60, 60, 0.7);
 }
-.ui.icon.menu .item .icon {
+.ui.icon.menu > .item > .icon {
   display: block;
-  float: none;
+  float: none !important;
   opacity: 1;
-  margin: 0em auto;
+  margin: 0em auto !important;
 }
 .ui.icon.menu .icon:before {
   opacity: 1;
@@ -918,6 +924,9 @@
 .ui.menu .icon.item .icon {
   margin: 0em;
 }
+.ui.vertical.icon.menu {
+  float: none;
+}
 /*--- inverted ---*/
 .ui.inverted.icon.menu .item {
   color: rgba(255, 255, 255, 0.8);
@@ -931,10 +940,10 @@
 .ui.labeled.icon.menu {
   text-align: center;
 }
-.ui.labeled.icon.menu .icon {
+.ui.labeled.icon.menu > .item > .icon {
   display: block;
-  font-size: 1.5em;
-  margin: 0em auto 0.3em;
+  font-size: 1.5em !important;
+  margin: 0em auto 0.3em !important;
 }
 /*******************************
            Variations
@@ -946,26 +955,32 @@
 .ui.menu .green.active.item,
 .ui.green.menu .active.item {
   border-color: #A1CF64 !important;
+  color: #A1CF64 !important;
 }
 .ui.menu .red.active.item,
 .ui.red.menu .active.item {
   border-color: #D95C5C !important;
+  color: #D95C5C !important;
 }
 .ui.menu .blue.active.item,
 .ui.blue.menu .active.item {
   border-color: #6ECFF5 !important;
+  color: #6ECFF5 !important;
 }
 .ui.menu .purple.active.item,
 .ui.purple.menu .active.item {
   border-color: #564F8A !important;
+  color: #564F8A !important;
 }
 .ui.menu .orange.active.item,
 .ui.orange.menu .active.item {
   border-color: #F05940 !important;
+  color: #F05940 !important;
 }
 .ui.menu .teal.active.item,
 .ui.teal.menu .active.item {
   border-color: #00B5AD !important;
+  color: #00B5AD !important;
 }
 /*--------------
     Inverted
@@ -1050,12 +1065,12 @@
 }
 /*--- Active ---*/
 .ui.inverted.menu .active.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
 .ui.inverted.menu .active.item,
 .ui.inverted.menu .active.item a {
-  color: #ffffff;
+  color: #ffffff !important;
 }
 .ui.inverted.vertical.menu .item .menu .active.item {
   background-color: rgba(255, 255, 255, 0.2);
@@ -1069,6 +1084,27 @@
 .ui.inverted.pointing.menu .active.item:hover:after {
   background-color: #3B3B3B;
 }
+/*--------------
+    Selection
+---------------*/
+.ui.selection.menu > .item {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.selection.menu > .item:hover {
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.selection.menu > .item.active {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.inverted.selection.menu > .item {
+  color: rgba(255, 255, 255, 0.4);
+}
+.ui.inverted.selection.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.selection.menu > .item.active {
+  color: #FFFFFF;
+}
 /*--------------
      Floated
 ---------------*/
@@ -1371,6 +1407,9 @@
 .ui.large.menu .item {
   font-size: 1.125rem;
 }
+.ui.large.menu .item .item {
+  font-size: 0.875rem;
+}
 .ui.large.vertical.menu {
   width: 18rem;
 }

build/uncompressed/elements/button.css

@@ -309,163 +309,6 @@
   float: right;
   margin-left: 0.25em;
 }
-/*-------------------
-       Colors
---------------------*/
-/*--- Black ---*/
-.ui.black.buttons .button,
-.ui.black.button {
-  background-color: #5C6166 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
-  background-color: #4C4C4C !important;
-  color: #FFFFFF !important;
-}
-.ui.black.buttons .button:active,
-.ui.black.button:active {
-  background-color: #333333 !important;
-  color: #FFFFFF !important;
-}
-/*--- Green ---*/
-.ui.green.buttons .button,
-.ui.green.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.green.buttons .button:hover,
-.ui.green.button:hover,
-.ui.green.buttons .active.button,
-.ui.green.button.active {
-  background-color: #58cb73 !important;
-  color: #FFFFFF !important;
-}
-.ui.green.buttons .button:active,
-.ui.green.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF !important;
-}
-/*--- Red ---*/
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover,
-.ui.red.buttons .active.button,
-.ui.red.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF !important;
-}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF !important;
-}
-/*--- Blue ---*/
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #6ECFF5 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover,
-.ui.blue.buttons .active.button,
-.ui.blue.button.active {
-  background-color: #1AB8F3 !important;
-  color: #FFFFFF !important;
-}
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #0AA5DF !important;
-  color: #FFFFFF !important;
-}
-/*--- Purple ---*/
-.ui.purple.buttons .button,
-.ui.purple.button {
-  background-color: #564F8A !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover,
-.ui.purple.buttons .active.button,
-.ui.purple.button.active {
-  background-color: #3E3773 !important;
-  color: #FFFFFF !important;
-}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
-  background-color: #2E2860 !important;
-  color: #FFFFFF !important;
-}
-/*--- Teal ---*/
-.ui.teal.buttons .button,
-.ui.teal.button {
-  background-color: #00B5AD !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover,
-.ui.teal.buttons .active.button,
-.ui.teal.button.active {
-  background-color: #009A93 !important;
-  color: #FFFFFF !important;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
-  background-color: #00847E !important;
-  color: #FFFFFF !important;
-}
-/*---------------
-    Positive
-----------------*/
-.ui.positive.buttons .button,
-.ui.positive.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover,
-.ui.positive.buttons .active.button,
-.ui.positive.button.active {
-  background-color: #58CB73 !important;
-  color: #FFFFFF;
-}
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF;
-}
-/*---------------
-     Negative
-----------------*/
-.ui.negative.buttons .button,
-.ui.negative.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover,
-.ui.negative.buttons .active.button,
-.ui.negative.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF;
-}
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF;
-}
 /*-------------------
         Sizes
 --------------------*/
@@ -498,15 +341,11 @@
 .ui.huge.buttons .button,
 .ui.huge.button {
   font-size: 1.375rem;
-  padding-left: 2em;
-  padding-right: 2em;
 }
 .ui.massive.buttons .button,
 .ui.massive.button {
   font-size: 1.5rem;
   font-weight: bold;
-  padding-left: 2.5em;
-  padding-right: 2.5em;
 }
 /* loading */
 .ui.huge.loading.button:after {
@@ -550,9 +389,9 @@
 --------------------*/
 .ui.basic.buttons .button,
 .ui.basic.button {
-  background-color: transparent;
+  background-color: transparent !important;
   background-image: none;
-  color: #999999;
+  color: #999999 !important;
   font-weight: normal;
   text-transform: none;
   text-shadow: none;
@@ -580,15 +419,15 @@
 }
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
-  color: #7F7F7F;
+  color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
 }
 .ui.basic.buttons .button:active,
 .ui.basic.button:active {
-  background-color: rgba(0, 0, 0, 0.02);
-  color: #7F7F7F;
+  background-color: rgba(0, 0, 0, 0.02) !important;
+  color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
@@ -950,6 +789,163 @@
 .ui.twelve.vertical.buttons > .button {
   height: 8.3333%;
 }
+/*-------------------
+       Colors
+--------------------*/
+/*--- Black ---*/
+.ui.black.buttons .button,
+.ui.black.button {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.black.buttons .button:hover,
+.ui.black.button:hover {
+  background-color: #4C4C4C !important;
+  color: #FFFFFF !important;
+}
+.ui.black.buttons .button:active,
+.ui.black.button:active {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+}
+/*--- Green ---*/
+.ui.green.buttons .button,
+.ui.green.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .active.button,
+.ui.green.button.active {
+  background-color: #58cb73 !important;
+  color: #FFFFFF !important;
+}
+.ui.green.buttons .button:active,
+.ui.green.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF !important;
+}
+/*--- Red ---*/
+.ui.red.buttons .button,
+.ui.red.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.red.buttons .button:hover,
+.ui.red.button:hover,
+.ui.red.buttons .active.button,
+.ui.red.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF !important;
+}
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF !important;
+}
+/*--- Blue ---*/
+.ui.blue.buttons .button,
+.ui.blue.button {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover,
+.ui.blue.buttons .active.button,
+.ui.blue.button.active {
+  background-color: #1AB8F3 !important;
+  color: #FFFFFF !important;
+}
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+  background-color: #0AA5DF !important;
+  color: #FFFFFF !important;
+}
+/*--- Purple ---*/
+.ui.purple.buttons .button,
+.ui.purple.button {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.purple.buttons .button:hover,
+.ui.purple.button:hover,
+.ui.purple.buttons .active.button,
+.ui.purple.button.active {
+  background-color: #3E3773 !important;
+  color: #FFFFFF !important;
+}
+.ui.purple.buttons .button:active,
+.ui.purple.button:active {
+  background-color: #2E2860 !important;
+  color: #FFFFFF !important;
+}
+/*--- Teal ---*/
+.ui.teal.buttons .button,
+.ui.teal.button {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.teal.buttons .button:hover,
+.ui.teal.button:hover,
+.ui.teal.buttons .active.button,
+.ui.teal.button.active {
+  background-color: #009A93 !important;
+  color: #FFFFFF !important;
+}
+.ui.teal.buttons .button:active,
+.ui.teal.button:active {
+  background-color: #00847E !important;
+  color: #FFFFFF !important;
+}
+/*---------------
+    Positive
+----------------*/
+.ui.positive.buttons .button,
+.ui.positive.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover,
+.ui.positive.buttons .active.button,
+.ui.positive.button.active {
+  background-color: #58CB73 !important;
+  color: #FFFFFF;
+}
+.ui.positive.buttons .button:active,
+.ui.positive.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF;
+}
+/*---------------
+     Negative
+----------------*/
+.ui.negative.buttons .button,
+.ui.negative.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover,
+.ui.negative.buttons .active.button,
+.ui.negative.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF;
+}
+.ui.negative.buttons .button:active,
+.ui.negative.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF;
+}
 /*******************************
             Groups
 *******************************/

build/uncompressed/elements/icons.css

@@ -555,7 +555,6 @@ i.dropdown.icon {
 i.icon.star {
   width: auto;
   margin: 0em;
-  vertical-align: middle;
 }
 /* left side icons */
 i.icon.left,
@@ -660,8 +659,9 @@ i.circular.icon {
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  width: 2em;
-  height: 2em;
+  line-height: 1 !important;
+  width: 2em !important;
+  height: 2em !important;
 }
 i.circular.icon:before {
   vertical-align: middle;

build/uncompressed/elements/image.css

@@ -13,6 +13,7 @@
              Image
 *******************************/
 .ui.image {
+  position: relative;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;

build/uncompressed/elements/label.css

@@ -15,7 +15,7 @@
 .ui.label {
   display: inline-block;
   vertical-align: middle;
-  margin: -0.5em 0.25em 0em;
+  margin: -0.25em 0.25em 0em;
   background-color: #E8E8E8;
   border-color: #E8E8E8;
   padding: 0.5em 0.8em;
@@ -40,19 +40,29 @@
   transition: background 0.1s linear
   ;
 }
+.ui.label:first-child {
+  margin-left: 0em;
+}
+.ui.label:last-child {
+  margin-right: 0em;
+}
+/* Link */
 a.ui.label {
   cursor: pointer;
 }
-.ui.label.disabled {
-  opacity: 0.5;
-}
+/* Detail */
 .ui.label .detail {
   display: inline-block;
   margin-left: 0.5em;
   font-weight: bold;
   opacity: 0.8;
 }
-.ui.label .icon.close {
+/* Icon */
+.ui.label .icon {
+  width: auto;
+}
+/* Removable label */
+.ui.label .delete.icon {
   cursor: pointer;
   margin: 0em 0em 0em 0.5em;
   opacity: 0.7;
@@ -67,9 +77,43 @@ a.ui.label {
   transition: background 0.1s linear
   ;
 }
+.ui.label .delete.icon:hover {
+  opacity: 0.99;
+}
+/*******************************
+             Types
+*******************************/
+.ui.image.label {
+  width: auto !important;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+  line-height: 1.5em;
+  vertical-align: baseline;
+  text-transform: none;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+}
+.ui.image.label img {
+  display: inline-block;
+  height: 2.5em;
+  margin: -0.4em 0.8em -0.4em -0.8em;
+  vertical-align: top;
+  -moz-border-radius: 0.325em 0em 0em 0.325em;
+  -webkit-border-radius: 0.325em 0em 0em 0.325em;
+  border-radius: 0.325em 0em 0em 0.325em;
+}
 /*******************************
              States
 *******************************/
+/*-------------------
+       Disabled
+--------------------*/
+.ui.label.disabled {
+  opacity: 0.5;
+}
 /*-------------------
         Hover
 --------------------*/
@@ -84,9 +128,6 @@ a.ui.label:hover:before {
   background-color: #E0E0E0;
   color: rgba(0, 0, 0, 0.7);
 }
-.ui.label .icon.close:hover {
-  opacity: 0.99;
-}
 /*******************************
            Variations
 *******************************/
@@ -498,16 +539,27 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/*-------------------
+     Horizontal
+--------------------*/
+.ui.horizontal.labels .label,
+.ui.horizontal.label {
+  margin: -0.125em 0.5em -0.125em 0em;
+  padding: 0.35em 1em;
+  min-width: 6em;
+  text-align: center;
+}
 /*-------------------
        Circular
 --------------------*/
 .ui.circular.labels .label,
 .ui.circular.label {
-  margin-top: -1em;
-  height: 2em;
+  min-height: 1em;
+  max-height: 2em;
   padding: 0.5em !important;
   line-height: 1em;
   text-align: center;
+  vertical-align: baseline;
   -webkit-border-radius: 500em;
   -moz-border-radius: 500em;
   border-radius: 500em;

build/uncompressed/elements/list.css

@@ -229,9 +229,13 @@ ol.ui.list li,
 ol.ui.list li:before,
 .ui.ordered.list .item:before {
   position: absolute;
+  top: 50%;
   left: -2em;
   counter-increment: ordered;
   content: counters(ordered, ".");
+  margin-top: -0.5em;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.6);
   text-align: right;
   vertical-align: top;
   opacity: 0.75;

build/uncompressed/modules/dimmer.css

@@ -51,8 +51,8 @@
   box-sizing: border-box;
   z-index: 1000;
 }
+/*
 .ui.dimmable.dimmed > :not(.dimmer) {
-  /*
   -webkit-transition:
     filter 0.5s ease
   ;
@@ -68,10 +68,9 @@
   transition:
     filter 0.5s ease
   ;
-  */
-
 }
-/* Dimmer Content */.ui.dimmer .content {
+*/
+/* Dimmer Content */.ui.dimmer > .content {
   width: 100%;
   height: 100%;
   display: table;
@@ -80,7 +79,7 @@
   -ms-user-select: text;
   user-select: text;
 }
-.ui.dimmer .content > * {
+.ui.dimmer > .content > div {
   display: table-cell;
   vertical-align: middle;
   color: #FFFFFF;
@@ -122,18 +121,28 @@
 ---------------*/
 .ui.page.dimmer {
   position: fixed;
+  -webkit-perspective: 2000px;
+  -moz-perspective: 2000px;
+  perspective: 2000px;
+  -webkit-transform-origin: top center;
+  -moz-transform-origin: top center;
+  -o-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
 }
-body.ui.dimmable.dimmed > :not(.dimmer) {
-  -webkit-filter: blur(15px) grayscale(0.7);
-  -moz-filter: blur(15px) grayscale(0.7);
+/*
+body.ui.dimmable.dimmed > :not(.dimmer){
+  -webkit-filter: ~"blur(15px) grayscale(0.7)";
+  -moz-filter: ~"blur(15px) grayscale(0.7)";
 }
+*/
 /*--------------
     Aligned
 ---------------*/
-.ui.dimmer .top.aligned.content > * {
+.ui.dimmer > .top.aligned.content > * {
   vertical-align: top;
 }
-.ui.dimmer .bottom.aligned.content > * {
+.ui.dimmer > .bottom.aligned.content > * {
   vertical-align: bottom;
 }
 /*--------------
@@ -142,7 +151,7 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
 .ui.inverted.dimmer {
   background-color: rgba(255, 255, 255, 0.85);
 }
-.ui.inverted.dimmer .content > * {
+.ui.inverted.dimmer > .content > * {
   color: rgba(0, 0, 0, 0.8);
 }
 /*--------------

build/uncompressed/modules/dimmer.js

@@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) {
           if( module.is.dimmer() ) {
             $dimmer = $module;
             $module = $dimmer.parent();
-            module.debug('Module initialized as dimmer');
+            module.debug('Module initialized as dimmer', settings);
           }
           else {
             if( module.has.dimmer() ) {
               $dimmer = $module.children(selector.dimmer).first();
-              module.debug('Module initialized with found dimmer');
+              module.debug('Module initialized with found dimmer', settings);
             }
             else {
               module.create();
-              module.debug('Module initialized with created dimmer');
+              module.debug('Module initialized with created dimmer', settings);
             }
             if(settings.on == 'hover') {
               $module
@@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
+            callback = callback || function(){};
             module.set.dimmed();
             if($.fn.transition !== undefined) {
               $dimmer
-                .transition(settings.transition + ' in', function() {
+                .transition(settings.transition + ' in', settings.duration, function() {
                   module.set.active();
+                  callback();
                 })
               ;
             }
@@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(settings.duration, 1, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  callback();
                 })
               ;
             }
           },
-          hide: function() {
+          hide: function(callback) {
+            callback = callback || function(){};
             module.remove.dimmed();
             if($.fn.transition !== undefined) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition(settings.transition + ' out', settings.duration, function() {
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeOut(settings.duration, function() {
                   $dimmer.removeAttr('style');
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        show: function() {
+        show: function(callback) {
           module.debug('Showing dimmer', $dimmer);
           if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) {
-            module.animate.show();
+            module.animate.show(callback);
             $.proxy(settings.onShow, element)();
             $.proxy(settings.onChange, element)();
           }
@@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        hide: function() {
+        hide: function(callback) {
           if( module.is.active() || module.is.animating() ) {
             module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide();
+            module.animate.hide(callback);
             $.proxy(settings.onHide, element)();
             $.proxy(settings.onChange, element)();
           }

build/uncompressed/modules/dropdown.js

@@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) {
                 $currentMenu = $(this).find(selector.menu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              console.log($currentMenu);
               if( $currentMenu.size() > 0 ) {
                 clearTimeout(dropdown.itemTimer);
                 dropdown.itemTimer = setTimeout(function() {

build/uncompressed/modules/modal.css

@@ -14,15 +14,15 @@
 *******************************/
 .ui.modal {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 1001;
   top: 50%;
   left: 50%;
-  margin-left: -400px;
+  text-align: left;
   width: 800px;
-  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
+  margin-left: -400px;
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
@@ -31,7 +31,7 @@
             Content
 *******************************/
 /*--------------
-     Close 
+     Close
 ---------------*/
 .ui.modal > .close {
   cursor: pointer;
@@ -49,37 +49,45 @@
      Header
 ---------------*/
 .ui.modal > .header {
-  background-color: #442359;
-  padding: 1em 2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin: 0em;
+  padding: 1.5rem 2rem;
+  font-size: 1.6em;
+  font-weight: bold;
   -webkit-border-radius: 0.325em 0.325em 0px 0px;
   -moz-border-radius: 0.325em 0.325em 0px 0px;
   border-radius: 0.325em 0.325em 0px 0px;
 }
-.ui.modal > .header h2 {
-  margin: 0px;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: #FFFFFF;
-}
 /*--------------
      Content
 ---------------*/
 .ui.modal > .content {
+  display: table;
   position: relative;
-  overflow: hidden;
   padding: 2em;
-  background-color: #FAFAFA;
-  -webkit-border-radius: 0px 0px 0.325em 0.325em;
-  -moz-border-radius: 0px 0px 0.325em 0.325em;
-  border-radius: 0px 0px 0.325em 0.325em;
+  background-color: #F4F4F4;
 }
 .ui.modal > .content > .left {
-  float: left;
-  width: 50%;
+  display: table-cell;
+  padding-right: 5%;
 }
 .ui.modal > .content > .right {
-  float: right;
-  width: 50%;
+  display: table-cell;
+  padding-left: 5%;
+  vertical-align: middle;
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+}
+/*--------------
+     Actions
+---------------*/
+.ui.modal .actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FFFFFF;
+  padding: 1rem 2rem;
+  text-align: right;
+}
+.ui.modal .actions > .button {
+  margin-left: 0.75em;
 }
 /*******************************
              Types
@@ -89,3 +97,9 @@
   position: absolute;
   margin-top: 100px;
 }
+/*******************************
+              States
+*******************************/
+.ui.active.modal {
+  display: block;
+}

build/uncompressed/modules/modal.js

@@ -19,21 +19,21 @@ $.fn.modal = function(parameters) {
       ? $.extend(true, {}, $.fn.modal.settings, parameters)
       : $.fn.modal.settings,
 
-    selector       = settings.selector,
-    className      = settings.className,
-    namespace      = settings.namespace,
-    error          = settings.error,
+    selector        = settings.selector,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    error           = settings.error,
 
-    eventNamespace = '.' + namespace,
+    eventNamespace  = '.' + namespace,
     moduleNamespace = 'module-' + namespace,
-    moduleSelector = $allModals.selector || '',
+    moduleSelector  = $allModals.selector || '',
 
-    time           = new Date().getTime(),
-    performance    = [],
+    time            = new Date().getTime(),
+    performance     = [],
 
-    query          = arguments[0],
-    methodInvoked  = (typeof query == 'string'),
-    queryArguments = [].slice.call(arguments, 1),
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
 
     invokedResponse
   ;
@@ -46,6 +46,8 @@ $.fn.modal = function(parameters) {
         $otherModals = $allModals.not($modal),
         $closeButton = $modal.find(selector.closeButton),
 
+        $dimmer,
+
         element      = this,
         instance     = $modal.data(moduleNamespace),
         modal
@@ -60,6 +62,7 @@ $.fn.modal = function(parameters) {
           ;
           $context
             .dimmer({
+              closable: settings.closable,
               duration: settings.duration,
               onShow: function() {
                 modal.add.keyboardShortcuts();
@@ -67,6 +70,7 @@ $.fn.modal = function(parameters) {
               },
               onHide: function() {
                 if($modal.is(':visible')) {
+                  $context.off('.dimmer');
                   modal.hide();
                   $.proxy(settings.onHide, this)();
                 }
@@ -74,6 +78,14 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
+          $dimmer = $context.children(selector.dimmer);
+          if( $modal.parent()[0] !== $dimmer[0] ) {
+            modal.debug('Moving element inside dimmer', $context);
+            $modal
+              .detach()
+              .appendTo($dimmer)
+            ;
+          }
           modal.cache.sizes();
           modal.instantiate();
         },
@@ -118,18 +130,27 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        toggle: function() {
+          if( modal.is.active() ) {
+            modal.hide();
+          }
+          else {
+            modal.show();
+          }
+        },
+
         show: function() {
           modal.set.type();
           modal.set.position();
-          modal.hideOthers();
+          modal.hideAll();
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' in', settings.duration)
+              .transition(settings.transition + ' in', settings.duration, modal.set.active)
             ;
           }
           else {
             $modal
-              .fadeIn(settings.duration, settings.easing)
+              .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
           $context.dimmer('show');
@@ -142,17 +163,17 @@ $.fn.modal = function(parameters) {
           ;
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' out', settings.duration, settings.unDim)
+              .transition(settings.transition + ' out', settings.duration, modal.remove.active)
             ;
           }
           else {
             $modal
-              .fadeOut(settings.duration, settings.easing, settings.unDim)
+              .fadeOut(settings.duration, settings.easing, modal.remove.active)
             ;
           }
         },
 
-        hideOthers: function() {
+        hideAll: function() {
           $otherModals
             .filter(':visible')
             .modal('hide')
@@ -169,6 +190,9 @@ $.fn.modal = function(parameters) {
         },
 
         remove: {
+          active: function() {
+            $modal.removeClass(className.active);
+          },
           keyboardShortcuts: function() {
             modal.verbose('Removing keyboard shortcuts');
             $document
@@ -195,7 +219,16 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        is: {
+          active: function() {
+            return $modal.hasClass(className.active);
+          }
+        },
+
         set: {
+          active: function() {
+            $modal.addClass('active');
+          },
           type: function() {
             if(modal.can.fit()) {
               modal.verbose('Modal fits on screen');
@@ -257,7 +290,7 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.debug.apply(console, arguments);
             }
           }
@@ -268,13 +301,13 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.verbose.apply(console, arguments);
             }
           }
         },
         error: function() {
-          modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
+          modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
           modal.error.apply(console, arguments);
         },
         performance: {
@@ -301,7 +334,7 @@ $.fn.modal = function(parameters) {
           },
           display: function() {
             var
-              title = settings.moduleName + ':',
+              title = settings.name + ':',
               totalTime = 0
             ;
             time = false;
@@ -406,35 +439,33 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name  : 'Modal',
+  name        : 'Modal',
   namespace   : 'modal',
-
   verbose     : true,
   debug       : true,
   performance : true,
 
-  selector   : {
-    closeButton : '.close'
-  },
+  offset      : 0,
+  transition  : 'scale',
+  duration    : 500,
+  easing      : 'easeOutExpo',
+
+  closable    : true,
+  context     : 'body',
+
+  onShow      : function(){},
+  onHide      : function(){},
 
+  selector    : {
+    closeButton : '.close, .actions .button',
+    dimmer: '.ui.dimmer'
+  },
   error : {
     method : 'The method you called is not defined.'
   },
-
   className : {
     scrolling : 'scrolling'
   },
-
-  onShow     : function(){},
-  onHide     : function(){},
-
-  transition : 'scale',
-
-  context    : 'body',
-  offset     : -25,
-
-  duration   : 400,
-  easing     : 'easeOutExpo'
 };
 
 

build/uncompressed/modules/transition.css

@@ -158,10 +158,10 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 .ui.fade.down.transition.in {
   -webkit-animation-name: fadeDown;
@@ -170,10 +170,10 @@
   animation-name: fadeDown;
 }
 .ui.fade.down.transition.out {
-  -webkit-animation-name: fadeDown;
-  -moz-animation-name: fadeDown;
-  -o-animation-name: fadeDown;
-  animation-name: fadeDown;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 /*--------------
       Scale
@@ -570,7 +570,7 @@
 /* Horizontal */
 @-webkit-keyframes horizontalFlip {
   0% {
-    -webkit-transform: rotateY(90deg);
+    -webkit-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -580,7 +580,7 @@
 }
 @-moz-keyframes horizontalFlip {
   0% {
-    -moz-transform: rotateY(90deg);
+    -moz-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -590,7 +590,7 @@
 }
 @-o-keyframes horizontalFlip {
   0% {
-    -o-transform: rotateY(90deg);
+    -o-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -600,7 +600,7 @@
 }
 @keyframes horizontalFlip {
   0% {
-    transform: rotateY(90deg);
+    transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -608,10 +608,51 @@
     opacity: 1;
   }
 }
+/* Horizontal */
+@-webkit-keyframes horizontalFlipOut {
+  0% {
+    -webkit-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-moz-keyframes horizontalFlipOut {
+  0% {
+    -moz-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-o-keyframes horizontalFlipOut {
+  0% {
+    -o-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -o-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@keyframes horizontalFlipOut {
+  0% {
+    transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
 /* Vertical */
 @-webkit-keyframes verticalFlip {
   0% {
-    -webkit-transform: rotateX(90deg);
+    -webkit-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -621,7 +662,7 @@
 }
 @-moz-keyframes verticalFlip {
   0% {
-    -moz-transform: rotateX(90deg);
+    -moz-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -631,7 +672,7 @@
 }
 @-o-keyframes verticalFlip {
   0% {
-    -o-transform: rotateX(90deg);
+    -o-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -641,7 +682,7 @@
 }
 @keyframes verticalFlip {
   0% {
-    transform: rotateX(90deg);
+    transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {

node/package.json

@@ -4,6 +4,19 @@
     "version": 0.1
   },
   "dependencies": {
-    "docpad": "~6.50.0"
+    "docpad": "~6.51.3",
+    "docpad-plugin-eco": "~2.0.2"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-uglify": "~0.2.2",
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-less": "~0.7.0",
+    "grunt-contrib-copy": "~0.4.1",
+    "grunt-docco": "~0.2.0",
+    "grunt-bower-task": "~0.3.1",
+    "grunt-css": "~0.5.4"
   }
 }

node/src/documents/collections/menu.html

@@ -45,7 +45,7 @@ type   : 'UI Collection'
             <i class="search link icon"></i>
           </div>
         </div>
-        <div class="ui simple dropdown item">
+        <div class="ui dropdown item">
           Language <i class="dropdown icon"></i>
           <div class="menu">
             <a class="item">English</a>
@@ -148,7 +148,7 @@ type   : 'UI Collection'
               <i class="search icon"></i>
             </div>
           </div>
-          <div class="ui simple dropdown item">
+          <div class="ui dropdown item">
             More <i class="icon dropdown"></i>
             <div class="menu">
               <a class="item"><i class="edit icon"></i> Edit Profile</a>
@@ -187,7 +187,7 @@ type   : 'UI Collection'
       <a class="item">
         <i class="mail icon"></i> Messages
       </a>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         More <i class="icon right triangle"></i>
         <div class="menu">
           <a class="item"><i class="edit icon"></i> Edit Profile</a>
@@ -228,7 +228,7 @@ type   : 'UI Collection'
       <a class="item">
         <i class="community icon"></i> Browse
       </a>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         More <i class="icon right triangle"></i>
         <div class="menu">
           <a class="item"><i class="edit icon"></i> Edit Profile</a>
@@ -419,7 +419,7 @@ type   : 'UI Collection'
       <p><i class="icon heart"></i>Dropdowns use <a href="/modules/dropdown.html">UI dropdown elements</a>. To have a dropdown open without javascript, use the simple variation</p>
     </div>
     <div class="ui vertical menu">
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         Categories <i class="icon right triangle"></i>
         <div class="menu">
           <a class="item">Electronics</a>
@@ -772,7 +772,7 @@ type   : 'UI Collection'
           <a class="item">Subsection 1</a>
         </div>
       </div>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         Dropdown <i class="icon right triangle"></i>
         <div class="menu">
           <div class="item">Choice 1</div>
@@ -795,7 +795,7 @@ type   : 'UI Collection'
         Current section
       </div>
       <div class="right menu">
-        <div class="ui simple dropdown item">
+        <div class="ui dropdown item">
           Dropdown <i class="icon dropdown"></i>
           <div class="menu">
             <div class="item">Choice 1</div>
@@ -832,7 +832,7 @@ type   : 'UI Collection'
       <div class="active item">
         Current section
       </div>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         Dropdown <i class="icon dropdown"></i>
         <div class="menu">
           <div class="item">Choice 1</div>
@@ -859,7 +859,7 @@ type   : 'UI Collection'
           <a class="item">Subsection 1</a>
         </div>
       </div>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         Dropdown <i class="icon right triangle"></i>
         <div class="menu">
           <div class="item">Choice 1</div>
@@ -884,7 +884,7 @@ type   : 'UI Collection'
           <a class="item">Subsection 1</a>
         </div>
       </div>
-      <div class="ui simple dropdown item">
+      <div class="ui dropdown item">
         Dropdown <i class="icon right triangle"></i>
         <div class="menu">
           <div class="item">Choice 1</div>

node/src/documents/elements/label.html

@@ -15,31 +15,23 @@ type   : 'UI Element'
 
   <div class="peek">
     <div class="ui vertical pointing secondary menu">
-      <a class="active item">Types</a>
+      <a class="active item">Content</a>
+      <a class="item">Types</a>
       <a class="item">Variations</a>
       <a class="item">Groups</a>
     </div>
   </div>
 
-  <h2 class="ui dividing header">Types</h2>
+  <h2 class="ui dividing header">Content</h2>
   <div class="example">
     <h4 class="ui header">Label</h4>
     <p>A basic label</p>
     <div class="ui label">
-      <i class="icon location"></i> 23
+      <i class="location icon"></i> 23
     </div>
   </div>
-
   <div class="example">
-    <h4 class="ui header">Linkable Label</h4>
-    <p>If an html link tag is used, a label will be formatted as a link</p>
-    <a class="ui label">
-      Fun
-    </a>
-  </div>
-
-  <div class="example">
-    <h4 class="ui header">Label with detail</h4>
+    <h4 class="ui header">Detail</h4>
     <p>A tag can optionally display a detail</p>
     <div class="ui label">
       Dogs
@@ -48,41 +40,63 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4 class="ui header">Removable label</h4>
-    <p>A tag can also be removable</p>
+    <h4 class="ui header">Removable</h4>
+    <p>A tag can optionally be removable</p>
     <div class="ui label">
       Witty
-      <i class="icon close"></i>
+      <i class="delete icon"></i>
     </div>
   </div>
 
+  <h2 class="ui dividing header">Types</h2>
+
   <div class="example">
-    <h4 class="ui header">Corner Label</h4>
+    <h4 class="ui header">Image</h4>
+    <p>A tag can optionally display a detail</p>
+    <a class="ui image label">
+      <img src="/images/demo/photo2.jpg">
+      dog@doggington.com
+      <i class="delete icon"></i>
+    </a>
+    <a class="ui image label">
+      <img src="/images/demo/avatar2.jpg">
+      james@thepooch.com
+      <i class="delete icon"></i>
+    </a>
+    <a class="ui image label">
+      <img src="/images/demo/avatar3.jpg">
+      kelly@bellyscratcher.com
+      <i class="delete icon"></i>
+    </a>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Corner</h4>
     <p>A label can position itself in the corner of an element</p>
     <div class="yellow ui message">A corner label must be positioned inside a container with position: relative to display properly</div>
     <div class="ui segment">
       <div class="ui right red corner label">
         <i class="heart icon"></i>
       </div>
-      <div class="ui left green corner label">
+      <div class="ui left corner label">
         <div class="text">New</div>
       </div>
       This is a normal text segment
     </div>
-    <div class="ui segment">
-      <a class="ui left red corner label">
-        <i class="heart icon"></i>
-      </a>
-      <a class="ui right green corner label">
+    <div class="ui image">
+      <a class="ui left corner label">
         <div class="text">New</div>
       </a>
-      These corner labels are formatted as links
+      <a class="ui right red corner label">
+        <i class="heart icon"></i>
+      </a>
+      <img src="/images/demo/stickfigure.jpg">
     </div>
   </div>
 
   <div class="example">
-    <h4 class="ui header">Ribbon Label</h4>
-    <p>A label can appear as a ribbon attaching itself to a content segment.</p>
+    <h4 class="ui header">Ribbon</h4>
+    <p>A label can appear as a ribbon attaching itself to an element.</p>
     <div class="ui two column grid">
       <div class="row">
         <div class="column">
@@ -99,7 +113,7 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4 class="ui header">Attached Label</h4>
+    <h4 class="ui header">Attached</h4>
     <p>A label can attach to a content segment</p>
     <div class="ui three column grid">
       <div class="row">
@@ -177,6 +191,29 @@ type   : 'UI Element'
     </a>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Horizontal</h4>
+    <p>A horizontal label is formatted to label content along-side it horizontally</p>
+    <div class="ui selection list">
+      <a class="item">
+        <div class="ui red horizontal label">Fruit</div>
+        Kumquats
+      </a>
+      <a class="item">
+        <div class="ui purple horizontal label">Candy</div>
+        Ice Cream
+      </a>
+      <a class="item">
+        <div class="ui red horizontal label">Fruit</div>
+        Orange
+      </a>
+      <a class="item">
+        <div class="ui horizontal label">Dog</div>
+        Poodle
+      </a>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Circular</h4>
     <p>A label can be circular</p>
@@ -199,6 +236,14 @@ type   : 'UI Element'
       1
     </a>
   </div>
+  <div class="another example">
+    <div class="ui black circular label"></div>
+    <div class="ui green circular label"></div>
+    <div class="ui red circular label"></div>
+    <div class="ui blue circular label"></div>
+    <div class="ui purple circular label"></div>
+    <div class="ui teal circular label"></div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Floating</h4>

node/src/documents/index.html.eco

@@ -24,7 +24,7 @@ type   : 'Semantic'
 <div class="stripe">
   <div class="ui responsive grid">
     <div class="ui column">
-      <h2 class="ui center aligned icon header">
+      <h2 class="ui header">
         <i class="circular emphasized code icon"></i>
         <div class="content">
           Lose the Hieroglyphics

node/src/documents/modules/modal.html

@@ -0,0 +1,312 @@
+---
+layout : 'default'
+css    : 'modal-demo'
+
+title  : 'Modal'
+type   : 'UI Module'
+---
+
+<script src="/javascript/modal.js"></script>
+
+<div class="segment">
+  <div class="container">
+    <h1 class="ui dividing header">Modal</h1>
+    <p>A modal displays content that temporarily blocks interactions with a web site.</p>
+    <div class="ui teal basic labeled icon overview toggle button">
+      Definition
+      <i class="book icon"></i>
+    </div>
+    <div class="ui black basic download buttons">
+      <a class="ui button">Download</a>
+      <div class="ui top right pointing dropdown icon button">
+        <i class="dropdown icon"></i>
+        <div class="menu">
+          <a class="item">Download
+            <span class="ui small label">ZIP</span>
+          </a>
+          <a class="item">View Source</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="main container">
+
+  <div class="ui test modal">
+    <i class="close icon"></i>
+    <div class="header">
+      Profile Picture
+    </div>
+    <div class="content">
+      <div class="left">
+        <img class="ui medium image" src="/images/demo/avatar2.jpg">
+      </div>
+      <div class="right">
+        <div class="ui header">Are you sure you want to upload that photo?</div>
+        <p>I mean it's not really the best profile photo.</p>
+        <p>It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.</p>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="ui black button">Cancel</div>
+      <div class="ui right green labeled black icon button">
+        Add it anyways
+        <i class="sketchy checkmark icon"></i>
+      </div>
+    </div>
+  </div>
+
+  <div class="peek">
+    <div class="ui vertical pointing secondary menu">
+      <a class="active item">Usage</a>
+      <a class="item">Behavior</a>
+      <a class="item">Variations</a>
+      <a class="item">States</a>
+      <a class="item">Settings</a>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Usage</h2>
+
+  <h3 class="ui header">Initializing a modal</h3>
+  <div class="code" data-type="javascript">
+    $('.ui.modal')
+      .modal()
+    ;
+  </div>
+  <div class="code" data-type="html">
+    <div class="ui modal">
+      <i class="close icon"></i>
+      <div class="header">
+        Modal Title
+      </div>
+      <div class="content">
+        <div class="left">
+          Content can appear on left
+        </div>
+        <div class="right">
+          Content can appear on right
+        </div>
+      </div>
+      <div class="actions">
+        <div class="ui button">Cancel</div>
+        <div class="ui button">OK</div>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Behavior</h2>
+
+  <div class="no example">
+    <h4 class="ui header">Show</h4>
+    <p>A modal can show its menu</p>
+    <div class="code" data-demo="true">
+    $('.test.modal')
+      .modal('show')
+    ;
+    </div>
+  </div>
+  <div class="no example">
+    <h4 class="ui header">Hide</h4>
+    <p>A modal can hide its menu</p>
+    <div class="code" data-demo="true">
+    $('.test.modal')
+      .modal('hide')
+    ;
+    </div>
+  </div>
+  <div class="no example">
+    <h4 class="ui header">Toggle</h4>
+    <p>A modal can toggle between menu visibility</p>
+    <div class="code" data-demo="true">
+    $('.test.modal')
+      .modal('toggle')
+    ;
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Variations</h2>
+
+  <h2 class="ui dividing header">States</h2>
+
+  <div class="example">
+    <h4 class="ui header">Active</h4>
+    <p>An active modal is visible on the page</p>
+    <div class="code" data-type="html">
+      <div class="active ui modal">...</div>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Settings</h2>
+
+  <div class="no example">
+
+  <h4 class="ui header">Modal Settings</h4>
+  <p>Modal settings modify the modal's behavior</p>
+  <table class="ui celled definition table segment">
+    <thead>
+      <th>Setting</th>
+      <th class="four wide">Default</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>offset</td>
+        <td>-25</td>
+        <td>A vertical offset to allow for content outside of modal, for example a close button, to be centered.</td>
+      </tr>
+      <tr>
+        <td>context</td>
+        <td>
+        body
+        </td>
+        <td>Selector or jquery object specifying the are to dim</td>
+      </tr>
+      <tr>
+        <td>closable</td>
+        <td>
+        true
+        </td>
+        <td>Settings to false will not allow you to close the modal by clicking on the dimmer</td>
+      </tr>
+      <tr>
+        <td>transition</td>
+        <td>
+          scale
+        </td>
+        <td>Named transition to use when animating menu in and out. <code>Fade</code> is available without including <a href="/modules/transition.html">ui transitions</a></td>
+      </tr>
+      <tr>
+        <td>duration</td>
+        <td>
+          400
+        </td>
+        <td>Duration of animation</td>
+      </tr>
+      <tr>
+        <td>easing</td>
+        <td>
+          easeOutExpo
+        </td>
+        <td>Animation easing is only used if javascript animations are used.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
+  <h4 class="ui header">Callbacks</h4>
+  <p>Callback settings specify a function to occur after a specific behavior.</p>
+
+  <table class="ui celled definition table segment">
+    <thead>
+      <th class="four wide">Setting</th>
+      <th>Context</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>onShow</td>
+        <td>Modal</td>
+        <td>Is called after a modal is shown.</td>
+      </tr>
+      <tr>
+        <td>onHide</td>
+        <td>Modal</td>
+        <td>Is called after a modal is hidden.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  </div>
+
+  <div class="no example">
+
+  <h4 class="ui header">DOM Settings</h4>
+  <p>DOM settings specify how this module should interface with the DOM</p>
+  <table class="ui celled definition table segment">
+    <thead>
+      <th>Setting</th>
+      <th class="four wide">Default</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>namespace</td>
+        <td>modal</td>
+        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
+      </tr>
+      <tr>
+        <td>selector</td>
+        <td colspan="2">
+          <div class="code">
+    selector : {
+      close  : '.close'
+    },
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>className</td>
+        <td colspan="2">
+          <div class="code">
+    className : {
+      scrolling : 'scrolling'
+    }
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  </div>
+
+  <div class="no example">
+
+  <h4 class="ui header">Debug Settings</h4>
+  <p>Debug settings controls debug output to the console</p>
+  <table class="ui celled definition table segment">
+    <thead>
+      <th>Setting</th>
+      <th class="four wide">Default</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>name</td>
+        <td>Modal</td>
+        <td>Name used in debug logs</td>
+      </tr>
+      <tr>
+        <td>debug</td>
+        <td>True</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>performance</td>
+        <td>True</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>verbose</td>
+        <td>True</td>
+        <td>Provides ancillary debug output to console</td>
+      </tr>
+      <tr>
+        <td>error</td>
+        <td colspan="2">
+          <div class="code">
+    error   : {
+      method    : 'The method you called is not defined.''
+    }
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  </div>
+
+</div>
+</body>
+
+</html>

node/src/files/components/semantic/collections/menu.css

@@ -94,15 +94,15 @@
 .ui.menu .item .menu a.item.hover,
 .ui.menu .item .menu .link.item:hover,
 .ui.menu .item .menu .link.item.hover {
-  color: rgba(35, 35, 35, 0.95);
+  color: rgba(0, 0, 0, 0.85);
 }
 .ui.menu .dropdown.item .menu .item a:hover {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, 0.85);
 }
 /* Active */
 .ui.menu .active.item,
 .ui.menu .active.item a {
-  color: rgba(0, 0, 0, 0.95);
+  color: rgba(0, 0, 0, 0.85);
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
@@ -172,8 +172,8 @@
 .ui.menu .item > p:first-child {
   margin-top: 0px;
 }
-.ui.menu .item > p:only-child {
-  margin: 0px;
+.ui.menu .item > p:last-child {
+  margin-bottom: 0px;
 }
 /*--------------
      Inputs
@@ -211,12 +211,18 @@
 /*--------------
     Dropdowns
 ---------------*/
+.ui.menu .dropdown.item .menu {
+  margin: 1px 0px 0px 0px;
+}
+.ui.menu .simple.dropdown.item .menu {
+  margin: 0px !important;
+}
 .ui.menu .dropdown.item .menu .item {
   width: 100%;
   color: rgba(0, 0, 0, 0.75);
 }
 .ui.menu .dropdown.item .menu .active.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
 }
 .ui.menu .ui.dropdown .menu .item:before {
   display: none;
@@ -228,7 +234,7 @@
 .ui.menu .item > a > .label {
   background-color: #9DA6AB;
   color: #FFFFFF;
-  margin: -0.3em 0em -0.3em 0.5em;
+  margin: -0.15em 0em -0.15em 0.5em;
   padding: 0.3em 0.8em;
   vertical-align: baseline;
 }
@@ -250,7 +256,6 @@
 /*--------------
       Hover
 ---------------*/
-/* Pseudo states cautiously used for convenience */
 .ui.link.menu .item:hover,
 .ui.menu .item.hover,
 .ui.menu .link.item:hover,
@@ -260,12 +265,10 @@
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.02);
 }
-.ui.menu .ui.dropdown.active,
-.ui.menu .ui.dropdown.hover,
-.ui.menu .ui.dropdown:hover {
-  border-top: none;
-  padding-top: 0.83em;
+.ui.menu .ui.dropdown.active {
   background-color: rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: none;
+  box-shadow: none;
   -webkit-border-bottom-right-radius: 0em;
   -moz-border-bottom-right-radius: 0em;
   border-bottom-right-radius: 0em;
@@ -289,18 +292,19 @@
      Active
 ---------------*/
 .ui.menu .active.item {
-  padding-top: 0.63em;
-  border-top: 0.2em solid rgba(50, 50, 50, 0.8);
-  color: rgba(0, 0, 0, 0.95);
   background-color: rgba(0, 0, 0, 0.01);
+  color: rgba(0, 0, 0, 0.95);
+  -webkit-box-shadow: 0em 0.2em 0em inset;
+  -moz-box-shadow: 0em 0.2em 0em inset;
+  box-shadow: 0em 0.2em 0em inset;
 }
 .ui.vertical.menu .active.item {
-  border-left: 0.2em solid rgba(50, 50, 50, 0.8);
-  padding-top: 0.83em;
-  padding-left: 0.76em;
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
+  -moz-box-shadow: 0.2em 0em 0em inset;
+  -webkit-box-shadow: 0.2em 0em 0em inset;
+  box-shadow: 0.2em 0em 0em inset;
 }
 .ui.vertical.menu > .active.item:first-child {
   -webkit-border-radius: 0em 0.1875em 0em 0em;
@@ -409,10 +413,10 @@
 .ui.vertical.menu .dropdown.item > i {
   float: right;
 }
-.ui.vertical.menu .simple.dropdown.item .menu {
+.ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
-  margin: 0em;
+  margin: 0px 0px 0px 1px;
 }
 .ui.vertical.menu .dropdown.item .menu .item {
   font-size: 0.875rem;
@@ -421,6 +425,11 @@
 .ui.vertical.menu .dropdown.item .menu .item .icon {
   margin-right: 0em;
 }
+.ui.vertical.menu .dropdown.item.active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 /*--- Sub Menu ---*/
 .ui.vertical.menu .item > .menu {
   margin: 0.5em -0.95em 0em;
@@ -439,8 +448,8 @@
 /*--------------
      Tiered
 ---------------*/
-.ui.tiered.menu > .menu > .item {
-  color: rgba(0, 0, 0, 0.5);
+.ui.tiered.menu > .sub.menu > .item {
+  color: rgba(0, 0, 0, 0.4);
 }
 .ui.tiered.menu > .menu > .item:hover,
 .ui.tiered.menu > .menu > .item.hover {
@@ -454,6 +463,8 @@
   background-color: rgba(0, 0, 0, 0.01);
   border-radius: 0em;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
   color: #FFFFFF;
 }
@@ -468,6 +479,8 @@
   background-color: transparent;
   border-radius: 0 0 0 0;
   border-top: medium none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
   color: rgba(0, 0, 0, 0.7);
 }
@@ -533,6 +546,9 @@
   border-right: 1px solid #DCDDDE;
   border-top: 1px solid #DCDDDE;
   padding-top: 0.83em;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
   -webkit-border-radius: 5px 5px 0 0;
   -moz-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
@@ -556,19 +572,19 @@
 .ui.pagination.menu .active.item {
   border-top: none;
   padding-top: 0.83em;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: transparent;
 }
 /*--------------
    Secondary
 ---------------*/
 .ui.secondary.menu {
   background-color: transparent;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 .ui.secondary.menu > .item {
   -webkit-box-shadow: none;
@@ -587,7 +603,12 @@
 }
 .ui.secondary.menu .link.item,
 .ui.secondary.menu a.item {
-  color: rgba(0, 0, 0, 0.4);
+  opacity: 0.8;
+  -webkit-transition: opacity 0.2s ease;
+  -moz-transition: opacity 0.2s ease;
+  -o-transition: opacity 0.2s ease;
+  -ms-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 .ui.secondary.menu .header.item {
   border-right: 0.1em solid rgba(0, 0, 0, 0.1);
@@ -599,14 +620,15 @@
 /* hover */
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
-  color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
 }
 /* active */
 .ui.secondary.menu > .active.item {
-  border-top: none;
   background-color: rgba(0, 0, 0, 0.08);
-  padding-top: 0.5em;
-  color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 .ui.secondary.vertical.menu > .active.item {
   -webkit-border-radius: 0.3125em;
@@ -645,7 +667,7 @@
   font-weight: bold;
 }
 .ui.secondary.pointing.menu .text.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
 }
 .ui.secondary.pointing.menu > .item {
   margin: 0em 0em -3px;
@@ -684,6 +706,9 @@
 .ui.secondary.pointing.menu > .item.active {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 /*---------------------
    Secondary Vertical
@@ -779,7 +804,7 @@
   box-shadow: none;
 }
 .ui.text.menu > .item {
-  opacity: 0.6;
+  opacity: 0.8;
   margin: 0em 1em;
   padding: 0em;
   height: auto !important;
@@ -789,7 +814,6 @@
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  color: rgba(0, 0, 0, 0.6);
   -webkit-transition: opacity 0.2s ease
   ;
   -moz-transition: opacity 0.2s ease
@@ -873,25 +897,6 @@
 .ui.inverted.text.menu .item.active {
   background-color: transparent;
 }
-/* colors */
-.ui.green.text.menu .active.item {
-  color: #A1CF64;
-}
-.ui.red.text.menu .active.item {
-  color: #D95C5C;
-}
-.ui.blue.text.menu .active.item {
-  color: #6ECFF5;
-}
-.ui.purple.text.menu .active.item {
-  color: #564F8A;
-}
-.ui.orange.text.menu .active.item {
-  color: #F05940;
-}
-.ui.teal.text.menu .active.item {
-  color: #00B5AD;
-}
 /*--------------
     Icon Only
 ---------------*/
@@ -950,26 +955,32 @@
 .ui.menu .green.active.item,
 .ui.green.menu .active.item {
   border-color: #A1CF64 !important;
+  color: #A1CF64 !important;
 }
 .ui.menu .red.active.item,
 .ui.red.menu .active.item {
   border-color: #D95C5C !important;
+  color: #D95C5C !important;
 }
 .ui.menu .blue.active.item,
 .ui.blue.menu .active.item {
   border-color: #6ECFF5 !important;
+  color: #6ECFF5 !important;
 }
 .ui.menu .purple.active.item,
 .ui.purple.menu .active.item {
   border-color: #564F8A !important;
+  color: #564F8A !important;
 }
 .ui.menu .orange.active.item,
 .ui.orange.menu .active.item {
   border-color: #F05940 !important;
+  color: #F05940 !important;
 }
 .ui.menu .teal.active.item,
 .ui.teal.menu .active.item {
   border-color: #00B5AD !important;
+  color: #00B5AD !important;
 }
 /*--------------
     Inverted
@@ -1054,12 +1065,12 @@
 }
 /*--- Active ---*/
 .ui.inverted.menu .active.item {
-  border-color: transparent !important;
+  box-shadow: none !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
 .ui.inverted.menu .active.item,
 .ui.inverted.menu .active.item a {
-  color: #ffffff;
+  color: #ffffff !important;
 }
 .ui.inverted.vertical.menu .item .menu .active.item {
   background-color: rgba(255, 255, 255, 0.2);
@@ -1089,10 +1100,10 @@
   color: rgba(255, 255, 255, 0.4);
 }
 .ui.inverted.selection.menu > .item:hover {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.9);
 }
 .ui.inverted.selection.menu > .item.active {
-  color: rgba(255, 255, 255, 0.85);
+  color: #FFFFFF;
 }
 /*--------------
      Floated
@@ -1396,6 +1407,9 @@
 .ui.large.menu .item {
   font-size: 1.125rem;
 }
+.ui.large.menu .item .item {
+  font-size: 0.875rem;
+}
 .ui.large.vertical.menu {
   width: 18rem;
 }

node/src/files/components/semantic/elements/button.css

@@ -309,163 +309,6 @@
   float: right;
   margin-left: 0.25em;
 }
-/*-------------------
-       Colors
---------------------*/
-/*--- Black ---*/
-.ui.black.buttons .button,
-.ui.black.button {
-  background-color: #5C6166 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
-  background-color: #4C4C4C !important;
-  color: #FFFFFF !important;
-}
-.ui.black.buttons .button:active,
-.ui.black.button:active {
-  background-color: #333333 !important;
-  color: #FFFFFF !important;
-}
-/*--- Green ---*/
-.ui.green.buttons .button,
-.ui.green.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.green.buttons .button:hover,
-.ui.green.button:hover,
-.ui.green.buttons .active.button,
-.ui.green.button.active {
-  background-color: #58cb73 !important;
-  color: #FFFFFF !important;
-}
-.ui.green.buttons .button:active,
-.ui.green.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF !important;
-}
-/*--- Red ---*/
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover,
-.ui.red.buttons .active.button,
-.ui.red.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF !important;
-}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF !important;
-}
-/*--- Blue ---*/
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #6ECFF5 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover,
-.ui.blue.buttons .active.button,
-.ui.blue.button.active {
-  background-color: #1AB8F3 !important;
-  color: #FFFFFF !important;
-}
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #0AA5DF !important;
-  color: #FFFFFF !important;
-}
-/*--- Purple ---*/
-.ui.purple.buttons .button,
-.ui.purple.button {
-  background-color: #564F8A !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover,
-.ui.purple.buttons .active.button,
-.ui.purple.button.active {
-  background-color: #3E3773 !important;
-  color: #FFFFFF !important;
-}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
-  background-color: #2E2860 !important;
-  color: #FFFFFF !important;
-}
-/*--- Teal ---*/
-.ui.teal.buttons .button,
-.ui.teal.button {
-  background-color: #00B5AD !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover,
-.ui.teal.buttons .active.button,
-.ui.teal.button.active {
-  background-color: #009A93 !important;
-  color: #FFFFFF !important;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
-  background-color: #00847E !important;
-  color: #FFFFFF !important;
-}
-/*---------------
-    Positive
-----------------*/
-.ui.positive.buttons .button,
-.ui.positive.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover,
-.ui.positive.buttons .active.button,
-.ui.positive.button.active {
-  background-color: #58CB73 !important;
-  color: #FFFFFF;
-}
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF;
-}
-/*---------------
-     Negative
-----------------*/
-.ui.negative.buttons .button,
-.ui.negative.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover,
-.ui.negative.buttons .active.button,
-.ui.negative.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF;
-}
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF;
-}
 /*-------------------
         Sizes
 --------------------*/
@@ -498,15 +341,11 @@
 .ui.huge.buttons .button,
 .ui.huge.button {
   font-size: 1.375rem;
-  padding-left: 2em;
-  padding-right: 2em;
 }
 .ui.massive.buttons .button,
 .ui.massive.button {
   font-size: 1.5rem;
   font-weight: bold;
-  padding-left: 2.5em;
-  padding-right: 2.5em;
 }
 /* loading */
 .ui.huge.loading.button:after {
@@ -550,9 +389,9 @@
 --------------------*/
 .ui.basic.buttons .button,
 .ui.basic.button {
-  background-color: transparent;
+  background-color: transparent !important;
   background-image: none;
-  color: #999999;
+  color: #999999 !important;
   font-weight: normal;
   text-transform: none;
   text-shadow: none;
@@ -580,15 +419,15 @@
 }
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
-  color: #7F7F7F;
+  color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
 }
 .ui.basic.buttons .button:active,
 .ui.basic.button:active {
-  background-color: rgba(0, 0, 0, 0.02);
-  color: #7F7F7F;
+  background-color: rgba(0, 0, 0, 0.02) !important;
+  color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
@@ -950,6 +789,163 @@
 .ui.twelve.vertical.buttons > .button {
   height: 8.3333%;
 }
+/*-------------------
+       Colors
+--------------------*/
+/*--- Black ---*/
+.ui.black.buttons .button,
+.ui.black.button {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.black.buttons .button:hover,
+.ui.black.button:hover {
+  background-color: #4C4C4C !important;
+  color: #FFFFFF !important;
+}
+.ui.black.buttons .button:active,
+.ui.black.button:active {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+}
+/*--- Green ---*/
+.ui.green.buttons .button,
+.ui.green.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .active.button,
+.ui.green.button.active {
+  background-color: #58cb73 !important;
+  color: #FFFFFF !important;
+}
+.ui.green.buttons .button:active,
+.ui.green.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF !important;
+}
+/*--- Red ---*/
+.ui.red.buttons .button,
+.ui.red.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.red.buttons .button:hover,
+.ui.red.button:hover,
+.ui.red.buttons .active.button,
+.ui.red.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF !important;
+}
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF !important;
+}
+/*--- Blue ---*/
+.ui.blue.buttons .button,
+.ui.blue.button {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover,
+.ui.blue.buttons .active.button,
+.ui.blue.button.active {
+  background-color: #1AB8F3 !important;
+  color: #FFFFFF !important;
+}
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+  background-color: #0AA5DF !important;
+  color: #FFFFFF !important;
+}
+/*--- Purple ---*/
+.ui.purple.buttons .button,
+.ui.purple.button {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.purple.buttons .button:hover,
+.ui.purple.button:hover,
+.ui.purple.buttons .active.button,
+.ui.purple.button.active {
+  background-color: #3E3773 !important;
+  color: #FFFFFF !important;
+}
+.ui.purple.buttons .button:active,
+.ui.purple.button:active {
+  background-color: #2E2860 !important;
+  color: #FFFFFF !important;
+}
+/*--- Teal ---*/
+.ui.teal.buttons .button,
+.ui.teal.button {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.teal.buttons .button:hover,
+.ui.teal.button:hover,
+.ui.teal.buttons .active.button,
+.ui.teal.button.active {
+  background-color: #009A93 !important;
+  color: #FFFFFF !important;
+}
+.ui.teal.buttons .button:active,
+.ui.teal.button:active {
+  background-color: #00847E !important;
+  color: #FFFFFF !important;
+}
+/*---------------
+    Positive
+----------------*/
+.ui.positive.buttons .button,
+.ui.positive.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover,
+.ui.positive.buttons .active.button,
+.ui.positive.button.active {
+  background-color: #58CB73 !important;
+  color: #FFFFFF;
+}
+.ui.positive.buttons .button:active,
+.ui.positive.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF;
+}
+/*---------------
+     Negative
+----------------*/
+.ui.negative.buttons .button,
+.ui.negative.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover,
+.ui.negative.buttons .active.button,
+.ui.negative.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF;
+}
+.ui.negative.buttons .button:active,
+.ui.negative.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF;
+}
 /*******************************
             Groups
 *******************************/

node/src/files/components/semantic/elements/icons.css

@@ -555,7 +555,6 @@ i.dropdown.icon {
 i.icon.star {
   width: auto;
   margin: 0em;
-  vertical-align: middle;
 }
 /* left side icons */
 i.icon.left,
@@ -660,8 +659,9 @@ i.circular.icon {
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  width: 2em;
-  height: 2em;
+  line-height: 1 !important;
+  width: 2em !important;
+  height: 2em !important;
 }
 i.circular.icon:before {
   vertical-align: middle;

node/src/files/components/semantic/elements/image.css

@@ -13,6 +13,7 @@
              Image
 *******************************/
 .ui.image {
+  position: relative;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;

node/src/files/components/semantic/elements/label.css

@@ -15,7 +15,7 @@
 .ui.label {
   display: inline-block;
   vertical-align: middle;
-  margin: -0.5em 0.25em 0em;
+  margin: -0.25em 0.25em 0em;
   background-color: #E8E8E8;
   border-color: #E8E8E8;
   padding: 0.5em 0.8em;
@@ -40,19 +40,29 @@
   transition: background 0.1s linear
   ;
 }
+.ui.label:first-child {
+  margin-left: 0em;
+}
+.ui.label:last-child {
+  margin-right: 0em;
+}
+/* Link */
 a.ui.label {
   cursor: pointer;
 }
-.ui.label.disabled {
-  opacity: 0.5;
-}
+/* Detail */
 .ui.label .detail {
   display: inline-block;
   margin-left: 0.5em;
   font-weight: bold;
   opacity: 0.8;
 }
-.ui.label .icon.close {
+/* Icon */
+.ui.label .icon {
+  width: auto;
+}
+/* Removable label */
+.ui.label .delete.icon {
   cursor: pointer;
   margin: 0em 0em 0em 0.5em;
   opacity: 0.7;
@@ -67,9 +77,43 @@ a.ui.label {
   transition: background 0.1s linear
   ;
 }
+.ui.label .delete.icon:hover {
+  opacity: 0.99;
+}
+/*******************************
+             Types
+*******************************/
+.ui.image.label {
+  width: auto !important;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+  line-height: 1.5em;
+  vertical-align: baseline;
+  text-transform: none;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+}
+.ui.image.label img {
+  display: inline-block;
+  height: 2.5em;
+  margin: -0.4em 0.8em -0.4em -0.8em;
+  vertical-align: top;
+  -moz-border-radius: 0.325em 0em 0em 0.325em;
+  -webkit-border-radius: 0.325em 0em 0em 0.325em;
+  border-radius: 0.325em 0em 0em 0.325em;
+}
 /*******************************
              States
 *******************************/
+/*-------------------
+       Disabled
+--------------------*/
+.ui.label.disabled {
+  opacity: 0.5;
+}
 /*-------------------
         Hover
 --------------------*/
@@ -84,9 +128,6 @@ a.ui.label:hover:before {
   background-color: #E0E0E0;
   color: rgba(0, 0, 0, 0.7);
 }
-.ui.label .icon.close:hover {
-  opacity: 0.99;
-}
 /*******************************
            Variations
 *******************************/
@@ -498,16 +539,27 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/*-------------------
+     Horizontal
+--------------------*/
+.ui.horizontal.labels .label,
+.ui.horizontal.label {
+  margin: -0.125em 0.5em -0.125em 0em;
+  padding: 0.35em 1em;
+  min-width: 6em;
+  text-align: center;
+}
 /*-------------------
        Circular
 --------------------*/
 .ui.circular.labels .label,
 .ui.circular.label {
-  margin-top: -1em;
-  height: 2em;
+  min-height: 1em;
+  max-height: 2em;
   padding: 0.5em !important;
   line-height: 1em;
   text-align: center;
+  vertical-align: baseline;
   -webkit-border-radius: 500em;
   -moz-border-radius: 500em;
   border-radius: 500em;

node/src/files/components/semantic/elements/list.css

@@ -229,9 +229,13 @@ ol.ui.list li,
 ol.ui.list li:before,
 .ui.ordered.list .item:before {
   position: absolute;
+  top: 50%;
   left: -2em;
   counter-increment: ordered;
   content: counters(ordered, ".");
+  margin-top: -0.5em;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.6);
   text-align: right;
   vertical-align: top;
   opacity: 0.75;

node/src/files/components/semantic/modules/dimmer.css

@@ -51,8 +51,8 @@
   box-sizing: border-box;
   z-index: 1000;
 }
+/*
 .ui.dimmable.dimmed > :not(.dimmer) {
-  /*
   -webkit-transition:
     filter 0.5s ease
   ;
@@ -68,10 +68,9 @@
   transition:
     filter 0.5s ease
   ;
-  */
-
 }
-/* Dimmer Content */.ui.dimmer .content {
+*/
+/* Dimmer Content */.ui.dimmer > .content {
   width: 100%;
   height: 100%;
   display: table;
@@ -80,7 +79,7 @@
   -ms-user-select: text;
   user-select: text;
 }
-.ui.dimmer .content > * {
+.ui.dimmer > .content > div {
   display: table-cell;
   vertical-align: middle;
   color: #FFFFFF;
@@ -122,18 +121,28 @@
 ---------------*/
 .ui.page.dimmer {
   position: fixed;
+  -webkit-perspective: 2000px;
+  -moz-perspective: 2000px;
+  perspective: 2000px;
+  -webkit-transform-origin: top center;
+  -moz-transform-origin: top center;
+  -o-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
 }
-body.ui.dimmable.dimmed > :not(.dimmer) {
-  -webkit-filter: blur(15px) grayscale(0.7);
-  -moz-filter: blur(15px) grayscale(0.7);
+/*
+body.ui.dimmable.dimmed > :not(.dimmer){
+  -webkit-filter: ~"blur(15px) grayscale(0.7)";
+  -moz-filter: ~"blur(15px) grayscale(0.7)";
 }
+*/
 /*--------------
     Aligned
 ---------------*/
-.ui.dimmer .top.aligned.content > * {
+.ui.dimmer > .top.aligned.content > * {
   vertical-align: top;
 }
-.ui.dimmer .bottom.aligned.content > * {
+.ui.dimmer > .bottom.aligned.content > * {
   vertical-align: bottom;
 }
 /*--------------
@@ -142,7 +151,7 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
 .ui.inverted.dimmer {
   background-color: rgba(255, 255, 255, 0.85);
 }
-.ui.inverted.dimmer .content > * {
+.ui.inverted.dimmer > .content > * {
   color: rgba(0, 0, 0, 0.8);
 }
 /*--------------

node/src/files/components/semantic/modules/dimmer.js

@@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) {
           if( module.is.dimmer() ) {
             $dimmer = $module;
             $module = $dimmer.parent();
-            module.debug('Module initialized as dimmer');
+            module.debug('Module initialized as dimmer', settings);
           }
           else {
             if( module.has.dimmer() ) {
               $dimmer = $module.children(selector.dimmer).first();
-              module.debug('Module initialized with found dimmer');
+              module.debug('Module initialized with found dimmer', settings);
             }
             else {
               module.create();
-              module.debug('Module initialized with created dimmer');
+              module.debug('Module initialized with created dimmer', settings);
             }
             if(settings.on == 'hover') {
               $module
@@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
+            callback = callback || function(){};
             module.set.dimmed();
             if($.fn.transition !== undefined) {
               $dimmer
-                .transition(settings.transition + ' in', function() {
+                .transition(settings.transition + ' in', settings.duration, function() {
                   module.set.active();
+                  callback();
                 })
               ;
             }
@@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(settings.duration, 1, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  callback();
                 })
               ;
             }
           },
-          hide: function() {
+          hide: function(callback) {
+            callback = callback || function(){};
             module.remove.dimmed();
             if($.fn.transition !== undefined) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition(settings.transition + ' out', settings.duration, function() {
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeOut(settings.duration, function() {
                   $dimmer.removeAttr('style');
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        show: function() {
+        show: function(callback) {
           module.debug('Showing dimmer', $dimmer);
           if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) {
-            module.animate.show();
+            module.animate.show(callback);
             $.proxy(settings.onShow, element)();
             $.proxy(settings.onChange, element)();
           }
@@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        hide: function() {
+        hide: function(callback) {
           if( module.is.active() || module.is.animating() ) {
             module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide();
+            module.animate.hide(callback);
             $.proxy(settings.onHide, element)();
             $.proxy(settings.onChange, element)();
           }

node/src/files/components/semantic/modules/dropdown.js

@@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) {
                 $currentMenu = $(this).find(selector.menu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              console.log($currentMenu);
               if( $currentMenu.size() > 0 ) {
                 clearTimeout(dropdown.itemTimer);
                 dropdown.itemTimer = setTimeout(function() {

node/src/files/components/semantic/modules/modal.css

@@ -14,15 +14,15 @@
 *******************************/
 .ui.modal {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 1001;
   top: 50%;
   left: 50%;
-  margin-left: -400px;
+  text-align: left;
   width: 800px;
-  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
+  margin-left: -400px;
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
@@ -31,7 +31,7 @@
             Content
 *******************************/
 /*--------------
-     Close 
+     Close
 ---------------*/
 .ui.modal > .close {
   cursor: pointer;
@@ -49,37 +49,45 @@
      Header
 ---------------*/
 .ui.modal > .header {
-  background-color: #442359;
-  padding: 1em 2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin: 0em;
+  padding: 1.5rem 2rem;
+  font-size: 1.6em;
+  font-weight: bold;
   -webkit-border-radius: 0.325em 0.325em 0px 0px;
   -moz-border-radius: 0.325em 0.325em 0px 0px;
   border-radius: 0.325em 0.325em 0px 0px;
 }
-.ui.modal > .header h2 {
-  margin: 0px;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: #FFFFFF;
-}
 /*--------------
      Content
 ---------------*/
 .ui.modal > .content {
+  display: table;
   position: relative;
-  overflow: hidden;
   padding: 2em;
-  background-color: #FAFAFA;
-  -webkit-border-radius: 0px 0px 0.325em 0.325em;
-  -moz-border-radius: 0px 0px 0.325em 0.325em;
-  border-radius: 0px 0px 0.325em 0.325em;
+  background-color: #F4F4F4;
 }
 .ui.modal > .content > .left {
-  float: left;
-  width: 50%;
+  display: table-cell;
+  padding-right: 5%;
 }
 .ui.modal > .content > .right {
-  float: right;
-  width: 50%;
+  display: table-cell;
+  padding-left: 5%;
+  vertical-align: middle;
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+}
+/*--------------
+     Actions
+---------------*/
+.ui.modal .actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FFFFFF;
+  padding: 1rem 2rem;
+  text-align: right;
+}
+.ui.modal .actions > .button {
+  margin-left: 0.75em;
 }
 /*******************************
              Types
@@ -89,3 +97,9 @@
   position: absolute;
   margin-top: 100px;
 }
+/*******************************
+              States
+*******************************/
+.ui.active.modal {
+  display: block;
+}

node/src/files/components/semantic/modules/modal.js

@@ -19,21 +19,21 @@ $.fn.modal = function(parameters) {
       ? $.extend(true, {}, $.fn.modal.settings, parameters)
       : $.fn.modal.settings,
 
-    selector       = settings.selector,
-    className      = settings.className,
-    namespace      = settings.namespace,
-    error          = settings.error,
+    selector        = settings.selector,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    error           = settings.error,
 
-    eventNamespace = '.' + namespace,
+    eventNamespace  = '.' + namespace,
     moduleNamespace = 'module-' + namespace,
-    moduleSelector = $allModals.selector || '',
+    moduleSelector  = $allModals.selector || '',
 
-    time           = new Date().getTime(),
-    performance    = [],
+    time            = new Date().getTime(),
+    performance     = [],
 
-    query          = arguments[0],
-    methodInvoked  = (typeof query == 'string'),
-    queryArguments = [].slice.call(arguments, 1),
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
 
     invokedResponse
   ;
@@ -46,6 +46,8 @@ $.fn.modal = function(parameters) {
         $otherModals = $allModals.not($modal),
         $closeButton = $modal.find(selector.closeButton),
 
+        $dimmer,
+
         element      = this,
         instance     = $modal.data(moduleNamespace),
         modal
@@ -60,6 +62,7 @@ $.fn.modal = function(parameters) {
           ;
           $context
             .dimmer({
+              closable: settings.closable,
               duration: settings.duration,
               onShow: function() {
                 modal.add.keyboardShortcuts();
@@ -67,6 +70,7 @@ $.fn.modal = function(parameters) {
               },
               onHide: function() {
                 if($modal.is(':visible')) {
+                  $context.off('.dimmer');
                   modal.hide();
                   $.proxy(settings.onHide, this)();
                 }
@@ -74,6 +78,14 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
+          $dimmer = $context.children(selector.dimmer);
+          if( $modal.parent()[0] !== $dimmer[0] ) {
+            modal.debug('Moving element inside dimmer', $context);
+            $modal
+              .detach()
+              .appendTo($dimmer)
+            ;
+          }
           modal.cache.sizes();
           modal.instantiate();
         },
@@ -118,18 +130,27 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        toggle: function() {
+          if( modal.is.active() ) {
+            modal.hide();
+          }
+          else {
+            modal.show();
+          }
+        },
+
         show: function() {
           modal.set.type();
           modal.set.position();
-          modal.hideOthers();
+          modal.hideAll();
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' in', settings.duration)
+              .transition(settings.transition + ' in', settings.duration, modal.set.active)
             ;
           }
           else {
             $modal
-              .fadeIn(settings.duration, settings.easing)
+              .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
           $context.dimmer('show');
@@ -142,17 +163,17 @@ $.fn.modal = function(parameters) {
           ;
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' out', settings.duration, settings.unDim)
+              .transition(settings.transition + ' out', settings.duration, modal.remove.active)
             ;
           }
           else {
             $modal
-              .fadeOut(settings.duration, settings.easing, settings.unDim)
+              .fadeOut(settings.duration, settings.easing, modal.remove.active)
             ;
           }
         },
 
-        hideOthers: function() {
+        hideAll: function() {
           $otherModals
             .filter(':visible')
             .modal('hide')
@@ -169,6 +190,9 @@ $.fn.modal = function(parameters) {
         },
 
         remove: {
+          active: function() {
+            $modal.removeClass(className.active);
+          },
           keyboardShortcuts: function() {
             modal.verbose('Removing keyboard shortcuts');
             $document
@@ -195,7 +219,16 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        is: {
+          active: function() {
+            return $modal.hasClass(className.active);
+          }
+        },
+
         set: {
+          active: function() {
+            $modal.addClass('active');
+          },
           type: function() {
             if(modal.can.fit()) {
               modal.verbose('Modal fits on screen');
@@ -257,7 +290,7 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.debug.apply(console, arguments);
             }
           }
@@ -268,13 +301,13 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.verbose.apply(console, arguments);
             }
           }
         },
         error: function() {
-          modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
+          modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
           modal.error.apply(console, arguments);
         },
         performance: {
@@ -301,7 +334,7 @@ $.fn.modal = function(parameters) {
           },
           display: function() {
             var
-              title = settings.moduleName + ':',
+              title = settings.name + ':',
               totalTime = 0
             ;
             time = false;
@@ -406,35 +439,33 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name  : 'Modal',
+  name        : 'Modal',
   namespace   : 'modal',
-
   verbose     : true,
   debug       : true,
   performance : true,
 
-  selector   : {
-    closeButton : '.close'
-  },
+  offset      : 0,
+  transition  : 'scale',
+  duration    : 500,
+  easing      : 'easeOutExpo',
+
+  closable    : true,
+  context     : 'body',
+
+  onShow      : function(){},
+  onHide      : function(){},
 
+  selector    : {
+    closeButton : '.close, .actions .button',
+    dimmer: '.ui.dimmer'
+  },
   error : {
     method : 'The method you called is not defined.'
   },
-
   className : {
     scrolling : 'scrolling'
   },
-
-  onShow     : function(){},
-  onHide     : function(){},
-
-  transition : 'scale',
-
-  context    : 'body',
-  offset     : -25,
-
-  duration   : 400,
-  easing     : 'easeOutExpo'
 };
 
 

node/src/files/components/semantic/modules/transition.css

@@ -158,10 +158,10 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 .ui.fade.down.transition.in {
   -webkit-animation-name: fadeDown;
@@ -170,10 +170,10 @@
   animation-name: fadeDown;
 }
 .ui.fade.down.transition.out {
-  -webkit-animation-name: fadeDown;
-  -moz-animation-name: fadeDown;
-  -o-animation-name: fadeDown;
-  animation-name: fadeDown;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 /*--------------
       Scale
@@ -570,7 +570,7 @@
 /* Horizontal */
 @-webkit-keyframes horizontalFlip {
   0% {
-    -webkit-transform: rotateY(90deg);
+    -webkit-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -580,7 +580,7 @@
 }
 @-moz-keyframes horizontalFlip {
   0% {
-    -moz-transform: rotateY(90deg);
+    -moz-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -590,7 +590,7 @@
 }
 @-o-keyframes horizontalFlip {
   0% {
-    -o-transform: rotateY(90deg);
+    -o-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -600,7 +600,7 @@
 }
 @keyframes horizontalFlip {
   0% {
-    transform: rotateY(90deg);
+    transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -608,10 +608,51 @@
     opacity: 1;
   }
 }
+/* Horizontal */
+@-webkit-keyframes horizontalFlipOut {
+  0% {
+    -webkit-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-moz-keyframes horizontalFlipOut {
+  0% {
+    -moz-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-o-keyframes horizontalFlipOut {
+  0% {
+    -o-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -o-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@keyframes horizontalFlipOut {
+  0% {
+    transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
 /* Vertical */
 @-webkit-keyframes verticalFlip {
   0% {
-    -webkit-transform: rotateX(90deg);
+    -webkit-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -621,7 +662,7 @@
 }
 @-moz-keyframes verticalFlip {
   0% {
-    -moz-transform: rotateX(90deg);
+    -moz-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -631,7 +672,7 @@
 }
 @-o-keyframes verticalFlip {
   0% {
-    -o-transform: rotateX(90deg);
+    -o-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -641,7 +682,7 @@
 }
 @keyframes verticalFlip {
   0% {
-    transform: rotateX(90deg);
+    transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {

node/src/files/fonts/nobile-bold.ttf.REMOVED.git-id

@@ -1 +0,0 @@
-3ab1376dc487d41170ea17b3ab8ad485bc6234bb

node/src/files/fonts/nobile-regular.ttf.REMOVED.git-id

@@ -1 +0,0 @@
-671edc2dd1aee70d8b270f1ae538946ba881ba24

node/src/files/javascript/menu.js

@@ -4,8 +4,9 @@ semantic.menu = {};
 semantic.menu.ready = function() {
 
   // selector cache
-  var 
+  var
     $menuItem = $('.menu a.item, .menu .link.item'),
+    $dropdown = $('.main.container .menu .dropdown'),
     // alias
     handler = {
 
@@ -24,10 +25,16 @@ semantic.menu.ready = function() {
     }
   ;
 
+  $dropdown
+    .dropdown({
+      on: 'hover'
+    })
+  ;
+
   $menuItem
     .on('click', handler.activate)
   ;
-  
+
 };
 
 

node/src/files/javascript/modal.js

@@ -0,0 +1,24 @@
+semantic.modal = {};
+
+// ready event
+semantic.modal.ready = function() {
+
+  // selector cache
+  var
+    // alias
+    handler
+  ;
+
+  // event handlers
+  handler = {
+
+  };
+
+
+};
+
+
+// attach ready event
+$(document)
+  .ready(semantic.modal.ready)
+;

node/src/files/javascript/semantic.js

@@ -47,6 +47,8 @@ semantic.ready = function() {
     $overview         = $('.overview.item, .overview.button'),
     $designer         = $('.designer.item'),
 
+    $sidebarButton    = $('.attached.launch.button'),
+
     $increaseFont     = $('.font .increase'),
     $decreaseFont     = $('.font .decrease'),
 
@@ -524,6 +526,11 @@ semantic.ready = function() {
     })
   ;
 
+  $sidebarButton
+    .on('mouseenter', handler.menu.mouseenter)
+    .on('mouseleave', handler.menu.mouseleave)
+  ;
+
   $menu
     .sidebar('attach events', '.launch.button, .launch.item')
   ;

node/src/files/stylesheets/semantic.css

@@ -103,11 +103,11 @@ h3::selection {
 
 html,
 body {
-  font-size: 16px;
+  font-size: 15px;
 }
 
 body#example {
-  font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   background: #FCFCFC url(../images/bg.jpg) repeat;
   margin: 0px;
   padding: 0px;
@@ -220,10 +220,6 @@ a:hover {
   font-size: 0.875rem;
 }
 
-#example .sidr .ui.menu {
-  margin: 0px 0px 30px;
-}
-
 
 /* segment headers */
 #example > .content > .page > .segment,
@@ -580,6 +576,7 @@ a:hover {
 }
 #example.overview .example {
   margin: 0em;
+  min-height: 0px !important;
   overflow: hidden;
   padding: 0.5em 0em;
 }

node/src/layouts/default.html.eco

@@ -24,8 +24,6 @@
 
   <meta name="description" content="<%= @getPreparedDescription() %>" />
   <meta name="keywords" content="<%= @getPreparedKeywords() %>" />
- <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic' rel='stylesheet' type='text/css'>
- -->
 
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/button.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/divider.css">
@@ -53,6 +51,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/statistic.css">
 
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/carousel.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/modal.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/dropdown.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/popup.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/reveal.css">
@@ -67,7 +66,8 @@
   <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
   <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
 
-  <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
+ <!--  <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
+  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Droid+Sans|Raleway:700,600,400' rel='stylesheet' type='text/css'> -->
 
   <script src="/javascript/library/jquery.js"></script>
   <script src="/javascript/library/history.js"></script>
@@ -81,6 +81,7 @@
   <script src="/components/semantic/modules/checkbox.js"></script>
   <script src="/components/semantic/modules/dimmer.js"></script>
   <script src="/components/semantic/modules/dropdown.js"></script>
+  <script src="/components/semantic/modules/modal.js"></script>
   <script src="/components/semantic/modules/sidebar.js"></script>
   <script src="/components/semantic/modules/popup.js"></script>
   <script src="/components/semantic/modules/tab.js"></script>
@@ -91,7 +92,9 @@
 </head>
 <body id="example" class="<%= @document.css %>">
   <div class="ui large vertical inverted labeled icon sidebar menu" id="menu">
-    <div class="item"><a href="/download.html"><i class="inverted circular red upload icon"></i> <b>Download</b></a></div>
+    <a class="item" href="/download.html">
+      <i class="inverted circular red upload icon"></i> <b>Download</b>
+    </a>
     <div class="item">
       <a href="/introduction.html">
         <b>Introduction</b>

src/collections/menu.less.REMOVED.git-id

@@ -1 +1 @@
-a51323e767662e375b052ff3fcfacfbe6d6fc45e
+ae2ff676346564cef6d3187f7aba87619fc8c024

src/elements/button.less

@@ -428,176 +428,6 @@
 }
 
 
-/*-------------------
-       Colors
---------------------*/
-
-
-
-/*--- Black ---*/
-.ui.black.buttons .button,
-.ui.black.button {
-  background-color: #5C6166 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
-  background-color: #4C4C4C !important;
-  color: #FFFFFF !important;
-}
-.ui.black.buttons .button:active,
-.ui.black.button:active {
-  background-color: #333333 !important;
-  color: #FFFFFF !important;
-}
-
-/*--- Green ---*/
-.ui.green.buttons .button,
-.ui.green.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.green.buttons .button:hover,
-.ui.green.button:hover,
-.ui.green.buttons .active.button,
-.ui.green.button.active {
-  background-color: #58cb73 !important;
-  color: #FFFFFF !important;
-}
-.ui.green.buttons .button:active,
-.ui.green.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF !important;
-}
-
-/*--- Red ---*/
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover,
-.ui.red.buttons .active.button,
-.ui.red.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF !important;
-}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF !important;
-}
-
-/*--- Blue ---*/
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #6ECFF5 !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover,
-.ui.blue.buttons .active.button,
-.ui.blue.button.active {
-  background-color: #1AB8F3 !important;
-  color: #FFFFFF !important;
-}
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #0AA5DF !important;
-  color: #FFFFFF !important;
-}
-
-/*--- Purple ---*/
-.ui.purple.buttons .button,
-.ui.purple.button {
-  background-color: #564F8A !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover,
-.ui.purple.buttons .active.button,
-.ui.purple.button.active {
-  background-color: #3E3773 !important;
-  color: #FFFFFF !important;
-}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
-  background-color: #2E2860 !important;
-  color: #FFFFFF !important;
-}
-
-/*--- Teal ---*/
-.ui.teal.buttons .button,
-.ui.teal.button {
-  background-color: #00B5AD !important;
-  color: #FFFFFF !important;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover,
-.ui.teal.buttons .active.button,
-.ui.teal.button.active {
-  background-color: #009A93 !important;
-  color: #FFFFFF !important;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
-  background-color: #00847E !important;
-  color: #FFFFFF !important;
-}
-
-/*---------------
-    Positive
-----------------*/
-
-.ui.positive.buttons .button,
-.ui.positive.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover,
-.ui.positive.buttons .active.button,
-.ui.positive.button.active {
-  background-color: #58CB73 !important;
-  color: #FFFFFF;
-}
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF;
-}
-
-
-/*---------------
-     Negative
-----------------*/
-.ui.negative.buttons .button,
-.ui.negative.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover,
-.ui.negative.buttons .active.button,
-.ui.negative.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF;
-}
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF;
-}
-
 
 /*-------------------
         Sizes
@@ -633,15 +463,11 @@
 .ui.huge.buttons .button,
 .ui.huge.button {
   font-size: 1.375rem;
-  padding-left: 2em;
-  padding-right: 2em;
 }
 .ui.massive.buttons .button,
 .ui.massive.button {
   font-size: 1.5rem;
   font-weight: bold;
-  padding-left: 2.5em;
-  padding-right: 2.5em;
 }
 
 /* loading */
@@ -692,9 +518,9 @@
 
 .ui.basic.buttons .button,
 .ui.basic.button {
-  background-color: transparent;
+  background-color: transparent !important;
   background-image: none;
-  color: #999999;
+  color: #999999 !important;
   font-weight: normal;
   text-transform: none;
   text-shadow: none;
@@ -726,15 +552,15 @@
 
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
-  color: #7F7F7F;
+  color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
 }
 .ui.basic.buttons .button:active,
 .ui.basic.button:active {
-  background-color: rgba(0, 0, 0, 0.02);
-  color: #7F7F7F;
+  background-color: rgba(0, 0, 0, 0.02) !important;
+  color: #7F7F7F !important;
 
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
@@ -1148,6 +974,179 @@
   height: 8.3333%;
 }
 
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+
+
+/*--- Black ---*/
+.ui.black.buttons .button,
+.ui.black.button {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.black.buttons .button:hover,
+.ui.black.button:hover {
+  background-color: #4C4C4C !important;
+  color: #FFFFFF !important;
+}
+.ui.black.buttons .button:active,
+.ui.black.button:active {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+}
+
+/*--- Green ---*/
+.ui.green.buttons .button,
+.ui.green.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .active.button,
+.ui.green.button.active {
+  background-color: #58cb73 !important;
+  color: #FFFFFF !important;
+}
+.ui.green.buttons .button:active,
+.ui.green.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF !important;
+}
+
+/*--- Red ---*/
+.ui.red.buttons .button,
+.ui.red.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.red.buttons .button:hover,
+.ui.red.button:hover,
+.ui.red.buttons .active.button,
+.ui.red.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF !important;
+}
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF !important;
+}
+
+/*--- Blue ---*/
+.ui.blue.buttons .button,
+.ui.blue.button {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover,
+.ui.blue.buttons .active.button,
+.ui.blue.button.active {
+  background-color: #1AB8F3 !important;
+  color: #FFFFFF !important;
+}
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+  background-color: #0AA5DF !important;
+  color: #FFFFFF !important;
+}
+
+/*--- Purple ---*/
+.ui.purple.buttons .button,
+.ui.purple.button {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.purple.buttons .button:hover,
+.ui.purple.button:hover,
+.ui.purple.buttons .active.button,
+.ui.purple.button.active {
+  background-color: #3E3773 !important;
+  color: #FFFFFF !important;
+}
+.ui.purple.buttons .button:active,
+.ui.purple.button:active {
+  background-color: #2E2860 !important;
+  color: #FFFFFF !important;
+}
+
+/*--- Teal ---*/
+.ui.teal.buttons .button,
+.ui.teal.button {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.teal.buttons .button:hover,
+.ui.teal.button:hover,
+.ui.teal.buttons .active.button,
+.ui.teal.button.active {
+  background-color: #009A93 !important;
+  color: #FFFFFF !important;
+}
+.ui.teal.buttons .button:active,
+.ui.teal.button:active {
+  background-color: #00847E !important;
+  color: #FFFFFF !important;
+}
+
+/*---------------
+    Positive
+----------------*/
+
+.ui.positive.buttons .button,
+.ui.positive.button {
+  background-color: #5BBD72 !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover,
+.ui.positive.buttons .active.button,
+.ui.positive.button.active {
+  background-color: #58CB73 !important;
+  color: #FFFFFF;
+}
+.ui.positive.buttons .button:active,
+.ui.positive.button:active {
+  background-color: #4CB164 !important;
+  color: #FFFFFF;
+}
+
+
+/*---------------
+     Negative
+----------------*/
+.ui.negative.buttons .button,
+.ui.negative.button {
+  background-color: #D95C5C !important;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover,
+.ui.negative.buttons .active.button,
+.ui.negative.button.active {
+  background-color: #E75859 !important;
+  color: #FFFFFF;
+}
+.ui.negative.buttons .button:active,
+.ui.negative.button:active {
+  background-color: #D24B4C !important;
+  color: #FFFFFF;
+}
+
+
 /*******************************
             Groups
 *******************************/

src/elements/icons.less

@@ -214,7 +214,6 @@ i.dropdown.icon {
 i.icon.star {
   width: auto;
   margin: 0em;
-  vertical-align: middle;
 }
 
 /* left side icons */
@@ -311,8 +310,9 @@ i.circular.icon {
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
 
-  width: 2em;
-  height: 2em;
+  line-height: 1 !important;
+  width: 2em !important;
+  height: 2em !important;
 }
 i.circular.icon:before {
   vertical-align: middle;

src/elements/image.less

@@ -16,6 +16,7 @@
 *******************************/
 
 .ui.image {
+  position: relative;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;

src/elements/label.less

@@ -18,7 +18,7 @@
   display: inline-block;
   vertical-align: middle;
 
-  margin: -0.5em 0.25em 0em;
+  margin: -0.25em 0.25em 0em;
 
   background-color: #E8E8E8;
   border-color: #E8E8E8;
@@ -54,20 +54,35 @@
     background 0.1s linear
   ;
 }
+
+.ui.label:first-child {
+  margin-left: 0em;
+}
+.ui.label:last-child {
+  margin-right: 0em;
+}
+
+
+/* Link */
 a.ui.label {
   cursor: pointer;
 }
-.ui.label.disabled {
-  opacity: 0.5;
-}
 
+/* Detail */
 .ui.label .detail {
   display: inline-block;
   margin-left: 0.5em;
   font-weight: bold;
   opacity: 0.8;
 }
-.ui.label .icon.close {
+
+/* Icon */
+.ui.label .icon {
+  width: auto;
+}
+
+/* Removable label */
+.ui.label .delete.icon {
   cursor: pointer;
   margin: 0em 0em 0em 0.5em;
   opacity: 0.7;
@@ -88,11 +103,54 @@ a.ui.label {
     background 0.1s linear
   ;
 }
+.ui.label .delete.icon:hover {
+  opacity: 0.99;
+}
+
+/*******************************
+             Types
+*******************************/
+
+.ui.image.label {
+  width: auto !important;
+  margin-top: 0em;
+  margin-bottom: 0em;
+
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+
+  line-height: 1.5em;
+  vertical-align: baseline;
+  text-transform: none;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+}
+.ui.image.label img {
+  display: inline-block;
+  height: 2.5em;
+  margin: -0.4em 0.8em -0.4em -0.8em;
+  vertical-align: top;
+
+  -moz-border-radius: 0.325em 0em 0em 0.325em;
+  -webkit-border-radius: 0.325em 0em 0em 0.325em;
+  border-radius: 0.325em 0em 0em 0.325em;
+}
 
 /*******************************
              States
 *******************************/
 
+/*-------------------
+       Disabled
+--------------------*/
+
+.ui.label.disabled {
+  opacity: 0.5;
+}
+
+
 /*-------------------
         Hover
 --------------------*/
@@ -109,11 +167,6 @@ a.ui.label:hover:before {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.ui.label .icon.close:hover {
-  opacity: 0.99;
-}
-
-
 
 /*******************************
            Variations
@@ -594,19 +647,34 @@ a.ui.teal.label:hover:before {
   background-color: transparent !important;
 }
 
+/*-------------------
+     Horizontal
+--------------------*/
+
+.ui.horizontal.labels .label,
+.ui.horizontal.label {
+  margin: -0.125em 0.5em -0.125em 0em;
+
+  padding: 0.35em 1em;
+  min-width: 6em;
+  text-align: center;
+}
+
+
 /*-------------------
        Circular
 --------------------*/
 
 .ui.circular.labels .label,
 .ui.circular.label {
-  margin-top: -1em;
-  height: 2em;
+  min-height: 1em;
+  max-height: 2em;
 
   padding: 0.5em !important;
 
   line-height: 1em;
   text-align: center;
+  vertical-align: baseline;
 
   -webkit-border-radius: 500em;
   -moz-border-radius: 500em;

src/elements/list.less

@@ -294,11 +294,16 @@ ol.ui.list li,
 ol.ui.list li:before,
 .ui.ordered.list .item:before {
   position: absolute;
+  top: 50%;
   left: -2em;
 
   counter-increment: ordered;
   content: counters(ordered, ".");
 
+  margin-top: -0.5em;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.6);
+
   text-align: right;
   vertical-align: top;
   opacity: 0.75;

src/modules/dimmer.js

@@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) {
           if( module.is.dimmer() ) {
             $dimmer = $module;
             $module = $dimmer.parent();
-            module.debug('Module initialized as dimmer');
+            module.debug('Module initialized as dimmer', settings);
           }
           else {
             if( module.has.dimmer() ) {
               $dimmer = $module.children(selector.dimmer).first();
-              module.debug('Module initialized with found dimmer');
+              module.debug('Module initialized with found dimmer', settings);
             }
             else {
               module.create();
-              module.debug('Module initialized with created dimmer');
+              module.debug('Module initialized with created dimmer', settings);
             }
             if(settings.on == 'hover') {
               $module
@@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
+            callback = callback || function(){};
             module.set.dimmed();
             if($.fn.transition !== undefined) {
               $dimmer
-                .transition(settings.transition + ' in', function() {
+                .transition(settings.transition + ' in', settings.duration, function() {
                   module.set.active();
+                  callback();
                 })
               ;
             }
@@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(settings.duration, 1, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  callback();
                 })
               ;
             }
           },
-          hide: function() {
+          hide: function(callback) {
+            callback = callback || function(){};
             module.remove.dimmed();
             if($.fn.transition !== undefined) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition(settings.transition + ' out', settings.duration, function() {
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeOut(settings.duration, function() {
                   $dimmer.removeAttr('style');
                   module.remove.active();
+                  callback();
                 })
               ;
             }
@@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        show: function() {
+        show: function(callback) {
           module.debug('Showing dimmer', $dimmer);
           if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) {
-            module.animate.show();
+            module.animate.show(callback);
             $.proxy(settings.onShow, element)();
             $.proxy(settings.onChange, element)();
           }
@@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
-        hide: function() {
+        hide: function(callback) {
           if( module.is.active() || module.is.animating() ) {
             module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide();
+            module.animate.hide(callback);
             $.proxy(settings.onHide, element)();
             $.proxy(settings.onChange, element)();
           }

src/modules/dimmer.less

@@ -74,8 +74,9 @@
 
   z-index: 1000;
 }
+
+/*
 .ui.dimmable.dimmed > :not(.dimmer) {
-  /*
   -webkit-transition:
     filter 0.5s ease
   ;
@@ -91,12 +92,12 @@
   transition:
     filter 0.5s ease
   ;
-  */
 }
+*/
 
 
 /* Dimmer Content */;
-.ui.dimmer .content {
+.ui.dimmer > .content {
   width: 100%;
   height: 100%;
   display: table;
@@ -106,7 +107,7 @@
   -ms-user-select: text;
   user-select: text;
 }
-.ui.dimmer .content > * {
+.ui.dimmer > .content > div {
   display: table-cell;
   vertical-align: middle;
   color: #FFFFFF;
@@ -158,20 +159,32 @@
 
 .ui.page.dimmer {
   position: fixed;
+
+  -webkit-perspective: 2000px;
+  -moz-perspective: 2000px;
+  perspective: 2000px;
+
+  -webkit-transform-origin: top center;
+  -moz-transform-origin: top center;
+  -o-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
 }
+/*
 body.ui.dimmable.dimmed > :not(.dimmer){
   -webkit-filter: ~"blur(15px) grayscale(0.7)";
   -moz-filter: ~"blur(15px) grayscale(0.7)";
 }
+*/
 
 /*--------------
     Aligned
 ---------------*/
 
-.ui.dimmer .top.aligned.content > * {
+.ui.dimmer > .top.aligned.content > * {
   vertical-align: top;
 }
-.ui.dimmer .bottom.aligned.content > * {
+.ui.dimmer > .bottom.aligned.content > * {
   vertical-align: bottom;
 }
 
@@ -182,7 +195,7 @@ body.ui.dimmable.dimmed > :not(.dimmer){
 .ui.inverted.dimmer {
   background-color: rgba(255, 255, 255, 0.85);
 }
-.ui.inverted.dimmer .content > * {
+.ui.inverted.dimmer > .content > * {
   color: rgba(0, 0, 0, 0.8);
 }
 

src/modules/dropdown.js

@@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) {
                 $currentMenu = $(this).find(selector.menu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              console.log($currentMenu);
               if( $currentMenu.size() > 0 ) {
                 clearTimeout(dropdown.itemTimer);
                 dropdown.itemTimer = setTimeout(function() {

src/modules/modal.js

@@ -19,21 +19,21 @@ $.fn.modal = function(parameters) {
       ? $.extend(true, {}, $.fn.modal.settings, parameters)
       : $.fn.modal.settings,
 
-    selector       = settings.selector,
-    className      = settings.className,
-    namespace      = settings.namespace,
-    error          = settings.error,
+    selector        = settings.selector,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    error           = settings.error,
 
-    eventNamespace = '.' + namespace,
+    eventNamespace  = '.' + namespace,
     moduleNamespace = 'module-' + namespace,
-    moduleSelector = $allModals.selector || '',
+    moduleSelector  = $allModals.selector || '',
 
-    time           = new Date().getTime(),
-    performance    = [],
+    time            = new Date().getTime(),
+    performance     = [],
 
-    query          = arguments[0],
-    methodInvoked  = (typeof query == 'string'),
-    queryArguments = [].slice.call(arguments, 1),
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
 
     invokedResponse
   ;
@@ -46,6 +46,8 @@ $.fn.modal = function(parameters) {
         $otherModals = $allModals.not($modal),
         $closeButton = $modal.find(selector.closeButton),
 
+        $dimmer,
+
         element      = this,
         instance     = $modal.data(moduleNamespace),
         modal
@@ -60,6 +62,7 @@ $.fn.modal = function(parameters) {
           ;
           $context
             .dimmer({
+              closable: settings.closable,
               duration: settings.duration,
               onShow: function() {
                 modal.add.keyboardShortcuts();
@@ -67,6 +70,7 @@ $.fn.modal = function(parameters) {
               },
               onHide: function() {
                 if($modal.is(':visible')) {
+                  $context.off('.dimmer');
                   modal.hide();
                   $.proxy(settings.onHide, this)();
                 }
@@ -74,6 +78,14 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
+          $dimmer = $context.children(selector.dimmer);
+          if( $modal.parent()[0] !== $dimmer[0] ) {
+            modal.debug('Moving element inside dimmer', $context);
+            $modal
+              .detach()
+              .appendTo($dimmer)
+            ;
+          }
           modal.cache.sizes();
           modal.instantiate();
         },
@@ -118,18 +130,27 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        toggle: function() {
+          if( modal.is.active() ) {
+            modal.hide();
+          }
+          else {
+            modal.show();
+          }
+        },
+
         show: function() {
           modal.set.type();
           modal.set.position();
-          modal.hideOthers();
+          modal.hideAll();
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' in', settings.duration)
+              .transition(settings.transition + ' in', settings.duration, modal.set.active)
             ;
           }
           else {
             $modal
-              .fadeIn(settings.duration, settings.easing)
+              .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
           $context.dimmer('show');
@@ -142,17 +163,17 @@ $.fn.modal = function(parameters) {
           ;
           if(settings.transition && $.fn.transition !== undefined) {
             $modal
-              .transition(settings.transition + ' out', settings.duration, settings.unDim)
+              .transition(settings.transition + ' out', settings.duration, modal.remove.active)
             ;
           }
           else {
             $modal
-              .fadeOut(settings.duration, settings.easing, settings.unDim)
+              .fadeOut(settings.duration, settings.easing, modal.remove.active)
             ;
           }
         },
 
-        hideOthers: function() {
+        hideAll: function() {
           $otherModals
             .filter(':visible')
             .modal('hide')
@@ -169,6 +190,9 @@ $.fn.modal = function(parameters) {
         },
 
         remove: {
+          active: function() {
+            $modal.removeClass(className.active);
+          },
           keyboardShortcuts: function() {
             modal.verbose('Removing keyboard shortcuts');
             $document
@@ -195,7 +219,16 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        is: {
+          active: function() {
+            return $modal.hasClass(className.active);
+          }
+        },
+
         set: {
+          active: function() {
+            $modal.addClass('active');
+          },
           type: function() {
             if(modal.can.fit()) {
               modal.verbose('Modal fits on screen');
@@ -257,7 +290,7 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.debug.apply(console, arguments);
             }
           }
@@ -268,13 +301,13 @@ $.fn.modal = function(parameters) {
               modal.performance.log(arguments);
             }
             else {
-              modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+              modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
               modal.verbose.apply(console, arguments);
             }
           }
         },
         error: function() {
-          modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
+          modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
           modal.error.apply(console, arguments);
         },
         performance: {
@@ -301,7 +334,7 @@ $.fn.modal = function(parameters) {
           },
           display: function() {
             var
-              title = settings.moduleName + ':',
+              title = settings.name + ':',
               totalTime = 0
             ;
             time = false;
@@ -406,35 +439,33 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name  : 'Modal',
+  name        : 'Modal',
   namespace   : 'modal',
-
   verbose     : true,
   debug       : true,
   performance : true,
 
-  selector   : {
-    closeButton : '.close'
-  },
+  offset      : 0,
+  transition  : 'scale',
+  duration    : 500,
+  easing      : 'easeOutExpo',
+
+  closable    : true,
+  context     : 'body',
+
+  onShow      : function(){},
+  onHide      : function(){},
 
+  selector    : {
+    closeButton : '.close, .actions .button',
+    dimmer: '.ui.dimmer'
+  },
   error : {
     method : 'The method you called is not defined.'
   },
-
   className : {
     scrolling : 'scrolling'
   },
-
-  onShow     : function(){},
-  onHide     : function(){},
-
-  transition : 'scale',
-
-  context    : 'body',
-  offset     : -25,
-
-  duration   : 400,
-  easing     : 'easeOutExpo'
 };
 
 

src/modules/modal.less

@@ -17,17 +17,18 @@
 
 .ui.modal {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 1001;
 
   top: 50%;
   left: 50%;
-  margin-left: -400px;
+  text-align: left;
+
   width: 800px;
+  margin-left: -400px;
 
-  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
 
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -39,7 +40,7 @@
 *******************************/
 
 /*--------------
-     Close 
+     Close
 ---------------*/
 
 .ui.modal > .close {
@@ -47,11 +48,11 @@
   position: absolute;
 
   opacity: 0.8;
-  
+
   font-size: 1.25em;
   top: -1.75em;
   right: -1.75em;
-   
+
   color: #FFFFFF;
 }
 .ui.modal > .close:hover {
@@ -63,51 +64,72 @@
 ---------------*/
 
 .ui.modal > .header {
-  background-color: #442359;
-  padding: 1em 2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  margin: 0em;
+  padding: 1.5rem 2rem;
+
+  font-size: 1.6em;
+  font-weight: bold;
 
   -webkit-border-radius: 0.325em 0.325em 0px 0px;
   -moz-border-radius: 0.325em 0.325em 0px 0px;
   border-radius: 0.325em 0.325em 0px 0px;
 }
-.ui.modal > .header h2 {
-  margin: 0px;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: #FFFFFF;
-}
 
 /*--------------
      Content
 ---------------*/
 
 .ui.modal > .content {
+  display: table;
   position: relative;
-  overflow: hidden;
   padding: 2em;
-  background-color: #FAFAFA;
-
-  -webkit-border-radius: 0px 0px 0.325em 0.325em;
-  -moz-border-radius: 0px 0px 0.325em 0.325em;
-  border-radius: 0px 0px 0.325em 0.325em;
+  background-color: #F4F4F4;
 }
 .ui.modal > .content > .left {
-  float: left;
-  width: 50%;
+  display: table-cell;
+  padding-right: 5%;
 }
 .ui.modal > .content > .right {
-  float: right;
-  width: 50%;
+  display: table-cell;
+  padding-left: 5%;
+  vertical-align: middle;
+
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
 }
 
+/*--------------
+     Actions
+---------------*/
+
+.ui.modal .actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+
+  background-color: #FFFFFF;
+  padding: 1rem 2rem;
+  text-align: right;
+}
+.ui.modal .actions > .button {
+  margin-left: 0.75em;
+}
+
+
+
 /*******************************
              Types
 *******************************/
 
-
 /* A modal that cannot fit on the page */
 .ui.modal.scrolling {
   position: absolute;
   margin-top: 100px;
 }
 
+/*******************************
+              States
+*******************************/
+
+.ui.active.modal {
+  display: block;
+}

src/modules/transition.less

@@ -13,6 +13,7 @@
   https://github.com/daneden/animate.css
 */
 
+
 .ui.transition {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
@@ -182,10 +183,10 @@
   animation-name: fadeUp;
 }
 .ui.fade.up.transition.out {
-  -webkit-animation-name: fadeUp;
-  -moz-animation-name: fadeUp;
-  -o-animation-name: fadeUp;
-  animation-name: fadeUp;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 
 .ui.fade.down.transition.in {
@@ -195,10 +196,10 @@
   animation-name: fadeDown;
 }
 .ui.fade.down.transition.out {
-  -webkit-animation-name: fadeDown;
-  -moz-animation-name: fadeDown;
-  -o-animation-name: fadeDown;
-  animation-name: fadeDown;
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
 }
 
 /*--------------
@@ -527,7 +528,7 @@
 /* Horizontal */
 @-webkit-keyframes horizontalFlip {
   0% {
-    -webkit-transform: rotateY(90deg);
+    -webkit-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -537,7 +538,7 @@
 }
 @-moz-keyframes horizontalFlip {
   0% {
-    -moz-transform: rotateY(90deg);
+    -moz-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -547,7 +548,7 @@
 }
 @-o-keyframes horizontalFlip {
   0% {
-    -o-transform: rotateY(90deg);
+    -o-transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
@@ -557,11 +558,52 @@
 }
 @keyframes horizontalFlip {
   0% {
-    transform: rotateY(90deg);
+    transform: rotateY(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+}
+/* Horizontal */
+@-webkit-keyframes horizontalFlipOut {
+  0% {
+    -webkit-transform: rotateY(0deg);
     opacity: 0;
   }
   100% {
+    -webkit-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-moz-keyframes horizontalFlipOut {
+  0% {
+    -moz-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@-o-keyframes horizontalFlipOut {
+  0% {
+    -o-transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    -o-transform: rotateY(90deg);
+    opacity: 1;
+  }
+}
+@keyframes horizontalFlipOut {
+  0% {
     transform: rotateY(0deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateY(90deg);
     opacity: 1;
   }
 }
@@ -569,7 +611,7 @@
 /* Vertical */
 @-webkit-keyframes verticalFlip {
   0% {
-    -webkit-transform: rotateX(90deg);
+    -webkit-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -579,7 +621,7 @@
 }
 @-moz-keyframes verticalFlip {
   0% {
-    -moz-transform: rotateX(90deg);
+    -moz-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -589,7 +631,7 @@
 }
 @-o-keyframes verticalFlip {
   0% {
-    -o-transform: rotateX(90deg);
+    -o-transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {
@@ -599,7 +641,7 @@
 }
 @keyframes verticalFlip {
   0% {
-    transform: rotateX(90deg);
+    transform: rotateX(-90deg);
     opacity: 0;
   }
   100% {