diff --git a/src/themes/default/collections/menu.overrides b/src/themes/default/collections/menu.overrides index 14fb0da12..7cb540467 100644 --- a/src/themes/default/collections/menu.overrides +++ b/src/themes/default/collections/menu.overrides @@ -1,3 +1,36 @@ /******************************* Theme Overrides *******************************/ + + +/*------------------- + Inverted dropdowns +--------------------*/ +.ui.menu .ui.inverted.inverted.dropdown.item .menu { + background: @invertedDropdownBackground; + box-shadow: @invertedDropdownMenuBoxShadow; +} + +.ui.menu .ui.inverted.dropdown .menu > .item { + color: @invertedDropdownItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .active.item { + background: @invertedDropdownActiveItemBackground !important; + color: @invertedDropdownActiveItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .item:hover { + background: @invertedDropdownHoveredItemBackground !important; + color: @invertedDropdownHoveredItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .selected.item { + background: @invertedDropdownSelectedItemBackground !important; + color: @invertedDropdownSelectedItemColor !important; +} + +/* Vertical */ +.ui.vertical.menu .inverted.dropdown.item .menu { + box-shadow: @invertedDropdownMenuBoxShadow; +} diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 71ccb673c..68de3cb3a 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -456,3 +456,21 @@ @bigWidth: 20rem; @hugeWidth: 22rem; @massiveWidth: 25rem; + + +/*------------------- + Inverted dropdowns +--------------------*/ +@invertedDropdownBackground: @black; +@invertedDropdownMenuBoxShadow: none; + +@invertedDropdownItemColor: @invertedMutedTextColor; + +@invertedDropdownHoveredItemBackground: @transparentWhite; +@invertedDropdownHoveredItemColor: @invertedDropdownItemColor; + +@invertedDropdownActiveItemBackground: transparent; +@invertedDropdownActiveItemColor: @invertedDropdownItemColor; + +@invertedDropdownSelectedItemBackground: @strongTransparentWhite; +@invertedDropdownSelectedItemColor: @invertedDropdownItemColor; diff --git a/src/themes/default/modules/dropdown.overrides b/src/themes/default/modules/dropdown.overrides index 729e201d6..bf7caf4b2 100644 --- a/src/themes/default/modules/dropdown.overrides +++ b/src/themes/default/modules/dropdown.overrides @@ -60,3 +60,166 @@ content: "\f0da"; } */ + + +/*-------------- + 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; +} + +/* 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.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.selection.visible.dropdown > .text:not(.default) { + color: @invertedSelectionVisibleTextColor; +} + +.ui.inverted.active.search.dropdown input.search:focus + .text .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.selection.active.dropdown .menu, +.ui.inverted.selection.active.dropdown:hover { + border-color: @invertedSelectionVisibleBorderColor; +} + +.ui.inverted.selection.dropdown .menu > .item { + border-top: @invertedSelectionItemDivider; +} + +.ui.dropdown .menu > .message:not(.ui) { + color: @invertedMessageColor; +} + +/* Fixing the border */ +.ui.inverted.dropdown .menu > .item:first-child { + border-top-width: 0; +} + +/* 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; +} diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 4c947e1b2..387e2d73a 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -373,3 +373,77 @@ /* Pointing Upward */ @pointingUpwardMenuBorderRadius: @borderRadius; @pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px 0px @menuBorderColor; + + +/*-------------- + Inverted +---------------*/ + +/* General rules and basic dropdowns */ +@invertedMenuBackground: @black; +@invertedMenuColor: @invertedMutedTextColor; +@invertedMenuBorder: 1px solid @strongTransparentWhite; +@invertedMenuBoxShadow: none; + +@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: 0px 0px 0px @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: 0px 0px 0px @labelBorderWidth rgba(255, 255, 255, 0) inset; + +@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.9); +@invertedLabelHoverBackgroundImage: none; +@invertedLabelHoverTextColor: @invertedLabelColor; + +@invertedLabelIconOpacity: 0.6; +@invertedLabelIconHoverOpacity: 0.8;