Dropdown: adds compact variation, fixes for specificity on text selector, and better formatting for sub-menus

src/definitions/modules/dropdown.less

@@ -163,8 +163,8 @@
    Item Image
 ---------------*/
 
-.ui.dropdown .text > img,
-.ui.dropdown .text > .image,
+.ui.dropdown > .text > img,
+.ui.dropdown > .text > .image,
 .ui.dropdown .menu > .item > .image,
 .ui.dropdown .menu > .item > img {
   display: inline-block;
@@ -199,17 +199,21 @@
 
 /* Icons / Flags / Labels */
 .ui.dropdown > .text > .icon,
-.ui.dropdown .menu > .item .icon {
+.ui.dropdown .menu > .item > .icon {
   margin: @itemIconMargin;
 }
 .ui.dropdown > .text > .label,
-.ui.dropdown .menu > .item .label {
+.ui.dropdown .menu > .item > .label {
   margin: @itemLabelMargin;
 }
 .ui.dropdown > .text > .flag,
-.ui.dropdown .menu > .item .flag {
+.ui.dropdown .menu > .item > .flag {
   margin: @itemFlagMargin;
 }
+.ui.dropdown .menu > .item > .icon + .text {
+  display: block;
+  margin-right: @dropdownSubMenuIconDistance;
+}
 
 
 /* Remove Menu Item Divider */
@@ -227,6 +231,11 @@
 .ui.dropdown.icon.button > .dropdown.icon {
   margin: 0em;
 }
+.ui.dropdown.button:not(.pointing):not(.floating).active,
+.ui.dropdown.button:not(.pointing):not(.floating).visible {
+  border-bottom-left-radius: 0em;
+  border-bottom-right-radius: 0em;
+}
 
 /* Automatically float dropdown menu right on last menu item */
 .ui.menu .right.menu .dropdown:last-child .menu,
@@ -289,6 +298,11 @@ select.ui.dropdown {
   transition: @selectionIconTransition;
 }
 
+/* Compact */
+.ui.compact.selection.dropdown {
+  min-width:  0px;
+}
+
 /* Remove Selection */
 .ui.selection.dropdown > .delete.icon {
   opacity: 0.6;
@@ -397,8 +411,8 @@ select.ui.dropdown {
 }
 
 /* Active Item */
-.ui.selection.active.dropdown .text:not(.default),
-.ui.selection.visible.dropdown .text:not(.default) {
+.ui.selection.active.dropdown > .text:not(.default),
+.ui.selection.visible.dropdown > .text:not(.default) {
   font-weight: @selectionVisibleTextFontWeight;
   color: @selectionVisibleTextColor;
 }
@@ -424,7 +438,7 @@ select.ui.dropdown {
   margin: @inlineIconMargin;
   vertical-align: top;
 }
-.ui.inline.dropdown .text {
+.ui.inline.dropdown > .text {
   font-weight: @inlineTextFontWeight;
 }
 .ui.inline.dropdown .menu {
@@ -494,7 +508,7 @@ select.ui.dropdown {
 ----------------------*/
 
 /* Filtered Item */
-.ui.dropdown .filtered.text {
+.ui.dropdown > .filtered.text {
   visibility: hidden;
 }
 .ui.dropdown .filtered.item {

src/themes/packages/default/modules/dropdown.variables

@@ -76,8 +76,8 @@
 
 /* Sub Menu Pointer Icon */
 @dropdownSubMenuIconFloat: right;
-@dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em 0.5em;
-
+@dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em;
+@dropdownSubMenuIconDistance: 1em;
 
 /* Menu Item Icon */
 @itemIconMargin: 0em 0.75em 0em 0em;
@@ -115,7 +115,7 @@ b        Types
 @selectionBorderRadius: @borderRadius;
 @selectionIconOpacity: 0.8;
 @selectionIconTransition: opacity 0.2s ease;
-@selectionMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
+@selectionMenuBoxShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
 @selectionMenuItemBoxShadow: none;
 
 @selectionTransition: