From 9f27171ebc6e5459d168716c220587f500d36e71 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Jan 2019 10:09:33 -0600 Subject: [PATCH 1/3] Tweak field label to be vertically centered --- res/css/views/elements/_Field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 1b5b0b37c2c..e28ae917618 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -56,7 +56,7 @@ limitations under the License. position: absolute; left: 0px; top: 0px; - margin: 6px 8px; + margin: 7px 8px; padding: 2px; } From 9048b69b1a049bda1175fa1e8a2cfdd04707345b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Jan 2019 10:16:20 -0600 Subject: [PATCH 2/3] Tweak field input padding to match label position --- res/css/views/elements/_Field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index e28ae917618..f8090eaaf7e 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -26,7 +26,7 @@ limitations under the License. border-radius: 4px; transition: border-color 0.25s; border: 1px solid $input-border-color; - padding: 8px 10px; + padding: 8px 9px; } .mx_Field input:focus { From 9c0fbefa35d1876e541e5fea16ebe4286c53cbca Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Jan 2019 10:24:04 -0600 Subject: [PATCH 3/3] Change to new field focused color --- res/css/views/elements/_Field.scss | 4 ++-- res/themes/dharma/css/_dharma.scss | 1 + res/themes/light/css/_base.scss | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index f8090eaaf7e..c728f4bcd4e 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_Field input:focus { outline: 0; - border-color: $input-valid-border-color; + border-color: $input-focused-border-color; } .mx_Field input::placeholder { @@ -73,5 +73,5 @@ limitations under the License. } .mx_Field input:focus + label { - color: $input-valid-border-color; + color: $input-focused-border-color; } diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 4a2bfec8e49..5f6a69abe31 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -71,6 +71,7 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29); $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; $input-lighter-fg-color: $input-darker-fg-color; +$input-focused-border-color: #238cf5; $input-valid-border-color: #7ac9a1; $field-focused-label-bg-color: #ffffff; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 9a3b3727a9d..dbab909f130 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -73,6 +73,7 @@ $button-bg-color: #7ac9a1; $button-fg-color: white; // apart from login forms, which have stronger border $strong-input-border-color: #c7c7c7; +$input-focused-border-color: #238cf5; $input-valid-border-color: #7ac9a1; $field-focused-label-bg-color: #ffffff;