fomantic-ui 2.9.1-beta.4 → 2.9.1-beta.40

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

@@ -2,21 +2,20 @@
             Dropdown
 *******************************/
 
-/*-------------------
+/* -------------------
        Element
---------------------*/
+-------------------- */
 
 @transition:
-  box-shadow @defaultDuration @defaultEasing,
-  width @defaultDuration @defaultEasing
-;
+    box-shadow @defaultDuration @defaultEasing,
+    width @defaultDuration @defaultEasing;
 @borderRadius: @defaultBorderRadius;
 
 @raisedShadow: 0 2px 3px 0 @borderColor;
 
-/*-------------------
+/* -------------------
        Content
---------------------*/
+-------------------- */
 
 /* Icon */
 @dropdownIconSize: @relative12px;
@@ -27,9 +26,9 @@
 @textTransition: none;
 
 /* Menu */
-@menuBackground: #FFFFFF;
+@menuBackground: #fff;
 @menuMargin: 0;
-@menuPadding: 0 0;
+@menuPadding: 0;
 @menuTop: 100%;
 @menuTextAlign: left;
 
@@ -124,18 +123,18 @@
 /* Floated Content */
 @floatedDistance: 1em;
 
-/*-------------------
+/* -------------------
         Types
---------------------*/
+-------------------- */
 
-/*------------
+/* ------------
    Selection
---------------*/
+-------------- */
 
 @selectionMinWidth: 14em;
 @selectionVerticalPadding: @inputVerticalPadding;
 @selectionHorizontalPadding: @inputHorizontalPadding;
-@selectionBorderEmWidth:  @relative1px;
+@selectionBorderEmWidth: @relative1px;
 @selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
 @selectionBackground: @inputBackground;
 @selectionDisplay: inline-block;
@@ -217,13 +216,13 @@
 @selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
 
 @selectionVisibleConnectingBorder: 0;
-@selectionVisibleIconOpacity: '';
+@selectionVisibleIconOpacity: "";
 
-/*--------------
+/* --------------
      Search
---------------*/
+-------------- */
 
-@searchMinWidth: '';
+@searchMinWidth: "";
 
 /* Search Selection */
 @searchSelectionLineHeight: @inputLineHeight;
@@ -238,16 +237,15 @@
 @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
 
 /* Inline */
-@inlineIconMargin: 0 @relative3px 0 @relative3px;
+@inlineIconMargin: 0 @relative3px;
 @inlineTextColor: inherit;
 @inlineTextFontWeight: @bold;
 @inlineMenuDistance: @relative3px;
 @inlineMenuBorderRadius: @borderRadius;
 
-
-/*--------------
+/* --------------
     Multiple
---------------*/
+-------------- */
 
 /* Split Actual Padding Between Child and Parent (allows for label spacing) */
 @multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
@@ -263,8 +261,8 @@
 @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
 /* Dropdown Icon */
-@multipleSelectionDropdownIconMargin: '';
-@multipleSelectionDropdownIconPadding: '';
+@multipleSelectionDropdownIconMargin: "";
+@multipleSelectionDropdownIconPadding: "";
 
 @multipleSelectionSearchAfterLabelDistance: @relative2px;
 
@@ -280,12 +278,12 @@
 @labelHorizontalPadding: @relativeMini;
 @labelPadding: @labelVerticalPadding @labelHorizontalPadding;
 
-@imageLabelHeight: (1em + @labelVerticalPadding * 2);  /* Logic adopted from label.less */
+@imageLabelHeight: (1em + @labelVerticalPadding * 2); /* Logic adopted from label.less */
 @imageLabelImageMargin: -@labelVerticalPadding @labelHorizontalPadding -@labelVerticalPadding -@labelHorizontalPadding;
 
-/*-------------------
+/* -------------------
        States
---------------------*/
+-------------------- */
 
 /* Addition */
 @additionZIndex: @hoveredZIndex + 1;
@@ -323,9 +321,9 @@
 @clearableIconSelectionPosition: 3em;
 @clearableIconInlinePosition: 2.2em;
 
-/*-------------------
+/* -------------------
       Variations
---------------------*/
+-------------------- */
 
 /* Scrolling */
 @scrollingMenuWidth: 100%;
@@ -402,9 +400,9 @@
 @scrollhintStartColor: rgba(0, 0, 0, 0.75);
 @scrollhintEndColor: rgba(0, 0, 0, 0);
 
-/*--------------
+/* --------------
     Inverted
----------------*/
+--------------- */
 
 /* General rules and basic dropdowns */
 @invertedMenuBackground: @black;

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,16 +2,16 @@
              Nag
 *******************************/
 
-/*--------------
+/* --------------
    Collection
----------------*/
+--------------- */
 
 @position: relative;
 @width: 100%;
 @zIndex: 999;
 @margin: 0;
 
-@background: #777777;
+@background: #909090;
 @opacity: 0.95;
 @minHeight: 0;
 @padding: 0.75em 1em;
@@ -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;