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.
363 lines
8.6 KiB
363 lines
8.6 KiB
/*******************************
|
|
Menu
|
|
*******************************/
|
|
|
|
|
|
/*-------------------
|
|
Globals Used
|
|
--------------------*/
|
|
|
|
// @textColor
|
|
// @borderColor
|
|
// @invertedUnselectedTextColor
|
|
|
|
/*-------------------
|
|
Collection
|
|
--------------------*/
|
|
|
|
/* Menu */
|
|
@margin: 1em 0rem;
|
|
@background: #FFFFFF;
|
|
@itemBackground: none;
|
|
@fontWeight: normal;
|
|
@borderWidth: 1px;
|
|
@boxShadow:
|
|
0px 0px 0px @borderWidth @borderColor,
|
|
@subtleShadow
|
|
;
|
|
@borderRadius: @defaultBorderRadius;
|
|
|
|
/* Menu Item */
|
|
@itemVerticalPadding: @relativeSmall;
|
|
@itemHorizontalPadding: @relativeLarge;
|
|
@itemTransition:
|
|
opacity @transitionDuration @transitionEasing,
|
|
background @transitionDuration @transitionEasing,
|
|
box-shadow @transitionDuration @transitionEasing
|
|
;
|
|
@itemTextColor: @textColor;
|
|
|
|
/* Divider */
|
|
@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%)
|
|
;
|
|
|
|
/* Sub Menu */
|
|
@subMenuMargin: 0.5em;
|
|
@subMenuFontSize: 0.875em;
|
|
@subMenuTextColor: rgba(0, 0, 0, 0.5);
|
|
|
|
@subMenuHorizontalPadding: 0.5em;
|
|
@subMenuVerticalPadding: 1.5em;
|
|
|
|
/* Text Item */
|
|
@textLineHeight: 1.3;
|
|
|
|
/*--------------
|
|
Elements
|
|
---------------*/
|
|
|
|
/* Icon */
|
|
@iconFloat: none;
|
|
@iconMargin: 0em 0.25em 0em 0em;
|
|
@iconOpacity: 0.75;
|
|
|
|
@dropdownIconFloat: right;
|
|
@dropdownIconDistance: 1em;
|
|
|
|
@verticalIconFloat: right;
|
|
@verticalIconMargin: 0em 0em 0em 0.5em;
|
|
|
|
/* Header */
|
|
@headerBackground: '';
|
|
@headerWeight: bold;
|
|
@headerTextTransform: normal;
|
|
|
|
@verticalHeaderMargin: 0em 0em 0.5em;
|
|
@verticalHeaderFontSize: @relativeMedium;
|
|
@verticalHeaderFontWeight: bold;
|
|
|
|
/*--------------
|
|
Couplings
|
|
---------------*/
|
|
|
|
/* Button */
|
|
@buttonSize: @relativeMedium;
|
|
@buttonOffset: 0em;
|
|
@buttonMargin: -0.4em 0em;
|
|
@buttonVerticalPadding: 0.6em;
|
|
|
|
/* Input */
|
|
@inputSize: @relativeMedium;
|
|
@inputVerticalMargin: -0.5em;
|
|
@inputOffset: 0em;
|
|
@inputVerticalPadding: 0.5em;
|
|
|
|
@smallInputOffset: 0em;
|
|
@smallInputVerticalPadding: 0.4em;
|
|
|
|
@largeInputOffset: -0.125em;
|
|
@largeInputVerticalPadding: 0.6em;
|
|
|
|
/* Image */
|
|
@imageMargin: -0.5em -0.2em;
|
|
@imageWidth: 2.5em;
|
|
@verticalImageWidth: auto;
|
|
|
|
/* Label */
|
|
@labelOffset: -0.15em;
|
|
@labelBackground: #999999;
|
|
@labelTextColor: @white;
|
|
|
|
@labelTextMargin: 1em;
|
|
@labelVerticalPadding: 0.3em;
|
|
@labelHorizontalPadding: 0.8em;
|
|
|
|
@labelAndIconFloat: none;
|
|
@labelAndIconMargin: 0em 0.5em 0em 0em;
|
|
|
|
/* Dropdown */
|
|
@dropdownBackground: #FFFFFF;
|
|
@dropdownMenuOffset: 0px;
|
|
@dropdownPointingDistance: 0px;
|
|
|
|
@dropdownItemBackground: transparent;
|
|
@dropdownItemTextColorHover: @selectedTextColor;
|
|
@dropdownIconMargin: 0em 0em 0em 1em;
|
|
@dropdownItemColor: @textColor;
|
|
@dropdownItemTransition: none;
|
|
|
|
@dropdownHoveredItemBackground: @transparentBlack;
|
|
@dropdownHoveredItemColor: @selectedTextColor;
|
|
|
|
@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;
|
|
|
|
@arrowVerticalHoverColor: @arrowHoverColor;
|
|
@arrowVerticalActiveColor: @arrowActiveColor;
|
|
@arrowVerticalSubMenuColor: @white;
|
|
|
|
/*--------------
|
|
States
|
|
---------------*/
|
|
|
|
@hoverBackground: @subtleTransparentBlack;
|
|
@hoverColor: @textColor;
|
|
|
|
@pressedBackground: @subtleTransparentBlack;
|
|
@pressedColor: @pressedTextColor;
|
|
|
|
@activeBackground: @subtleTransparentBlack;
|
|
@activeColor: @selectedTextColor;
|
|
@activePointerSize: 0px;
|
|
@activeFontWeight: normal;
|
|
@activeIconOpacity: 1;
|
|
@activeBoxShadow: none;
|
|
|
|
@activeHoverBackground: @hoverBackground;
|
|
@subMenuActiveBackground: transparent;
|
|
@subMenuActiveColor: @selectedTextColor;
|
|
@subMenuActiveFontWeight: bold;
|
|
|
|
|
|
/*--------------
|
|
Types
|
|
---------------*/
|
|
|
|
/* Vertical */
|
|
@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%)
|
|
;
|
|
|
|
@verticalActivePointerSize: 2px;
|
|
@verticalActiveBoxShadow:
|
|
(@verticalActivePointerSize - @borderWidth) 0em 0em inset,
|
|
-@borderWidth 0em 0em
|
|
;
|
|
|
|
|
|
/* Secondary */
|
|
@secondaryBackground: none;
|
|
@secondaryItemBackground: none;
|
|
|
|
@secondaryTransition: color 0.2s ease;
|
|
|
|
@secondaryBorderRadius: @defaultBorderRadius;
|
|
|
|
@secondaryMargin: 0.25em;
|
|
@secondaryVerticalMargin: 0.3em;
|
|
@secondaryVerticalPadding: @relativeMini;
|
|
@secondaryHorizontalPadding: @relativeSmall;
|
|
|
|
@secondaryLinkOpacity: 0.8;
|
|
|
|
@secondaryHeaderBackground: none transparent;
|
|
@secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
|
|
|
|
@secondaryActiveBackground: @transparentBlack;
|
|
@secondaryInvertedActiveBackground: @transparentWhite;
|
|
|
|
|
|
/* Pointing */
|
|
@secondaryPointingBorderWidth: 2px;
|
|
|
|
@secondaryPointingBorderColor: @borderColor;
|
|
@secondaryPointingInvertedBorderColor: @whiteBorderColor;
|
|
@secondaryPointingActiveBorderColor: @black;
|
|
@secondaryPointinInvertedActiveColor: @white;
|
|
|
|
@secondaryPointingItemMargin: 0em 0em -@secondaryPointingBorderWidth;
|
|
@secondaryPointingItemVerticalPadding: @relativeTiny;
|
|
@secondaryPointingItemHorizontalPadding: @relativeMedium;
|
|
@secondaryPointingHoverTextColor: @textColor;
|
|
@secondaryPointingActiveFontWeight: bold;
|
|
@secondaryPointingActiveTextColor: @selectedTextColor;
|
|
@secondaryPointingHeaderColor: @darkTextColor;
|
|
|
|
@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
|
|
|
|
/* 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: rgba(0, 0, 0, 0.6);
|
|
|
|
/* Tabular */
|
|
@tabularBorderColor: @solidBorderColor;
|
|
@tabularBackgroundColor: #FFFFFF;
|
|
@tabularBorderWidth: 1px;
|
|
@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
|
|
@tabularHorizontalPadding: @relativeHuge;
|
|
@tabularMenuTextColor: @itemTextColor;
|
|
|
|
@tabularFluidOffset: 1px;
|
|
@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
|
|
@tabularActiveColor: @selectedTextColor;
|
|
@tabularActiveBoxShadow: none;
|
|
|
|
@tabularMenuActiveBackground: #FFFFFF;
|
|
@tabularActiveWeight: bold;
|
|
@tabularBorderRadius: 5px;
|
|
|
|
/* Pagination */
|
|
@paginationMinWidth: 3em;
|
|
@paginationActiveBackground: rgba(0, 0, 0, 0.03);
|
|
|
|
/* Labeled Icon */
|
|
@labeledIconSize: 1.5em;
|
|
@labeledIconMinWidth: 6em;
|
|
@labeledIconTextMargin: 0.5em;
|
|
|
|
/* Text */
|
|
@textMenuMargin: @relativeLarge -@textMenuItemSpacing;
|
|
|
|
@textMenuItemSpacing: 1em;
|
|
@textMenuItemOpacity: 0.8;
|
|
@textMenuItemMargin: 0em @textMenuItemSpacing;
|
|
@textMenuItemTransition: opacity @transitionDuration @transitionEasing;
|
|
|
|
@textMenuHeaderSize: @relativeSmall;
|
|
@textMenuHeaderColor: @darkTextColor;
|
|
@textMenuHeaderFontWeight: bold;
|
|
@textMenuHeaderTextTransform: uppercase;
|
|
|
|
@textVerticalMenuMargin: @relativeSmall 0em;
|
|
@textVerticalMenuHeaderMargin: @relativeLarge 0em;
|
|
@textVerticalMenuItemMargin: @relativeLarge 0em;
|
|
|
|
@textVerticalMenuIconFloat: none;
|
|
@textVerticalMenuIconMargin: @iconMargin;
|
|
|
|
/*--------------
|
|
Variations
|
|
---------------*/
|
|
|
|
/* Inverted */
|
|
@invertedBackground: @black;
|
|
@invertedBoxShadow: none;
|
|
@invertedHeaderBackground: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Inverted Sub Menu */
|
|
@invertedSubMenuBackground: transparent;
|
|
@invertedSubMenuColor: @invertedUnselectedTextColor;
|
|
|
|
/* Inverted Hover */
|
|
@invertedHoverBackground: rgba(255, 255, 255, 0.1);
|
|
@invertedHoverColor: @white;
|
|
@invertedSubMenuHoverBackground: transparent;
|
|
@invertedSubMenuHoverColor: @white;
|
|
|
|
/* Pressed */
|
|
@invertedMenuPressedBackground: rgba(255, 255, 255, 0.15);
|
|
@invertedMenuPressedColor: @white;
|
|
|
|
/* Inverted Active */
|
|
@invertedActiveBackground: rgba(255, 255, 255, 0.2);
|
|
@invertedActiveColor: @white;
|
|
@invertedSubMenuActiveBackground: transparent;
|
|
@invertedSubMenuActiveColor: @white;
|
|
|
|
/* Inverted Secondary */
|
|
@secondaryInvertedColor: @invertedLightTextColor;
|
|
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
|
|
|
|
/* Inverted Menu Divider */
|
|
@invertedDividerBackground: linear-gradient(
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0.1) 50%,
|
|
rgba(255, 255, 255, 0.06) 100%)
|
|
;
|
|
@invertedVerticalDividerBackground: linear-gradient(to right,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0.1) 50%,
|
|
rgba(255, 255, 255, 0.06) 100%)
|
|
;
|
|
|
|
/* Fixed */
|
|
@fixedGridMargin: 2.75rem;
|
|
|
|
/* Attached */
|
|
@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
|
|
|
|
/* Sizes */
|
|
@smallSubMenu: 0.875rem;
|
|
@smallWidth: 13rem;
|
|
|
|
@medium: 1rem;
|
|
@mediumWidth: 15rem;
|
|
|
|
@large: 1.125rem;
|
|
@largeWidth: 18rem;
|