fomantic-ui 2.9.0-beta.32 → 2.9.0-beta.320

package/src/definitions/modules/modal.less

@@ -80,8 +80,10 @@
   height: @closeHitbox;
   padding: @closePadding;
 }
+.ui.modal > .close:focus,
 .ui.modal > .close:hover {
   opacity: 1;
+  outline: none;
 }
 
 /*--------------
@@ -165,29 +167,43 @@
   font-size: @imageIconSize;
 }
 
-/*--------------
-     Actions
----------------*/
+& when (@variationModalActions) {
+  /*--------------
+       Actions
+  ---------------*/
 
-.ui.modal > .actions {
-  background: @actionBackground;
-  padding: @actionPadding;
-  border-top: @actionBorder;
-  text-align: @actionAlign;
-}
-.ui.modal .actions > .button:not(.fluid) {
-  margin-left: @buttonDistance;
-}
-.ui.basic.modal > .actions {
-  border-top:none;
+  .ui.modal > .actions {
+    background: @actionBackground;
+    padding: @actionPadding;
+    border-top: @actionBorder;
+    text-align: @actionAlign;
+  }
+  .ui.modal .actions > .button:not(.fluid) {
+    margin-left: @buttonDistance;
+  }
+  .ui.ui.modal > .basic.actions,
+  .ui.basic.modal > .actions {
+    border-top: none;
+  }
+  & when (@variationModalLeftActions) {
+    .ui.modal > .left.actions {
+      text-align: left;
+      & > .button:not(.fluid) {
+        margin-left: @buttonLeftDistance;
+        margin-right: @buttonLeftDistance;
+      }
+    }
+  }
 }
 
-.ui.modal > .centered,
-.ui.modal > .center.aligned {
-  text-align: center;
-  &.actions > .button:not(.fluid) {
-    margin-left: @buttonCenteredDistance;
-    margin-right: @buttonCenteredDistance;
+& when (@variationModalCentered) {
+  .ui.modal > .centered,
+  .ui.modal > .center.aligned {
+    text-align: center;
+    &.actions > .button:not(.fluid) when (@variationModalActions){
+      margin-left: @buttonCenteredDistance;
+      margin-right: @buttonCenteredDistance;
+    }
   }
 }
 
@@ -212,6 +228,16 @@
   .ui.modal:not(.fullscreen) {
     width: @computerWidth;
     margin: @computerMargin;
+    & > .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 : @largeMonitorBreakpoint) {
@@ -287,14 +313,15 @@
     padding: @mobileDescriptionPadding !important;
     box-shadow: none;
   }
-
-  /* Let Buttons Stack */
-  .ui.modal > .actions {
-    padding: @mobileActionPadding !important;
-  }
-  .ui.modal .actions > .buttons,
-  .ui.modal .actions > .button {
-    margin-bottom: @mobileButtonDistance;
+  & when (@variationModalActions) {
+    /* Let Buttons Stack */
+    .ui.modal > .actions {
+      padding: @mobileActionPadding !important;
+    }
+    .ui.modal .actions > .buttons,
+    .ui.modal .actions > .button {
+      margin-bottom: @mobileButtonDistance;
+    }
   }
 }
 
@@ -317,11 +344,16 @@
     box-shadow: none !important;
     color: @basicModalColor;
   }
+  .ui.ui.modal > .basic.header,
+  .ui.ui.modal > .basic.actions,
   .ui.basic.modal > .header,
   .ui.basic.modal > .content,
   .ui.basic.modal > .actions {
     background-color: transparent;
   }
+  .ui.modal > .basic.header {
+    border-bottom: none;
+  }
   .ui.basic.modal > .header {
     color: @basicModalHeaderColor;
     border-bottom: none;
@@ -415,6 +447,10 @@
     justify-content: flex-start;
     position: fixed;
   }
+  .scrolling.dimmable:not(body) > .dimmer {
+    justify-content: center;
+    position: absolute;
+  }
   .scrolling.dimmable.dimmed > .dimmer {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
@@ -563,11 +599,12 @@
     background: @invertedBackground;
     color: @invertedHeaderColor;
   }
-
-  .ui.inverted.modal > .actions {
-    background: @invertedActionBackground;
-    border-top: @invertedActionBorder;
-    color: @invertedActionColor;
+  & when (@variationModalActions) {
+    .ui.inverted.modal > .actions {
+      background: @invertedActionBackground;
+      border-top: @invertedActionBorder;
+      color: @invertedActionColor;
+    }
   }
 
   .ui.inverted.dimmer > .modal > .close {

package/src/definitions/modules/nag.js

@@ -53,7 +53,7 @@ $.fn.nag = function(parameters) {
         $module         = $(this),
 
         $context        = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         element         = this,
@@ -403,7 +403,7 @@ $.fn.nag = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/modules/nag.less

@@ -169,28 +169,29 @@ a.ui.nag {
 /*--------------
      Colors
 -------------- */
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @isVeryDark: @colors[@@color][isVeryDark];
-
-  .ui.@{color}.nag {
-    background-color: @c;
-    & when (@isVeryDark) {
-      color: @invertedTextColor;
+& when not (@variationNagColors = false) {
+  each(@variationNagColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @isVeryDark: @colors[@@color][isVeryDark];
+
+    .ui.@{color}.nag {
+      background-color: @c;
+      & when (@isVeryDark) {
+        color: @invertedTextColor;
+      }
     }
-  }
-  & when (@variationNagInverted) {
-    .ui.inverted.@{color}.nag {
-      background-color: @l;
-      & .title when (@isVeryDark) {
-        color: @titleColor;
+    & when (@variationNagInverted) {
+      .ui.inverted.@{color}.nag {
+        background-color: @l;
+        & .title when (@isVeryDark) {
+          color: @titleColor;
+        }
       }
     }
-  }
-})
+  })
+}
 
 & when (@variationNagGroups) {
 /*******************************

package/src/definitions/modules/popup.js

@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $(settings.context),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $document.find(settings.scrollContext) : $(settings.scrollContext),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $document.find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $document.find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -122,7 +122,7 @@ $.fn.popup = function(parameters) {
 
         refresh: function() {
           if(settings.popup) {
-            $popup = $(settings.popup).eq(0);
+            $popup = $document.find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -287,7 +287,7 @@ $.fn.popup = function(parameters) {
             settings.onCreate.call($popup, element);
           }
           else if(settings.popup) {
-            $(settings.popup).data(metadata.activator, $module);
+            $document.find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -309,7 +309,7 @@ $.fn.popup = function(parameters) {
         },
 
         createID: function() {
-          id = (Math.random().toString(16) + '000000000').substr(2, 8);
+          id = (Math.random().toString(16) + '000000000').slice(2, 10);
           elementNamespace = '.' + id;
           module.verbose('Creating unique id for element', id);
         },
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $document.find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)
@@ -438,6 +438,7 @@ $.fn.popup = function(parameters) {
                   queue      : false,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   duration   : settings.transition.showDuration || settings.duration,
                   onComplete : function() {
                     module.bind.close();
@@ -462,6 +463,7 @@ $.fn.popup = function(parameters) {
                   duration   : settings.transition.hideDuration || settings.duration,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   onComplete : function() {
                     module.reset();
                     callback.call($popup, element);
@@ -557,7 +559,7 @@ $.fn.popup = function(parameters) {
             };
 
             // if popup offset context is not same as target, then adjust calculations
-            if($popupOffsetParent.get(0) !== $offsetParent.get(0)) {
+            if($popupOffsetParent[0] !== $offsetParent[0]) {
               var
                 popupOffset        = $popupOffsetParent.offset()
               ;
@@ -1085,10 +1087,7 @@ $.fn.popup = function(parameters) {
         is: {
           closable: function() {
             if(settings.closable == 'auto') {
-              if(settings.on == 'hover') {
-                return false;
-              }
-              return true;
+              return settings.on != 'hover';
             }
             return settings.closable;
           },
@@ -1103,12 +1102,7 @@ $.fn.popup = function(parameters) {
                 offstage.push(direction);
               }
             });
-            if(offstage.length > 0) {
-              return true;
-            }
-            else {
-              return false;
-            }
+            return offstage.length > 0;
           },
           svg: function(element) {
             return module.supports.svg() && (element instanceof SVGGraphicsElement);
@@ -1135,7 +1129,7 @@ $.fn.popup = function(parameters) {
             return !module.is.visible();
           },
           rtl: function () {
-            return $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl';
+            return $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl' || $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl' || $context.attr('dir') === 'rtl' || $context.css('direction') === 'rtl';
           }
         },
 
@@ -1262,7 +1256,7 @@ $.fn.popup = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1511,7 +1505,7 @@ $.fn.popup.settings = {
         }
       ;
       if(shouldEscape.test(string)) {
-        string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
+        string = string.replace(/&(?![a-z0-9#]{1,12};)/gi, "&amp;");
         return string.replace(badChars, escapedChar);
       }
       return string;