:star:

1 files changed, 1850 insertions, 0 deletions

diff --git a/semantic/src/definitions/modules/dropdown.less b/semantic/src/definitions/modules/dropdown.less
new file mode 100644
index 0000000..3953c20
--- /dev/null
+++ b/semantic/src/definitions/modules/dropdown.less
@@ -0,0 +1,1850 @@
+/*!
+ * # 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();