fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

package/src/definitions/modules/rating.less

@@ -69,13 +69,20 @@
   color: @activeColor;
 }
 
-/* Partially Active Icon */
-.ui.rating .icon.partial.active {
-  background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
-  background-clip: text;
-  color: transparent;
-}
+& when (@variationRatingPartial) {
+  /* Partially Active Icon */
+  .ui.rating .icon.partial.active {
+    background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
+  }
 
+  /* central override for colors */
+  .ui.ui.rating .icon.partial.active {
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: none;
+  }
+}
 /* Selected Icon */
 .ui.rating .icon.selected,
 .ui.rating .icon.selected.active,
@@ -88,42 +95,42 @@
 /*--------------
      Colors
 -------------- */
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.rating .active.icon {
-    color: @l;
-    text-shadow: 0px -@shadowWidth 0px @c,
-                 -@shadowWidth 0px 0px @c,
-                 0px @shadowWidth 0px @c,
-                 @shadowWidth 0px 0px @c;
-  }
-  .ui.@{color}.rating .icon.selected,
-  .ui.@{color}.rating .icon.selected.active,
-  .ui.@{color}.rating .icon.selected.partial.active {
-    background: inherit;
-    color: @lh;
-    text-shadow: 0px -@shadowWidth 0px @h,
-                 -@shadowWidth 0px 0px @h,
-                 0px @shadowWidth 0px @h,
-                 @shadowWidth 0px 0px @h;
-
-    -webkit-text-stroke: unset;
-    background-clip: unset;
-  }
-  .ui.@{color}.rating .icon.partial.active {
-    background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
-    text-shadow: none;
-    -webkit-text-stroke: @c 0.78px;
-    background-clip: text;
-    color: transparent;
-  }
-})
+& when not (@variationRatingColors = false) {
+  each(@variationRatingColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @h: @colors[@@color][hover];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.rating .active.icon {
+      color: @l;
+      text-shadow: 0px -@shadowWidth 0px @c,
+      -@shadowWidth 0px 0px @c,
+      0px @shadowWidth 0px @c,
+      @shadowWidth 0px 0px @c;
+    }
+    .ui.@{color}.rating .icon.selected,
+    .ui.@{color}.rating .icon.selected.active,
+    .ui.@{color}.rating .icon.selected.partial.active {
+      background: inherit;
+      color: @lh;
+      text-shadow: 0px -@shadowWidth 0px @h,
+      -@shadowWidth 0px 0px @h,
+      0px @shadowWidth 0px @h,
+      @shadowWidth 0px 0px @h;
+
+      -webkit-text-stroke: unset;
+      background-clip: unset;
+    }
+    & when (@variationRatingPartial) {
+      .ui.@{color}.rating .icon.partial.active {
+        background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
+        -webkit-text-stroke: @c 0.78px;
+      }
+    }
+  })
+}
 
 
 /*******************************

package/src/definitions/modules/search.js

@@ -367,20 +367,36 @@ $.fn.search = function(parameters) {
                 urlData           : {
                   query : searchTerm
                 },
-                onSuccess         : function(response) {
+              },
+              apiCallbacks = {
+                onSuccess         : function(response, $module, xhr) {
                   module.parse.response.call(element, response, searchTerm);
                   callback();
+                  if(settings.apiSettings && typeof settings.apiSettings.onSuccess === 'function') {
+                    settings.apiSettings.onSuccess.call(this, response, $module, xhr);
+                  }
                 },
-                onFailure         : function() {
+                onFailure         : function(response, $module, xhr) {
                   module.displayMessage(error.serverError);
                   callback();
+                  if(settings.apiSettings && typeof settings.apiSettings.onFailure === 'function') {
+                    settings.apiSettings.onFailure.call(this, response, $module, xhr);
+                  }
                 },
-                onAbort : function(response) {
+                onAbort : function(status, $module, xhr) {
+                  if(settings.apiSettings && typeof settings.apiSettings.onAbort === 'function') {
+                    settings.apiSettings.onAbort.call(this, status, $module, xhr);
+                  }
                 },
-                onError           : module.error
+                onError           : function(errorMessage, $module, xhr){
+                  module.error();
+                  if(settings.apiSettings && typeof settings.apiSettings.onError === 'function') {
+                    settings.apiSettings.onError.call(this, errorMessage, $module, xhr);
+                  }
+                }
               }
             ;
-            $.extend(true, apiSettings, settings.apiSettings);
+            $.extend(true, apiSettings, settings.apiSettings, apiCallbacks);
             module.verbose('Setting up API request', apiSettings);
             $module.api(apiSettings);
           }
@@ -403,7 +419,7 @@ $.fn.search = function(parameters) {
             return $results.hasClass(className.animating);
           },
           chrome: function() {
-            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+            return !!window.chrome && !window.StyleMedia;
           },
           hidden: function() {
             return $results.hasClass(className.hidden);

package/src/definitions/modules/search.less

@@ -200,7 +200,7 @@
          Loading
   ---------------------*/
 
-  .ui.loading.search .input > i.icon:before {
+  .ui.loading.search .input > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -213,7 +213,7 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.loading.search .input > i.icon:after {
+  .ui.loading.search .input > i.icon::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -393,7 +393,7 @@
 & when (@variationSearchScrolling),
   (@variationSearchShort),
   (@variationSearchLong) {
-  
+
   /*-------------------
        Scrolling
   --------------------*/
@@ -437,16 +437,20 @@
     .ui.search.short > .results {
       max-height: @scrollingMobileMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingMobileMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -455,16 +459,20 @@
     .ui.search.short > .results {
       max-height: @scrollingTabletMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingTabletMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -473,16 +481,20 @@
     .ui.search.short > .results {
       max-height: @scrollingComputerMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingComputerMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -491,16 +503,20 @@
     .ui.search.short > .results {
       max-height: @scrollingWidescreenMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingWidescreenMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 3;
+      }
     }
   }
 }

package/src/definitions/modules/shape.js

@@ -126,7 +126,7 @@ $.fn.shape = function(parameters) {
             module.reset();
             module.set.active();
           };
-          settings.beforeChange.call($nextSide[0]);
+          settings.onBeforeChange.call($nextSide[0]);
           if(module.get.transitionEvent()) {
             module.verbose('Starting CSS animation');
             $module
@@ -813,7 +813,7 @@ $.fn.shape.settings = {
   height: 'initial',
 
   // callback occurs on side change
-  beforeChange : function() {},
+  onBeforeChange : function() {},
   onChange     : function() {},
 
   // allow animation to same side

package/src/definitions/modules/sidebar.js

@@ -66,7 +66,7 @@ $.fn.sidebar = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $sidebars       = $module.children(selector.sidebar),
         $fixed          = $context.children(selector.fixed),
@@ -118,7 +118,7 @@ $.fn.sidebar = function(parameters) {
 
         create: {
           id: 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);
           }
@@ -261,7 +261,7 @@ $.fn.sidebar = function(parameters) {
               if(direction === 'left' || direction === 'right') {
                 module.debug('Adding CSS rules for animation distance', width);
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + '           transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + ' }'
@@ -269,7 +269,7 @@ $.fn.sidebar = function(parameters) {
               }
               else if(direction === 'top' || direction == 'bottom') {
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + '           transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + ' }'
@@ -277,8 +277,8 @@ $.fn.sidebar = function(parameters) {
               }
               /* opposite sides visible forces content overlay */
               style += ''
-                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
-                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
+                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher::after,'
+                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher::after {'
                 + '   -webkit-transform: translate3d(0, 0, 0);'
                 + '           transform: translate3d(0, 0, 0);'
                 + ' }'
@@ -294,7 +294,7 @@ $.fn.sidebar = function(parameters) {
 
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = $(settings.context);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);
@@ -371,6 +371,10 @@ $.fn.sidebar = function(parameters) {
             : function(){}
           ;
           if(module.is.hidden()) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.refreshSidebars();
             if(settings.overlay)  {
               module.error(error.overlay);
@@ -395,10 +399,9 @@ $.fn.sidebar = function(parameters) {
             }
             module.pushPage(function() {
               callback.call(element);
-              settings.onShow.call(element);
+              settings.onVisible.call(element);
             });
             settings.onChange.call(element);
-            settings.onVisible.call(element);
           }
           else {
             module.debug('Sidebar is already visible');
@@ -410,7 +413,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.visible() || module.is.animating()) {
+          if((module.is.visible() || module.is.animating()) && settings.onHide.call(element) !== false) {
             module.debug('Hiding sidebar', callback);
             module.refreshSidebars();
             module.pullPage(function() {
@@ -418,7 +421,6 @@ $.fn.sidebar = function(parameters) {
               settings.onHidden.call(element);
             });
             settings.onChange.call(element);
-            settings.onHide.call(element);
           }
         },
 

package/src/definitions/modules/sidebar.less

@@ -116,7 +116,7 @@ body.pushable {
 }
 .pushable:not(body) > .ui.sidebar,
 .pushable:not(body) > .fixed,
-.pushable:not(body) > .pusher:after {
+.pushable:not(body) > .pusher::after {
   position: absolute;
 }
 
@@ -141,13 +141,15 @@ body.pushable {
 .pushable > .pusher {
   position: relative;
   backface-visibility: hidden;
-  overflow: hidden;
   min-height: 100%;
   transition: transform @duration @easing;
   z-index: @middleLayer;
 
   /* Pusher should inherit background from context */
   background: inherit;
+  &:not(.overflowing) {
+    overflow: hidden;
+  }
 }
 
 body.pushable > .pusher {
@@ -158,7 +160,7 @@ body.pushable > .pusher {
      Dimmer
 ---------------*/
 
-.pushable > .pusher:after {
+.pushable > .pusher::after {
   position: fixed;
   top: 0;
   right: 0;
@@ -187,7 +189,7 @@ body.pushable > .pusher {
      Dimmed
 ---------------*/
 
-.pushable > .pusher.dimmed:after {
+.pushable > .pusher.dimmed::after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;
@@ -281,9 +283,11 @@ body.pushable > .pusher {
       width: @thinWidth;
     }
 
-    .ui[class*="very thin"].left.sidebar,
-    .ui[class*="very thin"].right.sidebar {
-      width: @veryThinWidth;
+    & when (@variationSidebarVeryThin) {
+      .ui[class*="very thin"].left.sidebar,
+      .ui[class*="very thin"].right.sidebar {
+        width: @veryThinWidth;
+      }
     }
   }
 
@@ -298,9 +302,11 @@ body.pushable > .pusher {
       width: @wideWidth;
     }
 
-    .ui[class*="very wide"].left.sidebar,
-    .ui[class*="very wide"].right.sidebar {
-      width: @veryWideWidth;
+    & when (@variationSidebarVeryWide) {
+      .ui[class*="very wide"].left.sidebar,
+      .ui[class*="very wide"].right.sidebar {
+        width: @veryWideWidth;
+      }
     }
   }
 
@@ -312,9 +318,11 @@ body.pushable > .pusher {
         transform: translate3d(@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -324,9 +332,11 @@ body.pushable > .pusher {
         transform: translate3d(@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryWideWidth, 0, 0);
+        }
       }
     }
   }
@@ -339,9 +349,11 @@ body.pushable > .pusher {
         transform: translate3d(-@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -351,9 +363,11 @@ body.pushable > .pusher {
         transform: translate3d(-@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryWideWidth, 0, 0);
+        }
       }
     }
   }