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

package/src/themes/default/modules/dropdown.variables

@@ -287,6 +287,9 @@
        States
 --------------------*/
 
+/* Addition */
+@additionZIndex: @hoveredZIndex + 1;
+
 /* Hovered */
 @hoveredItemBackground: @transparentBlack;
 @hoveredItemColor: @selectedTextColor;
@@ -345,7 +348,7 @@
 @upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
 @upwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
-@upwardMenuBorderRadius: @borderRadius @borderRadius 0 0;
+@upwardSelectionMenuBorderRadius: @borderRadius @borderRadius 0 0;
 @upwardSelectionHoverBoxShadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
 @upwardSelectionVisibleBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionActiveHoverBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
@@ -362,6 +365,9 @@
 /* Simple */
 @simpleTransitionDuration: @defaultDuration;
 @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
+@simpleUpwardMenuMargin: 1.5em;
+@simpleUpwardSelectionMenuMargin: 2.5em;
+@simpleUpwardItemMenuMargin: 2.8em;
 
 /* Floating */
 @floatingMenuDistance: 0.5em;
@@ -452,15 +458,6 @@
 @invertedInputHighlightColor: @invertedMutedTextColor;
 
 /* Multiple */
-/*@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.06);
-@invertedLabelBackgroundImage: none;
-@invertedLabelColor: rgba(255, 255, 255, 0.6);
-@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0.16) inset;
-
-@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.12);
-@invertedLabelHoverBackgroundImage: none;
-@invertedLabelHoverTextColor: rgba(255, 255, 255, 0.7);*/
-
 @invertedLabelBackgroundColor: rgba(255, 255, 255, 0.7);
 @invertedLabelBackgroundImage: none;
 @invertedLabelColor: rgba(0, 0, 0, 1);

package/src/themes/default/modules/flyout.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

package/src/themes/default/modules/flyout.variables

@@ -0,0 +1,100 @@
+/*******************************
+             Flyout
+*******************************/
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Animation */
+@perspective: 1500px;
+@duration: 500ms;
+@easing: @defaultEasing;
+
+/* Dimmer */
+@dimmerColor: rgba(0, 0, 0, 0.4);
+@dimmerTransition: all @duration;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredEndFilter: e("blur(5px) grayscale(0.7)");
+
+/* Color below page */
+@canvasBackground: @lightBlack;
+
+/* Shadow */
+@boxShadow: 0 0 20px @borderColor;
+@horizontalBoxShadow: @boxShadow;
+@verticalBoxShadow: @boxShadow;
+
+/* Layering */
+@bottomLayer: 1;
+@middleLayer: 2;
+@fixedLayer: 101;
+@topLayer: 102;
+@dimmerLayer: 1000;
+
+/* Actions */
+@actionBorder: 1px solid @borderColor;
+@actionBackground: @offWhite;
+@actionPadding: 1rem 1rem;
+@actionAlign: right;
+
+@buttonDistance: 0.75em;
+@buttonCenteredDistance: 0.5em;
+@buttonLeftDistance: @buttonCenteredDistance;
+
+/* Scrolling Content */
+@contentMinHeight: calc(100vh - 9.1rem);
+@scrollingContentMaxHeight: @contentMinHeight;
+@scrollingContentMaxHeightTopBottom: calc(80vh - 9.1rem);
+
+/* Close Icon */
+@closeOpacity: 0.8;
+@closeSize: 1.25em;
+@closeColor: @darkTextColor;
+
+@closeHitbox: 2.25rem;
+@closePadding: 0;
+@closeMargin: 0 0 0 0.25rem;
+@closeTop: 1.25rem;
+@closeRight: 1.5rem;
+
+/* Header */
+@headerMargin: 0;
+@headerVerticalPadding: 1.25rem;
+@headerHorizontalPadding: 1.5rem;
+@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
+@headerBackground: @white;
+@headerColor: @darkTextColor;
+@headerBoxShadow: none;
+@headerBorder: 1px solid @borderColor;
+
+/* Content */
+@contentFontSize: 1em;
+@contentPadding: 1.5rem;
+@contentLineHeight: 1.4;
+@contentBackground: @white;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Width */
+@veryThinWidth: 120px;
+@thinWidth: 200px;
+@width: 400px;
+@wideWidth: 600px;
+@veryWideWidth: 800px;
+
+/* Height */
+@height: 36px;
+
+/*-------------------
+      Inverted
+--------------------*/
+@invertedBackground: @fullBlack;
+@invertedCloseColor: @white;
+@invertedHeaderColor: @white;
+@invertedActionBackground: #191A1B;
+@invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
+@invertedActionColor: @white;

package/src/themes/default/modules/modal.variables

@@ -14,6 +14,7 @@
 
 /* Close Icon */
 @closeOpacity: 0.8;
+@closeOpacityDimmed: 0.1;
 @closeSize: 1.25em;
 @closeColor: @white;
 
@@ -23,6 +24,12 @@
 @closePadding: @closeHitBoxOffset 0 0 0;
 @closeTop: -(@closeDistance + @closeHitbox);
 @closeRight: -(@closeDistance + @closeHitbox);
+@closeShadow:
+  -1px -1px 2px rgba(0, 0, 0, 0.3),
+  1px -1px 2px rgba(0, 0, 0, 0.3),
+  -1px 2px 2px rgba(0, 0, 0, 0.3),
+  1px 2px 2px rgba(0, 0, 0, 0.3)
+;
 
 /* Header */
 @headerMargin: 0;
@@ -41,7 +48,7 @@
 @contentFontSize: 1em;
 @contentPadding: 1.5rem;
 @contentLineHeight: 1.4;
-@contentBackground: #FFFFFF;
+@contentBackground: @white;
 
 /* Image / Description */
 @imageWidth: '';
@@ -61,6 +68,7 @@
 
 @buttonDistance: 0.75em;
 @buttonCenteredDistance: 0.5em;
+@buttonLeftDistance: @buttonCenteredDistance;
 
 /* Inner Close Position (Tablet/Mobile) */
 @innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@@ -241,7 +249,7 @@
 /*-------------------
       Inverted
 --------------------*/
-@invertedBackground: rgba(0,0,0,.9);
+@invertedBackground: @fullBlack;
 @invertedCloseColor: @white;
 @invertedHeaderColor: @white;
 @invertedHeaderBackgroundColor: @darkTextColor;
@@ -249,3 +257,9 @@
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;
 @invertedDimmerCloseColor: rgba(0,0,0,.85);
+@invertedCloseShadow:
+  -1px -1px 2px rgba(255, 255, 255, 0.3),
+  1px -1px 2px rgba(255, 255, 255, 0.3),
+  -1px 2px 2px rgba(255, 255, 255, 0.3),
+  1px 2px 2px rgba(255, 255, 255, 0.3)
+;

package/src/themes/default/modules/popup.variables

@@ -88,8 +88,6 @@
 @tooltipInvertedColor: @invertedColor;
 @tooltipInvertedBorder: @invertedBorder;
 @tooltipInvertedBoxShadow: @invertedBoxShadow;
-@tooltipInvertedHeaderBackground: @invertedHeaderBackground;
-@tooltipInvertedHeaderColor: @invertedHeaderColor;
 
 /* Arrow */
 @tooltipArrowVerticalOffset: -@2px;

package/src/themes/default/modules/sidebar.variables

@@ -13,7 +13,10 @@
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
-@dimmerTransition: opacity @duration;
+@dimmerTransition: all @duration;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredEndFilter: e("blur(5px) grayscale(0.7)");
 
 /* Color below page */
 @canvasBackground: @lightBlack;

package/src/themes/default/modules/toast.variables

@@ -58,6 +58,9 @@
 @toastIconCenteredAdjustment: 1.2em;
 @toastImageCenteredAdjustment: 2em;
 
+@toastImageMiniImageAdjustment: e(%("calc(%d + %d)", @inputVerticalPadding, @toastMiniImageHeight));
+@toastImageMiniImagePadding: 4.4em;
+
 /* Progressbar Colors */
 @toastInfoProgressColor: darken(@toastInfoColor,15);
 @toastWarningProgressColor: darken(@toastWarningColor,15);

package/src/themes/default/views/card.variables

@@ -188,6 +188,14 @@
   @floatingShadowHover
 ;
 
+/* Basic Raised */
+@basicRaisedShadow:
+  @floatingShadow
+;
+@basicRaisedShadowHover:
+  @floatingShadowHover
+;
+
 /* Card Count */
 @wideCardSpacing: 1em;
 @cardSpacing: 0.75em;