fomantic-ui 2.9.0-beta.99 → 2.9.0

package/src/definitions/modules/toast.js

@@ -23,7 +23,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
     : Function('return this')()
 ;
 
-$.fn.toast = function(parameters) {
+$.toast = $.fn.toast = function(parameters) {
   var
     $allModules    = $(this),
     moduleSelector = $allModules.selector || '',
@@ -61,7 +61,7 @@ $.fn.toast = function(parameters) {
         $animationObject,
         $close,
         $context         = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
@@ -151,10 +151,10 @@ $.fn.toast = function(parameters) {
         create: {
           container: function() {
             module.verbose('Creating container');
-            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
+            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '') + ' ' + (settings.context && settings.context !== 'body' ? className.absolute : '')}));
           },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2, 8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             module.verbose('Creating unique id for element', id);
           },
           toast: function() {
@@ -246,7 +246,7 @@ $.fn.toast = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
                 $actions.append($('<button/>', {
                   html: icon + text,
-                  'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                  'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                   class: className.button + ' ' + cls,
                   click: function () {
                     var button = $(this);
@@ -391,6 +391,7 @@ $.fn.toast = function(parameters) {
                   queue      : false,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   duration   : settings.transition.showDuration,
                   onComplete : function() {
                     callback.call($toastBox, element);
@@ -410,6 +411,7 @@ $.fn.toast = function(parameters) {
                   duration   : settings.transition.hideDuration,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   interval   : 50,
 
                   onBeforeHide: function(callback){
@@ -457,7 +459,7 @@ $.fn.toast = function(parameters) {
         has: {
           container: function() {
             module.verbose('Determining if there is already a container');
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')')).length > 0);
+            return module.get.containers().length > 0;
           },
           toast: function(){
             return !!module.get.toast();
@@ -474,8 +476,11 @@ $.fn.toast = function(parameters) {
           id: function() {
             return id;
           },
+          containers: function() {
+            return $context.children(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')') + (settings.context && settings.context !== 'body' ? module.helpers.toClass(className.absolute) : ':not('+module.helpers.toClass(className.absolute)+')'));
+          },
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')'))[0]);
+            return module.get.containers()[0];
           },
           toastBox: function() {
             return $toastBox || null;
@@ -511,7 +516,7 @@ $.fn.toast = function(parameters) {
             module.close();
           },
           click: function(event) {
-            if($(event.target).closest('a').length === 0) {
+            if($(event.target).closest(selector.clickable).length === 0) {
               if(settings.onClick.call($toastBox, element) === false || !settings.closeOnClick) {
                 module.verbose('Click callback returned false or close denied by setting cancelling close');
                 return;
@@ -538,7 +543,7 @@ $.fn.toast = function(parameters) {
         helpers: {
           toClass: function(selector) {
             var
-              classes = selector.split(' '),
+              classes = selector.trim().split(/\s+/),
               result = ''
             ;
 
@@ -570,7 +575,7 @@ $.fn.toast = function(parameters) {
               }
             ;
             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;
@@ -702,7 +707,7 @@ $.fn.toast = 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;
@@ -828,6 +833,7 @@ $.fn.toast.settings = {
 
   className      : {
     container    : 'ui toast-container',
+    absolute     : 'absolute',
     box          : 'floating toast-box',
     progress     : 'ui attached active progress',
     toast        : 'ui toast',
@@ -876,6 +882,7 @@ $.fn.toast.settings = {
     image        : '> img.image, > .image > img',
     icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
+    clickable    : 'a, details, .ui.accordion',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'
   },

package/src/definitions/modules/toast.less

@@ -25,6 +25,9 @@
 .ui.toast-container {
     position: fixed;
     z-index: 9999;
+  &.absolute {
+    position: absolute;
+  }
   &.ui.attached when (@variationToastAttached) {
     width: 100%;
     left: 0;
@@ -124,6 +127,7 @@
     margin-bottom: @toastBoxMarginBottom;
     border-radius: @defaultBorderRadius;
     cursor: default;
+    will-change: transform, opacity;
     &:hover {
       opacity: @toastOpacityOnHover;
     }
@@ -709,3 +713,5 @@
     opacity: 0;
   }
 }
+
+.loadUIOverrides();

package/src/definitions/modules/transition.js

@@ -86,7 +86,7 @@ $.fn.transition = function() {
           if(methodInvoked === false) {
             module.verbose('Converted arguments into settings object', settings);
             if(settings.interval) {
-              module.delay(settings.animate);
+              module.delay(settings.interval);
             }
             else  {
               module.animate();
@@ -153,9 +153,9 @@ $.fn.transition = function() {
             : settings.interval
           ;
           shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
-          delay = (shouldReverse || settings.reverse == true)
-            ? ($allModules.length - index) * settings.interval
-            : index * settings.interval
+          delay = (shouldReverse || settings.reverse === true)
+            ? ($allModules.length - index) * interval
+            : index * interval
           ;
           module.debug('Delaying animation by', delay);
           setTimeout(module.animate, delay);
@@ -698,11 +698,13 @@ $.fn.transition = function() {
                 .addClass(className.transition)
                 .css('animationName')
               ;
+              $clone.detach().insertAfter($module);
               inAnimation = $clone
                 .addClass(className.inward)
                 .css('animationName')
               ;
               if(!displayType) {
+                $clone.detach().insertAfter($module);
                 displayType = $clone
                   .attr('class', elementClass)
                   .removeAttr('style')
@@ -771,6 +773,10 @@ $.fn.transition = function() {
         },
 
         hide: function() {
+          if(settings.onHide.call(element) === false) {
+            module.verbose('Hide callback returned false cancelling hide');
+            return false;
+          }
           module.verbose('Hiding element');
           if( module.is.animating() ) {
             module.reset();
@@ -778,35 +784,30 @@ $.fn.transition = function() {
           element.blur(); // IE will trigger focus change if element is not blurred before hiding
           module.remove.display();
           module.remove.visible();
-          if($.isFunction(settings.onBeforeHide)){
-            settings.onBeforeHide.call(element,function(){
-                module.hideNow();
-            });
-          } else {
-              module.hideNow();
-          }
-
+          settings.onBeforeHide.call(element, module.hideNow);
         },
 
         hideNow: function() {
             module.set.hidden();
             module.force.hidden();
-            settings.onHide.call(element);
+            settings.onHidden.call(element);
             settings.onComplete.call(element);
-            // module.repaint();
         },
 
         show: function(display) {
-          module.verbose('Showing element', display);
-          if(module.force.visible()) {
+          if(module.force.visible() && settings.onShow.call(element) !== false) {
+            module.verbose('Showing element', display);
             module.remove.hidden();
-            module.set.visible();
-            settings.onShow.call(element);
-            settings.onComplete.call(element);
-            // module.repaint();
+            settings.onBeforeShow.call(element, module.showNow);
           }
         },
 
+        showNow: function(){
+          module.set.visible();
+          settings.onVisible.call(element);
+          settings.onComplete.call(element);
+        },
+
         toggle: function() {
           if( module.is.visible() ) {
             module.hide();
@@ -963,7 +964,7 @@ $.fn.transition = function() {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1055,7 +1056,11 @@ $.fn.transition.settings = {
   onStart       : function() {},
   onComplete    : function() {},
   onShow        : function() {},
+  onBeforeShow  : function(callback) {callback.call(this)},
+  onVisible     : function() {},
   onHide        : function() {},
+  onHidden      : function() {},
+  onBeforeHide  : function(callback) {callback.call(this)},
 
   // whether timeout should be used to ensure callback fires in cases animationend does not
   useFailSafe   : true,

package/src/definitions/views/ad.less

@@ -271,7 +271,7 @@
     position: relative;
     background: @testBackground;
   }
-  .ui.test.ad:after {
+  .ui.test.ad::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -285,11 +285,11 @@
     font-weight: @testFontWeight;
   }
   & when (@variationAdMobile) {
-    .ui.mobile.test.ad:after {
+    .ui.mobile.test.ad::after {
       font-size: @testMobileFontSize;
     }
   }
-  .ui.test.ad[data-text]:after {
+  .ui.test.ad[data-text]::after {
     content: attr(data-text);
   }
 }

package/src/definitions/views/card.less

@@ -77,8 +77,8 @@
 }
 
 /* Clearing */
-.ui.cards:after,
-.ui.card:after {
+.ui.cards::after,
+.ui.card::after {
   display: block;
   content: ' ';
   height: 0;
@@ -157,8 +157,8 @@
   border-radius: @contentBorderRadius;
 }
 
-.ui.cards > .card > .content:after,
-.ui.card > .content:after {
+.ui.cards > .card > .content::after,
+.ui.card > .content::after {
   display: block;
   content: ' ';
   height: 0;
@@ -358,6 +358,28 @@
   }
 }
 
+& when (@variationCardBasic) {
+  /*--------------
+     Basic
+  ---------------*/
+  .ui.cards:not(.raised) > .basic.card:not(.raised),
+  .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised),
+  .ui.ui.ui.basic.card:not(.raised) {
+    box-shadow: none;
+    & > .buttons,
+      > .button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+  & when (@variationCardLink) {
+    .ui.ui.ui.ui.ui.basic.card:not(.raised):hover,
+    .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover {
+      box-shadow: none;
+    }
+  }
+}
+
 /*--------------
       Dimmer
 ---------------*/
@@ -473,7 +495,7 @@
     pointer-events: none;
     transition: all 0s linear;
   }
-  .ui.loading.card:before {
+  .ui.loading.card::before {
     position: absolute;
     content: '';
     top: 0;
@@ -484,7 +506,7 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
-  .ui.loading.card:after {
+  .ui.loading.card::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -537,7 +559,9 @@
     align-items: center;
     display: -webkit-box;
     display: -moz-box;
-    display: -ms-flexbox;
+    & when (@supportIE) {
+      display: -ms-flexbox;
+    }
     display: -webkit-flex;
     display: flex;
     width: 100%;
@@ -561,6 +585,7 @@
          Raised
   --------------------*/
 
+  .ui.cards > .raised.card,
   .ui.raised.cards > .card,
   .ui.raised.card {
     box-shadow: @raisedShadow;
@@ -573,6 +598,24 @@
       box-shadow: @raisedShadowHover;
     }
   }
+  & when (@variationCardBasic) {
+    .ui.basic.cards > .raised.card,
+    .ui.basic.raised.cards > .card,
+    .ui.raised.cards > .basic.card,
+    .ui.basic.raised.card {
+      box-shadow: @basicRaisedShadow;
+    }
+    & when (@variationCardLink) {
+      .ui.basic.raised.cards a.card:hover,
+      .ui.link.cards .basic.raised.card:hover,
+      .ui.link.basic.cards .raised.card:hover,
+      .ui.link.basic.raised.cards .card:hover,
+      a.ui.basic.raised.card:hover,
+      .ui.link.basic.raised.card:hover {
+        box-shadow: @basicRaisedShadowHover;
+      }
+    }
+  }
 }
 
 & when (@variationCardCentered) {
@@ -636,6 +679,7 @@
     @h: @colors[@@color][hover];
     @l: @colors[@@color][light];
     @lh: @colors[@@color][lightHover];
+    @isVeryDark: @colors[@@color][isVeryDark];
 
     .ui.@{color}.cards > .card,
     .ui.cards > .@{color}.card,
@@ -645,14 +689,49 @@
             0 @coloredShadowDistance 0 0 @c,
             @shadowBoxShadow
       ;
-      &:hover {
-      box-shadow:
-            @borderShadow,
-            0 @coloredShadowDistance 0 0 @h,
-            @shadowHoverBoxShadow
+    }
+    & when (@variationCardLink) {
+      .ui.cards a.@{color}.card:hover,
+      .ui.@{color}.cards a.card:hover,
+      .ui.link.@{color}.cards .card:not(.icon):hover,
+      .ui.link.cards .@{color}.card:not(.icon):hover,
+      a.ui.@{color}.card:hover,
+      .ui.link.@{color}.card:hover {
+        box-shadow:
+              @borderShadow,
+              0 @coloredShadowDistance 0 0 @h,
+              @shadowHoverBoxShadow
       ;
       }
     }
+    & when (@variationCardBasic) {
+      .ui.cards > .basic.@{color}.card,
+      .ui.basic.@{color}.cards > .card,
+      .ui.basic.cards > .@{color}.card,
+      .ui.basic.@{color}.card {
+        background: @l;
+        &  when (@isVeryDark) {
+          & .header,
+            .content,
+            .meta,
+            .description {
+            color: @white;
+          }
+        }
+      }
+      & when (@variationCardLink) {
+        .ui.basic.cards a.@{color}.card:hover,
+        .ui.cards a.basic.@{color}.card:hover,
+        .ui.basic.@{color}.cards a.card:hover,
+        .ui.link.cards .basic.@{color}.card:not(.icon):hover,
+        .ui.link.basic.@{color}.cards .card:not(.icon):hover,
+        .ui.link.basic.cards .@{color}.card:not(.icon):hover,
+        a.ui.basic.@{color}.card:hover,
+        .ui.link.basic.@{color}.card:hover {
+          background: @lh;
+        }
+      }
+    }
     & when (@variationCardInverted) {
       .ui.inverted.@{color}.cards > .card,
       .ui.inverted.cards > .@{color}.card,
@@ -662,14 +741,41 @@
               0 @coloredShadowDistance 0 0 @l,
               0 0 0 @borderWidth @solidWhiteBorderColor
         ;
-        &:hover {
-        box-shadow:
-              0 @shadowDistance 3px 0 @solidWhiteBorderColor,
-              0 @coloredShadowDistance 0 0 @lh,
-              0 0 0 @borderWidth @solidWhiteBorderColor
+      }
+      & when (@variationCardLink) {
+        .ui.inverted.cards a.@{color}.card:hover,
+        .ui.inverted.@{color}.cards a.card:hover,
+        .ui.link.inverted.@{color}.cards .card:not(.icon):hover,
+        .ui.link.inverted.cards .@{color}.card:not(.icon):hover,
+        a.ui.inverted.@{color}.card:hover,
+        .ui.link.inverted.@{color}.card:hover {
+          box-shadow:
+                  0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+                  0 @coloredShadowDistance 0 0 @lh,
+                  0 0 0 @borderWidth @solidWhiteBorderColor
         ;
         }
       }
+      & when (@variationCardBasic) {
+        .ui.inverted.cards > .basic.@{color}.card,
+        .ui.basic.inverted.@{color}.cards > .card,
+        .ui.basic.inverted.cards > .@{color}.card,
+        .ui.basic.inverted.@{color}.card {
+          background: @c;
+        }
+        & when (@variationCardLink) {
+          .ui.inverted.cards a.basic.@{color}.card:hover,
+          .ui.basic.inverted.cards a.@{color}.card:hover,
+          .ui.basic.inverted.@{color}.cards a.card:hover,
+          .ui.link.inverted.cards .basic.@{color}.card:not(.icon):hover,
+          .ui.link.basic.inverted.@{color}.cards .card:not(.icon):hover,
+          .ui.link.basic.inverted.cards .@{color}.card:not(.icon):hover,
+          a.ui.basic.inverted.@{color}.card:hover,
+          .ui.link.basic.inverted.@{color}.card:hover {
+            background: @h;
+          }
+        }
+      }
     }
   })
 }
@@ -1083,7 +1189,7 @@
     .ui.inverted.loading.card {
       color: @invertedLoaderLineColor;
     }
-    .ui.inverted.loading.card:before {
+    .ui.inverted.loading.card::before {
       background: @loaderInvertedDimmerColor;
     }
   }

package/src/definitions/views/comment.less

@@ -66,7 +66,7 @@
   margin: @nestedCommentsMargin;
   padding: @nestedCommentsPadding;
 }
-.ui.comments .comment > .comments:before{
+.ui.comments .comment > .comments::before{
   position: absolute;
   top: 0;
   left: 0;

package/src/definitions/views/feed.less

@@ -226,7 +226,7 @@
     position: relative;
     margin-left: @metadataElementSpacing;
   }
-  .ui.feed > .event > .content .meta > *:after {
+  .ui.feed > .event > .content .meta > *::after {
     content: @metadataDivider;
     color: @metadataDividerColor;
     top: 0;

package/src/definitions/views/item.less

@@ -62,7 +62,7 @@
       Item
 ---------------*/
 
-.ui.items > .item:after {
+.ui.items > .item::after {
   display: block;
   content: ' ';
   height: 0;
@@ -123,7 +123,7 @@
   border: @contentBorder;
   border-radius: @contentBorderRadius;
 }
-.ui.items > .item > .content:after {
+.ui.items > .item > .content::after {
   display: block;
   content: ' ';
   height: 0;
@@ -341,7 +341,7 @@
     }
   }
 
-  .ui.items > .item .extra:after {
+  .ui.items > .item .extra::after {
     display: block;
     content: ' ';
     height: 0;

package/src/definitions/views/statistic.less

@@ -65,7 +65,7 @@
 }
 
 /* Clearing */
-.ui.statistics:after {
+.ui.statistics::after {
   display: block;
   content: ' ';
   height: 0;

package/src/semantic.less

@@ -57,6 +57,7 @@
 & { @import "definitions/modules/dimmer"; }
 & { @import "definitions/modules/dropdown"; }
 & { @import "definitions/modules/embed"; }
+& { @import "definitions/modules/flyout"; }
 & { @import "definitions/modules/modal"; }
 & { @import "definitions/modules/nag"; }
 & { @import "definitions/modules/popup"; }

package/src/theme.config.example

@@ -56,6 +56,7 @@
 @dimmer     : 'default';
 @dropdown   : 'default';
 @embed      : 'default';
+@flyout     : 'default';
 @modal      : 'default';
 @nag        : 'default';
 @popup      : 'default';

package/src/theme.less

@@ -60,8 +60,19 @@
        Fonts
 -------------------*/
 
-.loadFonts() when (@importGoogleFonts) {
-  @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+.loadFonts() {
+  & when (@importGoogleFonts) {
+    @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+  }
+  & when (@importFonts) and not (@fontName = ''){
+    each(@fonts, {
+      @font-face {
+        each(@value,{
+            @{key}: @value;
+        });
+      }
+    })
+  }
 }
 
 /*------------------

package/src/themes/amazon/globals/site.variables

@@ -9,6 +9,7 @@
 @fontSize : 13px;
 @fontName : 'Arial';
 @importGoogleFonts : false;
+@importFonts: false;
 
 @h1: 2.25em;