fix(dropdown, form): unify focus, hover borders and icons

Unify border and icon visuals between input and dropdown

fix search selection dropdowns not activating focus border when tabbed
add hover border to inputs just as dropdown has
same icon opacity logic

Author: lubber-de

src/definitions/collections/form.less

@@ -640,6 +640,11 @@
             box-shadow: @formStates[@@state][inputFocusBoxShadow];
         }
 
+        .ui.form .field.@{state} > textarea:hover:not(:focus),
+        .ui.form .field.@{state} > input:hover:not(:focus) {
+            border-color: @formStates[@@state][inputHoverBorderColor];
+        }
+
         /* Preserve Native Select Stylings */
         .ui.form .field.@{state} select {
             -webkit-appearance: menulist-button;

src/definitions/elements/input.less

@@ -113,6 +113,13 @@
     box-shadow: @downBoxShadow;
 }
 
+.ui.form .field > textarea:hover:not(:focus),
+.ui.input > textarea:hover:not(:focus),
+.ui.form .field > input:hover:not(:focus),
+.ui.input > input:hover:not(:focus) {
+    border-color: @selectedBorderColor;
+}
+
 & when (@variationInputLoading) {
     /* --------------------
            Loading

src/definitions/modules/dropdown.less

@@ -27,6 +27,7 @@
 @notButton: if(@variationDropdownButton, e(":not(.button)"));
 @notSimple: if(@variationDropdownSimple, e(":not(.simple)"));
 @notUpward: if(@variationDropdownUpward, e(":not(.upward)"));
+@notInverted: if(@variationDropdownInverted, e(":not(.inverted)"));
 
 @notTransparent: if(@variationInputTransparent, e(":not(.transparent)"));
 @notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
@@ -623,6 +624,18 @@ select.ui.dropdown {
         border-color: @selectionFocusBorderColor;
         box-shadow: @selectionFocusMenuBoxShadow;
     }
+    @supports selector(:has(.f)) {
+        .ui.ui.selection.dropdown@{notInverted}:has(> input:focus) {
+            border-color: @selectionFocusBorderColor;
+            box-shadow: none;
+            & > i.icon {
+                opacity: @selectionIconFocusOpacity;
+            }
+        }
+    }
+    .ui.ui.selection.dropdown:focus > i.icon {
+        opacity: @selectionIconFocusOpacity;
+    }
 
     /* Visible */
     .ui.selection.visible.dropdown > .text:not(.default) {

src/themes/default/globals/colors.less

@@ -510,6 +510,7 @@
         inputFocusBackground: @inputErrorFocusBackground;
         inputFocusColor: @inputErrorFocusColor;
         inputFocusBorderColor: @inputErrorFocusBorder;
+        inputHoverBorderColor: @inputErrorHoverBorder;
         inputFocusBoxShadow: @inputErrorFocusBoxShadow;
         inputPlaceholderColor: @inputErrorPlaceholderColor;
         inputPlaceholderFocusColor: @inputErrorPlaceholderFocusColor;
@@ -538,6 +539,7 @@
         inputFocusBackground: @inputInfoFocusBackground;
         inputFocusColor: @inputInfoFocusColor;
         inputFocusBorderColor: @inputInfoFocusBorder;
+        inputHoverBorderColor: @inputInfoHoverBorder;
         inputFocusBoxShadow: @inputInfoFocusBoxShadow;
         inputPlaceholderColor: @inputInfoPlaceholderColor;
         inputPlaceholderFocusColor: @inputInfoPlaceholderFocusColor;
@@ -566,6 +568,7 @@
         inputFocusBackground: @inputSuccessFocusBackground;
         inputFocusColor: @inputSuccessFocusColor;
         inputFocusBorderColor: @inputSuccessFocusBorder;
+        inputHoverBorderColor: @inputSuccessHoverBorder;
         inputFocusBoxShadow: @inputSuccessFocusBoxShadow;
         inputPlaceholderColor: @inputSuccessPlaceholderColor;
         inputPlaceholderFocusColor: @inputSuccessPlaceholderFocusColor;
@@ -594,6 +597,7 @@
         inputFocusBackground: @inputWarningFocusBackground;
         inputFocusColor: @inputWarningFocusColor;
         inputFocusBorderColor: @inputWarningFocusBorder;
+        inputHoverBorderColor: @inputWarningHoverBorder;
         inputFocusBoxShadow: @inputWarningFocusBoxShadow;
         inputPlaceholderColor: @inputWarningPlaceholderColor;
         inputPlaceholderFocusColor: @inputWarningPlaceholderFocusColor;

src/themes/default/globals/site.variables

@@ -1510,21 +1510,25 @@
 @inputErrorFocusColor: @negativeTextColor;
 @inputErrorFocusBorder: @negativeBorderColor;
 @inputErrorFocusBoxShadow: none;
+@inputErrorHoverBorder: @negativeBorderColor;
 
 @inputInfoFocusBackground: @infoBackgroundColor;
 @inputInfoFocusColor: @infoTextColor;
 @inputInfoFocusBorder: @infoBorderColor;
 @inputInfoFocusBoxShadow: none;
+@inputInfoHoverBorder: @infoBorderColor;
 
 @inputSuccessFocusBackground: @positiveBackgroundColor;
 @inputSuccessFocusColor: @positiveTextColor;
 @inputSuccessFocusBorder: @positiveBorderColor;
 @inputSuccessFocusBoxShadow: none;
+@inputSuccessHoverBorder: @positiveBorderColor;
 
 @inputWarningFocusBackground: @warningBackgroundColor;
 @inputWarningFocusColor: @warningTextColor;
 @inputWarningFocusBorder: @warningBorderColor;
 @inputWarningFocusBoxShadow: none;
+@inputWarningHoverBorder: @warningBorderColor;
 
 /* Placeholder state */
 @inputErrorPlaceholderColor: if(iscolor(@formErrorColor), lighten(@formErrorColor, 40), @formErrorColor);

src/themes/default/modules/dropdown.variables

@@ -162,7 +162,7 @@
 @selectionBorder: 1px solid @selectionBorderColor;
 @selectionBorderRadius: @borderRadius;
 
-@selectionIconOpacity: 0.8;
+@selectionIconOpacity: 0.5;
 @selectionIconZIndex: 3;
 @selectionIconHitbox: @selectionVerticalPadding;
 @selectionIconMargin: -@selectionIconHitbox;
@@ -219,6 +219,8 @@
 @selectionVisibleConnectingBorder: 0;
 @selectionVisibleIconOpacity: "";
 
+@selectionIconFocusOpacity: 1;
+
 /* --------------
      Search
 -------------- */
@@ -315,7 +317,7 @@
 @selectedColor: @selectedTextColor;
 
 /* Clearable */
-@clearableIconOpacity: 0.6;
+@clearableIconOpacity: 0.5;
 @clearableIconActiveOpacity: 1;
 @clearableTextMargin: 1.5em;
 @clearableIconMargin: 1.5em;