diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index bb789ed4b3..5283f70964 100755 --- 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 index 2527a4873e..fd9524ed4d 100755 --- 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 index ee099fe9ff..6f37707b02 100644 --- 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 --------------------*/