From ae5c32d28b1e7e4e8f56daab5bdf29275c1fb86b Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 1 Mar 2019 16:45:33 +0000
Subject: [PATCH] Lift border up to the Field root

By placing the Field's border on the Field component root instead of the input,
it's easier to wrap it around additional elements that we'll soon stuff inside
the field.
---
 res/css/views/elements/_Field.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index 02f0e548fb..5d5357da39 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -19,6 +19,9 @@ limitations under the License.
 .mx_Field {
     position: relative;
     margin: 1em 0;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+    border: 1px solid $input-border-color;
 }
 
 .mx_Field input,
@@ -27,9 +30,10 @@ limitations under the License.
     font-weight: normal;
     font-family: $font-family;
     font-size: 14px;
+    border: none;
+    // Even without a border here, we still need this avoid overlapping the rounded
+    // corners on the field above.
     border-radius: 4px;
-    transition: border-color 0.25s;
-    border: 1px solid $input-border-color;
     padding: 8px 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
@@ -55,11 +59,14 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_Field:focus-within {
+    border-color: $input-focused-border-color;
+}
+
 .mx_Field input:focus,
 .mx_Field select:focus,
 .mx_Field textarea:focus {
     outline: 0;
-    border-color: $input-focused-border-color;
 }
 
 .mx_Field input::placeholder,