Fix modal / sidebar incompatibilities

10 years ago · 12afde89d6
37 changed files with 174 additions and 151 deletions
--- a/build/less/definitions/collections/form.less
+++ b/build/less/definitions/collections/form.less
@ -65,6 +65,7 @@
  color: @labelColor;
  font-size: @labelFontSize;
  font-weight: @labelFontWeight;
+  text-transform: @labelTextTransform;
 }

 /*--------------------
@ -109,6 +110,7 @@
  transition: @inputTransition;
 }

+
 .ui.textarea,
 .ui.form textarea {
  margin: 0em;
--- a/build/less/definitions/modules/dimmer.js
+++ b/build/less/definitions/modules/dimmer.js
@ -11,8 +11,6 @@

 ;(function ( $, window, document, undefined ) {

-"use strict";
-
 $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
@ -581,7 +579,7 @@ $.fn.dimmer.settings = {

  className : {
    active     : 'active',
-    dimmable   : 'dimmable',
+    dimmable   : 'ui dimmable',
    dimmed     : 'dimmed',
    disabled   : 'disabled',
    pageDimmer : 'page',
--- a/build/less/definitions/modules/dimmer.less
+++ b/build/less/definitions/modules/dimmer.less
@ -169,4 +169,4 @@ body.ui.dimmed.dimmable > :not(.dimmer){
  background: @simpleInvertedEndBackground;
 }

-.loadUIOverrides();
+.loadUIOverrides();
--- a/build/less/definitions/modules/dropdown.js
+++ b/build/less/definitions/modules/dropdown.js
@ -173,10 +173,8 @@ $.fn.dropdown = function(parameters) {
            if( module.is.searchable() ) {
              $search
                .on('focus' + eventNamespace, module.event.searchFocus)
-                .on( module.get.inputEvent(), module.event.input)
-              ;
-              $module
                .on('blur' + eventNamespace, module.event.blur)
+                .on( module.get.inputEvent(), module.event.input)
              ;
            }
            else {
@ -320,8 +318,9 @@ $.fn.dropdown = function(parameters) {
            module.show();
          },
          blur: function(event) {
-            activated = false;
-            module.determine.eventInModule(event, module.hide);
+            if(!activated) {
+              module.hide();
+            }
          },
          input: function(event) {
            var
--- a/build/less/definitions/modules/dropdown.less
+++ b/build/less/definitions/modules/dropdown.less
@ -345,13 +345,13 @@ select.ui.dropdown {

 /* Hover */
 .ui.selection.dropdown:hover {
-  border: @selectionHoverBorder;
+  border-color: @selectionHoverBorderColor;
  box-shadow: @selectionHoverBoxShadow;
 }

 /* Visible Hover */
 .ui.selection.visible.dropdown:hover {
-  border: @selectionVisibleHoverBorder;
+  border-color: @selectionVisibleHoverBorderColor;
  box-shadow: @selectionVisibleHoverBoxShadow;
 }
 .ui.selection.visible.dropdown:hover .menu {
@ -361,7 +361,7 @@ select.ui.dropdown {

 /* Visible */
 .ui.selection.dropdown.visible {
-  border: @selectionVisibleBorder;
+  border-color: @selectionVisibleBorderColor;
  box-shadow: @selectionVisibleBoxShadow;
 }
 .ui.visible.selection.dropdown > .dropdown.icon {
--- a/build/less/definitions/modules/sidebar.js
+++ b/build/less/definitions/modules/sidebar.js
@ -439,7 +439,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.addClass(className.dimmed);
+              $page.addClass(className.dimmed);
            }
            $context.addClass(className.pushed);
          }
@ -463,7 +463,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.removeClass(className.dimmed);
+              $page.removeClass(className.dimmed);
            }
            $context.removeClass(className.pushed);
          },
@ -777,14 +777,14 @@ $.fn.sidebar.settings = {

  defaultTransition : {
    computer: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    },
    mobile: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    }
--- a/build/less/definitions/modules/sidebar.less
+++ b/build/less/definitions/modules/sidebar.less
@ -168,7 +168,7 @@
     Dimmed
 ---------------*/

-.pushable.dimmed > .pusher > .page:after {
+.pushable > .pusher > .page.dimmed:after {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
@ -302,32 +302,32 @@


 /*--------------
-     Reveal
+    Uncover
 ---------------*/

 /* Set-up */
-.pushable.reveal > .fixed,
-.pushable.reveal > .pusher {
+.pushable.uncover > .fixed,
+.pushable.uncover > .pusher {
  transform: translate3d(0px, 0px, 0px);
 }
-.pushable.reveal > .pusher {
+.pushable.uncover > .pusher {
  z-index: @bottomLayer;
 }
-.pushable.reveal > .visible.ui.sidebar {
+.pushable.uncover > .visible.ui.sidebar {
  transition: none;
 }

 /* Pushed */

 /*--- Left ---*/
-.pushable.left.reveal.pushed > .fixed,
-.pushable.left.reveal.pushed > .pusher {
+.pushable.left.uncover.pushed > .fixed,
+.pushable.left.uncover.pushed > .pusher {
  transform: translate3d(@sidebarWidth, 0, 0);
 }

 /*--- Right ---*/
-.pushable.right.reveal.pushed > .fixed,
-.pushable.right.reveal.pushed > .pusher {
+.pushable.right.uncover.pushed > .fixed,
+.pushable.right.uncover.pushed > .pusher {
  transform: translate3d(-@sidebarWidth, 0, 0);
 }

--- a/build/less/themes/packages/chubby/collections/form.overrides
+++ b/build/less/themes/packages/chubby/collections/form.overrides
@ -0,0 +1,8 @@
+/*-------------------
+   Form Variables
+--------------------*/
+
+.ui.form .selection.dropdown {
+  padding: 1.1em 1.2em;
+  border-width: 2px;
+}
--- a/build/less/themes/packages/chubby/collections/form.variables
+++ b/build/less/themes/packages/chubby/collections/form.variables
@ -0,0 +1,9 @@
+/*-------------------
+   Form Variables
+--------------------*/
+
+@labelTextTransform: uppercase;
+@labelFontSize: 0.8em;
+
+@inputPadding: 1em 1.2em;
+@inputBorder: 2px solid @borderColor;
--- a/build/less/themes/packages/default/collections/form.variables
+++ b/build/less/themes/packages/default/collections/form.variables
@ -18,6 +18,7 @@
@labelFontWeight: bold;
@labelDistance: 0.3rem;
@labelColor: @textColor;
+@labelTextTransform: none;

 /* Input */
@inputWidth: 100%;
--- a/build/less/themes/packages/default/modules/dropdown.variables
+++ b/build/less/themes/packages/default/modules/dropdown.variables
@ -128,17 +128,17 @@ b        Types
 ;

 /* Hover */
-@selectionHoverBorder: 1px solid @selectedBorderColor;
+@selectionHoverBorderColor: @selectedBorderColor;
@selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);

 /* Visible */
-@selectionVisibleBorder: 1px solid @borderColor;
+@selectionVisibleBorderColor: @borderColor;
@selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
@selectionVisibleTextFontWeight: normal;
@selectionVisibleTextColor: @selectedTextColor;

 /* Visible Hover */
-@selectionVisibleHoverBorder: 1px solid @selectedBorderColor;
+@selectionVisibleHoverBorderColor: @selectedBorderColor;
@selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
@selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor;
@selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
--- a/build/less/themes/packages/default/modules/sidebar.variables
+++ b/build/less/themes/packages/default/modules/sidebar.variables
@ -14,8 +14,8 @@
@duration: 0.5s;
@easing: ease;

-@bottomLayer: 1001;
-@middleLayer: 1002;
-@dimmerLayer: 1003;
-@fixedLayer: 1005;
-@topLayer: 1006;
+@bottomLayer: 900;
+@middleLayer: 901;
+@dimmerLayer: 902;
+@fixedLayer: 903;
+@topLayer: 904;
--- a/build/less/themes/packages/github/collections/form.overrides
+++ b/build/less/themes/packages/github/collections/form.overrides
@ -1,3 +1,16 @@
 /*******************************
           Overrides
 *******************************/
+
+.ui.selection.dropdown {
+  background-color: #FAFAFA;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+  border-color: #CCCCCC;
+}
+
+.ui.selection.dropdown:focus {
+  box-shadow:
+    0px 1px 2px rgba(0, 0, 0, 0.075) inset,
+    0px 0px 5px rgba(81, 167, 232, 0.5)
+  ;
+}
--- a/build/minified/definitions/collections/form.min.css
+++ b/build/minified/definitions/collections/form.min.css
--- a/build/minified/definitions/modules/dimmer.min.js
+++ b/build/minified/definitions/modules/dimmer.min.js
--- a/build/minified/definitions/modules/dropdown.min.css
+++ b/build/minified/definitions/modules/dropdown.min.css
--- a/build/minified/definitions/modules/dropdown.min.js
+++ b/build/minified/definitions/modules/dropdown.min.js
--- a/build/minified/definitions/modules/sidebar.min.css
+++ b/build/minified/definitions/modules/sidebar.min.css
--- a/build/minified/definitions/modules/sidebar.min.js
+++ b/build/minified/definitions/modules/sidebar.min.js
--- a/build/packaged/definitions/css/semantic.css
+++ b/build/packaged/definitions/css/semantic.css
@ -484,6 +484,7 @@
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.9em;
  font-weight: bold;
+  text-transform: none;
 }
 /*--------------------
    Standard Inputs
@ -19027,12 +19028,12 @@ select.ui.dropdown {
 }
 /* Hover */
 .ui.selection.dropdown:hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
 }
 /* Visible Hover */
 .ui.selection.visible.dropdown:hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 }
 .ui.selection.visible.dropdown:hover .menu {
@ -19041,7 +19042,7 @@ select.ui.dropdown {
 }
 /* Visible */
 .ui.selection.dropdown.visible {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 }
 .ui.visible.selection.dropdown > .dropdown.icon {
@ -21876,7 +21877,7 @@ a.ui.nag {
  position: fixed;
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
-  z-index: 1005;
+  z-index: 903;
 }
 /*--------------
     Pusher
@ -21884,7 +21885,7 @@ a.ui.nag {
 .pushable > .pusher {
  background: #333333;
  height: 100%;
-  z-index: 1002;
+  z-index: 901;
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
 }
@ -21909,7 +21910,7 @@ a.ui.nag {
  height: 0px;
  overflow: hidden;
  opacity: 0;
-  z-index: 1003;
+  z-index: 902;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
  will-change: opacity;
@ -21939,12 +21940,12 @@ a.ui.nag {
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
-  z-index: 1006;
+  z-index: 904;
 }
 /*--------------
     Dimmed
 ---------------*/
-.pushable.dimmed > .pusher > .page:after {
+.pushable > .pusher > .page.dimmed:after {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
@ -21987,7 +21988,7 @@ a.ui.nag {
 ---------------*/
 /* Set-up */
 .pushable.overlay > .visible.ui.sidebar {
-  z-index: 1006;
+  z-index: 904;
 }
 /* Animation */
 .pushable.overlay.show > .visible.ui.sidebar,
@ -22068,31 +22069,31 @@ a.ui.nag {
          transition: transform 0.5s ease;
 }
 /*--------------
-     Reveal
+    Uncover
 ---------------*/
 /* Set-up */
-.pushable.reveal > .fixed,
-.pushable.reveal > .pusher {
+.pushable.uncover > .fixed,
+.pushable.uncover > .pusher {
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
 }
-.pushable.reveal > .pusher {
-  z-index: 1001;
+.pushable.uncover > .pusher {
+  z-index: 900;
 }
-.pushable.reveal > .visible.ui.sidebar {
+.pushable.uncover > .visible.ui.sidebar {
  -webkit-transition: none;
          transition: none;
 }
 /* Pushed */
 /*--- Left ---*/
-.pushable.left.reveal.pushed > .fixed,
-.pushable.left.reveal.pushed > .pusher {
+.pushable.left.uncover.pushed > .fixed,
+.pushable.left.uncover.pushed > .pusher {
  -webkit-transform: translate3d(260px, 0, 0);
          transform: translate3d(260px, 0, 0);
 }
 /*--- Right ---*/
-.pushable.right.reveal.pushed > .fixed,
-.pushable.right.reveal.pushed > .pusher {
+.pushable.right.uncover.pushed > .fixed,
+.pushable.right.uncover.pushed > .pusher {
  -webkit-transform: translate3d(-260px, 0, 0);
          transform: translate3d(-260px, 0, 0);
 }
@ -22106,7 +22107,7 @@ a.ui.nag {
          transform: translate3d(0px, 0, 0);
 }
 .pushable.slide.along > .pusher {
-  z-index: 1001;
+  z-index: 900;
 }
 .pushable.slide.along > .visible.ui.sidebar {
  -webkit-transform: translate3d(-50%, 0, 0);
@ -22164,7 +22165,7 @@ a.ui.nag {
          transform: translate3d(0px, 0, 0);
 }
 .pushable.scale.down > .pusher {
-  z-index: 1001;
+  z-index: 900;
  -webkit-transform-origin: 75% 50%;
      -ms-transform-origin: 75% 50%;
          transform-origin: 75% 50%;
@ -22173,7 +22174,7 @@ a.ui.nag {
 .pushable.scale.down > .visible.ui.sidebar {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
-  z-index: 1006;
+  z-index: 904;
 }
 /* Pushed */
 .pushable.scale.down.pushed > .pusher {
--- a/build/packaged/definitions/css/semantic.min.css
+++ b/build/packaged/definitions/css/semantic.min.css
--- a/build/packaged/definitions/javascript/semantic.js
+++ b/build/packaged/definitions/javascript/semantic.js
@ -5946,8 +5946,6 @@ $.fn.checkbox.settings = {

 ;(function ( $, window, document, undefined ) {

-"use strict";
-
 $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
@ -6516,7 +6514,7 @@ $.fn.dimmer.settings = {

  className : {
    active     : 'active',
-    dimmable   : 'dimmable',
+    dimmable   : 'ui dimmable',
    dimmed     : 'dimmed',
    disabled   : 'disabled',
    pageDimmer : 'page',
@ -6703,10 +6701,8 @@ $.fn.dropdown = function(parameters) {
            if( module.is.searchable() ) {
              $search
                .on('focus' + eventNamespace, module.event.searchFocus)
-                .on( module.get.inputEvent(), module.event.input)
-              ;
-              $module
                .on('blur' + eventNamespace, module.event.blur)
+                .on( module.get.inputEvent(), module.event.input)
              ;
            }
            else {
@ -6850,8 +6846,9 @@ $.fn.dropdown = function(parameters) {
            module.show();
          },
          blur: function(event) {
-            activated = false;
-            module.determine.eventInModule(event, module.hide);
+            if(!activated) {
+              module.hide();
+            }
          },
          input: function(event) {
            var
@ -12654,7 +12651,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.addClass(className.dimmed);
+              $page.addClass(className.dimmed);
            }
            $context.addClass(className.pushed);
          }
@ -12678,7 +12675,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.removeClass(className.dimmed);
+              $page.removeClass(className.dimmed);
            }
            $context.removeClass(className.pushed);
          },
@ -12992,14 +12989,14 @@ $.fn.sidebar.settings = {

  defaultTransition : {
    computer: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    },
    mobile: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    }
--- a/build/packaged/definitions/javascript/semantic.min.js
+++ b/build/packaged/definitions/javascript/semantic.min.js
--- a/build/uncompressed/definitions/collections/form.css
+++ b/build/uncompressed/definitions/collections/form.css
@ -228,6 +228,7 @@
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.9em;
  font-weight: bold;
+  text-transform: none;
 }
 /*--------------------
    Standard Inputs
--- a/build/uncompressed/definitions/modules/dimmer.js
+++ b/build/uncompressed/definitions/modules/dimmer.js
@ -11,8 +11,6 @@

 ;(function ( $, window, document, undefined ) {

-"use strict";
-
 $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
@ -581,7 +579,7 @@ $.fn.dimmer.settings = {

  className : {
    active     : 'active',
-    dimmable   : 'dimmable',
+    dimmable   : 'ui dimmable',
    dimmed     : 'dimmed',
    disabled   : 'disabled',
    pageDimmer : 'page',
--- a/build/uncompressed/definitions/modules/dropdown.css
+++ b/build/uncompressed/definitions/modules/dropdown.css
@ -478,12 +478,12 @@ select.ui.dropdown {
 }
 /* Hover */
 .ui.selection.dropdown:hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
 }
 /* Visible Hover */
 .ui.selection.visible.dropdown:hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 }
 .ui.selection.visible.dropdown:hover .menu {
@ -492,7 +492,7 @@ select.ui.dropdown {
 }
 /* Visible */
 .ui.selection.dropdown.visible {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 }
 .ui.visible.selection.dropdown > .dropdown.icon {
--- a/build/uncompressed/definitions/modules/dropdown.js
+++ b/build/uncompressed/definitions/modules/dropdown.js
@ -173,10 +173,8 @@ $.fn.dropdown = function(parameters) {
            if( module.is.searchable() ) {
              $search
                .on('focus' + eventNamespace, module.event.searchFocus)
-                .on( module.get.inputEvent(), module.event.input)
-              ;
-              $module
                .on('blur' + eventNamespace, module.event.blur)
+                .on( module.get.inputEvent(), module.event.input)
              ;
            }
            else {
@ -320,8 +318,9 @@ $.fn.dropdown = function(parameters) {
            module.show();
          },
          blur: function(event) {
-            activated = false;
-            module.determine.eventInModule(event, module.hide);
+            if(!activated) {
+              module.hide();
+            }
          },
          input: function(event) {
            var
--- a/build/uncompressed/definitions/modules/sidebar.css
+++ b/build/uncompressed/definitions/modules/sidebar.css
@ -213,7 +213,7 @@
  position: fixed;
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
-  z-index: 1005;
+  z-index: 903;
 }
 /*--------------
     Pusher
@ -221,7 +221,7 @@
 .pushable > .pusher {
  background: #333333;
  height: 100%;
-  z-index: 1002;
+  z-index: 901;
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
 }
@ -246,7 +246,7 @@
  height: 0px;
  overflow: hidden;
  opacity: 0;
-  z-index: 1003;
+  z-index: 902;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
  will-change: opacity;
@ -276,12 +276,12 @@
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
-  z-index: 1006;
+  z-index: 904;
 }
 /*--------------
     Dimmed
 ---------------*/
-.pushable.dimmed > .pusher > .page:after {
+.pushable > .pusher > .page.dimmed:after {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
@ -324,7 +324,7 @@
 ---------------*/
 /* Set-up */
 .pushable.overlay > .visible.ui.sidebar {
-  z-index: 1006;
+  z-index: 904;
 }
 /* Animation */
 .pushable.overlay.show > .visible.ui.sidebar,
@ -405,31 +405,31 @@
          transition: transform 0.5s ease;
 }
 /*--------------
-     Reveal
+    Uncover
 ---------------*/
 /* Set-up */
-.pushable.reveal > .fixed,
-.pushable.reveal > .pusher {
+.pushable.uncover > .fixed,
+.pushable.uncover > .pusher {
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
 }
-.pushable.reveal > .pusher {
-  z-index: 1001;
+.pushable.uncover > .pusher {
+  z-index: 900;
 }
-.pushable.reveal > .visible.ui.sidebar {
+.pushable.uncover > .visible.ui.sidebar {
  -webkit-transition: none;
          transition: none;
 }
 /* Pushed */
 /*--- Left ---*/
-.pushable.left.reveal.pushed > .fixed,
-.pushable.left.reveal.pushed > .pusher {
+.pushable.left.uncover.pushed > .fixed,
+.pushable.left.uncover.pushed > .pusher {
  -webkit-transform: translate3d(260px, 0, 0);
          transform: translate3d(260px, 0, 0);
 }
 /*--- Right ---*/
-.pushable.right.reveal.pushed > .fixed,
-.pushable.right.reveal.pushed > .pusher {
+.pushable.right.uncover.pushed > .fixed,
+.pushable.right.uncover.pushed > .pusher {
  -webkit-transform: translate3d(-260px, 0, 0);
          transform: translate3d(-260px, 0, 0);
 }
@ -443,7 +443,7 @@
          transform: translate3d(0px, 0, 0);
 }
 .pushable.slide.along > .pusher {
-  z-index: 1001;
+  z-index: 900;
 }
 .pushable.slide.along > .visible.ui.sidebar {
  -webkit-transform: translate3d(-50%, 0, 0);
@ -501,7 +501,7 @@
          transform: translate3d(0px, 0, 0);
 }
 .pushable.scale.down > .pusher {
-  z-index: 1001;
+  z-index: 900;
  -webkit-transform-origin: 75% 50%;
      -ms-transform-origin: 75% 50%;
          transform-origin: 75% 50%;
@ -510,7 +510,7 @@
 .pushable.scale.down > .visible.ui.sidebar {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
-  z-index: 1006;
+  z-index: 904;
 }
 /* Pushed */
 .pushable.scale.down.pushed > .pusher {
--- a/build/uncompressed/definitions/modules/sidebar.js
+++ b/build/uncompressed/definitions/modules/sidebar.js
@ -439,7 +439,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.addClass(className.dimmed);
+              $page.addClass(className.dimmed);
            }
            $context.addClass(className.pushed);
          }
@ -463,7 +463,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.removeClass(className.dimmed);
+              $page.removeClass(className.dimmed);
            }
            $context.removeClass(className.pushed);
          },
@ -777,14 +777,14 @@ $.fn.sidebar.settings = {

  defaultTransition : {
    computer: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    },
    mobile: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    }
--- a/server/documents/modules/sidebar.html.eco
+++ b/server/documents/modules/sidebar.html.eco
@ -47,8 +47,8 @@ themes      : ['Default']
      <div class="ui button" data-transition="push">
        Push
      </div>
-      <div class="ui button" data-transition="reveal">
-        Reveal
+      <div class="ui button" data-transition="uncover">
+        Uncover
      </div>
      <div class="ui button" data-transition="slide along">
        Slide Along
--- a/src/definitions/modules/dimmer.js
+++ b/src/definitions/modules/dimmer.js
@ -11,8 +11,6 @@

 ;(function ( $, window, document, undefined ) {

-"use strict";
-
 $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
@ -581,7 +579,7 @@ $.fn.dimmer.settings = {

  className : {
    active     : 'active',
-    dimmable   : 'dimmable',
+    dimmable   : 'ui dimmable',
    dimmed     : 'dimmed',
    disabled   : 'disabled',
    pageDimmer : 'page',
--- a/src/definitions/modules/dimmer.less
+++ b/src/definitions/modules/dimmer.less
@ -169,4 +169,4 @@ body.ui.dimmed.dimmable > :not(.dimmer){
  background: @simpleInvertedEndBackground;
 }

-.loadUIOverrides();
+.loadUIOverrides();
--- a/src/definitions/modules/dropdown.js
+++ b/src/definitions/modules/dropdown.js
@ -173,10 +173,8 @@ $.fn.dropdown = function(parameters) {
            if( module.is.searchable() ) {
              $search
                .on('focus' + eventNamespace, module.event.searchFocus)
-                .on( module.get.inputEvent(), module.event.input)
-              ;
-              $module
                .on('blur' + eventNamespace, module.event.blur)
+                .on( module.get.inputEvent(), module.event.input)
              ;
            }
            else {
@ -320,8 +318,9 @@ $.fn.dropdown = function(parameters) {
            module.show();
          },
          blur: function(event) {
-            activated = false;
-            module.determine.eventInModule(event, module.hide);
+            if(!activated) {
+              module.hide();
+            }
          },
          input: function(event) {
            var
--- a/src/definitions/modules/sidebar.js
+++ b/src/definitions/modules/sidebar.js
@ -439,7 +439,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.addClass(className.dimmed);
+              $page.addClass(className.dimmed);
            }
            $context.addClass(className.pushed);
          }
@ -463,7 +463,7 @@ $.fn.sidebar = function(parameters) {
          },
          pushed: function() {
            if(settings.dimPage) {
-              $context.removeClass(className.dimmed);
+              $page.removeClass(className.dimmed);
            }
            $context.removeClass(className.pushed);
          },
@ -777,14 +777,14 @@ $.fn.sidebar.settings = {

  defaultTransition : {
    computer: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    },
    mobile: {
-      left   : 'reveal',
-      right  : 'reveal',
+      left   : 'uncover',
+      right  : 'uncover',
      top    : 'overlay',
      bottom : 'overlay'
    }
--- a/src/definitions/modules/sidebar.less
+++ b/src/definitions/modules/sidebar.less
@ -168,7 +168,7 @@
     Dimmed
 ---------------*/

-.pushable.dimmed > .pusher > .page:after {
+.pushable > .pusher > .page.dimmed:after {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
@ -302,32 +302,32 @@


 /*--------------
-     Reveal
+    Uncover
 ---------------*/

 /* Set-up */
-.pushable.reveal > .fixed,
-.pushable.reveal > .pusher {
+.pushable.uncover > .fixed,
+.pushable.uncover > .pusher {
  transform: translate3d(0px, 0px, 0px);
 }
-.pushable.reveal > .pusher {
+.pushable.uncover > .pusher {
  z-index: @bottomLayer;
 }
-.pushable.reveal > .visible.ui.sidebar {
+.pushable.uncover > .visible.ui.sidebar {
  transition: none;
 }

 /* Pushed */

 /*--- Left ---*/
-.pushable.left.reveal.pushed > .fixed,
-.pushable.left.reveal.pushed > .pusher {
+.pushable.left.uncover.pushed > .fixed,
+.pushable.left.uncover.pushed > .pusher {
  transform: translate3d(@sidebarWidth, 0, 0);
 }

 /*--- Right ---*/
-.pushable.right.reveal.pushed > .fixed,
-.pushable.right.reveal.pushed > .pusher {
+.pushable.right.uncover.pushed > .fixed,
+.pushable.right.uncover.pushed > .pusher {
  transform: translate3d(-@sidebarWidth, 0, 0);
 }

--- a/src/themes/packages/default/modules/dimmer.variables
+++ b/src/themes/packages/default/modules/dimmer.variables
--- a/src/themes/packages/default/modules/sidebar.variables
+++ b/src/themes/packages/default/modules/sidebar.variables
@ -14,8 +14,8 @@
@duration: 0.5s;
@easing: ease;

-@bottomLayer: 1001;
-@middleLayer: 1002;
-@dimmerLayer: 1003;
-@fixedLayer: 1005;
-@topLayer: 1006;
+@bottomLayer: 900;
+@middleLayer: 901;
+@dimmerLayer: 902;
+@fixedLayer: 903;
+@topLayer: 904;