Added .inverted to dropdowns Closes Semantic-Org#5276

y0hami · Mar 21, 2018 · 254571b · 254571b
1 parent 789d020
commit 254571b
Show file tree

Hide file tree

Showing 4 changed files with 288 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;