/*******************************

Dropdown

*******************************/

/*——————-

Element

——————–*/

@transition:

border-radius 0.1s ease,
width 0.2s ease

; @borderRadius: @defaultBorderRadius;

/*——————-

Content

——————–*/

/* Icon */ @dropdownIconMargin: 0em 0em 0em 1em;

/* Current Text */ @textTransition: color 0.2s @defaultEasing;

/* Menu */ @menuBackground: FFFFFF; @menuMargin: 0em; @menuPadding: 0em 0em; @menuTop: 100%; @menuWrap: nowrap; @menuTextAlign: left; @menuTransition: none;

@menuBorder: 1px solid @borderColor; @menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15); @menuBorderRadius: 0em 0em @borderRadius @borderRadius; @menuTransition: opacity 0.2s ease; @menuZIndex: 11;

/* Text */ @textLineHeight: 1em; @textLineHeightOffset: (@textLineHeight - 1em);

/* Menu Item */ @itemFontSize: 1rem; @itemBorder: none; @itemHeight: auto; @itemDivider: none; @itemColor: @textColor; @itemVerticalPadding: 0.65rem; @itemHorizontalPadding: 1.25rem; @itemFontWeight: normal; @itemLineHeight: 1.2em; @itemLineHeightOffset: (@itemLineHeight - 1em); @itemTextTransform: none; @itemBoxShadow: none;

/* Sub Menu */ @subMenuTop: 0%; @subMenuLeft: 100%; @subMenuRight: auto; @subMenuDistanceAway: -0.5em; @subMenuMargin: 0em 0em 0em @subMenuDistanceAway; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; @subMenuZIndex: 21;

/* Menu Header */ @menuHeaderColor: @darkTextColor; @menuHeaderFontSize: 0.8em; @menuHeaderFontWeight: bold; @menuHeaderTextTransform: uppercase; @menuHeaderMargin: 1rem 0rem 0.75rem; @menuHeaderPadding: 0em @itemHorizontalPadding;

/* Menu Divider */ @menuDividerMargin: 0.5em 0em; @menuDividerColor: rgba(0, 0, 0, 0.05); @menuDividerSize: 1px; @menuDividerBorder: @menuDividerSize solid @menuDividerColor;

/* Menu Input */ @menuInputMargin: 0.75rem @itemHorizontalPadding; @menuInputMinWidth: 200px; @menuInputVerticalPadding: 0.5em; @menuInputHorizontalPadding: 1em; @menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;

/* Menu Image */ @menuImageMaxHeight: 2.5em;

/* Item Sub-Element */ @itemElementDistance: 0.75em;

/* Sub-Menu Dropdown Icon */ @itemDropdownIconFloat: right; @itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemElementDistance;

/* Description */ @itemDescriptionMargin: 0em 0em 0em 1em; @itemDescriptionColor: @lightTextColor;

/* Floated Content */ @floatedDistance: 1em;

/*——————-

Types

——————–*/

/* Selection */ @selectionMinWidth: 180px; @selectionBackground: @white; @selectionDisplay: inline-block; @selectionItemDivider: 1px solid rgba(0, 0, 0, 0.05); @selectionVerticalPadding: 0.8em; @selectionHorizontalPadding: 1.1em; @selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding; @selectionZIndex: 10;

@selectionTextIconDistance: 2em; @selectionTextColor: @textColor;

@selectionBoxShadow: none; @selectionBorder: 1px solid @borderColor; @selectionBorderRadius: @borderRadius; @selectionIconOpacity: 0.8; @selectionIconTransition: opacity 0.2s ease; @selectionMenuBoxShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); @selectionMenuItemBoxShadow: none;

@selectionTransition:

@transition,
box-shadow 0.2s @defaultEasing,
border 0.2s @defaultEasing

; @selectionMenuTransition:

box-shadow 0.2s @defaultEasing,
border 0.2s @defaultEasing

;

/* Responsive */ @selectionMobileMaxItems: 3; @selectionTabletMaxItems: 4; @selectionComputerMaxItems: 6; @selectionWidescreenMaxItems: 8;

/* Derived */ @selectedBorderEMWidth: 0.0714em; @selectionItemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; @selectionMobileMaxMenuHeight: (@selectionItemActualHeight * @selectionMobileMaxItems); @selectionTabletMaxMenuHeight: (@selectionItemActualHeight * @selectionTabletMaxItems); @selectionComputerMaxMenuHeight: (@selectionItemActualHeight * @selectionComputerMaxItems); @selectionWidescreenMaxMenuHeight: (@selectionItemActualHeight * @selectionWidescreenMaxItems);

/* Hover */ @selectionHoverBorderColor: @selectedBorderColor; @selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);

/* Visible */ @selectionVisibleBorderColor: @borderColor; @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @selectionVisibleTextFontWeight: normal; @selectionVisibleTextColor: @hoveredTextColor;

/* Visible Hover */ @selectionVisibleHoverBorderColor: @selectedBorderColor; @selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor; @selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);

@selectionVisibleConnectingBorder: 0em; @selectionVisibleIconOpacity: 1;

/* Search */ @searchMinWidth: ”;

/* Search Selection */ @searchSelectionLineHeight: 1.2em; @searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight; @searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight; @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight; @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;

/* Inline */ @inlineIconMargin: 0em 0.5em 0em 0.25em; @inlineTextColor: inherit; @inlineTextFontWeight: bold; @inlineMenuDistance: 0.25em; @inlineMenuBorderRadius: @borderRadius;

/*——————-

States

——————–*/

/* Hovered */ @hoveredItemBackground: @transparentBlack; @hoveredItemColor: @selectedTextColor;

/* Default Text */ @defaultTextColor: rgba(179, 179, 179, 0.7); @defaultTextHoverColor: rgba(140, 140, 140, 0.7);

/* Loading */ @loadingZIndex: -1;

/* Active Menu Item */ @activeItemBackground: transparent; @activeItemZIndex: @menuZIndex + 1; @activeItemBoxShadow: none; @activeItemFontWeight: bold; @activeItemColor: @selectedTextColor;

/* Selected */ @selectedBackground: @subtleTransparentBlack; @selectedColor: @selectedTextColor;

/* Error */ @errorItemTextColor: D95C5C; @errorItemHoverBackground: FFF2F2; @errorItemActiveBackground: FDCFCF;

/*——————-

Variations

——————–*/

/* Flyout Direction */ @leftMenuDropdownIconFloat: left; @leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em;

/* Simple */ @simpleTransitionDuration: 0.2s; @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;

/* Floating */ @floatingMenuDistance: 0.5em; @floatingMenuBoxShadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15); @floatingMenuBorderRadius: @borderRadius;

/* Pointing */ @pointingArrowOffset: -0.25em; @pointingArrowDistanceFromEdge: 1em;

@pointingArrowBackground: @white; @pointingArrowZIndex: 2; @pointingArrowBoxShadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1); @pointingArrowSize: 0.5em;

@pointingMenuDistance: 0.75em; @pointingMenuBorderRadius: @borderRadius;