You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
12 KiB
431 lines
12 KiB
/*******************************
|
|
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;
|
|
@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: 1px solid @borderColor;
|
|
|
|
@secondaryItemVerticalSpacing: @secondaryItemSpacing;
|
|
@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
|
|
@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
|
|
|
|
/* 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;
|
|
@tabularBorderWidth: 1px;
|
|
@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
|
|
@tabularHorizontalPadding: @relativeHuge;
|
|
@tabularMenuTextColor: @itemTextColor;
|
|
|
|
@tabularFluidOffset: 1px;
|
|
@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
|
|
@tabularActiveColor: @selectedTextColor;
|
|
@tabularActiveBoxShadow: none;
|
|
|
|
@tabularMenuActiveBackground: @white;
|
|
@tabularMenuActiveColor: @selectedTextColor;
|
|
|
|
@tabularActiveWeight: bold;
|
|
@tabularBorderRadius: @defaultBorderRadius;
|
|
|
|
|
|
/* Pagination */
|
|
@paginationMinWidth: 3em;
|
|
@paginationActiveBackground: @transparentBlack;
|
|
@paginationActiveTextColor: @selectedTextColor;
|
|
|
|
/* Labeled Icon */
|
|
@labeledIconItemHorizontalPadding: @relativeMassive;
|
|
@labeledIconSize: @relativeMassive;
|
|
@labeledIconMinWidth: 6em;
|
|
@labeledIconTextMargin: 0.5rem;
|
|
|
|
|
|
/* Text */
|
|
@textMenuItemSpacing: 0.5em;
|
|
@textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
|
|
@textMenuItemColor: @mutedTextColor;
|
|
@textMenuItemFontWeight: normal;
|
|
@textMenuItemMargin: 0em 0em;
|
|
@textMenuItemPadding: @relative5px @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
|
|
---------------*/
|
|
|
|
/* 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
|
|
;
|
|
|
|
/* Sizes */
|
|
@smallWidth: 13rem;
|
|
@mediumWidth: 15rem;
|
|
@largeWidth: 18rem;
|
|
@hugeWidth: 20rem;
|