less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables

@@ -15,55 +15,46 @@
       Collection
 --------------------*/
 
-@margin: 1rem 0rem;
-@verticalPadding: 0.78571em;
-@horizontalPadding: 0.95em;
-
+/* Menu */
+@margin: 1em 0rem;
 @background: #FFFFFF;
+@fontFamily: @pageFont;
 @itemBackground: none;
-
 @fontWeight: normal;
-@boxShadow:
-  0px 0px 0px 1px @borderColor,
-  @subtleShadow
-;
-
-@borderSize: 0em;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
-;
+@borderWidth: 1px;
+@border: @borderWidth solid @borderColor;
+@boxShadow: @subtleShadow;
 @borderRadius: @defaultBorderRadius;
-
-@dividerSize: 1px;
-@dividerBackground: linear-gradient(
-  rgba(0, 0, 0, 0.05) 0%,
-  rgba(0, 0, 0, 0.1) 50%,
-  rgba(0, 0, 0, 0.05) 100%)
-;
-
-@headerBackground: rgba(0, 0, 0, 0.04);
-@headerWeight: bold;
-
-@textLineHeight: 1.3;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
+@minHeight: (@itemVerticalPadding * 2) + 1em;
+
+/* Menu Item */
+@itemVerticalPadding: @relativeSmall;
+@itemHorizontalPadding: @relativeLarge;
+@itemTextTransform: none;
+@itemTransition:
+  background @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
 ;
+@itemFontWeight: normal;
+@itemTextColor: @textColor;
 
-@menuTextColor: @textColor;
+/* Divider */
+@dividerSize: 1px;
+@dividerBackground: @internalBorderColor;
 
 /* Sub Menu */
-@subMenuMargin: 0.5em;
-@subMenuFontSize: 0.875rem;
+@subMenuDistance: 0.5em;
+@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em;
+@subMenuFontSize: @relativeTiny;
 @subMenuTextColor: rgba(0, 0, 0, 0.5);
 
-@subMenuHorizontalPadding: 0.5rem;
-@subMenuVerticalPadding: 1.5rem;
+@subMenuIndent: 0em;
+@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
+@subMenuVerticalPadding: 0.5em;
+
+/* Text Item */
+@textLineHeight: 1.3;
 
 /*--------------
     Elements
@@ -71,102 +62,141 @@
 
 /* Icon */
 @iconFloat: none;
-@iconMargin: 0em 0.25em 0em 0em;
-@iconOpacity: 0.75;
+@iconMargin: 0em @relative5px 0em 0em;
+@iconOpacity: 0.9;
 
+/* Dropdown Icon */
 @dropdownIconFloat: right;
 @dropdownIconDistance: 1em;
 
-@verticalIconFloat: right;
-@verticalIconMargin: 0em 0em 0em 0.5em;
-
 /* Header */
-@headerBackground: rgba(0, 0, 0, 0.04);
+@headerBackground: '';
 @headerWeight: bold;
 @headerTextTransform: normal;
 
+/* Vertical Icon */
+@verticalIconFloat: right;
+@verticalIconMargin: 0em 0em 0em 0.5em;
+
+/* Vertical Header */
+@verticalHeaderMargin: 0em 0em 0.5em;
+@verticalHeaderFontSize: @relativeMedium;
+@verticalHeaderFontWeight: bold;
+
+/* Pointing Arrow */
+@arrowSize: @relative8px;
+@arrowBorderWidth: 1px;
+@arrowBorder: @arrowBorderWidth solid @solidBorderColor;
+@arrowTransition: background @defaultDuration @defaultEasing;
+@arrowZIndex: 2;
+
+@arrowHoverColor: #F4F4F4;
+@arrowActiveColor: #F4F4F4;
+@arrowActiveHoverColor: @arrowActiveColor;
+
+@arrowVerticalHoverColor: @arrowHoverColor;
+@arrowVerticalActiveColor: @arrowActiveColor;
+@arrowVerticalSubMenuColor: @white;
+
 /*--------------
     Couplings
 ---------------*/
 
 /* Button */
-@buttonOffset: -0.05em;
-@buttonVerticalPadding: 0.55em;
-@buttonSize: 0.875em;
+@buttonSize: @relativeMedium;
+@buttonOffset: 0em;
+@buttonMargin: -0.5em 0em;
+@buttonVerticalPadding: @relativeMini;
 
 /* Input */
-@inputSize: 1em;
-@inputVerticalMargin: -0.6em;
+@inputSize: @relativeMedium;
+@inputVerticalMargin: -0.5em;
 @inputOffset: 0em;
-@inputVerticalPadding: 0.4em;
+@inputVerticalPadding: @relative8px;
 
-@smallInputOffset: 0em;
-@smallInputVerticalPadding: 0.4em;
-
-@largeInputOffset: -0.125em;
-@largeInputVerticalPadding: 0.6em;
+/* Image */
+@imageMargin: -0.3em 0em;
+@imageWidth: 2.5em;
+@verticalImageWidth: auto;
 
 /* Label */
 @labelOffset: -0.15em;
-@labelBackground: rgba(0, 0, 0, 0.35);
-@labelTextColor: #FFFFFF;
+@labelBackground: #999999;
+@labelTextColor: @white;
 
-@labelTextMargin: 0.5em;
+@labelTextMargin: 1em;
 @labelVerticalPadding: 0.3em;
-@labelHorizontalPadding: 0.8em;
+@labelHorizontalPadding: @relativeMini;
 
 @labelAndIconFloat: none;
 @labelAndIconMargin: 0em 0.5em 0em 0em;
 
-/* Dropdown */
-@dropdownBackground: #FFFFFF;
-@dropdownMenuOffset: 0px;
-@dropdownPointingDistance: 0px;
-
-@dropdownTextColor: @textColor;
-@dropdownBackgroundHover: @transparentBlack;
-@dropdownTextColorHover: @darkTextColor;
-@dropdownIconMargin: 0em 0em 0em 1em;
-
-@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
-
-/* Pointing Arrow */
-@arrowSize: 0.6em;
-@arrowBorderSize: 1px;
-@arrowBorder: @arrowBorderSize solid @solidBorderColor;
-@arrowTransition: background @transitionDuration @transitionEasing;
-@arrowZIndex: 11;
-
-@arrowHoverColor: #FAFAFA;
-@arrowActiveColor: #F7F7F7;
+/* Dropdown in Menu */
+@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
 
-@arrowVerticalHoverColor: @arrowHoverColor;
-@arrowVerticalActiveColor: @arrowActiveColor;
-@arrowVerticalSubMenuColor: @white;
+@dropdownBackground: #FFFFFF;
+@dropdownMenuDistance: 0em;
+@dropdownMenuBorderRadius: @borderRadius;
+
+@dropdownItemFontSize: @relativeMedium;
+@dropdownItemPadding: @relativeMini @relativeLarge;
+@dropdownItemBackground: transparent;
+@dropdownItemColor: @textColor;
+@dropdownItemTextTransform: none;
+@dropdownItemFontWeight: normal;
+@dropdownItemBoxShadow: none;
+@dropdownItemTransition: none;
+
+@dropdownItemIconFloat: none;
+@dropdownItemIconFontSize: @relativeMedium;
+@dropdownItemIconMargin: 0em 0.75em 0em 0em;
+
+@dropdownHoveredItemBackground: @transparentBlack;
+@dropdownHoveredItemColor: @selectedTextColor;
+
+/* Dropdown Variations */
+@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
+@secondaryDropdownMenuDistance: @relative5px;
+@pointingDropdownMenuDistance: 0.75em;
+@invertedSelectionDropdownColor: @invertedTextColor;
 
 /*--------------
      States
 ---------------*/
 
-@hoverBackground: @subtleTransparentBlack;
-@hoverColor: @textColor;
+/* Hovered Item */
+@hoverItemBackground: @subtleTransparentBlack;
+@hoverItemTextColor: @selectedTextColor;
 
-@pressedBackground: @subtleTransparentBlack;
-@pressedColor: @pressedTextColor;
+/* Pressed Item */
+@pressedItemBackground: @subtleTransparentBlack;
+@pressedItemColor: @pressedTextColor;
 
-@activeBackground: @subtleTransparentBlack;
-@activeColor: @darkTextColor;
-@activeBorderSize: 2px;
-@activeFontWeight: normal;
+
+/* Active Item */
+@activeItemBackground: @transparentBlack;
+@activeItemTextColor: @selectedTextColor;
+@activeItemFontWeight: normal;
 @activeIconOpacity: 1;
+@activeItemBoxShadow: none;
 
-@activeHoverBackground: @hoverBackground;
-@subMenuActiveBackground: transparent;
+/* Active Hovered Item */
+@activeHoverItemBackground: @transparentBlack;
+@activeHoverItemColor: @selectedTextColor;
 
-@loadingBackgroundColor: rgba(255, 255, 255, 0.8);
-@loadingImage: "@{imagePath}/loader-large.gif";
-@loadingPosition: 50% 50%;
+/* Selected Dropdown */
+@dropdownSelectedItemBackground: @transparentBlack;
+@dropdownSelectedItemColor: @selectedTextColor;
+
+/* Active Dropdown */
+@dropdownActiveItemBackground: @subtleTransparentBlack;
+@dropdownActiveItemColor: @selectedTextColor;
+@dropdownActiveItemFontWeight: bold;
+
+/* Active Sub Menu */
+@subMenuActiveBackground: transparent;
+@subMenuActiveTextColor: @activeItemTextColor;
+@subMenuActiveFontWeight: bold;
 
 
 /*--------------
@@ -174,49 +204,82 @@
 ---------------*/
 
 /* Vertical */
+@verticalBoxShadow: @boxShadow;
+@verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
 @verticalItemBackground: none;
-@verticalDividerBackground: linear-gradient(to right,
-  rgba(0, 0, 0, 0.03) 0%,
-  rgba(0, 0, 0, 0.1) 1.5em,
-  rgba(0, 0, 0, 0.03) 100%)
-;
+@verticalDividerBackground: @dividerBackground;
+
+@verticalActiveBoxShadow: none;
 
 
 /* Secondary */
 @secondaryBackground: none;
+@secondaryMargin: 0em -@secondaryItemSpacing;
 @secondaryItemBackground: none;
+@secondaryItemSpacing: @relative5px;
+@secondaryItemMargin: 0em @secondaryItemSpacing;
+@secondaryItemPadding: @relativeMini @relativeSmall;
+@secondaryItemBorderRadius: @defaultBorderRadius;
+@secondaryItemTransition: color @defaultDuration @defaultEasing;
+@secondaryItemColor: @unselectedTextColor;
 
-@secondaryTransition: color 0.2s ease;
-
-@secondaryBorderRadius: @defaultBorderRadius;
+@secondaryHoverItemBackground: @transparentBlack;
+@secondaryHoverItemColor: @selectedTextColor;
 
-@secondaryMargin: 0.25em;
-@secondaryVerticalMargin: 0.3em;
-@secondaryVerticalPadding: 0.5em;
-@secondaryHorizontalPadding: 0.8em;
+@secondaryActiveItemBackground: @transparentBlack;
+@secondaryActiveItemColor: @selectedTextColor;
+@secondaryActiveHoverItemBackground: @transparentBlack;
+@secondaryActiveHoverItemColor: @selectedTextColor;
 
-@secondaryLinkOpacity: 0.8;
+@secondaryActiveHoveredItemBackground: @transparentBlack;
+@secondaryActiveHoveredItemColor: @selectedTextColor;
 
 @secondaryHeaderBackground: none transparent;
-@secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
-
-@secondaryActiveBackground: @transparentBlack;
-@secondaryInvertedActiveBackground: @transparentWhite;
+@secondaryHeaderBorder: 1px solid @borderColor;
 
+@secondaryItemVerticalSpacing: @secondaryItemSpacing;
+@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
+@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
 
 /* Pointing */
-@secondaryPointingBorderWidth: 3px;
-@secondaryPointingVerticalPadding: 0.6em;
-@secondaryPointingHorizontalPadding: 0.95em;
+@secondaryPointingBorderWidth: 2px;
+@secondaryPointingBorderColor: @borderColor;
+@secondaryPointingItemVerticalPadding: @relativeTiny;
+@secondaryPointingItemHorizontalPadding: @relativeLarge;
 
-@secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
 @secondaryPointingHoverTextColor: @textColor;
 
-@secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
+@secondaryPointingActiveBorderColor: @black;
 @secondaryPointingActiveTextColor: @selectedTextColor;
+@secondaryPointingActiveFontWeight: bold;
+
+@secondaryPointingActiveDropdownBorderColor: transparent;
+
+@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor;
+@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
 
 @secondaryPointingHeaderColor: @darkTextColor;
+@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
+
+
+/* Inverted Secondary */
+@secondaryInvertedColor: @invertedLightTextColor;
+
+@secondaryInvertedHoverBackground: @transparentWhite;
+@secondaryInvertedHoverColor: @invertedSelectedTextColor;
+
+@secondaryInvertedActiveBackground: @strongTransparentWhite;
+@secondaryInvertedActiveColor: @invertedSelectedTextColor;
+
+/* Inverted Pointing */
+@secondaryPointingInvertedBorderColor: @whiteBorderColor;
+@secondaryPointingInvertedItemTextColor: @invertedTextColor;
+@secondaryPointingInvertedItemHeaderColor: @white;
+@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
+@secondaryPointingInvertedActiveBorderColor: @white;
+@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
+
 
 /* Tiered */
 @tieredActiveItemBackground: #FCFCFC;
@@ -235,38 +298,70 @@
 
 @tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
 
+
 /* Icon */
 @iconMenuTextAlign: center;
-@iconMenuItemColor: rgba(0, 0, 0, 0.6);
+@iconMenuItemColor: @black;
+@iconMenuInvertedItemColor: @white;
+
 
 /* Tabular */
 @tabularBorderColor: @solidBorderColor;
 @tabularBackgroundColor: #FFFFFF;
 @tabularBorderWidth: 1px;
-@tabularHorizontalPadding: 1.4em;
-@tabularMenuTextColor: @menuTextColor;
+@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
+@tabularHorizontalPadding: @relativeHuge;
+@tabularMenuTextColor: @itemTextColor;
 
 @tabularFluidOffset: 1px;
 @tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
-
 @tabularActiveColor: @selectedTextColor;
 @tabularActiveBoxShadow: none;
 
-@tabularMenuActiveBackground: #FFFFFF;
+@tabularMenuActiveBackground: @white;
+@tabularMenuActiveColor: @selectedTextColor;
+
 @tabularActiveWeight: bold;
-@tabularBorderRadius: 5px;
+@tabularBorderRadius: @defaultBorderRadius;
+
 
 /* Pagination */
 @paginationMinWidth: 3em;
-@paginationActiveBackground: rgba(0, 0, 0, 0.03);
+@paginationActiveBackground: @transparentBlack;
+@paginationActiveTextColor: @selectedTextColor;
 
 /* Labeled Icon */
-@labeledIconSize: 1.5em;
+@labeledIconItemHorizontalPadding: @relativeMassive;
+@labeledIconSize: @relativeHuge;
 @labeledIconMinWidth: 6em;
-@labeledIconTextMargin: 0.5em;
+@labeledIconTextMargin: 0.5rem;
+
 
 /* Text */
-@textMenuTransition: opacity 0.2s ease;
+@textMenuItemSpacing: 0.5em;
+@textMenuMargin: @relativeLarge -@textMenuItemSpacing;
+@textMenuItemColor: @mutedTextColor;
+@textMenuItemFontWeight: normal;
+@textMenuItemMargin: 0em @textMenuItemSpacing;
+@textMenuItemTransition: opacity @defaultDuration @defaultEasing;
+
+@textMenuSubMenuMargin: 0em;
+
+@textMenuActiveItemFontWeight: normal;
+@textMenuActiveItemColor: @selectedTextColor;
+
+@textMenuHeaderSize: @relativeSmall;
+@textMenuHeaderColor: @darkTextColor;
+@textMenuHeaderFontWeight: bold;
+@textMenuHeaderTextTransform: uppercase;
+
+@textVerticalMenuMargin: @relativeMedium 0em;
+@textVerticalMenuHeaderMargin: @relative8px 0em @relative10px;
+@textVerticalMenuItemMargin: @relative8px 0em;
+
+@textVerticalMenuIconFloat: none;
+@textVerticalMenuIconMargin: @iconMargin;
+
 
 /*--------------
    Variations
@@ -275,59 +370,60 @@
 /* Inverted */
 @invertedBackground: @black;
 @invertedBoxShadow: none;
-@invertedHeaderBackground: rgba(0, 0, 0, 0.3);
+@invertedBorder: 1px solid transparent;
+@invertedHeaderBackground: transparent;
+
+@invertedItemBackground: transparent;
+@invertedItemTextColor: @invertedTextColor;
 
 /* Inverted Sub Menu */
 @invertedSubMenuBackground: transparent;
 @invertedSubMenuColor: @invertedUnselectedTextColor;
 
 /* Inverted Hover */
-@invertedHoverBackground: rgba(255, 255, 255, 0.1);
-@invertedHoverColor: @white;
+@invertedHoverBackground: @transparentWhite;
+@invertedHoverColor: @invertedSelectedTextColor;
+
 @invertedSubMenuHoverBackground: transparent;
-@invertedSubMenuHoverColor: @white;
+@invertedSubMenuHoverColor: @invertedSelectedTextColor;
 
 /* Pressed */
-@invertedMenuPressedBackground: rgba(255, 255, 255, 0.15);
-@invertedMenuPressedColor: @white;
+@invertedMenuPressedBackground: @transparentWhite;
+@invertedMenuPressedColor: @invertedSelectedTextColor;
 
 /* Inverted Active */
-@invertedActiveBackground: rgba(255, 255, 255, 0.2);
-@invertedActiveColor: @white;
+@invertedActiveBackground: @strongTransparentWhite;
+@invertedActiveColor: @invertedSelectedTextColor;
+@invertedArrowActiveColor: #3D3E3F;
+
+/* Inverted Active Hover  */
+@invertedActiveHoverBackground: @invertedActiveBackground;
+@invertedActiveHoverColor: @white;
+@invertedArrowActiveHoverColor: @invertedArrowActiveColor;
+
 @invertedSubMenuActiveBackground: transparent;
 @invertedSubMenuActiveColor: @white;
 
-/* Inverted Secondary */
-@secondaryInvertedColor: @invertedLightTextColor;
-@secondaryInvertedHoverColor: @invertedSelectedTextColor;
-
 /* Inverted Menu Divider */
-@invertedDividerBackground: linear-gradient(
-  rgba(255, 255, 255, 0.03) 0%,
-  rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
-;
-@invertedVerticalDividerBackground: linear-gradient(to right,
-  rgba(255, 255, 255, 0.03) 0%,
-  rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
-;
+@invertedDividerBackground: rgba(255, 255, 255, 0.08);
+@invertedVerticalDividerBackground: @invertedDividerBackground;
+
+/* Inverted Colored */
+@invertedColoredDividerBackground: @dividerBackground;
+@invertedColoredActiveBackground: @strongTransparentBlack;
 
 /* Fixed */
-@fixedGridMargin: 2.75rem;
+@fixedPrecedingGridMargin: 2.75rem;
+
+/* Floated */
+@floatedDistance: 0.5rem;
 
 /* Attached */
-@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
+@attachedBoxShadow: none;
+@attachedWidth: ~"calc(100% + "@borderWidth * 2~")";
 
 /* Sizes */
-@small: 0.875rem;
-@smallSubMenu: 0.875rem;
 @smallWidth: 13rem;
-
-@medium: 1rem;
 @mediumWidth: 15rem;
-
-@large: 1.125rem;
-@largeSubMenu: 0.875rem;
-@largeDropdown: 1rem;
-@largeWidth: 18rem;
+@largeWidth: 18rem;
+@hugeWidth: 20rem;