fix(input): support icon and corner labeled dropdown variant

This PR fixes support for icon input and corner labeled input when used with a dropdown
fomantic · Dec 19, 2021 · c315547 · c315547
1 parent 5cac1fa
commit c315547
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 16 deletions.
diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -300,8 +300,8 @@
   .ui.icon.input > i.icon:not(.link) {
     pointer-events: none;
   }
-  .ui.ui.ui.ui.icon.input > textarea,
-  .ui.ui.ui.ui.icon.input > input {
+  .ui.ui.ui.ui.icon.input:not(.corner) > textarea,
+  .ui.ui.ui.ui.icon.input:not(.corner) > input {
     padding-right: @iconMargin;
   }
 
@@ -332,9 +332,12 @@
     right: auto;
     left: @circularIconHorizontalOffset;
   }
-  .ui.ui.ui.ui[class*="left icon"].input > textarea,
-  .ui.ui.ui.ui[class*="left icon"].input > input {
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input {
     padding-left: @iconMargin;
+  }
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input {
     padding-right: @horizontalPadding;
   }
 
@@ -401,31 +404,94 @@
   }
 
   /* Spacing with corner label */
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
-    padding-right: @labeledMargin !important;
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input {
+    padding-right: @labeledMargin;
   }
+  .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
-    padding-right: @labeledIconInputMargin !important;
+    padding-right: @labeledIconInputMargin;
   }
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
     margin-right: @labeledIconMargin;
   }
 
   /* Left Labeled */
-  .ui[class*="left corner labeled"].labeled.input > textarea,
-  .ui[class*="left corner labeled"].labeled.input > input {
-    padding-left: @labeledMargin !important;
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > textarea,
+  .ui[class*="left corner labeled"].input > input {
+    padding-left: @labeledMargin;
   }
   & when (@variationInputIcon) {
-    .ui[class*="left corner labeled"].icon.input > textarea,
-    .ui[class*="left corner labeled"].icon.input > input {
-      padding-left: @labeledIconInputMargin !important;
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input {
+      padding-right: @labeledIconInputMargin;
+    }
+    .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown,
+    .ui[class*="left corner labeled"][class*="left icon"].input > textarea,
+    .ui[class*="left corner labeled"][class*="left icon"].input > input {
+      padding-left: @labeledAndIconMargin;
     }
     .ui[class*="left corner labeled"].icon.input > i.icon {
       margin-left: @labeledIconMargin;
     }
+    .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin;
+    }
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin * 2;
+    }
+  }
+
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledMargin;
+    }
+    & > .menu {
+      padding-left: @labeledIconMargin;
+      & > .item {
+        padding-left: @labeledMargin;
+        margin-left: -@labeledIconMargin;
+      }
+    }
+  }
+  .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledAndIconMargin;
+    }
+    & > .menu > .item {
+      padding-left: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input:not([class*="left icon"]) > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+      > .dropdown.icon  {
+      padding-right: @labeledMargin;
+    }
+  }
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledAndIconMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+    > .dropdown.icon  {
+      padding-right: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input > .ui.visible.dropdown ~ i.icon,
+  .ui.icon.input > .ui.active.dropdown ~ i.icon,
+  .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label,
+  .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label {
+    z-index: @labeledDropdownZIndex;
   }
 }
 & when (@variationInputIcon) {

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -128,7 +128,7 @@
   font-size: @itemFontSize;
   color: @itemColor;
 
-  padding: @itemPadding !important;
+  padding: @itemPadding;
   text-transform: @itemTextTransform;
   font-weight: @itemFontWeight;
   box-shadow: @itemBoxShadow;
@@ -562,7 +562,7 @@ select.ui.dropdown {
   /* Menu Item */
   .ui.selection.dropdown .menu > .item {
     border-top: @selectionItemDivider;
-    padding: @selectionItemPadding !important;
+    padding: @selectionItemPadding;
     white-space: normal;
     word-wrap: normal;
   }

diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables
@@ -60,8 +60,11 @@
 
 @labeledMargin: 2.5em;
 @labeledIconInputMargin: 3.25em;
+@labeledAndIconMargin: 4em;
 @labeledIconMargin: 1.25em;
 
+@labeledDropdownZIndex: 10;
+
 /*-------------------
         States
 --------------------*/