fomantic-ui 2.9.0-beta.9 → 2.9.0-beta.90

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.less

@@ -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/sidebar.less

@@ -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 {
@@ -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);
+        }
       }
     }
   }

package/src/definitions/modules/slider.less

@@ -291,46 +291,47 @@
 /*--------------
      Colors
 ---------------*/
+& when not (@variationSliderColors = false) {
+   each(@variationSliderColors, {
+     @color: @value;
+     @c: @colors[@@color][color];
+     @l: @colors[@@color][light];
+     @h: @colors[@@color][hover];
+     @lh: @colors[@@color][lightHover];
+
+     /* Standard */
+     .ui.@{color}.slider .inner .track-fill {
+       background-color: @c;
+     }
+     & when (@variationSliderInverted) {
+       .ui.@{color}.inverted.slider .inner .track-fill {
+         background-color: @l;
+       }
+     }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  /* Standard */
-  .ui.@{color}.slider .inner .track-fill {
-    background-color: @c;
-  }
-  & when (@variationSliderInverted) {
-    .ui.@{color}.inverted.slider .inner .track-fill {
-      background-color: @l;
-    }
-  }
-
-  & when (@variationSliderBasic) {
-    /* Basic */
-    .ui.@{color}.slider.basic .inner .thumb {
-      background-color: @c;
-    }
-    .ui.@{color}.slider.basic .inner .thumb:hover,
-    .ui.@{color}.slider.basic:focus .inner .thumb {
-      background-color: @h;
-    }
-    & when (@variationSliderInverted) {
-      /* Basic Inverted */
-      .ui.@{color}.inverted.slider.basic .inner .thumb {
-        background-color: @l;
-      }
-      .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
-      .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
-        background-color: @lh;
-      }
-    }
-  }
+     & when (@variationSliderBasic) {
+       /* Basic */
+       .ui.@{color}.slider.basic .inner .thumb {
+         background-color: @c;
+       }
+       .ui.@{color}.slider.basic .inner .thumb:hover,
+       .ui.@{color}.slider.basic:focus .inner .thumb {
+         background-color: @h;
+       }
+       & when (@variationSliderInverted) {
+         /* Basic Inverted */
+         .ui.@{color}.inverted.slider.basic .inner .thumb {
+           background-color: @l;
+         }
+         .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
+         .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
+           background-color: @lh;
+         }
+       }
+     }
 
-})
+   })
+}
 
 & when (@variationSliderBasic) {
   /*--------------

package/src/definitions/modules/toast.js

@@ -229,7 +229,8 @@ $.fn.toast = function(parameters) {
                   html: icon + text,
                   class: className.button + ' ' + cls,
                   click: function () {
-                    if (click.call(element, $module) === false) {
+                    var button = $(this);
+                    if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
                       return;
                     }
                     module.close();
@@ -443,7 +444,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) : '')).length > 0);
+            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);
           },
           toast: function(){
             return !!module.get.toast();
@@ -458,7 +459,7 @@ $.fn.toast = function(parameters) {
 
         get: {
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')'))[0]);
           },
           toastBox: function() {
             return $toastBox || null;

package/src/definitions/modules/toast.less

@@ -103,6 +103,11 @@
       bottom: @toastContainerDistance;
     }
   }
+  &.centered when (@variationToastCentered) {
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+  }
   & .visible.toast-box,
   .animating.toast-box,
   .toast-box {
@@ -598,24 +603,25 @@
 /*--------------
      Colors
 -------------- */
+& when not (@variationToastColors = false) {
+  each(@variationToastColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.@{color}.toast {
-    background-color: @c;
-    color: @toastTextColor;
-  }
-  & when (@variationToastInverted) {
-    .ui.inverted.@{color}.toast,
-    .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
-      background-color: @l;
-      color: @toastInvertedTextColor;
+    .ui.@{color}.toast {
+      background-color: @c;
+      color: @toastTextColor;
     }
-  }
-})
+    & when (@variationToastInverted) {
+      .ui.inverted.@{color}.toast,
+      .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
+        background-color: @l;
+        color: @toastInvertedTextColor;
+      }
+    }
+  })
+}
 
 & when (@variationToastInverted) {
   .ui.inverted.toast {