fix(dropdown): adjust icon on multiple non selection non search

Multiple, but non selection dropdowns had issues:

When no values were selected, a possible long place holder was partly covered by the dropdown icon
When no values are selected, the dropdown icon was completely misaligned
When clearable was enabled both icons weere misaligned
the search input was doubling its content while typing

Author: lubber-de

src/definitions/modules/dropdown.less

@@ -816,7 +816,7 @@ select.ui.dropdown {
     .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon {
         margin-left: @clearableIconMargin;
     }
-    .ui.dropdown:not(.selection) > .remove.icon {
+    .ui.dropdown:not(.selection):not(.multiple) > .remove.icon {
         margin-top: -@clearableIconMarginTop;
     }
 }
@@ -879,6 +879,18 @@ select.ui.dropdown {
         margin: @imageLabelImageMargin;
         height: @imageLabelHeight;
     }
+    .ui.multiple.dropdown:not(.selection):not(.labeled) {
+        & > .dropdown.icon {
+            right: @dropdownIconMultipleRight;
+        }
+        & > .remove.icon {
+            margin-right: @dropdownIconMultipleRight;
+        }
+        &:not(.search) > .remove.icon ~ .text.default,
+        > .text.default:first-child {
+            overflow: inherit;
+        }
+    }
 
     & when (@variationDropdownSearch) {
         /* -----------------
@@ -919,6 +931,13 @@ select.ui.dropdown {
         .ui.multiple.search.dropdown.button {
             min-width: @selectionMinWidth;
         }
+        .ui.multiple.search.dropdown > span.sizer {
+            display: none;
+        }
+        .ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search,
+        .ui.multiple.search.dropdown:not(.selection) > input.search:first-child {
+            min-width: @multipleSearchMinWidth;
+        }
     }
 }
 

src/themes/default/modules/dropdown.variables

@@ -21,6 +21,7 @@
 @dropdownIconSize: @relative12px;
 @dropdownIconMargin: 0 0 0 1em;
 @dropdownIconMinWidth: 1em;
+@dropdownIconMultipleRight: -1.5em;
 
 /* Current Text */
 @textTransition: none;
@@ -260,6 +261,8 @@
 @multipleSelectionChildLineHeight: @relative17px;
 @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
+@multipleSearchMinWidth: 5.05em;
+
 /* Dropdown Icon */
 @multipleSelectionDropdownIconMargin: "";
 @multipleSelectionDropdownIconPadding: "";