less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/themes/default/elements/list.variables

@@ -13,53 +13,64 @@
 @verticalPadding: 0em;
 @horizontalPadding: 0em;
 
+/* List Item */
+@itemVerticalPadding: @relative3px;
+@itemHorizontalPadding: 0em;
+@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
+@itemLineHeight: @relativeLarge;
+
 /* Sub List */
 @childListPadding: 0.75em 0em 0.25em 0.5em;
 @childListIndent: 1em;
 
-/* List Item */
-@itemVerticalPadding: 0.3em;
-@itemHorizontalPadding: 0em;
-@itemLineHeight: 1.2;
+/* Sub List Item */
+@childItemVerticalPadding: @relative2px;
+@childItemHorizontalPadding: 0em;
+@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding;
+@childItemLineHeight: inherit;
 
 /*-------------------
       Elements
 --------------------*/
 
 /* Icon */
-@iconDistance: 0.3em;
+@iconDistance: @relative4px;
 @iconOffset: ((@itemLineHeight - 1rem) / 2);
-@iconTransition: color 0.2s ease;
+@iconTransition: color @defaultDuration @defaultEasing;
 @iconVerticalAlign: top;
-@iconContentVerticalAlign: middle;
+@iconContentVerticalAlign: top;
 
 /* Image */
 @imageDistance: 0.5em;
-@imageAlign: middle;
+@imageAlign: top;
 
 /* Content */
 @contentDistance: 0.5em;
-@contentLineHeight: 1.2em;
+@contentLineHeight: @itemLineHeight;
 @contentLineHeightOffset: (@contentLineHeight - 1em) / 2;
-@contentVerticalAlign: middle;
+@contentVerticalAlign: top;
+
+/* Header */
+@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontWeight: bold;
+@itemHeaderColor: @textColor;
+
+/* Description */
+@itemDescriptionColor: rgba(0, 0, 0, 0.7);
 
 /* Link */
-@itemLinkColor: @textColor;
+@itemLinkColor: @linkColor;
 @itemLinkHoverColor: @linkHoverColor;
 
+/* Header Link */
+@itemHeaderLinkColor: @itemLinkColor;
+@itemHeaderLinkHoverColor: @itemLinkHoverColor;
+
 /* Linked Icon */
 @itemLinkIconColor: @lightTextColor;
 @itemLinkIconHoverColor: @textColor;
 @invertedIconLinkColor: @invertedLightTextColor;
 
-/* Header */
-@itemHeaderFontFamily: @headerFont;
-@itemHeaderFontWeight: bold;
-@itemHeaderColor: @textColor;
-
-/* Description */
-@itemDescriptionColor: @textColor;
-
 /*-------------------
         States
 --------------------*/
@@ -79,6 +90,7 @@
 /* Horizontal */
 @horizontalSpacing: 1em;
 @horizontalIconDistance: 0.25em;
+@horizontalVerticalAlign: middle;
 
 /* Inverted */
 @invertedListIconColor: @invertedLightTextColor;
@@ -93,7 +105,7 @@
 @linkListItemDownColor: @pressedTextColor;
 @linkListItemActiveColor: @selectedTextColor;
 @linkListTransition:
-  0.2s color @defaultEasing
+  @defaultDuration color @defaultEasing
 ;
 
 /* Inverted Link List */
@@ -108,9 +120,9 @@
 @selectionListItemVerticalPadding: 0.5em;
 @selectionListItemHorizontalPadding: 0.5em;
 @selectionListTransition:
-  0.2s color @defaultEasing,
-  0.2s padding-left @defaultEasing,
-  0.2s background-color @defaultEasing
+  @defaultDuration color @defaultEasing,
+  @defaultDuration padding-left @defaultEasing,
+  @defaultDuration background-color @defaultEasing
 ;
 
 /* Selection List States */
@@ -134,25 +146,28 @@
 @invertedSelectionListActiveColor: @invertedSelectedTextColor;
 
 /* Animated List */
+@animatedDuration: 0.25s;
+@animatedDelay: 0.1s;
 @animatedListTransition:
-  0.2s color ease,
-  0.2s padding-left ease,
-  0.2s background-color ease
+  @animatedDuration color @defaultEasing @animatedDelay,
+  @animatedDuration padding-left @defaultEasing @animatedDelay,
+  @animatedDuration background-color @defaultEasing @animatedDelay
 ;
 @animatedListIndent: 1em;
 
 /* Bulleted */
-@bulletDistance: 1rem;
-@bulletOffset: -1rem;
+@bulletDistance: 1.25rem;
+@bulletOffset: -@bulletDistance;
 
 @bulletOpacity: 1;
 @bulletCharacter: '•';
-@bulletColor: @textColor;
+@bulletColor: inherit;
 @bulletVerticalAlign: top;
 @bulletChildDistance: @bulletDistance;
 
 /* Horizontal Bullets */
-@horizontalBulletSpacing: 1.5rem;
+@horizontalBulletColor: @textColor;
+@horizontalBulletSpacing: @bulletDistance + 0.5em;
 
 /* Ordered List */
 @orderedCountName: ordered;
@@ -166,6 +181,8 @@
 @orderedChildCountDistance: 1em;
 @orderedChildCountOffset: -2em;
 
+@orderedInvertedCountColor: @invertedLightTextColor;
+
 /* Horizontal Ordereded */
 @horizontalOrderedCountDistance: 0.5em;
 
@@ -193,12 +210,14 @@
 @horizontalCelledLineHeight: 0.6;
 
 /* Relaxed */
-@relaxedVerticalPadding: 0.5rem;
+@relaxedItemVerticalPadding: @relative6px;
+@relaxedChildItemVerticalPadding: @relative3px;
 @relaxedHeaderMargin: 0.25rem;
-@relaxedHorizontalPadding: 1.25rem;
+@relaxedHorizontalPadding: 1rem;
 
 /* Very Relaxed */
-@veryRelaxedVerticalPadding: 1rem;
+@veryRelaxedItemVerticalPadding: @relative12px;
+@veryRelaxedChildItemVerticalPadding: @relative4px;
 @veryRelaxedHeaderMargin: 0.5rem;
-@veryRelaxedHorizontalPadding: 2rem;
+@veryRelaxedHorizontalPadding: 1.5rem;
 

data/assets/stylesheets/semantic_ui/themes/default/elements/loader.variables

@@ -25,7 +25,7 @@
 --------------------*/
 
 /* Text */
-@textDistance: 0.7em;
+@textDistance: @relativeMini;
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
 
@@ -44,18 +44,17 @@
 @inlineMargin: 0em;
 
 /* Exact Sizes (Avoids Rounding Errors) */
-@mini: 1.2857em;
-@small: 1.7142em;
-@medium: 2.2585em;
-@large: 4.5714em;
+@mini: 1.2857em;   /* 18px */
+@small: 1.7142em;  /* 24px */
+@medium: 2.2585em; /* 32px */
+@large: 4.5714em;  /* 64px */
 
 @miniOffset: 0em 0em 0em -(@mini / 2);
 @smallOffset: 0em 0em 0em -(@small / 2);
 @mediumOffset: 0em 0em 0em -(@medium / 2);
 @largeOffset: 0em 0em 0em -(@large / 2);
 
-
-@miniFontSize: 0.7857em;
-@smallFontSize: 0.9285em;
-@mediumFontSize: 1em;
-@largeFontSize: 1.1428em;
+@miniFontSize: @relativeMini;
+@smallFontSize: @relativeSmall;
+@mediumFontSize: @relativeMedium;
+@largeFontSize: @relativeLarge;

data/assets/stylesheets/semantic_ui/themes/default/elements/rail.variables

@@ -6,10 +6,11 @@
        Element
 --------------------*/
 
-@contentSizing: content-box;
 @width: 300px;
 @height: 100%;
+
 @distance: 4rem;
+@splitDistance: (@distance / 2);
 
 /*-------------------
       Variations
@@ -19,8 +20,15 @@
 @closeDistance: 2em;
 @veryCloseDistance: 1em;
 
-/* Divided */
-@dividedBorder: 1px solid @borderColor;
-@dividedDistance: 5rem;
+@splitCloseDistance: (@closeDistance / 2);
+@splitVeryCloseDistance: (@veryCloseDistance / 2);
+
+@closeWidth: @width + @splitCloseDistance;
+@veryCloseWidth: @width + @splitVeryCloseDistance;
+
+/* Dividing */
+@dividingBorder: 1px solid @borderColor;
+@dividingDistance: 5rem;
+@splitDividingDistance: (@dividingDistance / 2);
+@dividingWidth: @width + @splitDividingDistance;
 
-@medium: 1em;

data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.variables

@@ -2,14 +2,16 @@
             Reveal
 *******************************/
 
-@transitionDelay: 0.15s;
-@transitionDuration: 0.8s;
+@transitionDelay: 0.1s;
+@transitionDuration: 0.5s;
 @transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1);
-@transition: all @transitionDuration @transitionEasing @transitionDelay;
+@transition: all @transitionDuration @defaultEasing @transitionDelay;
 
 @bottomZIndex: 2;
 @topZIndex: 3;
 @activeZIndex: 4;
 
+/* Types */
 @rotateDegrees: 110deg;
-
+@moveTransition: transform @transitionDuration @transitionEasing @transitionDelay;
+@slideTransition: transform @transitionDuration @defaultEasing @transitionDelay;

data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables

@@ -8,19 +8,35 @@
 
 @background: @white;
 @borderWidth: 1px;
-@border: none;
+@border: @borderWidth solid @borderColor;
 
-@borderShadow: 0px 0px 0px @borderWidth @borderColor;
-@boxShadow:
-  @borderShadow,
-  @subtleShadow
-;
+@boxShadow: @subtleShadow;
 @verticalPadding: 1em;
 @horizontalPadding: 1em;
+@padding: @verticalPadding @horizontalPadding;
 
-@margin: 1rem;
+@verticalMargin: 1rem;
+@horizontalMargin: 0em;
+@margin: @verticalMargin @horizontalMargin;
 @borderRadius: @defaultBorderRadius;
 
+/*-------------------
+       Group
+--------------------*/
+
+@groupedMargin: @margin;
+@groupedBorder: @border;
+@groupedBoxShadow: @boxShadow;
+@groupedBorderRadius: @borderRadius;
+
+@nestedGroupMargin: @verticalMargin @verticalMargin;
+
+@groupedSegmentBorder: none;
+@groupedSegmentDivider: @border;
+@groupedSegmentMargin: 0em;
+@groupedSegmentWidth: auto;
+@groupedSegmentBoxShadow: none;
+
 /*-------------------
        Coupling
 --------------------*/
@@ -28,7 +44,6 @@
 /* Page Grid Segment */
 @pageGridMargin: (2 * @verticalPadding);
 
-
 /*******************************
             States
 *******************************/
@@ -39,8 +54,6 @@
 
 /* Loading Spinner */
 @loaderSize: 3em;
-@loaderOffset: -(@loaderSize / 2);
-@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
 @loaderLineZIndex: 101;
 
 
@@ -51,8 +64,9 @@
 /* Piled */
 @piledZIndex: auto;
 @piledMargin: 3em;
-@piledBoxShadow: 0px 0px 1px 1px @borderColor;
+@piledBoxShadow: '';
 @piledDegrees: 1.2deg;
+@piledBorder: @border;
 
 /* Circular */
 @circularPadding: 2em;
@@ -64,37 +78,61 @@
 @tallStackedPadding: @verticalPadding + (0.8em);
 
 /* Raised */
-@raisedShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
 @raisedBoxShadow:
-  @borderShadow,
-  @raisedShadow
+  @floatingShadow
 ;
 
+/* Padded */
+@paddedSegmentPadding: 1.5em;
+@veryPaddedSegmentPadding: 3em;
+
 /* Attached */
 @attachedTopOffset: 0px;
 @attachedBottomOffset: 0px;
-@attachedHorizontalOffset: -1px;
+@attachedHorizontalOffset: -@borderWidth;
 @attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
 @attachedBoxShadow: none;
-@attachedBorder: 1px solid @solidBorderColor;
+@attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
   @attachedBoxShadow,
   @subtleShadow
 ;
 
+/* Floated */
+@floatedDistance: 1em;
+
+/* Basic */
+@basicBackground: none transparent;
+@basicBorder: none;
+@basicBoxShadow: none;
+@basicBorderRadius: 0px;
+
 /* Colors */
 @coloredBorderSize: 2px;
-@coloredBorderRadius: @borderRadius;
 
 /* Ordinality */
-@secondaryBackground: #FAF9FA;
-@secondaryColor: @textColor;
-
-@tertiaryBackground:  #EBEBEB;
-@tertiaryColor: @lightTextColor;
-
-@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
-@secondaryInvertedColor: @offWhite;
-
-@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
-@tertiaryInvertedColor: @darkWhite;
+@secondaryBackground: @darkWhite;
+@secondaryColor: @mutedTextColor;
+
+@tertiaryBackground:  @midWhite;
+@tertiaryColor: @mutedTextColor;
+
+@secondaryInvertedLightness: 0.2;
+@secondaryInvertedBackground:
+  lighten(@black, (@secondaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @secondaryInvertedLightness) 100%
+  )
+;
+@secondaryInvertedColor: @invertedMutedTextColor;
+
+@tertiaryInvertedLightness: 0.35;
+@tertiaryInvertedBackground:
+  lighten(@black, (@tertiaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
+  )
+;
+@tertiaryInvertedColor: @invertedMutedTextColor;

data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables

@@ -2,6 +2,16 @@
              Step
 *******************************/
 
+/*-------------------
+       Group
+--------------------*/
+
+@stepMargin: 1em 0em;
+@stepsBorderRadius: @defaultBorderRadius;
+@stepsBackground: '';
+@stepsBoxShadow: none;
+@stepsBorder: 1px solid @borderColor;
+
 /*-------------------
       Element
 --------------------*/
@@ -9,39 +19,42 @@
 @verticalMargin: 0em;
 @horizontalMargin: 0em;
 
-@arrowSize: 1.5em;
-@verticalPadding: 0.9285em;
-@horizontalPadding: 1.5em;
-@leftPadding: @horizontalPadding + (@arrowSize / 2);
+@arrowSize: @relativeLarge;
+@verticalPadding: @relativeLarge;
+@horizontalPadding: 2em;
 
 @transition:
-  background-color @transitionDuration @transitionEasing,
-  opacity @transitionDuration @transitionEasing,
-  color @transitionDuration @transitionEasing,
-  box-shadow @transitionDuration @transitionEasing
+  background-color @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
 ;
 @borderRadius: @defaultBorderRadius;
-@lineHeight: 1.142rem;
-
-@backgroundColor: #FFFFFF;
+@lineHeight: @relativeLarge;
+@alignItems: center;
+@justifyContent: center;
+@backgroundColor: @white;
 @background: @backgroundColor;
 @borderRadius: 0em;
-@boxShadow: 0px 0px 0px 1px @solidBorderColor;
+@borderWidth: 1px;
+@boxShadow: none;
+@border: none;
+@divider: @borderWidth solid @borderColor;
 
 /* Icon */
-@iconDistance: 0.6em;
-@iconSize: 2em;
-@iconVerticalAlign: middle;
+@iconDistance: 1rem;
+@iconSize: 2.5em;
+@iconAlign: middle;
 
 /* Title */
 @titleFontFamily: @headerFont;
 @titleFontWeight: bold;
-@titleFontSize: 1.0714em;
+@titleFontSize: @relativeLarge;
 @titleColor: @darkTextColor;
 
 /* Description */
-@descriptionDistance: 0.1em;
-@descriptionFontSize: 0.9285em;
+@descriptionDistance: 0.25em;
+@descriptionFontSize: @relativeSmall;
 @descriptionFontWeight: normal;
 @descriptionColor: @textColor;
 
@@ -49,24 +62,40 @@
 /* Arrow */
 @arrowBackgroundColor: @backgroundColor;
 @arrowTopOffset: 50%;
-@arrowRightOffset: 0em;
-@arrowBorderColor: @borderColor;
+@arrowRightOffset: 0%;
+@arrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@arrowDisplay: block;
+@activeArrowDisplay: block;
+@lastArrowDisplay: none;
 
+/* Mobile */
+@mobileIconDistance: @iconDistance;
 
 /*-------------------
-       Group
+       Types
 --------------------*/
 
-@stepsBorderRadius: @defaultBorderRadius;
-@stepsBackground: '';
-@stepsBoxShadow: '';
+/* Vertical */
+@verticalDivider: @divider;
+@verticalArrowTopOffset: 50%;
+@verticalArrowRightOffset: 0%;
+@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@verticalArrowDisplay: none;
+@verticalActiveArrowDisplay: block;
+@verticalLastArrowDisplay: block;
 
 /*-------------------
       Variations
 --------------------*/
 
-@attachedTopMargin: 0em;
-@attachedBottomMargin: -1px 0em 0em;
+@attachedHorizontalOffset: -@borderWidth;
+@attachedVerticalOffset: -@borderWidth;
+@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
+
+@orderedFontFamily: inherit;
+@orderedFontWeight: bold;
 
 /*-------------------
        States
@@ -76,23 +105,23 @@
 @completedColor: @positiveColor;
 
 /* Hover */
-@hoverBackground: #FAFAFA;
+@hoverBackground: @offWhite;
 @hoverColor: @hoveredTextColor;
 
 /* Down */
-@downBackground: #F0F0F0;
+@downBackground: @darkWhite;
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackground: #F0F0F0;
+@activeBackground: @darkWhite;
 @activeColor: @linkColor;
 @activeIconColor: @darkTextColor;
 
 /* Active + Hover */
-@activeHoverBackground: #ECECEC;
+@activeHoverBackground: @lightGrey;
 @activeHoverColor: @textColor;
 
 
 /* Disabled */
-@disabledBackground: @white;
+@disabledBackground: @background;
 @disabledColor: @disabledTextColor;