diff options
Diffstat (limited to 'semantic/src/themes/default/modules/dropdown.variables')
| -rw-r--r-- | semantic/src/themes/default/modules/dropdown.variables | 471 |
1 files changed, 471 insertions, 0 deletions
diff --git a/semantic/src/themes/default/modules/dropdown.variables b/semantic/src/themes/default/modules/dropdown.variables new file mode 100644 index 0000000..5ab5349 --- /dev/null +++ b/semantic/src/themes/default/modules/dropdown.variables @@ -0,0 +1,471 @@ +/******************************* + Dropdown +*******************************/ + +/*------------------- + Element +--------------------*/ + +@transition: + box-shadow @defaultDuration @defaultEasing, + width @defaultDuration @defaultEasing +; +@borderRadius: @defaultBorderRadius; + +@raisedShadow: 0 2px 3px 0 @borderColor; + +/*------------------- + Content +--------------------*/ + +/* Icon */ +@dropdownIconSize: @relative12px; +@dropdownIconMargin: 0 0 0 1em; + +/* Current Text */ +@textTransition: none; + +/* Menu */ +@menuBackground: #FFFFFF; +@menuMargin: 0; +@menuPadding: 0 0; +@menuTop: 100%; +@menuTextAlign: left; + +@menuBorderWidth: 1px; +@menuBorderColor: @borderColor; +@menuBorder: @menuBorderWidth solid @menuBorderColor; +@menuBoxShadow: @raisedShadow; +@menuBorderRadius: @borderRadius; +@menuTransition: opacity @defaultDuration @defaultEasing; +@menuMinWidth: e(%("calc(100%% + %d)", @menuBorderWidth * 2)); +@menuZIndex: 11; + +/* Text */ +@textLineHeight: 1em; +@textLineHeightOffset: (@textLineHeight - 1em); +@textCursorSpacing: 1px; + +/* Menu Item */ +@itemFontSize: @medium; +@itemTextAlign: left; +@itemBorder: none; +@itemHeight: auto; +@itemDivider: none; +@itemColor: @textColor; +@itemVerticalPadding: @mini; +@itemHorizontalPadding: @large; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemFontWeight: @normal; +@itemLineHeight: 1em; +@itemLineHeightOffset: (@itemLineHeight - 1em); +@itemTextTransform: none; +@itemBoxShadow: none; +@itemMinHeight: unit(@itemLineHeight + 2 * @itemVerticalPadding, rem); + +/* Vertical Item */ +@verticalItemMargin: 0.25em; + +/* Sub Menu */ +@subMenuTop: 0; +@subMenuLeft: 100%; +@subMenuRight: auto; +@subMenuDistanceAway: -0.5em; +@subMenuMargin: 0 @subMenuDistanceAway; +@subMenuBorderRadius: @borderRadius; +@subMenuZIndex: 21; + +/* Menu Header */ +@menuHeaderColor: @darkTextColor; +@menuHeaderFontSize: @relative11px; +@menuHeaderFontWeight: @bold; +@menuHeaderTextTransform: uppercase; +@menuHeaderMargin: 1rem 0 0.75rem; +@menuHeaderPadding: 0 @itemHorizontalPadding; + +/* Menu Divider */ +@menuDividerMargin: 0.5em 0; +@menuDividerColor: @internalBorderColor; +@menuDividerSize: 1px; +@menuDividerBorder: @menuDividerSize solid @menuDividerColor; + +/* Menu Input */ +@menuInputMargin: @large @mini; +@menuInputMinWidth: 10rem; +@menuInputVerticalPadding: 0.5em; +@menuInputHorizontalPadding: @inputHorizontalPadding; +@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding; + +/* Menu Image */ +@menuImageMaxHeight: 2em; +@menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2; + +/* Item Sub-Element */ +@itemElementFloat: none; +@itemElementDistance: @mini; +@itemElementBottomDistance: @itemElementDistance / 2; + +/* Sub-Menu Dropdown Icon */ +@itemDropdownIconDistance: 1em; +@itemDropdownIconFloat: right; +@itemDropdownIconMargin: @itemLineHeightOffset 0 0 @itemDropdownIconDistance; + +/* Description */ +@itemDescriptionFloat: right; +@itemDescriptionMargin: 0 0 0 1em; +@itemDescriptionColor: @lightTextColor; + +/* Message */ +@messagePadding: @selectionItemPadding; +@messageFontWeight: @normal; +@messageColor: @unselectedTextColor; + +/* Floated Content */ +@floatedDistance: 1em; + +/*------------------- + Types +--------------------*/ + +/*------------ + Selection +--------------*/ + +@selectionMinWidth: 14em; +@selectionVerticalPadding: @inputVerticalPadding; +@selectionHorizontalPadding: @inputHorizontalPadding; +@selectionBorderEmWidth: @relative1px; +@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth; +@selectionBackground: @inputBackground; +@selectionDisplay: inline-block; +@selectionIconDistance: @inputHorizontalPadding + (@glyphWidth * 2); +@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding; +@selectionZIndex: 10; + +@selectionItemDivider: 1px solid @solidInternalBorderColor; +@selectionMessagePadding: @selectionItemPadding; + +/* <select> */ +@selectBorder: 1px solid @borderColor; +@selectPadding: 0.5em; +@selectVisibility: visible; +@selectHeight: 38px; + +@selectionTextColor: @textColor; + +@selectionTextUnderlayIconOpacity: @disabledOpacity; +@selectionTextUnderlayColor: @inputPlaceholderFocusColor; + +@selectionBoxShadow: none; +@selectionBorderColor: @borderColor; +@selectionBorder: 1px solid @selectionBorderColor; +@selectionBorderRadius: @borderRadius; + +@selectionIconOpacity: 0.8; +@selectionIconZIndex: 3; +@selectionIconHitbox: @selectionVerticalPadding; +@selectionIconMargin: -@selectionIconHitbox; +@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize; +@selectionIconTransition: opacity @defaultDuration @defaultEasing; + +@selectionMenuBorderRadius: 0 0 @borderRadius @borderRadius; +@selectionMenuBoxShadow: @raisedShadow; +@selectionMenuItemBoxShadow: none; + +@selectionItemHorizontalPadding: @itemHorizontalPadding; +@selectionItemVerticalPadding: @itemVerticalPadding; +@selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding; + +@selectionTransition: @transition; +@selectionMenuTransition: @menuTransition; + +/* Responsive */ +@selectionMobileMaxItems: 3; +@selectionTabletMaxItems: 4; +@selectionComputerMaxItems: 6; +@selectionWidescreenMaxItems: 8; + +/* Derived */ +@selectedBorderEMWidth: 0.1em; /* 1px / em size */ +@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; +@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems); +@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems); +@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems); +@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems); + +/* Hover */ +@selectionHoverBorderColor: @selectedBorderColor; +@selectionHoverBoxShadow: none; + +/* Focus */ +@selectionFocusBorderColor: @focusedFormMutedBorderColor; +@selectionFocusBoxShadow: none; +@selectionFocusMenuBoxShadow: @raisedShadow; + +/* Visible */ +@selectionVisibleTextFontWeight: @normal; +@selectionVisibleTextColor: @hoveredTextColor; + +@selectionVisibleBorderColor: @focusedFormMutedBorderColor; +@selectionVisibleBoxShadow: @raisedShadow; +@selectionVisibleMenuBoxShadow: @raisedShadow; + +/* Visible Hover */ +@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor; +@selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow; +@selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow; + +@selectionVisibleConnectingBorder: 0; +@selectionVisibleIconOpacity: ''; + +/*-------------- + Search +--------------*/ + +@searchMinWidth: ''; + +/* Search Selection */ +@searchSelectionLineHeight: @inputLineHeight; +@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2); +@searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset); +@searchSelectionHorizontalPadding: @selectionHorizontalPadding; +@searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding; + +@searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight; +@searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight; +@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight; +@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight; + +/* Inline */ +@inlineIconMargin: 0 @relative3px 0 @relative3px; +@inlineTextColor: inherit; +@inlineTextFontWeight: @bold; +@inlineMenuDistance: @relative3px; +@inlineMenuBorderRadius: @borderRadius; + + +/*-------------- + Multiple +--------------*/ + +/* Split Actual Padding Between Child and Parent (allows for label spacing) */ +@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3)); +@multipleSelectionLeftPadding: @relative5px; +@multipleSelectionRightPadding: @selectionIconDistance; +@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding; + +/* Child Elements */ +@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3)); +@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding); +@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0 @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin; +@multipleSelectionChildLineHeight: @relative17px; +@multipleSelectionSearchStartWidth: (@glyphWidth * 2); + +/* Dropdown Icon */ +@multipleSelectionDropdownIconMargin: ''; +@multipleSelectionDropdownIconPadding: ''; + +@multipleSelectionSearchAfterLabelDistance: @relative2px; + +/* Selection Label */ +@labelSize: @relativeMedium; +@labelHorizontalMargin: @4px; +@labelVerticalMargin: @2px; +@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0; +@labelBorderWidth: 1px; +@labelBoxShadow: 0 0 0 @labelBorderWidth @borderColor inset; + +@labelVerticalPadding: @relative5px; +@labelHorizontalPadding: @relativeMini; +@labelPadding: @labelVerticalPadding @labelHorizontalPadding; + +@imageLabelHeight: (1em + @labelVerticalPadding * 2); /* Logic adopted from label.less */ +@imageLabelImageMargin: -@labelVerticalPadding @labelHorizontalPadding -@labelVerticalPadding -@labelHorizontalPadding; + +/*------------------- + States +--------------------*/ + +/* Hovered */ +@hoveredItemBackground: @transparentBlack; +@hoveredItemColor: @selectedTextColor; +@hoveredZIndex: @menuZIndex + 2; + +/* Default Text */ +@defaultTextColor: @inputPlaceholderColor; +@defaultTextFocusColor: @inputPlaceholderFocusColor; + +/* Loading */ +@loadingZIndex: -1; + +/* Active Menu Item */ +@activeItemZIndex: @menuZIndex + 1; +@activeItemBackground: transparent; +@activeItemBoxShadow: none; +@activeItemFontWeight: @bold; +@activeItemColor: @selectedTextColor; + +/* Selected */ +@selectedBackground: @subtleTransparentBlack; +@selectedColor: @selectedTextColor; + +/* Clearable */ +@clearableIconOpacity: 0.8; +@clearableIconActiveOpacity: 1; + +/*------------------- + Variations +--------------------*/ + +/* Scrolling */ +@scrollingMenuWidth: 100%; +@scrollingMenuItemBorder: none; +@scrollingMenuRightItemPadding: e(%("calc(%d + %d)", @itemHorizontalPadding, @scrollbarWidth)); + +@scrollingMobileMaxItems: 4; +@scrollingTabletMaxItems: 6; +@scrollingComputerMaxItems: 8; +@scrollingWidescreenMaxItems: 12; + +@scrollingBorderEMWidth: 0; /* 0 / em size */ +@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth; +@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems); +@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems); +@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems); +@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems); + +/* Upward */ +@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; +@upwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); +@upwardSelectionMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); +@upwardMenuBorderRadius: @borderRadius @borderRadius 0 0; +@upwardSelectionHoverBoxShadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); +@upwardSelectionVisibleBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); +@upwardSelectionActiveHoverBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.05); +@upwardSelectionActiveHoverMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); + +/* Flyout Direction */ +@leftMenuDropdownIconFloat: left; +@leftMenuDropdownIconMargin: @itemLineHeightOffset 0 0 0; + +/* Left */ +@leftSubMenuBorderRadius: @borderRadius; +@leftSubMenuMargin: 0 @subMenuDistanceAway 0 0; + +/* Simple */ +@simpleTransitionDuration: @defaultDuration; +@simpleTransition: opacity @simpleTransitionDuration @defaultEasing; + +/* Floating */ +@floatingMenuDistance: 0.5em; +@floatingMenuBoxShadow: @floatingShadow; +@floatingMenuBorderRadius: @borderRadius; + +/* Pointing */ +@pointingArrowOffset: -(@pointingArrowSize / 2); +@pointingArrowDistanceFromEdge: 1em; + +@pointingArrowBackground: @white; +@pointingArrowZIndex: 2; +@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @menuBorderColor; +@pointingArrowSize: @relative7px; + +@pointingMenuDistance: @mini; +@pointingMenuBorderRadius: @borderRadius; + +/* Pointing Upward */ +@pointingUpwardMenuBorderRadius: @borderRadius; +@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor; + +/* Scrollhint */ +@scrollhintWidth: 0.25em; +@scrollhintRightBorder: @scrollhintWidth solid; +@scrollhintLeftBorder: 0; +@scrollhintZIndex: 15; +@scrollhintDuration: 2s; +@scrollhintEasing: @defaultEasing; +@scrollhintIteration: 2; +@scrollhintOffsetRight: @scrollhintWidth; +@scrollhintStartColor: rgba(0, 0, 0, 0.75); +@scrollhintEndColor: rgba(0, 0, 0, 0); + +/*-------------- + Inverted +---------------*/ + +/* General rules and basic dropdowns */ +@invertedMenuBackground: @black; +@invertedMenuColor: @invertedMutedTextColor; +@invertedMenuBorderColor: @strongTransparentWhite; +@invertedMenuBorder: 1px solid @invertedMenuBorderColor; +@invertedMenuBoxShadow: none; + +@invertedPointingArrowBackground: @black; +@invertedPointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @invertedMenuBorderColor; + +@invertedHoveredItemBackground: @transparentWhite; +@invertedHoveredItemColor: @invertedMenuColor; + +@invertedActiveItemBackground: transparent; +@invertedActiveItemColor: @invertedMenuColor; +@invertedActiveItemBoxShadow: none; + +@invertedSelectedBackground: @strongTransparentWhite; +@invertedSelectedColor: @invertedMenuColor; + +@invertedMenuHeaderColor: @white; +@invertedItemDescriptionColor: @invertedUnselectedTextColor; + +@invertedMenuDividerBorder: @menuDividerSize solid @strongTransparentWhite; + +/* Selection */ +@invertedSelectionBorderColor: @strongTransparentWhite; +@invertedSelectionBorder: 1px solid @invertedSelectionBorderColor; +@invertedSelectionBackground: @black; +@invertedSelectionTextColor: @invertedMenuColor; +@invertedSelectionInputTextColor: @white; + +@invertedSelectionHoverBorderColor: rgba(255, 255, 255, 0.25); +@invertedSelectionHoverBoxShadow: none; + +@invertedDefaultTextColor: @invertedUnselectedTextColor; +@invertedDefaultTextFocusColor: @invertedLightTextColor; + +@invertedSelectionVisibleTextColor: @invertedTextColor; + +@invertedSelectionTextUnderlayIconOpacity: 0.45; +@invertedSelectionTextUnderlayColor: @invertedLightTextColor; + +@invertedSelectionItemDivider: 1px solid #242526; +@invertedSelectionVisibleBorderColor: @strongTransparentWhite; + +@invertedMessageColor: @invertedUnselectedTextColor; + +@invertedInputHighlightBackground: rgba(255, 255, 255, 0.25); +@invertedInputHighlightColor: @invertedMutedTextColor; + +/* Multiple */ +/*@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.06); +@invertedLabelBackgroundImage: none; +@invertedLabelColor: rgba(255, 255, 255, 0.6); +@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0.16) inset; + +@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.12); +@invertedLabelHoverBackgroundImage: none; +@invertedLabelHoverTextColor: rgba(255, 255, 255, 0.7);*/ + +@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.7); +@invertedLabelBackgroundImage: none; +@invertedLabelColor: rgba(0, 0, 0, 1); +@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0) inset; + +@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.9); +@invertedLabelHoverBackgroundImage: none; +@invertedLabelHoverTextColor: @invertedLabelColor; + +@invertedLabelIconOpacity: 0.6; +@invertedLabelIconHoverOpacity: 0.8; + +/* Scrollhint */ +@invertedScrollhintStartColor: rgba(255, 255, 255, 0.75); +@invertedScrollhintEndColor: rgba(255, 255, 255, 0); |