|
|
/******************************* Dropdown *******************************/
/*------------------- Element --------------------*/
@lineHeight: 1; @transition: border-radius 0.1s ease, width 0.2s ease ; @borderRadius: 0.325em;
/*------------------- 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;
@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;
/* Menu Item */ @itemFontSize: 1rem; @itemBorder: none; @itemHeight: auto; @itemDivider: none; @itemColor: @textColor; @itemVerticalPadding: 0.65rem; @itemHorizontalPadding: 1.25rem; @itemFontWeight: normal; @itemLineHeight: 1.2; @itemTextTransform: none; @itemBoxShadow: none;
/* 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 0.25rem; @menuInputMinWidth: 200px; @menuInputPadding: 0.5em 1em;
/* Menu Image */ @menuImageMaxHeight: 2.5em;
/* Sub Menu Pointer Icon */ @dropdownSubMenuIconFloat: right; @dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em 0.5em;
/* Menu Item Icon */ @itemIconMargin: 0em 0.75em 0em 0em; @itemLabelMargin: @itemIconMargin; @itemFlagMargin: @itemIconMargin; @itemImageMargin: @itemIconMargin;
/* Sub Menu */ @subMenuTop: 0%; @subMenuLeft: 100%; @subMenuRight: auto; @subMenuDistanceAway: -0.5em; @subMenuMargin: 0em 0em 0em @subMenuDistanceAway; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
/*------------------- b 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; @selectionMenuMaxHeight: 245px; @selectionMenuBoxShadow: 0px 4px 6px 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 ;
/* 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;
/* Inline */ @inlineIconMargin: 0em 0.5em 0em 0.25em; @inlineTextColor: inherit; @inlineTextFontWeight: bold; @inlineMenuDistance: 0.25em; @inlineMenuBorderRadius: @borderRadius;
/*------------------- States --------------------*/
/* Default Text */ @defaultTextColor: rgba(179, 179, 179, 0.7); @defaultTextHoverColor: rgba(140, 140, 140, 0.7);
/* Active Menu Item */ @activeItemBackground: transparent; @activeItemZIndex: @menuZIndex + 1; @activeItemBoxShadow: none; @activeItemFontWeight: bold; @activeItemColor: @selectedTextColor;
@selectedBackground: @subtleTransparentBlack; @selectedColor: @selectedTextColor;
/* Error */ @errorItemTextColor: #D95C5C; @errorItemHoverBackground: #FFF2F2; @errorItemActiveBackground: #FDCFCF;
/*------------------- Variations --------------------*/
/* 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;
|