diff options
Diffstat (limited to 'semantic/src/definitions/modules/dropdown.less')
| -rw-r--r-- | semantic/src/definitions/modules/dropdown.less | 1850 |
1 files changed, 0 insertions, 1850 deletions
diff --git a/semantic/src/definitions/modules/dropdown.less b/semantic/src/definitions/modules/dropdown.less deleted file mode 100644 index 3953c20..0000000 --- a/semantic/src/definitions/modules/dropdown.less +++ /dev/null @@ -1,1850 +0,0 @@ -/*! - * # Fomantic-UI - Dropdown - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'module'; -@element : 'dropdown'; - -@import (multiple) '../../theme.config'; - -/******************************* - Dropdown -*******************************/ - -.ui.dropdown { - cursor: pointer; - position: relative; - display: inline-block; - outline: none; - text-align: left; - transition: @transition; - user-select: none; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -/******************************* - Content -*******************************/ - -/*-------------- - Menu ----------------*/ - -.ui.dropdown .menu { - cursor: auto; - position: absolute; - display: none; - outline: none; - top: 100%; - min-width: max-content; - - margin: @menuMargin; - padding: @menuPadding; - background: @menuBackground; - - font-size: @relativeMedium; - text-shadow: none; - text-align: @menuTextAlign; - - box-shadow: @menuBoxShadow; - border: @menuBorder; - border-radius: @menuBorderRadius; - transition: @menuTransition; - z-index: @menuZIndex; - will-change: transform, opacity; -} - -.ui.dropdown .menu > * { - white-space: nowrap; -} - - -/*-------------- - Hidden Input ----------------*/ - -.ui.dropdown > input:not(.search):first-child, -.ui.dropdown > select { - display: none !important; -} - -/*-------------- - Dropdown Icon ----------------*/ - -.ui.dropdown:not(.labeled) > .dropdown.icon { - position: relative; - width: auto; - font-size: @dropdownIconSize; - margin: @dropdownIconMargin; -} -.ui.dropdown .menu > .item .dropdown.icon { - width: auto; - float: @itemDropdownIconFloat; - margin: @itemDropdownIconMargin; -} -.ui.dropdown .menu > .item .dropdown.icon + .text { - margin-right: @itemDropdownIconDistance; -} - - -/*-------------- - Text ----------------*/ - -.ui.dropdown > .text { - display: inline-block; - transition: @textTransition; -} - -/*-------------- - Menu Item ----------------*/ - -.ui.dropdown .menu > .item { - position: relative; - cursor: pointer; - display: block; - border: @itemBorder; - height: @itemHeight; - min-height: @itemMinHeight; - text-align: @itemTextAlign; - - border-top: @itemDivider; - line-height: @itemLineHeight; - font-size: @itemFontSize; - color: @itemColor; - - padding: @itemPadding !important; - text-transform: @itemTextTransform; - font-weight: @itemFontWeight; - box-shadow: @itemBoxShadow; - -webkit-touch-callout: none; -} -.ui.dropdown .menu > .item:first-child { - border-top-width: 0; -} - -.ui.dropdown .menu > .item.vertical { - display: flex; - flex-direction: column-reverse; -} - -/*-------------- - Floated Content ----------------*/ - -.ui.dropdown > .text > [class*="right floated"], -.ui.dropdown .menu .item > [class*="right floated"] { - float: right !important; - margin-right: 0 !important; - margin-left: @floatedDistance !important; -} -.ui.dropdown > .text > [class*="left floated"], -.ui.dropdown .menu .item > [class*="left floated"] { - float: left !important; - margin-left: 0 !important; - margin-right: @floatedDistance !important; -} - -.ui.dropdown .menu .item > i.icon.floated, -.ui.dropdown .menu .item > .flag.floated, -.ui.dropdown .menu .item > .image.floated, -.ui.dropdown .menu .item > img.floated { - margin-top: @itemLineHeightOffset; -} - - -/*-------------- - Menu Divider ----------------*/ - -.ui.dropdown .menu > .header { - margin: @menuHeaderMargin; - padding: @menuHeaderPadding; - font-weight: @menuHeaderFontWeight; - text-transform: @menuHeaderTextTransform; -} -.ui.dropdown .menu > .header:not(.ui) { - color: @menuHeaderColor; - font-size: @menuHeaderFontSize; -} -.ui.dropdown .menu > .divider { - border-top: @menuDividerBorder; - height: 0; - margin: @menuDividerMargin; -} -.ui.dropdown .menu > .horizontal.divider { - border-top: none; -} - -.ui.dropdown.dropdown .menu > .input { - width: auto; - display: flex; - margin: @menuInputMargin; - min-width: @menuInputMinWidth; -} -.ui.dropdown .menu > .header + .input { - margin-top: 0; -} -.ui.dropdown .menu > .input:not(.transparent) input { - padding: @menuInputPadding; -} -.ui.dropdown .menu > .input:not(.transparent) .button, -.ui.dropdown .menu > .input:not(.transparent) i.icon, -.ui.dropdown .menu > .input:not(.transparent) .label { - padding-top: @menuInputVerticalPadding; - padding-bottom: @menuInputVerticalPadding; -} - -/*----------------- - Item Description --------------------*/ - -.ui.dropdown > .text > .description, -.ui.dropdown .menu > .item > .description { - float: @itemDescriptionFloat; - margin: @itemDescriptionMargin; - color: @itemDescriptionColor; -} - -.ui.dropdown .menu > .item.vertical > .description { - margin: 0; -} - -/*----------------- - Item Text --------------------*/ - -.ui.dropdown .menu > .item.vertical > .text { - margin-bottom: @verticalItemMargin; -} - -/*----------------- - Message --------------------*/ - -.ui.dropdown .menu > .message { - padding: @messagePadding; - font-weight: @messageFontWeight; -} -.ui.dropdown .menu > .message:not(.ui) { - color: @messageColor; -} - -/*-------------- - Sub Menu ----------------*/ - -.ui.dropdown .menu .menu { - top: @subMenuTop; - left: @subMenuLeft; - right: @subMenuRight; - margin: @subMenuMargin !important; - border-radius: @subMenuBorderRadius !important; - z-index: @subMenuZIndex !important; -} - -/* Hide Arrow */ -.ui.dropdown .menu .menu:after { - display: none; -} - -/*-------------- - Sub Elements ----------------*/ - -/* Icons / Flags / Labels / Image */ -.ui.dropdown > .text > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image { - margin-top: @textLineHeightOffset; -} -.ui.dropdown .menu > .item > i.icon, -.ui.dropdown .menu > .item > .label, -.ui.dropdown .menu > .item > .flag, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - margin-top: @itemLineHeightOffset; -} - -.ui.dropdown > .text > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image, -.ui.dropdown .menu > .item > i.icon, -.ui.dropdown .menu > .item > .label, -.ui.dropdown .menu > .item > .flag, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - margin-left: 0; - float: @itemElementFloat; - margin-right: @itemElementDistance; -} - -/*-------------- - Image ----------------*/ - -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image:not(.icon), -.ui.dropdown .menu > .item > .image:not(.icon), -.ui.dropdown .menu > .item > img { - display: inline-block; - vertical-align: top; - width: auto; - margin-top: @menuImageVerticalMargin; - margin-bottom: @menuImageVerticalMargin; - max-height: @menuImageMaxHeight; -} - - -/******************************* - Coupling -*******************************/ - - -/*-------------- - Menu ----------------*/ - -/* Remove Menu Item Divider */ -.ui.dropdown .ui.menu > .item:before, -.ui.menu .ui.dropdown .menu > .item:before { - display: none; -} - -/* Prevent Menu Item Border */ -.ui.menu .ui.dropdown .menu .active.item { - border-left: none; -} - -/* Automatically float dropdown menu right on last menu item */ -.ui.menu .right.menu .dropdown:last-child > .menu:not(.left), -.ui.menu .right.dropdown.item > .menu:not(.left), -.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) { - left: auto; - right: 0; -} - -& when (@variationDropdownLabel) { - /*-------------- - Label - ---------------*/ - - /* Dropdown Menu */ - .ui.label.dropdown .menu { - min-width: 100%; - } -} - -& when (@variationDropdownButton) { - /*-------------- - Button - ---------------*/ - - /* No Margin On Icon Button */ - .ui.dropdown.icon.button > .dropdown.icon { - margin: 0; - } - .ui.button.dropdown .menu { - min-width: 100%; - } -} - - - -/******************************* - Types -*******************************/ -select.ui.dropdown { - height: @selectHeight; - padding: @selectPadding; - border: @selectBorder; - visibility: @selectVisibility; -} - -& when (@variationDropdownSelection) { - /*-------------- - Selection - ---------------*/ - - /* Displays like a select box */ - .ui.selection.dropdown { - cursor: pointer; - word-wrap: break-word; - line-height: 1em; - white-space: normal; - outline: 0; - transform: rotateZ(0deg); - - min-width: @selectionMinWidth; - min-height: @selectionMinHeight; - - background: @selectionBackground; - display: @selectionDisplay; - padding: @selectionPadding; - color: @selectionTextColor; - box-shadow: @selectionBoxShadow; - border: @selectionBorder; - border-radius: @selectionBorderRadius; - transition: @selectionTransition; - } - .ui.selection.dropdown.visible, - .ui.selection.dropdown.active { - z-index: @selectionZIndex; - } - - .ui.selection.dropdown > .search.icon, - .ui.selection.dropdown > .delete.icon, - .ui.selection.dropdown > .dropdown.icon { - cursor: pointer; - position: absolute; - width: auto; - height: auto; - line-height: @searchSelectionLineHeight; - top: @selectionVerticalPadding; - right: @selectionHorizontalPadding; - z-index: @selectionIconZIndex; - margin: @selectionIconMargin; - padding: @selectionIconPadding; - opacity: @selectionIconOpacity; - transition: @selectionIconTransition; - } - & when (@variationDropdownCompact) { - /* Compact */ - .ui.compact.selection.dropdown { - min-width: 0; - } - } - - /* Selection Menu */ - .ui.selection.dropdown .menu { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - border-top-width: 0 !important; - width: auto; - outline: none; - margin: 0 -@menuBorderWidth; - min-width: @menuMinWidth; - width: @menuMinWidth; - - border-radius: @selectionMenuBorderRadius; - box-shadow: @selectionMenuBoxShadow; - transition: @selectionMenuTransition; - } - .ui.selection.dropdown .menu:after, - .ui.selection.dropdown .menu:before { - display: none; - } - - /*-------------- - Message - ---------------*/ - - .ui.selection.dropdown .menu > .message { - padding: @selectionMessagePadding; - } - - @media only screen and (max-width : @largestMobileScreen) { - & when (@variationDropdownShort) { - .ui.selection.dropdown.short .menu { - max-height: @selectionMobileMaxMenuHeight * 0.75; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: @selectionMobileMaxMenuHeight * 0.5; - } - } - .ui.selection.dropdown .menu { - max-height: @selectionMobileMaxMenuHeight; - } - & when (@variationDropdownLong) { - .ui.selection.dropdown.long .menu { - max-height: @selectionMobileMaxMenuHeight * 2; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: @selectionMobileMaxMenuHeight * 3; - } - } - } - @media only screen and (min-width: @tabletBreakpoint) { - & when (@variationDropdownShort) { - .ui.selection.dropdown.short .menu { - max-height: @selectionTabletMaxMenuHeight * 0.75; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: @selectionTabletMaxMenuHeight * 0.5; - } - } - .ui.selection.dropdown .menu { - max-height: @selectionTabletMaxMenuHeight; - } - & when (@variationDropdownLong) { - .ui.selection.dropdown.long .menu { - max-height: @selectionTabletMaxMenuHeight * 2; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: @selectionTabletMaxMenuHeight * 3; - } - } - } - @media only screen and (min-width: @computerBreakpoint) { - & when (@variationDropdownShort) { - .ui.selection.dropdown.short .menu { - max-height: @selectionComputerMaxMenuHeight * 0.75; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: @selectionComputerMaxMenuHeight * 0.5; - } - } - .ui.selection.dropdown .menu { - max-height: @selectionComputerMaxMenuHeight; - } - & when (@variationDropdownLong) { - .ui.selection.dropdown.long .menu { - max-height: @selectionComputerMaxMenuHeight * 2; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: @selectionComputerMaxMenuHeight * 3; - } - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - & when (@variationDropdownShort) { - .ui.selection.dropdown.short .menu { - max-height: @selectionWidescreenMaxMenuHeight * 0.75; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: @selectionWidescreenMaxMenuHeight * 0.5; - } - } - .ui.selection.dropdown .menu { - max-height: @selectionWidescreenMaxMenuHeight; - } - & when (@variationDropdownLong) { - .ui.selection.dropdown.long .menu { - max-height: @selectionWidescreenMaxMenuHeight * 2; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: @selectionWidescreenMaxMenuHeight * 3; - } - } - } - - /* Menu Item */ - .ui.selection.dropdown .menu > .item { - border-top: @selectionItemDivider; - padding: @selectionItemPadding !important; - white-space: normal; - word-wrap: normal; - } - - /* User Item */ - .ui.selection.dropdown .menu > .hidden.addition.item { - display: none; - } - - /* Hover */ - .ui.selection.dropdown:hover { - border-color: @selectionHoverBorderColor; - box-shadow: @selectionHoverBoxShadow; - } - - /* Active */ - .ui.selection.active.dropdown { - border-color: @selectionVisibleBorderColor; - box-shadow: @selectionVisibleBoxShadow; - } - .ui.selection.active.dropdown .menu { - border-color: @selectionVisibleBorderColor; - box-shadow: @selectionVisibleMenuBoxShadow; - } - - /* Focus */ - .ui.selection.dropdown:focus { - border-color: @selectionFocusBorderColor; - box-shadow: @selectionFocusBoxShadow; - } - .ui.selection.dropdown:focus .menu { - border-color: @selectionFocusBorderColor; - box-shadow: @selectionFocusMenuBoxShadow; - } - - /* Visible */ - .ui.selection.visible.dropdown > .text:not(.default) { - font-weight: @selectionVisibleTextFontWeight; - color: @selectionVisibleTextColor; - } - - /* Visible Hover */ - .ui.selection.active.dropdown:hover { - border-color: @selectionActiveHoverBorderColor; - box-shadow: @selectionActiveHoverBoxShadow; - } - .ui.selection.active.dropdown:hover .menu { - border-color: @selectionActiveHoverBorderColor; - box-shadow: @selectionActiveHoverMenuBoxShadow; - } - - /* Dropdown Icon */ - .ui.active.selection.dropdown > .dropdown.icon, - .ui.visible.selection.dropdown > .dropdown.icon { - opacity: @selectionVisibleIconOpacity; - z-index: 3; - } - - /* Connecting Border */ - .ui.active.selection.dropdown { - border-bottom-left-radius: @selectionVisibleConnectingBorder !important; - border-bottom-right-radius: @selectionVisibleConnectingBorder !important; - } - - /* Empty Connecting Border */ - .ui.active.empty.selection.dropdown { - border-radius: @selectionBorderRadius !important; - box-shadow: @selectionBoxShadow !important; - } - .ui.active.empty.selection.dropdown .menu { - border: none !important; - box-shadow: none !important; - } - & when (@variationDropdownScrollhint) { - /* CSS specific to iOS devices or firefox mobile only */ - @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) { - @media (-moz-touch-enabled), (pointer: coarse) { - .ui.dropdown .scrollhint.menu:not(.hidden):before { - animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration; - content: ''; - z-index: @scrollhintZIndex; - display: block; - position: absolute; - opacity: 0; - right: @scrollhintOffsetRight; - top: 0; - height: 100%; - border-right: @scrollhintRightBorder; - border-left: @scrollhintLeftBorder; - border-image: linear-gradient(to bottom, @scrollhintStartColor, @scrollhintEndColor) 1 100%; - } - - .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before { - border-image: linear-gradient(to bottom, @invertedScrollhintStartColor, @invertedScrollhintEndColor) 1 100%; - } - - @keyframes scrollhint { - 0% { - opacity: 1; - top: 100%; - } - 100% { - opacity: 0; - top: 0; - } - } - } - } - } -} - -& when (@variationDropdownSearch) { - /*-------------- - Searchable - ---------------*/ - - /* Search Selection */ - .ui.search.dropdown { - min-width: @searchMinWidth; - } - - /* Search Dropdown */ - .ui.search.dropdown > input.search { - background: none transparent !important; - border: none !important; - box-shadow: none !important; - cursor: text; - top: 0; - left: @textCursorSpacing; - width: 100%; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - padding: inherit; - } - - /* Text Layering */ - .ui.search.dropdown > input.search { - position: absolute; - z-index: 2; - } - .ui.search.dropdown > .text { - cursor: text; - position: relative; - left: @textCursorSpacing; - z-index: auto; - } - - & when (@variationDropdownSelection) { - /* Search Selection */ - .ui.search.selection.dropdown > input.search { - line-height: @searchSelectionLineHeight; - padding: @searchSelectionInputPadding; - } - - /* Used to size multi select input to character width */ - .ui.search.selection.dropdown > span.sizer { - line-height: @searchSelectionLineHeight; - padding: @searchSelectionInputPadding; - display: none; - white-space: pre; - } - } - - /* Active/Visible Search */ - .ui.search.dropdown.active > input.search, - .ui.search.dropdown.visible > input.search { - cursor: auto; - } - .ui.search.dropdown.active > .text, - .ui.search.dropdown.visible > .text { - pointer-events: none; - } - - /* Filtered Text */ - .ui.active.search.dropdown input.search:focus + .text i.icon, - .ui.active.search.dropdown input.search:focus + .text .flag { - opacity: @selectionTextUnderlayIconOpacity; - } - .ui.active.search.dropdown input.search:focus + .text { - color: @selectionTextUnderlayColor !important; - } - - .ui.search.dropdown.button > span.sizer { - display: none; - } - - /* Search Menu */ - .ui.search.dropdown .menu { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - } - @media only screen and (max-width : @largestMobileScreen) { - .ui.search.dropdown .menu { - max-height: @searchMobileMaxMenuHeight; - } - } - @media only screen and (min-width: @tabletBreakpoint) { - .ui.search.dropdown .menu { - max-height: @searchTabletMaxMenuHeight; - } - } - @media only screen and (min-width: @computerBreakpoint) { - .ui.search.dropdown .menu { - max-height: @searchComputerMaxMenuHeight; - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - .ui.search.dropdown .menu { - max-height: @searchWidescreenMaxMenuHeight; - } - } -} - -/* Clearable Selection */ -.ui.dropdown > .remove.icon { - cursor: pointer; - font-size: @dropdownIconSize; - margin: @selectionIconMargin; - padding: @selectionIconPadding; - right: 3em; - top: @selectionVerticalPadding; - position: absolute; - opacity: 0.6; - z-index: @selectionIconZIndex; -} - -.ui.clearable.dropdown .text, -.ui.clearable.dropdown a:last-of-type { - margin-right: 1.5em; -} - -.ui.dropdown select.noselection ~ .remove.icon, -.ui.dropdown input[value=''] ~ .remove.icon, -.ui.dropdown input:not([value]) ~ .remove.icon, -.ui.dropdown.loading > .remove.icon { - display: none; -} - -& when (@variationDropdownMultiple) { - /*-------------- - Multiple - ---------------*/ - - /* Multiple Selection */ - .ui.ui.multiple.dropdown { - padding: @multipleSelectionPadding; - } - .ui.multiple.dropdown .menu { - cursor: auto; - } - - /* Selection Label */ - .ui.multiple.dropdown > .label { - display: inline-block; - white-space: normal; - font-size: @labelSize; - padding: @labelPadding; - margin: @labelMargin; - box-shadow: @labelBoxShadow; - } - - /* Dropdown Icon */ - .ui.multiple.dropdown .dropdown.icon { - margin: @multipleSelectionDropdownIconMargin; - padding: @multipleSelectionDropdownIconPadding; - } - - /* Text */ - .ui.multiple.dropdown > .text { - position: static; - padding: 0; - max-width: 100%; - margin: @multipleSelectionChildMargin; - line-height: @multipleSelectionChildLineHeight; - &.default { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - .ui.multiple.dropdown > .label ~ input.search { - margin-left: @multipleSelectionSearchAfterLabelDistance !important; - } - .ui.multiple.dropdown > .label ~ .text { - display: none; - } - .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) { - margin-right: @itemElementDistance; - } - .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) { - margin-bottom: @itemElementBottomDistance; - } - .ui.multiple.dropdown > .image.label img { - margin: @imageLabelImageMargin; - height: @imageLabelHeight; - } - - & when (@variationDropdownSearch) { - /*----------------- - Multiple Search - -----------------*/ - - /* Multiple Search Selection */ - .ui.multiple.search.dropdown, - .ui.multiple.search.dropdown > input.search { - cursor: text; - } - - /* Prompt Text */ - .ui.multiple.search.dropdown > .text { - display: inline-block; - position: absolute; - top: 0; - left: 0; - padding: inherit; - margin: @multipleSelectionChildMargin; - line-height: @multipleSelectionChildLineHeight; - } - - .ui.multiple.search.dropdown > .label ~ .text { - display: none; - } - - /* Search */ - .ui.multiple.search.dropdown > input.search { - position: static; - padding: 0; - max-width: 100%; - margin: @multipleSelectionChildMargin; - width: @multipleSelectionSearchStartWidth; - line-height: @multipleSelectionChildLineHeight; - } - - .ui.multiple.search.dropdown.button { - min-width: @selectionMinWidth; - } - } -} - -& when (@variationDropdownInline) { - /*-------------- - Inline - ---------------*/ - - .ui.inline.dropdown { - cursor: pointer; - display: inline-block; - color: @inlineTextColor; - } - .ui.inline.dropdown .dropdown.icon { - margin: @inlineIconMargin; - vertical-align: baseline; - } - .ui.inline.dropdown > .text { - font-weight: @inlineTextFontWeight; - } - .ui.inline.dropdown .menu { - cursor: auto; - margin-top: @inlineMenuDistance; - border-radius: @inlineMenuBorderRadius; - } -} - - -/******************************* - States -*******************************/ - - -/*-------------------- - Active -----------------------*/ - -/* Menu Item Active */ -.ui.dropdown .menu .active.item { - background: @activeItemBackground; - font-weight: @activeItemFontWeight; - color: @activeItemColor; - box-shadow: @activeItemBoxShadow; - z-index: @activeItemZIndex; -} - - -/*-------------------- - Hover -----------------------*/ - -/* Menu Item Hover */ -.ui.dropdown .menu > .item:hover { - background: @hoveredItemBackground; - color: @hoveredItemColor; - z-index: @hoveredZIndex; -} - -/*-------------------- - Default Text -----------------------*/ - -.ui.dropdown:not(.button) > .default.text, -.ui.default.dropdown:not(.button) > .text { - color: @defaultTextColor; -} -.ui.dropdown:not(.button) > input:focus ~ .default.text, -.ui.default.dropdown:not(.button) > input:focus ~ .text { - color: @defaultTextFocusColor; -} - -& when (@variationDropdownLoading) { - - /*-------------------- - Loading - ---------------------*/ - - .ui.loading.dropdown > i.icon { - height: @relative14px !important; - } - .ui.loading.selection.dropdown > i.icon { - padding: @relative21px @relative18px !important; - } - .ui.loading.dropdown > i.icon:before { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - border-radius: @circularRadius; - border: @loaderLineWidth solid @loaderFillColor; - } - .ui.loading.dropdown > i.icon:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - box-shadow: 0 0 0 1px transparent; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid @loaderLineColor; - border-radius: @circularRadius; - - } - - /* Coupling */ - .ui.loading.dropdown.button > i.icon:before, - .ui.loading.dropdown.button > i.icon:after { - display: none; - } - - .ui.loading.dropdown > .text { - transition: none; - } - - /* Used To Check Position */ - .ui.dropdown .loading.menu { - display: block; - visibility: hidden; - z-index: @loadingZIndex; - } - .ui.dropdown > .loading.menu { - left: 0 !important; - right: auto !important; - } - .ui.dropdown > .menu .loading.menu { - left: 100% !important; - right: auto !important; - } -} - -/*-------------------- - Keyboard Select -----------------------*/ - -/* Selected Item */ -.ui.dropdown.selected, -.ui.dropdown .menu .selected.item { - background: @selectedBackground; - color: @selectedColor; -} - - -/*-------------------- - Search Filtered -----------------------*/ - -/* Filtered Item */ -.ui.dropdown > .filtered.text { - visibility: hidden; -} -.ui.dropdown .filtered.item { - display: none !important; -} - -& when (@variationDropdownStates) { - /*-------------------- - States - ----------------------*/ - each(@formStates, { - @state: replace(@key, '@', ''); - @c: @formStates[@@state][dropdownLabelColor]; - @bdc: @formStates[@@state][borderColor]; - - .ui.dropdown.@{state}, - .ui.dropdown.@{state} > .text, - .ui.dropdown.@{state} > .default.text { - color: @c; - } - & when (@variationDropdownSelection) { - .ui.selection.dropdown.@{state} { - background: @formStates[@@state][background]; - border-color: @bdc; - } - - .ui.selection.dropdown.@{state}:hover { - border-color: @bdc; - } - - & when (@variationDropdownMultiple) { - .ui.multiple.selection.@{state}.dropdown > .label { - border-color: @bdc; - } - } - } - .ui.dropdown.@{state} > .menu, - .ui.dropdown.@{state} > .menu .menu { - border-color: @bdc; - } - .ui.dropdown.@{state} > .menu > .item { - color: @c; - } - - /* Item Hover */ - .ui.dropdown.@{state} > .menu > .item:hover { - background-color: @formStates[@@state][dropdownHoverBackground]; - } - - /* Item Active */ - .ui.dropdown.@{state} > .menu .active.item { - background-color: @formStates[@@state][dropdownActiveBackground]; - } - }) -} - -& when (@variationDropdownClear) { -/*-------------------- - Clear -----------------------*/ - - .ui.dropdown > .clear.dropdown.icon { - opacity: @clearableIconOpacity; - transition: opacity @defaultDuration @defaultEasing; - } - .ui.dropdown > .clear.dropdown.icon:hover { - opacity: @clearableIconActiveOpacity; - } -} - -& when (@variationDropdownDisabled) { - /*-------------------- - Disabled - ----------------------*/ - - /* Disabled */ - .ui.disabled.dropdown, - .ui.dropdown .menu > .disabled.item { - cursor: default; - pointer-events: none; - opacity: @disabledOpacity; - } -} - - -/******************************* - Variations -*******************************/ - -/*-------------- - Direction ----------------*/ - -/* Flyout Direction */ -.ui.dropdown .menu { - left: 0; -} - - -/* Default Side (Right) */ -.ui.dropdown .right.menu > .menu, -.ui.dropdown .menu .right.menu { - left: 100% !important; - right: auto !important; - border-radius: @subMenuBorderRadius !important; -} -& when (@variationDropdownLeft) { - /* Leftward Opening Menu */ - .ui.dropdown > .left.menu { - left: auto !important; - right: 0 !important; - } - - .ui.dropdown > .left.menu .menu, - .ui.dropdown .menu .left.menu { - left: auto; - right: 100%; - margin: @leftSubMenuMargin !important; - border-radius: @leftSubMenuBorderRadius !important; - } -} - -.ui.dropdown .item .left.dropdown.icon, -.ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: @leftMenuDropdownIconFloat; - margin: @leftMenuDropdownIconMargin; -} -.ui.dropdown .item .left.dropdown.icon, -.ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: @leftMenuDropdownIconFloat; - margin: @leftMenuDropdownIconMargin; -} -.ui.dropdown .item .left.dropdown.icon + .text, -.ui.dropdown .left.menu .item .dropdown.icon + .text { - margin-left: @itemDropdownIconDistance; - margin-right: 0; -} - -& when (@variationDropdownUpward) { - /*-------------- - Upward - ---------------*/ - - /* Upward Main Menu */ - .ui.upward.dropdown > .menu { - top: auto; - bottom: 100%; - box-shadow: @upwardMenuBoxShadow; - border-radius: @upwardMenuBorderRadius; - } - - /* Upward Sub Menu */ - .ui.dropdown .upward.menu { - top: auto !important; - bottom: 0 !important; - } - - /* Active Upward */ - .ui.simple.upward.active.dropdown, - .ui.simple.upward.dropdown:hover { - border-radius: @borderRadius @borderRadius 0 0 !important; - } - .ui.upward.dropdown.button:not(.pointing):not(.floating).active { - border-radius: @borderRadius @borderRadius 0 0; - } - - /* Selection */ - .ui.upward.selection.dropdown .menu { - border-top-width: @menuBorderWidth !important; - border-bottom-width: 0 !important; - box-shadow: @upwardSelectionMenuBoxShadow; - } - .ui.upward.selection.dropdown:hover { - box-shadow: @upwardSelectionHoverBoxShadow; - } - - /* Active Upward */ - .ui.active.upward.selection.dropdown { - border-radius: @upwardSelectionVisibleBorderRadius !important; - } - - /* Visible Upward */ - .ui.upward.selection.dropdown.visible { - box-shadow: @upwardSelectionVisibleBoxShadow; - border-radius: @upwardSelectionVisibleBorderRadius !important; - } - - /* Visible Hover Upward */ - .ui.upward.active.selection.dropdown:hover { - box-shadow: @upwardSelectionActiveHoverBoxShadow; - } - .ui.upward.active.selection.dropdown:hover .menu { - box-shadow: @upwardSelectionActiveHoverMenuBoxShadow; - } -} - -& when (@variationDropdownScrolling) { - /*-------------- - Scrolling - ---------------*/ - - /* Selection Menu */ - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - overflow-x: hidden; - overflow-y: auto; - } - - .ui.scrolling.dropdown .menu { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - min-width: 100% !important; - width: auto !important; - } - - .ui.dropdown .scrolling.menu { - position: static; - overflow-y: auto; - border: none; - box-shadow: none !important; - border-radius: 0 !important; - margin: 0 !important; - min-width: 100% !important; - width: auto !important; - border-top: @menuBorder; - } - .ui.scrolling.dropdown .menu .item.item.item, - .ui.dropdown .scrolling.menu > .item.item.item { - border-top: @scrollingMenuItemBorder; - } - .ui.scrolling.dropdown .menu .item:first-child, - .ui.dropdown .scrolling.menu .item:first-child { - border-top: none; - } - .ui.dropdown > .animating.menu .scrolling.menu, - .ui.dropdown > .visible.menu .scrolling.menu { - display: block; - } - - /* Scrollbar in IE */ - @media all and (-ms-high-contrast:none) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - min-width: e(%("calc(100%% - %d)", @scrollbarWidth)); - } - } - @media only screen and (max-width : @largestMobileScreen) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: @scrollingMobileMaxMenuHeight; - } - } - @media only screen and (min-width: @tabletBreakpoint) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: @scrollingTabletMaxMenuHeight; - } - } - @media only screen and (min-width: @computerBreakpoint) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: @scrollingComputerMaxMenuHeight; - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: @scrollingWidescreenMaxMenuHeight; - } - } -} - -/*-------------- - Columnar ----------------*/ -.ui.column.dropdown > .menu { - flex-wrap:wrap; -} -.ui.dropdown[class*="two column"] > .menu > .item { - width: 50%; -} -.ui.dropdown[class*="three column"] > .menu > .item { - width: 33%; -} -.ui.dropdown[class*="four column"] > .menu > .item { - width: 25%; -} -.ui.dropdown[class*="five column"] > .menu > .item { - width: 20%; -} - -& when (@variationDropdownSimple) { - /*-------------- - Simple - ---------------*/ - - /* Displays without javascript */ - - .ui.simple.dropdown .menu:before, - .ui.simple.dropdown .menu:after { - display: none; - } - .ui.simple.dropdown .menu { - position: absolute; - /* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: block; - overflow: hidden; - top: -9999px; - opacity: 0; - width: 0; - height: 0; - transition: @simpleTransition; - margin-top: 0 !important; - } - - .ui.simple.active.dropdown, - .ui.simple.dropdown:hover { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - } - - .ui.simple.active.dropdown > .menu, - .ui.simple.dropdown:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 100%; - opacity: 1; - } - .ui.simple.dropdown > .menu > .item:active > .menu, - .ui.simple.dropdown .menu .item:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 0 !important; - left: 100%; - opacity: 1; - } - .ui.simple.dropdown > .menu > .item:active > .left.menu, - .ui.simple.dropdown .menu .item:hover > .left.menu, - .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right), - .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) { - left: auto; - right: 100%; - } - & when (@variationDropdownDisabled) { - .ui.simple.disabled.dropdown:hover .menu { - display: none; - height: 0; - width: 0; - overflow: hidden; - } - } - - /* Visible */ - .ui.simple.visible.dropdown > .menu { - display: block; - } - & when (@variationDropdownScrolling) { - /* Scrolling */ - .ui.simple.scrolling.active.dropdown > .menu, - .ui.simple.scrolling.dropdown:hover > .menu { - overflow-x: hidden; - overflow-y: auto; - } - } -} - -& when (@variationDropdownFluid) { - /*-------------- - Fluid - ---------------*/ - - .ui.fluid.dropdown { - display: block; - width: 100% !important; - min-width: 0; - } - .ui.fluid.dropdown > .dropdown.icon { - float: right; - } -} - -& when (@variationDropdownFloating) { - /*-------------- - Floating - ---------------*/ - - .ui.floating.dropdown .menu { - left: 0; - right: auto; - box-shadow: @floatingMenuBoxShadow !important; - border-radius: @floatingMenuBorderRadius !important; - } - .ui.floating.dropdown > .menu { - border-radius: @floatingMenuBorderRadius !important; - } - .ui:not(.upward).floating.dropdown > .menu { - margin-top: @floatingMenuDistance; - } - .ui.upward.floating.dropdown > .menu { - margin-bottom: @floatingMenuDistance; - } -} - -& when (@variationDropdownPointing) { - /*-------------- - Pointing - ---------------*/ - - .ui.pointing.dropdown > .menu { - top: 100%; - margin-top: @pointingMenuDistance; - border-radius: @pointingMenuBorderRadius; - } - - .ui.pointing.dropdown > .menu:not(.hidden):after { - display: block; - position: absolute; - pointer-events: none; - content: ''; - visibility: visible; - transform: rotate(45deg); - - width: @pointingArrowSize; - height: @pointingArrowSize; - box-shadow: @pointingArrowBoxShadow; - background: @pointingArrowBackground; - z-index: @pointingArrowZIndex; - } - - .ui.pointing.dropdown > .menu:not(.hidden):after { - top: @pointingArrowOffset; - left: 50%; - margin: 0 0 0 @pointingArrowOffset; - } - - /* Top Left Pointing */ - .ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: @pointingArrowDistanceFromEdge 0 0; - } - .ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: @pointingArrowDistanceFromEdge 0 0; - } - .ui.top.left.pointing.dropdown > .menu:after { - top: @pointingArrowOffset; - left: @pointingArrowDistanceFromEdge; - right: auto; - margin: 0; - transform: rotate(45deg); - } - /* Top Right Pointing */ - .ui.top.right.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - right: 0; - left: auto; - margin: @pointingArrowDistanceFromEdge 0 0; - } - .ui.top.pointing.dropdown > .left.menu:after, - .ui.top.right.pointing.dropdown > .menu:after { - top: @pointingArrowOffset; - left: auto !important; - right: @pointingArrowDistanceFromEdge !important; - margin: 0; - transform: rotate(45deg); - } - - /* Left Pointing */ - .ui.left.pointing.dropdown > .menu { - top: 0; - left: 100%; - right: auto; - margin: 0 0 0 @pointingArrowDistanceFromEdge; - } - .ui.left.pointing.dropdown > .menu:after { - top: 1em; - left: @pointingArrowOffset; - margin: 0 0 0 0; - transform: rotate(-45deg); - } - .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { - left: auto !important; - right: 100% !important; - margin: 0 @pointingArrowDistanceFromEdge 0 0; - } - .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { - top: 1em; - left: auto; - right: @pointingArrowOffset; - margin: 0 0 0 0; - transform: rotate(135deg); - } - - - /* Right Pointing */ - .ui.right.pointing.dropdown > .menu { - top: 0; - left: auto; - right: 100%; - margin: 0 @pointingArrowDistanceFromEdge 0 0; - } - .ui.right.pointing.dropdown > .menu:after { - top: 1em; - left: auto; - right: @pointingArrowOffset; - margin: 0 0 0 0; - transform: rotate(135deg); - } - - /* Bottom Pointing */ - .ui.bottom.pointing.dropdown > .menu { - top: auto; - bottom: 100%; - left: 0; - right: auto; - margin: 0 0 @pointingArrowDistanceFromEdge ; - } - .ui.bottom.pointing.dropdown > .menu:after { - top: auto; - bottom: @pointingArrowOffset; - right: auto; - margin: 0; - transform: rotate(-135deg); - } - /* Reverse Sub-Menu Direction */ - .ui.bottom.pointing.dropdown > .menu .menu { - top: auto !important; - bottom: 0 !important; - } - - /* Bottom Left */ - .ui.bottom.left.pointing.dropdown > .menu { - left: 0; - right: auto; - } - .ui.bottom.left.pointing.dropdown > .menu:after { - left: @pointingArrowDistanceFromEdge; - right: auto; - } - - /* Bottom Right */ - .ui.bottom.right.pointing.dropdown > .menu { - right: 0; - left: auto; - } - .ui.bottom.right.pointing.dropdown > .menu:after { - left: auto; - right: @pointingArrowDistanceFromEdge; - } - - /* Upward pointing */ - .ui.pointing.upward.dropdown .menu, - .ui.top.pointing.upward.dropdown .menu { - top: auto !important; - bottom: 100% !important; - margin: 0 0 @pointingMenuDistance; - border-radius: @pointingUpwardMenuBorderRadius; - } - .ui.pointing.upward.dropdown .menu:after, - .ui.top.pointing.upward.dropdown .menu:after { - top: 100% !important; - bottom: auto !important; - box-shadow: @pointingUpwardArrowBoxShadow; - margin: @pointingArrowOffset 0 0; - } - - /* Right Pointing Upward */ - .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { - top: auto !important; - bottom: 0 !important; - margin: 0 @pointingArrowDistanceFromEdge 0 0; - } - .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 @pointingArrowDistanceFromEdge 0; - box-shadow: @pointingArrowBoxShadow; - } - - - /* Left Pointing Upward */ - .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { - top: auto !important; - bottom: 0 !important; - margin: 0 0 0 @pointingArrowDistanceFromEdge; - } - .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 @pointingArrowDistanceFromEdge 0; - box-shadow: @pointingArrowBoxShadow; - } -} - -/*-------------------- - Sizes ----------------------*/ - -.ui.dropdown, -.ui.dropdown .menu > .item { - font-size: @medium; -} -& when not (@variationDropdownSizes = false) { - each(@variationDropdownSizes, { - @s: @@value; - .ui.@{value}.dropdown, - .ui.@{value}.dropdown .menu > .item { - font-size: @s; - } - }) -} - -& when (@variationDropdownInverted) { - /*-------------- - Inverted - ---------------*/ - - /* General rules and basic dropdowns */ - .ui.inverted.dropdown .menu { - background: @invertedMenuBackground; - box-shadow: @invertedMenuBoxShadow; - border: @invertedMenuBorder; - } - - .ui.inverted.dropdown .menu > .item { - color: @invertedMenuColor; - } - - .ui.inverted.dropdown .menu .active.item { - background: @invertedActiveItemBackground; - color: @invertedActiveItemColor; - box-shadow: @invertedActiveItemBoxShadow; - } - - .ui.inverted.dropdown .menu > .item:hover { - background: @invertedHoveredItemBackground; - color: @invertedHoveredItemColor; - } - - .ui.inverted.dropdown.selected, - .ui.inverted.dropdown .menu .selected.item { - background: @invertedSelectedBackground; - color: @invertedSelectedColor; - } - - .ui.inverted.dropdown .menu > .header { - color: @invertedMenuHeaderColor; - } - - .ui.inverted.dropdown > .text > .description, - .ui.inverted.dropdown .menu > .item > .description { - color: @invertedItemDescriptionColor; - } - - .ui.inverted.dropdown .menu > .divider { - border-top: @invertedMenuDividerBorder; - } - - .ui.inverted.dropdown .scrolling.menu { - border: none; - border-top: @invertedMenuBorder; - } - - & when (@variationDropdownSelection) { - /* Selection */ - .ui.inverted.selection.dropdown { - border: @invertedSelectionBorder; - background: @invertedSelectionBackground; - color: @invertedSelectionTextColor; - } - - .ui.inverted.selection.dropdown:hover { - border-color: @invertedSelectionHoverBorderColor; - box-shadow: @invertedSelectionHoverBoxShadow; - } - - .ui.inverted.selection.dropdown input { - color: @invertedSelectionInputTextColor; - } - - .ui.inverted.selection.visible.dropdown > .text:not(.default) { - color: @invertedSelectionVisibleTextColor; - } - - .ui.inverted.selection.active.dropdown .menu, - .ui.inverted.selection.active.dropdown:hover { - border-color: @invertedSelectionVisibleBorderColor; - } - - .ui.inverted.selection.dropdown .menu > .item { - border-top: @invertedSelectionItemDivider; - } - } - - .ui.inverted.dropdown:not(.button) > .default.text, - .ui.inverted.default.dropdown:not(.button) > .text { - color: @invertedDefaultTextColor; - } - .ui.inverted.dropdown:not(.button) > input:focus ~ .default.text, - .ui.inverted.default.dropdown:not(.button) > input:focus ~ .text { - color: @invertedDefaultTextFocusColor; - } - - .ui.inverted.active.search.dropdown input.search:focus + .text i.icon, - .ui.inverted.active.search.dropdown input.search:focus + .text .flag { - opacity: @invertedSelectionTextUnderlayIconOpacity; - } - .ui.inverted.active.search.dropdown input.search:focus + .text { - color: @invertedSelectionTextUnderlayColor !important; - } - - .ui.inverted.dropdown .menu > .message:not(.ui) { - color: @invertedMessageColor; - } - - /* Fixing the border */ - .ui.inverted.dropdown .menu > .item:first-child { - border-top-width: 0; - } - - & when (@variationDropdownMultiple) { - /* Labels */ - .ui.inverted.multiple.dropdown > .label { - background-color: @invertedLabelBackgroundColor; - background-image: @invertedLabelBackgroundImage; - color: @invertedLabelColor; - box-shadow: @invertedLabelBoxShadow; - } - - .ui.inverted.multiple.dropdown > .label:hover { - background-color: @invertedLabelHoverBackgroundColor; - border-color: @invertedLabelHoverBackgroundColor; - - background-image: @invertedLabelHoverBackgroundImage; - color: @invertedLabelHoverTextColor; - } - - .ui.inverted.multiple.dropdown > .label > .close.icon, - .ui.inverted.multiple.dropdown > .label > .delete.icon { - opacity: @invertedLabelIconOpacity; - } - - .ui.inverted.multiple.dropdown > .label > .close.icon:hover, - .ui.inverted.multiple.dropdown > .label > .delete.icon:hover { - opacity: @invertedLabelIconHoverOpacity; - } - } - - /* Selection for form elements */ - .ui.inverted.dropdown textarea::-webkit-selection, - .ui.inverted.dropdown input::-webkit-selection { - background-color: @invertedInputHighlightBackground; - color: @invertedInputHighlightColor; - } - .ui.inverted.dropdown textarea::-moz-selection, - .ui.inverted.dropdown input::-moz-selection { - background-color: @invertedInputHighlightBackground; - color: @invertedInputHighlightColor; - } - .ui.inverted.dropdown textarea::selection, - .ui.inverted.dropdown input::selection { - background-color: @invertedInputHighlightBackground; - color: @invertedInputHighlightColor; - } - - /* Scrollbars */ - .ui.inverted.dropdown .menu::-webkit-scrollbar-track { - background: @trackInvertedBackground; - } - .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb { - background: @thumbInvertedBackground; - } - .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive { - background: @thumbInvertedInactiveBackground; - } - .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover { - background: @thumbInvertedHoverBackground; - } - & when (@variationDropdownPointing) { - .ui.inverted.pointing.dropdown > .menu:after { - background: @invertedPointingArrowBackground; - box-shadow: @invertedPointingArrowBoxShadow; - } - } -} - -.loadUIOverrides(); |