fix(dropdown): clearable inline support

Inline (or no selection) dropdowns did not support clearable (while SUI does and even the FUI docs mention it)

Author: lubber-de

src/definitions/modules/dropdown.js

@@ -359,7 +359,7 @@ $.fn.dropdown = function(parameters) {
             if( !module.has.menu() ) {
               module.create.menu();
             }
-            if ( module.is.selection() && module.is.clearable() && !module.has.clearItem() ) {
+            if ( module.is.clearable() && !module.has.clearItem() ) {
               module.verbose('Adding clear icon');
               $clear = $('<i />')
                 .addClass('remove icon')

src/definitions/modules/dropdown.less

@@ -87,6 +87,7 @@
 .ui.dropdown:not(.labeled) > .dropdown.icon {
   position: relative;
   width: auto;
+  min-width: @dropdownIconMinWidth;
   font-size: @dropdownIconSize;
   margin: @dropdownIconMargin;
 }
@@ -771,29 +772,44 @@ select.ui.dropdown {
   }
 }
 
-/* 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;
-}
+& when (@variationDropdownClear) {
+  /* Clearable Selection */
+  .ui.dropdown > .remove.icon {
+    cursor: pointer;
+    font-size: @dropdownIconSize;
+    margin: @selectionIconMargin;
+    padding: @selectionIconPadding;
+    right: @clearableIconPosition;
+    top: @selectionVerticalPadding;
+    position: absolute;
+    opacity: @clearableIconOpacity;
+    z-index: @selectionIconZIndex;
+  }
+  .ui.selection.dropdown > .remove.icon {
+    right: @clearableIconSelectionPosition;
+  }
+  .ui.inline.dropdown > .remove.icon {
+    right: @clearableIconInlinePosition;
+  }
 
-.ui.clearable.dropdown .text,
-.ui.clearable.dropdown a:last-of-type {
-  margin-right: 1.5em;
-}
+  .ui.clearable.dropdown .text,
+  .ui.clearable.dropdown a:last-of-type {
+    margin-right: @clearableTextMargin;
+  }
 
-.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;
+  .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;
+  }
+
+  .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon {
+    margin-left: @clearableIconMargin;
+  }
+  .ui.dropdown:not(.selection) > .remove.icon {
+    margin-top: -@clearableIconMarginTop;
+  }
 }
 
 & when (@variationDropdownMultiple) {
@@ -1111,11 +1127,12 @@ select.ui.dropdown {
 /*--------------------
         Clear
 ----------------------*/
-
+  .ui.dropdown > .remove.icon,
   .ui.dropdown > .clear.dropdown.icon {
     opacity: @clearableIconOpacity;
     transition: opacity @defaultDuration @defaultEasing;
   }
+  .ui.dropdown > .remove.icon:hover,
   .ui.dropdown > .clear.dropdown.icon:hover {
     opacity: @clearableIconActiveOpacity;
   }

src/themes/default/modules/dropdown.variables

@@ -21,6 +21,7 @@
 /* Icon */
 @dropdownIconSize: @relative12px;
 @dropdownIconMargin: 0 0 0 1em;
+@dropdownIconMinWidth: 1em;
 
 /* Current Text */
 @textTransition: none;
@@ -310,8 +311,14 @@
 @selectedColor: @selectedTextColor;
 
 /* Clearable */
-@clearableIconOpacity: 0.8;
+@clearableIconOpacity: 0.6;
 @clearableIconActiveOpacity: 1;
+@clearableTextMargin: 1.5em;
+@clearableIconMargin: 1.5em;
+@clearableIconMarginTop: 1.35em;
+@clearableIconPosition: 2em;
+@clearableIconSelectionPosition: 3em;
+@clearableIconInlinePosition: 2.2em;
 
 /*-------------------
       Variations