menu.variables

/*******************************
             Menu
*******************************/

/*-------------------
      Collection
--------------------*/

/* Menu */
@verticalMargin: @medium;
@horizontalMargin: 0em;
@margin: @verticalMargin @horizontalMargin;
@background: #FFFFFF;
@fontFamily: @pageFont;
@itemBackground: none;
@fontWeight: @normal;
@borderWidth: 1px;
@border: @borderWidth solid @borderColor;
@boxShadow: @subtleShadow;
@borderRadius: @defaultBorderRadius;
@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;

/* Divider */
@dividerSize: 1px;
@dividerBackground: @internalBorderColor;

/* Sub Menu */
@subMenuDistance: 0.5em;
@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em;
@subMenuFontSize: @relativeTiny;
@subMenuTextColor: rgba(0, 0, 0, 0.5);

@subMenuIndent: 0em;
@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
@subMenuVerticalPadding: 0.5em;

/* Text Item */
@textLineHeight: 1.3;

/*--------------
    Elements
---------------*/

/* Icon */
@iconFloat: none;
@iconMargin: 0em @relative5px 0em 0em;
@iconOpacity: 0.9;

/* Dropdown Icon */
@dropdownIconFloat: right;
@dropdownIconDistance: 1em;

/* Header */
@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: #F2F2F2;
@arrowActiveColor: @arrowHoverColor;
@arrowActiveHoverColor: @arrowActiveColor;

@arrowVerticalHoverColor: @arrowHoverColor;
@arrowVerticalActiveColor: @arrowActiveColor;
@arrowVerticalSubMenuColor: @white;

/*--------------
    Couplings
---------------*/

/* Button */
@buttonSize: @relativeMedium;
@buttonOffset: 0em;
@buttonMargin: -0.5em 0em;
@buttonVerticalPadding: @relativeMini;

/* Input */
@inputSize: @relativeMedium;
@inputVerticalMargin: -0.5em;
@inputOffset: 0em;
@inputVerticalPadding: @relative8px;

/* Image */
@imageMargin: -0.3em 0em;
@imageWidth: 2.5em;
@verticalImageWidth: auto;

/* Label */
@labelOffset: -0.15em;
@labelBackground: #999999;
@labelTextColor: @white;

@labelTextMargin: 1em;
@labelVerticalPadding: 0.3em;
@labelHorizontalPadding: @relativeMini;

@labelAndIconFloat: none;
@labelAndIconMargin: 0em 0.5em 0em 0em;

/* Dropdown in Menu */
@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);

@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
---------------*/

/* Hovered Item */
@hoverItemBackground: @subtleTransparentBlack;
@hoverItemTextColor: @selectedTextColor;

/* Pressed Item */
@pressedItemBackground: @subtleTransparentBlack;
@pressedItemTextColor: @hoverItemTextColor;


/* Active Item */
@activeItemBackground: @transparentBlack;
@activeItemTextColor: @selectedTextColor;
@activeItemFontWeight: @normal;
@activeIconOpacity: 1;
@activeItemBoxShadow: none;

/* Active Hovered Item */
@activeHoverItemBackground: @transparentBlack;
@activeHoverItemColor: @selectedTextColor;

/* Selected Dropdown */
@dropdownSelectedItemBackground: @transparentBlack;
@dropdownSelectedItemColor: @selectedTextColor;

/* Active Dropdown */
@dropdownActiveItemBackground: @subtleTransparentBlack;
@dropdownActiveItemColor: @selectedTextColor;
@dropdownActiveItemFontWeight: @bold;

/* Active Sub Menu */
@subMenuActiveBackground: transparent;
@subMenuActiveTextColor: @activeItemTextColor;
@subMenuActiveFontWeight: @bold;


/*--------------
     Types
---------------*/

/* Vertical */
@verticalBoxShadow: @boxShadow;
@verticalPointerWidth: 2px;
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: @dividerBackground;

@verticalActiveBoxShadow: none;


/* Secondary */
@secondaryBackground: none;
@secondaryMargin: 0em -@secondaryItemSpacing;
@secondaryItemBackground: none;
@secondaryItemSpacing: @relative5px;
@secondaryItemMargin: 0em @secondaryItemSpacing;
@secondaryItemVerticalPadding: @relativeMini;
@secondaryItemHorizontalPadding: @relativeSmall;
@secondaryItemPadding: @relativeMini @relativeSmall;
@secondaryItemBorderRadius: @defaultBorderRadius;
@secondaryItemTransition: color @defaultDuration @defaultEasing;
@secondaryItemColor: @unselectedTextColor;

@secondaryHoverItemBackground: @transparentBlack;
@secondaryHoverItemColor: @selectedTextColor;

@secondaryActiveItemBackground: @transparentBlack;
@secondaryActiveItemColor: @selectedTextColor;
@secondaryActiveHoverItemBackground: @transparentBlack;
@secondaryActiveHoverItemColor: @selectedTextColor;

@secondaryActiveHoveredItemBackground: @transparentBlack;
@secondaryActiveHoveredItemColor: @selectedTextColor;

@secondaryHeaderBackground: none transparent;
@secondaryHeaderBorder: none;

@secondaryItemVerticalSpacing: @secondaryItemSpacing;
@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
@secondaryVerticalItemBorderRadius: @defaultBorderRadius;

@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
@secondaryMenuSubMenuItemMargin: 0em;
@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding;

/* Pointing */
@secondaryPointingBorderWidth: 2px;
@secondaryPointingBorderColor: @borderColor;
@secondaryPointingItemVerticalPadding: @relativeTiny;
@secondaryPointingItemHorizontalPadding: @relativeLarge;

@secondaryPointingHoverTextColor: @textColor;

@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;
@tieredActiveMenuBackground: #FCFCFC;

@tieredSubMenuTextTransform: @normal;
@tieredSubMenuFontWeight: @normal;

@tieredSubMenuColor: @lightTextColor;

@tieredSubMenuHoverBackground: none transparent;
@tieredSubMenuHoverColor: @hoveredTextColor;

@tieredSubMenuActiveBackground: none transparent;
@tieredSubMenuActiveColor: @selectedTextColor;

@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);


/* Icon */
@iconMenuTextAlign: center;
@iconMenuItemColor: @black;
@iconMenuInvertedItemColor: @white;


/* Tabular */
@tabularBorderColor: @solidBorderColor;
@tabularBackgroundColor: transparent;
@tabularBackground: none @tabularBackgroundColor;
@tabularBorderWidth: 1px;
@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
@tabularVerticalPadding: @itemVerticalPadding;
@tabularHorizontalPadding: @relativeHuge;
@tabularBorderRadius: @defaultBorderRadius;
@tabularTextColor: @itemTextColor;

@tabularHoveredTextColor: @hoveredTextColor;

@tabularVerticalBackground: none @tabularBackgroundColor;

@tabularFluidOffset: 1px;
@tabularFluidWidth: calc(100% + (@tabularFluidOffset * 2));

@tabularActiveBackground: none @white;
@tabularActiveColor: @selectedTextColor;
@tabularActiveBoxShadow: none;
@tabularActiveWeight: @bold;



/* Pagination */
@paginationMinWidth: 3em;
@paginationActiveBackground: @transparentBlack;
@paginationActiveTextColor: @selectedTextColor;

/* Labeled Icon */
@labeledIconItemHorizontalPadding: @relativeMassive;
@labeledIconSize: @relativeMassive;
@labeledIconMinWidth: 6em;
@labeledIconTextMargin: 0.5rem;


/* Text */
@textMenuItemSpacing: @relative7px;
@textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
@textMenuItemColor: @mutedTextColor;
@textMenuItemFontWeight: @normal;
@textMenuItemMargin: 0em 0em;
@textMenuItemPadding: @relative5px @textMenuItemSpacing;
@textMenuItemTransition: opacity @defaultDuration @defaultEasing;

@textMenuSubMenuMargin: 0em;
@textMenuSubMenuItemMargin: 0em;
@textMenuSubMenuItemPadding: @relative7px 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
---------------*/

/* Inverted */
@invertedBackground: @black;
@invertedBoxShadow: none;
@invertedBorder: 0px solid transparent;
@invertedHeaderBackground: transparent;

@invertedItemBackground: transparent;
@invertedItemTextColor: @invertedTextColor;

/* Inverted Sub Menu */
@invertedSubMenuBackground: transparent;
@invertedSubMenuColor: @invertedUnselectedTextColor;

/* Inverted Hover */
@invertedHoverBackground: @transparentWhite;
@invertedHoverColor: @invertedSelectedTextColor;

@invertedSubMenuHoverBackground: transparent;
@invertedSubMenuHoverColor: @invertedSelectedTextColor;

/* Pressed */
@invertedMenuPressedBackground: @transparentWhite;
@invertedMenuPressedColor: @invertedSelectedTextColor;

/* Inverted Active */
@invertedActiveBackground: @strongTransparentWhite;
@invertedActiveColor: @invertedSelectedTextColor;
@invertedArrowActiveColor: #3D3E3F;

/* Inverted Active Hover  */
@invertedActiveHoverBackground: @invertedActiveBackground;
@invertedActiveHoverColor: @white;
@invertedArrowActiveHoverColor: @invertedArrowActiveColor;

@invertedSubMenuActiveBackground: transparent;
@invertedSubMenuActiveColor: @white;

/* Inverted Menu Divider */
@invertedDividerBackground: rgba(255, 255, 255, 0.08);
@invertedVerticalDividerBackground: @invertedDividerBackground;

/* Inverted Colored */
@invertedColoredDividerBackground: @dividerBackground;
@invertedColoredActiveBackground: @strongTransparentBlack;

/* Fixed */
@fixedPrecedingGridMargin: 2.75rem;

/* Floated */
@floatedDistance: 0.5rem;

/* Attached */
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2));
@attachedBoxShadow: none;
@attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
  @boxShadow,
  @attachedBoxShadow
;

/* Resize large sizes */
@mini: @11px;
@tiny: @12px;
@small: @13px;
@large: @15px;
@big: @16px;
@huge: @17px;
@massive: @18px;

/* Sizes */
@miniWidth: 9rem;
@tinyWidth: 11rem;
@smallWidth: 13rem;
@mediumWidth: 15rem;
@largeWidth: 18rem;
@bigWidth: 20rem;
@hugeWidth: 22rem;
@massiveWidth: 25rem;