fomantic-ui 2.9.1-beta.9 → 2.9.2-beta.0

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

@@ -2,9 +2,9 @@
              Video
 *******************************/
 
-/*-------------------
+/* -------------------
        Element
---------------------*/
+-------------------- */
 
 /* Simple */
 @background: @lightGrey;
@@ -23,28 +23,24 @@
 @iconBackground: @veryStrongTransparentBlack;
 @iconSize: 6rem;
 @iconTransition:
-  opacity @transitionDuration @transitionEasing,
-  color @transitionDuration @transitionEasing
-;
+    opacity @transitionDuration @transitionEasing,
+    color @transitionDuration @transitionEasing;
 @iconColor: @white;
-@iconShadow:
-  0 2px 10px rgba(34, 36, 38, 0.2)
-;
+@iconShadow: 0 2px 10px rgba(34, 36, 38, 0.2);
 @iconZIndex: 10;
 
-/*-------------------
+/* -------------------
        States
---------------------*/
+-------------------- */
 
 /* Hover */
 @hoverPlaceholderBackground: @placeholderBackground;
 @hoverPlaceholderBackgroundOpacity: 1;
 @hoverIconColor: @white;
 
-
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 /* Aspect Ratios */
 @squareRatio: (1/1) * 100%;

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

@@ -2,9 +2,9 @@
              Flyout
 *******************************/
 
-/*-------------------
+/* -------------------
        Content
---------------------*/
+-------------------- */
 
 /* Animation */
 @perspective: 1500px;
@@ -36,7 +36,7 @@
 /* Actions */
 @actionBorder: 1px solid @borderColor;
 @actionBackground: @offWhite;
-@actionPadding: 1rem 1rem;
+@actionPadding: 1rem;
 @actionAlign: right;
 
 @buttonDistance: 0.75em;
@@ -45,7 +45,9 @@
 
 /* Scrolling Content */
 @contentMinHeight: calc(100vh - 9.1rem);
+@contentMinHeightWithoutHeader: calc(100vh - 4.7rem);
 @scrollingContentMaxHeight: @contentMinHeight;
+@scrollingContentMaxHeightWithoutHeader: @contentMinHeightWithoutHeader;
 @scrollingContentMaxHeightTopBottom: calc(80vh - 9.1rem);
 
 /* Close Icon */
@@ -75,9 +77,9 @@
 @contentLineHeight: 1.4;
 @contentBackground: @white;
 
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 /* Width */
 @veryThinWidth: 120px;
@@ -89,12 +91,12 @@
 /* Height */
 @height: 36px;
 
-/*-------------------
+/* -------------------
       Inverted
---------------------*/
+-------------------- */
 @invertedBackground: @fullBlack;
 @invertedCloseColor: @white;
 @invertedHeaderColor: @white;
-@invertedActionBackground: #191A1B;
+@invertedActionBackground: #191a1b;
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;

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

@@ -8,9 +8,8 @@
 @borderRadius: @defaultBorderRadius;
 @transformOrigin: 50% 25%;
 @boxShadow:
-  1px 3px 3px 0 rgba(0, 0, 0, 0.2),
-  1px 3px 15px 2px rgba(0, 0, 0, 0.2)
-;
+    1px 3px 3px 0 rgba(0, 0, 0, 0.2),
+    1px 3px 15px 2px rgba(0, 0, 0, 0.2);
 
 /* Close Icon */
 @closeOpacity: 0.8;
@@ -25,11 +24,10 @@
 @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)
-;
+    -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;
@@ -51,19 +49,19 @@
 @contentBackground: @white;
 
 /* Image / Description */
-@imageWidth: '';
+@imageWidth: "";
 @imageIconSize: 8rem;
 @imageVerticalAlign: start;
 
 @descriptionDistance: 2em;
-@descriptionMinWidth: '';
+@descriptionMinWidth: "";
 @descriptionWidth: auto;
 @descriptionVerticalAlign: start;
 
 /* Modal Actions */
 @actionBorder: 1px solid @borderColor;
 @actionBackground: @offWhite;
-@actionPadding: 1rem 1rem;
+@actionPadding: 1rem;
 @actionAlign: right;
 
 @buttonDistance: 0.75em;
@@ -79,7 +77,7 @@
 @mobileHeaderPadding: 0.75rem 1rem;
 @mobileContentPadding: 1rem;
 @mobileImagePadding: 0 0 1rem;
-@mobileDescriptionPadding: 1rem 0 ;
+@mobileDescriptionPadding: 1rem 0;
 @mobileButtonDistance: 1rem;
 @mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
 @mobileImageIconSize: 5rem;
@@ -93,11 +91,11 @@
 @largeMonitorWidth: 900px;
 @widescreenMonitorWidth: 950px;
 
-@mobileMargin: 0 0 0 0;
-@tabletMargin: 0 0 0 0;
-@computerMargin: 0 0 0 0;
-@largeMonitorMargin: 0 0 0 0;
-@widescreenMonitorMargin: 0 0 0 0;
+@mobileMargin: 0;
+@tabletMargin: 0;
+@computerMargin: 0;
+@largeMonitorMargin: 0;
+@widescreenMonitorMargin: 0;
 
 @fullScreenWidth: 95%;
 @fullScreenOffset: ((100% - @fullScreenWidth) / 2);
@@ -106,15 +104,15 @@
 /* Coupling */
 @invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
 
-/*-------------------
+/* -------------------
        States
---------------------*/
+-------------------- */
 
 @loadingZIndex: -1;
 
-/*-------------------
+/* -------------------
         Types
---------------------*/
+-------------------- */
 
 /* Basic */
 @basicModalHeaderColor: @white;
@@ -141,9 +139,9 @@
 @overlayFullscreenScrollingContentMaxHeight: calc(100vh - 9.1rem);
 @overlayFullscreenScrollingContentMaxHeightMobile: calc(100vh - 8.1rem);
 
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 /* Size Widths */
 @miniRatio: 0.4;
@@ -162,11 +160,11 @@
 @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
 @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
 
-@miniMobileMargin: 0 0 0 0;
-@miniTabletMargin: 0 0 0 0;
-@miniComputerMargin: 0 0 0 0;
-@miniLargeMonitorMargin: 0 0 0 0;
-@miniWidescreenMonitorMargin: 0 0 0 0;
+@miniMobileMargin: 0;
+@miniTabletMargin: 0;
+@miniComputerMargin: 0;
+@miniLargeMonitorMargin: 0;
+@miniWidescreenMonitorMargin: 0;
 
 @tinyHeaderSize: 1.3em;
 @tinyMobileWidth: @mobileWidth;
@@ -175,11 +173,11 @@
 @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
 @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
 
-@tinyMobileMargin: 0 0 0 0;
-@tinyTabletMargin: 0 0 0 0;
-@tinyComputerMargin: 0 0 0 0;
-@tinyLargeMonitorMargin: 0 0 0 0;
-@tinyWidescreenMonitorMargin: 0 0 0 0;
+@tinyMobileMargin: 0;
+@tinyTabletMargin: 0;
+@tinyComputerMargin: 0;
+@tinyLargeMonitorMargin: 0;
+@tinyWidescreenMonitorMargin: 0;
 
 @smallHeaderSize: 1.3em;
 @smallMobileWidth: @mobileWidth;
@@ -188,11 +186,11 @@
 @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
 @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
 
-@smallMobileMargin: 0 0 0 0;
-@smallTabletMargin: 0 0 0 0;
-@smallComputerMargin: 0 0 0 0;
-@smallLargeMonitorMargin: 0 0 0 0;
-@smallWidescreenMonitorMargin: 0 0 0 0;
+@smallMobileMargin: 0;
+@smallTabletMargin: 0;
+@smallComputerMargin: 0;
+@smallLargeMonitorMargin: 0;
+@smallWidescreenMonitorMargin: 0;
 
 @largeHeaderSize: 1.6em;
 @largeMobileWidth: @mobileWidth;
@@ -201,11 +199,11 @@
 @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
 @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
 
-@largeMobileMargin: 0 0 0 0;
-@largeTabletMargin: 0 0 0 0;
-@largeComputerMargin: 0 0 0 0;
-@largeLargeMonitorMargin: 0 0 0 0;
-@largeWidescreenMonitorMargin: 0 0 0 0;
+@largeMobileMargin: 0;
+@largeTabletMargin: 0;
+@largeComputerMargin: 0;
+@largeLargeMonitorMargin: 0;
+@largeWidescreenMonitorMargin: 0;
 
 @bigHeaderSize: 1.6em;
 @bigMobileWidth: @mobileWidth;
@@ -214,11 +212,11 @@
 @bigLargeMonitorWidth: (@largeMonitorWidth * @bigRatio);
 @bigWidescreenMonitorWidth: (@widescreenMonitorWidth * @bigRatio);
 
-@bigMobileMargin: 0 0 0 0;
-@bigTabletMargin: 0 0 0 0;
-@bigComputerMargin: 0 0 0 0;
-@bigLargeMonitorMargin: 0 0 0 0;
-@bigWidescreenMonitorMargin: 0 0 0 0;
+@bigMobileMargin: 0;
+@bigTabletMargin: 0;
+@bigComputerMargin: 0;
+@bigLargeMonitorMargin: 0;
+@bigWidescreenMonitorMargin: 0;
 
 @hugeHeaderSize: 1.6em;
 @hugeMobileWidth: @mobileWidth;
@@ -227,11 +225,11 @@
 @hugeLargeMonitorWidth: (@largeMonitorWidth * @hugeRatio);
 @hugeWidescreenMonitorWidth: (@widescreenMonitorWidth * @hugeRatio);
 
-@hugeMobileMargin: 0 0 0 0;
-@hugeTabletMargin: 0 0 0 0;
-@hugeComputerMargin: 0 0 0 0;
-@hugeLargeMonitorMargin: 0 0 0 0;
-@hugeWidescreenMonitorMargin: 0 0 0 0;
+@hugeMobileMargin: 0;
+@hugeTabletMargin: 0;
+@hugeComputerMargin: 0;
+@hugeLargeMonitorMargin: 0;
+@hugeWidescreenMonitorMargin: 0;
 
 @massiveHeaderSize: 1.8em;
 @massiveMobileWidth: @mobileWidth;
@@ -240,26 +238,25 @@
 @massiveLargeMonitorWidth: (@largeMonitorWidth * @massiveRatio);
 @massiveWidescreenMonitorWidth: (@widescreenMonitorWidth * @massiveRatio);
 
-@massiveMobileMargin: 0 0 0 0;
-@massiveTabletMargin: 0 0 0 0;
-@massiveComputerMargin: 0 0 0 0;
-@massiveLargeMonitorMargin: 0 0 0 0;
-@massiveWidescreenMonitorMargin: 0 0 0 0;
+@massiveMobileMargin: 0;
+@massiveTabletMargin: 0;
+@massiveComputerMargin: 0;
+@massiveLargeMonitorMargin: 0;
+@massiveWidescreenMonitorMargin: 0;
 
-/*-------------------
+/* -------------------
       Inverted
---------------------*/
+-------------------- */
 @invertedBackground: @fullBlack;
 @invertedCloseColor: @white;
 @invertedHeaderColor: @white;
 @invertedHeaderBackgroundColor: @darkTextColor;
-@invertedActionBackground: #191A1B;
+@invertedActionBackground: #191a1b;
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;
-@invertedDimmerCloseColor: rgba(0,0,0,.85);
+@invertedDimmerCloseColor: rgba(0, 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)
-;
+    -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/nag.variables

@@ -2,9 +2,9 @@
              Nag
 *******************************/
 
-/*--------------
+/* --------------
    Collection
----------------*/
+--------------- */
 
 @position: relative;
 @width: 100%;
@@ -24,10 +24,9 @@
 
 @transition: 0.2s background ease;
 
-
-/*--------------
+/* --------------
     Elements
----------------*/
+--------------- */
 
 /* Title */
 @titleColor: @white;
@@ -41,10 +40,9 @@
 @closeTransition: opacity 0.2s ease;
 @closeOpacity: 0.4;
 
-
-/*--------------
+/* --------------
       States
----------------*/
+--------------- */
 
 /* Hover */
 @nagHoverBackground: @background;
@@ -52,9 +50,9 @@
 
 @closeHoverOpacity: 1;
 
-/*--------------
+/* --------------
    Variations
----------------*/
+--------------- */
 
 /* Top / Bottom */
 @top: 0;
@@ -68,9 +66,8 @@
 @invertedTitleColor: @mutedTextColor;
 @invertedCloseColor: @mutedTextColor;
 
-/*--------------
+/* --------------
       Plural
----------------*/
+--------------- */
 
 @groupedBorderRadius: 0;
-

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

@@ -2,9 +2,9 @@
              Popup
 *******************************/
 
-/*-------------------
+/* -------------------
        Element
---------------------*/
+-------------------- */
 
 @zIndex: 1900;
 @background: @white;
@@ -21,9 +21,9 @@
 @fontStyle: @normal;
 @borderRadius: @defaultBorderRadius;
 
-/*-------------------
+/* -------------------
        Parts
---------------------*/
+-------------------- */
 
 /* Placement */
 @arrowSize: @relative10px;
@@ -32,7 +32,6 @@
 @boxArrowOffset: 0;
 @popupDistanceAway: @arrowSize;
 
-
 /* Header */
 @headerFontFamily: @headerFont;
 @headerFontWeight: @bold;
@@ -62,9 +61,9 @@
 @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0 0 @arrowColor;
 @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0 0 @arrowColor;
 
-/*-------------------
+/* -------------------
        Types
---------------------*/
+-------------------- */
 
 /* Tooltip */
 @tooltipBackground: @background;
@@ -98,23 +97,25 @@
 @tooltipArrowCenterBackground: @arrowCenterBackground;
 @tooltipArrowBottomBackground: @arrowBottomBackground;
 
-/*-------------------
+/* -------------------
        Coupling
---------------------*/
+-------------------- */
 
 /* Grid Inside Popup */
 @nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */
 @nestedGridWidth: e("calc(100% + 1.75rem)");
 
-/*-------------------
+/* -------------------
        States
---------------------*/
+-------------------- */
 
 @loadingZIndex: -1;
 
-/*-------------------
+/* -------------------
        Variations
---------------------*/
+-------------------- */
+
+@multilineWhiteSpace: pre-line;
 
 /* Wide */
 @wideWidth: 350px;

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

@@ -2,9 +2,9 @@
             Progress
 *******************************/
 
-/*-------------------
+/* -------------------
        Element
---------------------*/
+-------------------- */
 
 @verticalSpacing: 1em;
 @margin: @verticalSpacing 0 (@labelHeight + @verticalSpacing);
@@ -20,14 +20,13 @@
 /* Bar */
 @barPosition: relative;
 @barHeight: 1.75em;
-@barBackground: #888888;
+@barBackground: #888;
 @barBorderRadius: @borderRadius;
 @barTransitionEasing: @defaultEasing;
 @barTransitionDuration: @defaultDuration;
 @barTransition:
-  width @barTransitionDuration @barTransitionEasing,
-  background-color @barTransitionDuration @barTransitionEasing
-;
+    width @barTransitionDuration @barTransitionEasing,
+    background-color @barTransitionDuration @barTransitionEasing;
 @barInitialWidth: 0;
 @barMinWidth: 2em;
 
@@ -63,16 +62,16 @@
 @labelTextAlign: center;
 @labelTransition: color 0.4s @defaultEasing;
 
-/*-------------------
+/* -------------------
         Types
---------------------*/
+-------------------- */
 
-@indicatingFirstColor: #D95C5C;
-@indicatingSecondColor: #EFBC72;
-@indicatingThirdColor: #E6BB48;
-@indicatingFourthColor: #DDC928;
-@indicatingFifthColor: #B4D95C;
-@indicatingSixthColor: #66DA81;
+@indicatingFirstColor: #d95c5c;
+@indicatingSecondColor: #efbc72;
+@indicatingThirdColor: #e6bb48;
+@indicatingFourthColor: #ddc928;
+@indicatingFifthColor: #b4d95c;
+@indicatingSixthColor: #66da81;
 
 @indicatingFirstLabelColor: @textColor;
 @indicatingSecondLabelColor: @textColor;
@@ -88,9 +87,9 @@
 @invertedIndicatingFifthLabelColor: @invertedTextColor;
 @invertedIndicatingSixthLabelColor: @invertedTextColor;
 
-/*-------------------
+/* -------------------
         States
---------------------*/
+-------------------- */
 
 /* Active */
 @activePulseColor: @white;
@@ -98,10 +97,9 @@
 @activePulseDuration: 2s;
 @activeMinWidth: @barMinWidth;
 
-
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 /* Attached */
 @attachedBackground: transparent;

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

@@ -10,16 +10,14 @@
 @iconWidth: 1.25em;
 @iconHeight: auto;
 @iconTransition:
-  opacity @defaultDuration @defaultEasing,
-  background @defaultDuration @defaultEasing,
-  text-shadow @defaultDuration @defaultEasing,
-  color @defaultDuration @defaultEasing
-;
+    opacity @defaultDuration @defaultEasing,
+    background @defaultDuration @defaultEasing,
+    text-shadow @defaultDuration @defaultEasing,
+    color @defaultDuration @defaultEasing;
 
-
-/*-------------------
+/* -------------------
         Types
---------------------*/
+-------------------- */
 
 /* Standard */
 @inactiveBackground: transparent;
@@ -33,15 +31,15 @@
 
 @shadowWidth: 1px;
 
-/*-------------------
+/* -------------------
         States
---------------------*/
+-------------------- */
 
 @interactiveActiveIconOpacity: 1;
 @interactiveSelectedIconOpacity: 1;
 
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 @massive: 2rem;

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

@@ -13,11 +13,10 @@
 @promptBorderRadius: @circularRadius;
 @promptColor: @textColor;
 @promptTransition:
-  background-color @defaultDuration @defaultEasing,
-  color @defaultDuration @defaultEasing,
-  box-shadow @defaultDuration @defaultEasing,
-  border-color @defaultDuration @defaultEasing
-;
+    background-color @defaultDuration @defaultEasing,
+    color @defaultDuration @defaultEasing,
+    box-shadow @defaultDuration @defaultEasing,
+    border-color @defaultDuration @defaultEasing;
 @promptBoxShadow: 0 0 0 0 transparent inset;
 
 /* Mobile */
@@ -25,7 +24,7 @@
 
 /* Result Box */
 @resultsWidth: 18em;
-@resultsBackground: #FFFFFF;
+@resultsBackground: #fff;
 @resultsDistance: 0.5em;
 @resultsBorderRadius: @defaultBorderRadius;
 @resultsBorder: 1px solid @solidBorderColor;
@@ -95,7 +94,6 @@
 @actionFontWeight: @bold;
 @actionAlign: center;
 
-
 /*******************************
             States
 *******************************/
@@ -107,7 +105,7 @@
 
 /* Hover */
 @resultHoverBackground: @offWhite;
-@actionHoverBackground: #E0E0E0;
+@actionHoverBackground: #e0e0e0;
 
 /* Loading */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
@@ -124,7 +122,6 @@
 @resultActiveDescriptionColor: @darkTextColor;
 @resultsZIndex: 998;
 
-
 /*******************************
             Types
 *******************************/
@@ -134,12 +131,11 @@
 
 @selectionCloseTop: 0;
 @selectionCloseTransition:
-  color @defaultDuration @defaultEasing,
-  opacity @defaultDuration @defaultEasing
-;
+    color @defaultDuration @defaultEasing,
+    opacity @defaultDuration @defaultEasing;
 @selectionCloseRight: 0;
 @selectionCloseIconOpacity: 0.8;
-@selectionCloseIconColor: '';
+@selectionCloseIconColor: "";
 @selectionCloseIconHoverOpacity: 1;
 @selectionCloseIconHoverColor: @red;
 
@@ -150,9 +146,8 @@
 @categoryBoxShadow: none;
 @categoryDivider: 1px solid @internalBorderColor;
 @categoryTransition:
-  background @defaultDuration @defaultEasing,
-  border-color @defaultDuration @defaultEasing
-;
+    background @defaultDuration @defaultEasing,
+    border-color @defaultDuration @defaultEasing;
 
 @categoryResultsWidth: 28em;
 
@@ -178,4 +173,4 @@
 @largeSearchSize: @relativeLarge;
 @bigSearchSize: @relativeBig;
 @hugeSearchSize: @relativeHuge;
-@massiveSearchSize: @relativeMassive;
+@massiveSearchSize: @relativeMassive;