SemanSemantic-UItic-UI/build/less/themes/packages/default/modules/dropdown.variables

/*******************************
            Dropdown
*******************************/

/*-------------------
       Element
--------------------*/

@lineHeight: 1;
@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;

/* Menu Item */
@itemFontSize: 1rem;
@itemBorder: none;
@itemHeight: auto;
@itemDivider: none;
@itemColor: @textColor;
@itemVerticalPadding: 0.65rem;
@itemHorizontalPadding: 1.25rem;
@itemFontWeight: normal;
@itemLineHeight: 1.2em;
@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;
@dropdownSubMenuIconDistance: 1em;

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

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

/*-------------------
       States
--------------------*/

@hoveredItemBackground: @transparentBlack;
@hoveredItemColor: @selectedTextColor;

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