fomantic-ui 2.9.0-beta.32 → 2.9.0-beta.321

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%);
@@ -376,6 +377,8 @@
 
 /* Attached */
 @attachedOffset: -1px;
+@topAttachedOffset: 0;
+@bottomAttachedOffset: @attachedOffset;
 @attachedBoxShadow: 0 0 0 1px @borderColor;
 @attachedHorizontalPadding: 0.75em;
 @attachedZIndex: auto;
@@ -402,3 +405,6 @@
 /* Circular */
 @circularBorderRadius: 10em;
 @circularIconWidth: 1em;
+
+/* Spaced */
+@spacedMargin: 1em;

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

@@ -9,6 +9,7 @@
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
 @maxWidth: 100%;
+@wideRatio: 1.2;
 
 /* Devices */
 @mobileMinimumGutter: 0;
@@ -17,14 +18,17 @@
 
 @tabletMinimumGutter: (@emSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
+@tabletWideWidth: (@tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @tabletGutter: auto;
 
 @computerMinimumGutter: (@emSize  * 1.5);
 @computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
+@computerWideWidth: (@computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @computerGutter: auto;
 
 @largeMonitorMinimumGutter: (@emSize  * 2);
 @largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
+@largeMonitorWideWidth: (@largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @largeMonitorGutter: auto;
 
 /* Coupling (Add Negative Margin to container size) */
@@ -47,6 +51,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
 --------------------*/

package/src/themes/default/elements/divider.overrides

@@ -3,16 +3,16 @@
 *******************************/
 
 
-.ui.horizontal.divider:before,
-.ui.horizontal.divider:after {
+.ui.horizontal.divider::before,
+.ui.horizontal.divider::after {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
 
 @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
-  .ui.stackable.grid .ui.vertical.divider:before,
-  .ui.grid .stackable.row .ui.vertical.divider:before,
-  .ui.stackable.grid .ui.vertical.divider:after,
-  .ui.grid .stackable.row .ui.vertical.divider:after {
+  .ui.stackable.grid .ui.vertical.divider::before,
+  .ui.grid .stackable.row .ui.vertical.divider::before,
+  .ui.stackable.grid .ui.vertical.divider::after,
+  .ui.grid .stackable.row .ui.vertical.divider::after {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
   }
-}
+}