From 2186c49ba98035c7167bc868ba53ff29b2443377 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Mon, 29 Jan 2018 13:50:37 +0100
Subject: [PATCH] Use theme colors for focused form controls

---
 skins/elastic/styles/colors.less         |  5 +++--
 skins/elastic/styles/widgets/common.less |  2 +-
 skins/elastic/styles/widgets/forms.less  | 25 +++++++++++++++++++-----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index efaee41b2..5a225b206 100644
--- a/skins/elastic/styles/colors.less
+++ b/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;
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index 2afbdca3d..aee99fe15 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/skins/elastic/styles/widgets/common.less
@@ -412,7 +412,7 @@ fieldset.image-attachment {
 table.compact-table {
     margin: 0;
 
-    * {
+    *:not(.invalid-feedback) {
         font-size: inherit;
     }
 
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index aca2460d2..dd2efe82b 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/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;
 }