fomantic-ui 2.9.0-beta.2 → 2.9.0-beta.202

package/src/definitions/views/statistic.less

@@ -179,85 +179,86 @@
       Count
 ---------------*/
 
+& when (@variationStatisticEqualWidth) {
+  .ui.ten.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.ten.statistics .statistic {
+    min-width: @tenColumn;
+    margin: @itemMargin;
+  }
 
-.ui.ten.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.ten.statistics .statistic {
-  min-width: @tenColumn;
-  margin: @itemMargin;
-}
-
-.ui.nine.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.nine.statistics .statistic {
-  min-width: @nineColumn;
-  margin: @itemMargin;
-}
+  .ui.nine.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.nine.statistics .statistic {
+    min-width: @nineColumn;
+    margin: @itemMargin;
+  }
 
-.ui.eight.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.eight.statistics .statistic {
-  min-width: @eightColumn;
-  margin: @itemMargin;
-}
+  .ui.eight.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.eight.statistics .statistic {
+    min-width: @eightColumn;
+    margin: @itemMargin;
+  }
 
-.ui.seven.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.seven.statistics .statistic {
-  min-width: @sevenColumn;
-  margin: @itemMargin;
-}
+  .ui.seven.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.seven.statistics .statistic {
+    min-width: @sevenColumn;
+    margin: @itemMargin;
+  }
 
-.ui.six.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.six.statistics .statistic {
-  min-width: @sixColumn;
-  margin: @itemMargin;
-}
+  .ui.six.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.six.statistics .statistic {
+    min-width: @sixColumn;
+    margin: @itemMargin;
+  }
 
-.ui.five.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.five.statistics .statistic {
-  min-width: @fiveColumn;
-  margin: @itemMargin;
-}
+  .ui.five.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.five.statistics .statistic {
+    min-width: @fiveColumn;
+    margin: @itemMargin;
+  }
 
-.ui.four.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.four.statistics .statistic {
-  min-width: @fourColumn;
-  margin: @itemMargin;
-}
+  .ui.four.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.four.statistics .statistic {
+    min-width: @fourColumn;
+    margin: @itemMargin;
+  }
 
-.ui.three.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.three.statistics .statistic {
-  min-width: @threeColumn;
-  margin: @itemMargin;
-}
+  .ui.three.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.three.statistics .statistic {
+    min-width: @threeColumn;
+    margin: @itemMargin;
+  }
 
-.ui.two.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.two.statistics .statistic {
-  min-width: @twoColumn;
-  margin: @itemMargin;
-}
+  .ui.two.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.two.statistics .statistic {
+    min-width: @twoColumn;
+    margin: @itemMargin;
+  }
 
-.ui.one.statistics {
-  margin: @itemGroupMargin;
-}
-.ui.one.statistics .statistic {
-  min-width: @oneColumn;
-  margin: @itemMargin;
+  .ui.one.statistics {
+    margin: @itemGroupMargin;
+  }
+  .ui.one.statistics .statistic {
+    min-width: @oneColumn;
+    margin: @itemMargin;
+  }
 }
 
 
@@ -323,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/bookish/elements/header.overrides

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Karma);
+@import (css) url('https://fonts.googleapis.com/css2?family=Karma');
 
 h1.ui.header,
 .ui.huge.header {

package/src/themes/chubby/elements/button.overrides

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
+@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');
 
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {

package/src/themes/chubby/elements/header.overrides

@@ -2,4 +2,4 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
+@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');

package/src/themes/default/collections/menu.variables

@@ -481,3 +481,9 @@
 
 @invertedDropdownSelectedItemBackground: @strongTransparentWhite;
 @invertedDropdownSelectedItemColor: @invertedDropdownItemColor;
+
+/* Tabular */
+@invertedTabularBorderColor: @solidWhiteBorderColor;
+@invertedTabularBorder: @borderWidth solid @invertedTabularBorderColor;
+@invertedTabularActiveBackground: none @black;
+@invertedTabularHoveredTextColor: @invertedHoveredTextColor;

package/src/themes/default/collections/table.variables

@@ -42,6 +42,7 @@
 @headerBorder: 1px solid @internalBorderColor;
 @headerDivider: none;
 @headerBackground: @offWhite;
+@headerBackgroundHex: @offWhite;
 @headerAlign: inherit;
 @headerVerticalAlign: inherit;
 @headerColor: @textColor;
@@ -57,6 +58,7 @@
 @footerBorder: 1px solid @borderColor;
 @footerDivider: none;
 @footerBackground: @offWhite;
+@footerBackgroundHex: @offWhite;
 @footerAlign: inherit;
 @footerVerticalAlign: inherit;
 @footerColor: @textColor;
@@ -118,29 +120,39 @@
 @positiveBoxShadow: @stateMarkerWidth 0 0 @positiveBorderColor inset;
 @positiveBackgroundHover: darken(@positiveBackgroundColor, 3);
 @positiveColorHover: darken(@positiveColor, 3);
+@invertedPositiveColor: @positiveTextColor;
+@invertedPositiveBackgroundColor: @positiveBorderColor;
 
 /* Negative */
 @negativeColor: @negativeTextColor;
 @negativeBoxShadow: @stateMarkerWidth 0 0 @negativeBorderColor inset;
 @negativeBackgroundHover: darken(@negativeBackgroundColor, 3);
 @negativeColorHover: darken(@negativeColor, 3);
+@invertedNegativeColor: @negativeTextColor;
+@invertedNegativeBackgroundColor: @negativeBorderColor;
 
 /* Error */
 @errorColor: @errorTextColor;
 @errorBoxShadow: @stateMarkerWidth 0 0 @errorBorderColor inset;
 @errorBackgroundHover: darken(@errorBackgroundColor, 3);
 @errorColorHover: darken(@errorColor, 3);
+@invertedErrorColor: @errorTextColor;
+@invertedErrorBackgroundColor: @errorBorderColor;
 
 /* Warning */
 @warningColor: @warningTextColor;
 @warningBoxShadow: @stateMarkerWidth 0 0 @warningBorderColor inset;
 @warningBackgroundHover: darken(@warningBackgroundColor, 3);
 @warningColorHover: darken(@warningColor, 3);
+@invertedWarningColor: @warningTextColor;
+@invertedWarningBackgroundColor: #EEC97E;
 
 /* Active */
 @activeColor: @textColor;
 @activeBackgroundColor: #E0E0E0;
 @activeBoxShadow: @stateMarkerWidth 0 0 @activeColor inset;
+@invertedActiveColor: @textColor;
+@invertedActiveBackgroundColor: #A0A0A0;
 
 @activeBackgroundHover: #EFEFEF;
 @activeColorHover: @selectedTextColor;
@@ -212,9 +224,15 @@
 @invertedCellColor: @invertedTextColor;
 
 @invertedHeaderBackground: @veryStrongTransparentBlack;
+@invertedHeaderBackgroundHex: #252525;
 @invertedHeaderColor: @invertedTextColor;
 @invertedHeaderBorderColor: @invertedCellBorderColor;
 
+@invertedFooterBackground: @invertedHeaderBackground;
+@invertedFooterBackgroundHex: @invertedHeaderBackgroundHex;
+@invertedFooterColor: @invertedHeaderColor;
+@invertedFooterBorderColor: @invertedHeaderBorderColor;
+
 @invertedDefinitionColumnBackground: @subtleTransparentWhite;
 @invertedDefinitionColumnColor: @invertedSelectedTextColor;
 @invertedDefinitionColumnFontWeight: @bold;
@@ -243,6 +261,40 @@
 @veryCompactVerticalPadding: 0.4em;
 @veryCompactHorizontalPadding: 0.6em;
 
+/* Scrolling */
+@scrollingMobileMaxItems: 3;
+@scrollingTabletMaxItems: 4;
+@scrollingComputerMaxItems: 6;
+@scrollingWidescreenMaxItems: 8;
+
+@scrollingItemHeight: (@cellVerticalPadding * 2) + @lineHeight;
+@scrollingMobileMaxBodyHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
+@scrollingTabletMaxBodyHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
+@scrollingComputerMaxBodyHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
+@scrollingWidescreenMaxBodyHeight: (@scrollingItemHeight * @scrollingWidescreenMaxItems);
+
+/* Stuck */
+@stuckBackground: @background;
+@stuckHeaderBackground: @offWhite;
+@stuckFooterBackground: @stuckHeaderBackground;
+
+@invertedStuckBackground: @invertedBackground;
+@invertedStuckHeaderBackground: @invertedHeaderBackgroundHex;
+@invertedStuckFooterBackground: @invertedStuckHeaderBackground;
+
+@stuckZIndex: 800;
+
+@overflowingMobileMaxItems: 5;
+@overflowingTabletMaxItems: 6;
+@overflowingComputerMaxItems: 8;
+@overflowingWidescreenMaxItems: 10;
+
+@overflowingItemHeight: (@cellVerticalPadding * 2) + @lineHeight;
+@overflowingMobileMaxHeight: (@overflowingItemHeight * @overflowingMobileMaxItems);
+@overflowingTabletMaxHeight: (@overflowingItemHeight * @overflowingTabletMaxItems);
+@overflowingComputerMaxHeight: (@overflowingItemHeight * @overflowingComputerMaxItems);
+@overflowingWidescreenMaxHeight: (@overflowingItemHeight * @overflowingWidescreenMaxItems);
+
 
 /* Sizes */
 @small: 0.9em;

package/src/themes/default/elements/button.variables

@@ -253,7 +253,8 @@
 /*-------------
    Tertiary
 -------------*/
-@tertiaryLinePadding: 0.5em;
+@tertiaryVerticalPadding: 0.5em;
+@tertiaryHorizontalPadding: 0.5em;
 @tertiaryLineHeight: 0.2em;
 @tertiaryTextColor: @textColor;
 @tertiaryLineColor: lighten(@tertiaryTextColor, 20%);

package/src/themes/default/elements/container.variables

@@ -47,6 +47,14 @@
 @computerVeryRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @veryRelaxedGridGutterWidth));
 @largeMonitorVeryRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @veryRelaxedGridGutterWidth));
 
+/*-------------------
+       Scrolling
+--------------------*/
+@scrollingMobileMaxHeight: 15em;
+@scrollingTabletMaxHeight: 18em;
+@scrollingComputerMaxHeight: 24em;
+@scrollingWidescreenMaxHeight: 30em;
+
 /*-------------------
        Types
 --------------------*/