fomantic-ui 2.9.0-beta.191 → 2.9.0-beta.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.191",
+  "version": "2.9.0-beta.192",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/modules/modal.js

@@ -216,8 +216,8 @@ $.fn.modal = function(parameters) {
             module.verbose('Creating unique id for element', id);
           },
           innerDimmer: function() {
-            if ( $module.find(selector.dimmer).length == 0 ) {
-              $module.prepend('<div class="ui inverted dimmer"></div>');
+            if ( $module.find(selector.dimmer).length === 0 ) {
+              $('<div/>', {class: className.innerDimmer}).prependTo($module);
             }
           }
         },
@@ -1422,7 +1422,8 @@ $.fn.modal.settings = {
     template   : 'ui tiny modal',
     ok         : 'positive',
     cancel     : 'negative',
-    prompt     : 'ui fluid input'
+    prompt     : 'ui fluid input',
+    innerDimmer: 'ui inverted dimmer'
   },
   text: {
     ok    : 'Ok',

package/src/definitions/modules/modal.less

@@ -208,6 +208,16 @@
   .ui.modal:not(.fullscreen) {
     width: @tabletWidth;
     margin: @tabletMargin;
+    & > .active.dimmer + .close:not(.inside) {
+      pointer-events: none;
+      opacity: @closeOpacityDimmed;
+    }
+  }
+  .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @closeShadow;
+  }
+  .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @invertedCloseShadow;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {

package/src/themes/default/modules/modal.variables

@@ -14,6 +14,7 @@
 
 /* Close Icon */
 @closeOpacity: 0.8;
+@closeOpacityDimmed: 0.1;
 @closeSize: 1.25em;
 @closeColor: @white;
 
@@ -23,6 +24,12 @@
 @closePadding: @closeHitBoxOffset 0 0 0;
 @closeTop: -(@closeDistance + @closeHitbox);
 @closeRight: -(@closeDistance + @closeHitbox);
+@closeShadow:
+  -1px -1px 2px rgba(0, 0, 0, 0.3),
+  1px -1px 2px rgba(0, 0, 0, 0.3),
+  -1px 2px 2px rgba(0, 0, 0, 0.3),
+  1px 2px 2px rgba(0, 0, 0, 0.3)
+;
 
 /* Header */
 @headerMargin: 0;
@@ -249,3 +256,9 @@
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;
 @invertedDimmerCloseColor: rgba(0,0,0,.85);
+@invertedCloseShadow:
+  -1px -1px 2px rgba(255, 255, 255, 0.3),
+  1px -1px 2px rgba(255, 255, 255, 0.3),
+  -1px 2px 2px rgba(255, 255, 255, 0.3),
+  1px 2px 2px rgba(255, 255, 255, 0.3)
+;