Use theme colors for focused form controls

skins/elastic/styles/colors.less

@@ -131,9 +131,10 @@
 // Forms
 @color-input:                       @color-font;
 @color-input-border:                rgba(22, 27, 29, 0.15);
-@color-input-border-focus:          #80bdff;                // from Bootstrap's .form-control:focus
-@color-input-border-focus-shadow:   rgba(0,123,255,.25);    // from Bootstrap's .form-control:focus
+@color-input-border-focus:          @color-main;
+@color-input-border-focus-shadow:   fadeout(@color-main, 75);
 @color-input-border-invalid:        @color-error;
+@color-input-border-invalid-shadow: fadeout(@color-error, 75);
 @color-input-addon-background:      @color-black-shade-bg;
 @color-recipient-input-border:      @color-input-border;
 @color-recipient-input-background:  @color-black-shade-bg;

skins/elastic/styles/widgets/common.less

@@ -412,7 +412,7 @@ fieldset.image-attachment {
 table.compact-table {
     margin: 0;
 
-    * {
+    *:not(.invalid-feedback) {
         font-size: inherit;
     }
 

skins/elastic/styles/widgets/forms.less

@@ -728,6 +728,10 @@ html.touch .popupmenu.form {
     &.is-invalid {
         & > .content {
             border: 1px solid @color-input-border-invalid;
+            &.focused {
+                border-color: @color-input-border-invalid;
+                box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
+            }
         }
 
         & > .invalid-feedback {
@@ -1231,18 +1235,29 @@ td.input-group input {
     height: ~"calc(2.25rem + 2px)";
 }
 
-.form-control, .form-control:focus {
+.form-control {
     color: @color-font;
+
+    &:focus {
+        color: @color-font;
+        border-color: @color-input-border-focus;
+        box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
+    }
+
+    &.is-invalid {
+        border-color: @color-input-border-invalid;
+
+        &:focus {
+            border-color: @color-input-border-invalid;
+            box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
+        }
+    }
 }
 
 .invalid-feedback {
     color: @color-error;
 }
 
-.form-control.is-invalid {
-    border-color: @color-input-border-invalid;
-}
-
 .form-group {
     margin-bottom: .5rem;
 }