fomantic-ui 2.9.0-beta.84 → 2.9.0-beta.88

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 {

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

@@ -603,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 {

package/src/definitions/views/card.less

@@ -629,49 +629,50 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors,{
-  @color: replace(@key,'@','');
-  @c: @colors[@@color][color];
-  @h: @colors[@@color][hover];
-  @l: @colors[@@color][light];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.cards > .card,
-  .ui.cards > .@{color}.card,
-  .ui.@{color}.card {
-    box-shadow:
+& when not (@variationCardColors = false) {
+  each(@variationCardColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @h: @colors[@@color][hover];
+    @l: @colors[@@color][light];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.cards > .card,
+    .ui.cards > .@{color}.card,
+    .ui.@{color}.card {
+      box-shadow:
             @borderShadow,
             0 @coloredShadowDistance 0 0 @c,
             @shadowBoxShadow
-  ;
-    &:hover {
-    box-shadow:
+      ;
+      &:hover {
+      box-shadow:
             @borderShadow,
             0 @coloredShadowDistance 0 0 @h,
             @shadowHoverBoxShadow
-    ;
+      ;
+      }
     }
-  }
-  & when (@variationCardInverted) {
-    .ui.inverted.@{color}.cards > .card,
-    .ui.inverted.cards > .@{color}.card,
-    .ui.inverted.@{color}.card {
-      box-shadow:
+    & when (@variationCardInverted) {
+      .ui.inverted.@{color}.cards > .card,
+      .ui.inverted.cards > .@{color}.card,
+      .ui.inverted.@{color}.card {
+        box-shadow:
               0 @shadowDistance 3px 0 @solidWhiteBorderColor,
               0 @coloredShadowDistance 0 0 @l,
               0 0 0 @borderWidth @solidWhiteBorderColor
-    ;
-      &:hover {
-      box-shadow:
+        ;
+        &:hover {
+        box-shadow:
               0 @shadowDistance 3px 0 @solidWhiteBorderColor,
               0 @coloredShadowDistance 0 0 @lh,
               0 0 0 @borderWidth @solidWhiteBorderColor
-      ;
+        ;
+        }
       }
     }
-  }
-})
+  })
+}
 
 & when (@variationCardEqualWidth) {
   /*--------------

package/src/definitions/views/statistic.less

@@ -324,25 +324,26 @@
 /*--------------
      Colors
 ---------------*/
-
-each(@colors,{
-  @color: replace(@key,'@','');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.@{color}.statistics .statistic > .value,
-  .ui.statistics .@{color}.statistic > .value,
-  .ui.@{color}.statistic > .value {
-    color: @c;
-  }
-  & when (@variationStatisticInverted) {
-    .ui.inverted.@{color}.statistics .statistic > .value,
-    .ui.statistics .inverted.@{color}.statistic > .value,
-    .ui.inverted.@{color}.statistic > .value {
-      color: @l;
+& when not (@variationStatisticColors = false) {
+  each(@variationStatisticColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.@{color}.statistics .statistic > .value,
+    .ui.statistics .@{color}.statistic > .value,
+    .ui.@{color}.statistic > .value {
+      color: @c;
     }
-  }
-})
+    & when (@variationStatisticInverted) {
+      .ui.inverted.@{color}.statistics .statistic > .value,
+      .ui.statistics .inverted.@{color}.statistic > .value,
+      .ui.inverted.@{color}.statistic > .value {
+        color: @l;
+      }
+    }
+  })
+}
 
 & when (@variationStatisticFloated) {
   /*--------------

package/src/themes/default/globals/variation.variables

@@ -4,6 +4,9 @@
 
 /* General */
 @variationAllSizes: mini, tiny, small, large, big, huge, massive;
+@variationAllColors: primary, secondary, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black;
+@variationAllStates: error, info, success, warning;
+@variationAllConsequences: positive, negative, error, info, success, warning;
 
 /*******************************
            Elements
@@ -32,6 +35,7 @@
 @variationButtonGroups: true;
 @variationButtonStackable: true;
 @variationButtonSizes: @variationAllSizes;
+@variationButtonColors: @variationAllColors;
 
 /* Container */
 @variationContainerGrid: true;
@@ -52,6 +56,7 @@
 @variationDividerClearing: true;
 @variationDividerSection: true;
 @variationDividerSizes: @variationAllSizes;
+@variationDividerColors: @variationAllColors;
 
 /* Header */
 @variationHeaderDisabled: true;
@@ -67,6 +72,7 @@
 @variationHeaderAttached: true;
 @variationHeaderTags: h1, h2, h3, h4, h5, h6;
 @variationHeaderSizes: @variationAllSizes;
+@variationHeaderColors: @variationAllColors;
 
 /* Icon */
 @variationIconDeprecated: true;
@@ -88,6 +94,7 @@
 @variationIconCorner: true;
 @variationIconGroups: true;
 @variationIconSizes: @variationAllSizes;
+@variationIconColors: @variationAllColors;
 
 /* Image */
 @variationImageDisabled: true;
@@ -107,7 +114,7 @@
 /* Input */
 @variationInputDisabled: true;
 @variationInputInverted: true;
-@variationInputStates: true;
+@variationInputStates: @variationAllStates;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -131,6 +138,7 @@
 @variationLabelAttached: true;
 @variationLabelFluid: true;
 @variationLabelSizes: @variationAllSizes;
+@variationLabelColors: @variationAllColors;
 
 /* List */
 @variationListInverted: true;
@@ -162,6 +170,7 @@
 @variationLoaderInline: true;
 @variationLoaderElastic: true;
 @variationLoaderSizes: @variationAllSizes;
+@variationLoaderColors: @variationAllColors;
 
 /* Placeholder */
 @variationPlaceholderInverted: true;
@@ -210,6 +219,7 @@
 @variationSegmentAttached: true;
 @variationSegmentFitted: true;
 @variationSegmentSizes: @variationAllSizes;
+@variationSegmentColors: @variationAllColors;
 
 /* Step */
 @variationStepInverted: true;
@@ -225,8 +235,9 @@
 /* Text */
 @variationTextInverted: true;
 @variationTextDisabled: true;
-@variationTextStates: true;
+@variationTextStates: @variationAllStates;
 @variationTextSizes: @variationAllSizes;
+@variationTextColors: @variationAllColors;
 
 
 /*******************************
@@ -242,7 +253,7 @@
 @variationFormDisabled: true;
 @variationFormTransparent: true;
 @variationFormLoading: true;
-@variationFormStates: true;
+@variationFormStates: @variationAllStates;
 @variationFormRequired: true;
 @variationFormInline: true;
 @variationFormGrouped: true;
@@ -271,6 +282,7 @@
 @variationGridVeryCompact: true;
 @variationGridWide: true;
 @variationGridEqualWidth: true;
+@variationGridColors: @variationAllColors;
 
 /* Menu */
 @variationMenuInverted: true;
@@ -293,6 +305,7 @@
 @variationMenuIcon: true;
 @variationMenuEqualWidth: true;
 @variationMenuSizes: @variationAllSizes;
+@variationMenuColors: @variationAllColors;
 
 /* Message */
 @variationMessageInverted: true;
@@ -300,10 +313,11 @@
 @variationMessageAttached: true;
 @variationMessageIcon: true;
 @variationMessageFloating: true;
-@variationMessageConsequences: true;
+@variationMessageConsequences: @variationAllConsequences;
 @variationMessageCentered: true;
 @variationMessageRightAligned: true;
 @variationMessageSizes: @variationAllSizes;
+@variationMessageColors: @variationAllColors;
 
 /* Table */
 @variationTableInverted: true;
@@ -334,6 +348,7 @@
 @variationTableEqualWidth: true;
 @variationTableWide: true;
 @variationTableSizes: @variationAllSizes;
+@variationTableColors: @variationAllColors;
 
 
 /*******************************
@@ -377,6 +392,7 @@
 @variationCardLike: true;
 @variationCardEqualWidth: true;
 @variationCardSizes: @variationAllSizes;
+@variationCardColors: @variationAllColors;
 
 /* Comment */
 @variationCommentInverted: true;
@@ -388,6 +404,7 @@
 @variationCommentActions: true;
 @variationCommentReply: true;
 @variationCommentSizes: @variationAllSizes;
+@variationCommentColors: @variationAllColors;
 
 /* Feed */
 @variationFeedInverted: true;
@@ -424,6 +441,7 @@
 @variationStatisticHorizontal: true;
 @variationStatisticEqualWidth: true;
 @variationStatisticSizes: @variationAllSizes;
+@variationStatisticColors: @variationAllColors;
 
 
 /*******************************
@@ -451,6 +469,7 @@
 @variationCheckboxFitted: true;
 @variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
+@variationCheckboxColors: @variationAllColors;
 
 /* Dimmer */
 @variationDimmerInverted: true;
@@ -477,7 +496,7 @@
 @variationDropdownMultiple: true;
 @variationDropdownInline: true;
 @variationDropdownLoading: true;
-@variationDropdownStates: true;
+@variationDropdownStates: @variationAllStates;
 @variationDropdownClear: true;
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
@@ -511,6 +530,7 @@
 @variationNagFixed: true;
 @variationNagGroups: true;
 @variationNagSizes: @variationAllSizes;
+@variationNagColors: @variationAllColors;
 
 /* Popup */
 @variationPopupInverted: true;
@@ -528,6 +548,7 @@
 @variationPopupFlowing: true;
 @variationPopupFixed: true;
 @variationPopupSizes: @variationAllSizes;
+@variationPopupColors: @variationAllColors;
 
 /* Progress */
 @variationProgressInverted: true;
@@ -546,11 +567,13 @@
 @variationProgressSpeeds: true;
 @variationProgressRightAligned: true;
 @variationProgressSizes: @variationAllSizes;
+@variationProgressColors: @variationAllColors;
 
 /* Rating */
 @variationRatingDisabled: true;
 @variationRatingPartial: true;
 @variationRatingSizes: @variationAllSizes;
+@variationRatingColors: @variationAllColors;
 
 /* Search */
 @variationSearchDisabled: true;
@@ -596,6 +619,7 @@
 @variationSliderVertical: true;
 @variationSliderBasic: true;
 @variationSliderSizes: small, large, big;
+@variationSliderColors: @variationAllColors;
 
 /* Tab */
 @variationTabLoading: true;
@@ -625,6 +649,7 @@
 @variationToastAttached: true;
 @variationToastCompact: true;
 @variationToastCentered: true;
+@variationToastColors: @variationAllColors;
 
 /* Transition */
 @variationTransitionDisabled: true;

package/tasks/build/css.js

@@ -99,7 +99,12 @@ function pack(type, compress) {
     concatenatedCSS = compress ? filenames.concatenatedMinifiedCSS : filenames.concatenatedCSS;
   }
 
-  return gulp.src(output.uncompressed + '/**/' + globs.components + ignoredGlobs)
+  let src = output.uncompressed + '/**/' + globs.components + ignoredGlobs;
+  if (globs.components.indexOf('table') < 0 && globs.components.indexOf('tab') > 0) {
+    src = [src, '!' + output.uncompressed + '/**/table.css'];
+  }
+
+  return gulp.src(src)
     .pipe(plumber())
     .pipe(dedupe())
     .pipe(replace(assets.uncompressed, assets.packaged))