From 53d78aa409403e2f5e14179e3ff9586ba6533603 Mon Sep 17 00:00:00 2001 From: Cleiton Floss Date: Wed, 3 Jun 2020 21:15:29 -0400 Subject: [PATCH 1/4] Inputs: replace border with a background-color --- src/renderer/components/ft-input/ft-input.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index 4eb90319..c0e9e3fa 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -15,7 +15,7 @@ font-size: 16px; height: 45px; color: var(--secondary-text-color); - border-bottom: 1px solid var(--secondary-text-color); + background-color: var(--search-bar-color); } .ft-input-component ::-webkit-input-placeholder { @@ -24,7 +24,7 @@ .forceTextColor .ft-input { color: var(--text-with-main-color); - border-bottom: 1px solid var(--text-with-main-color); + background-color: var(--primary-input-color); } .forceTextColor ::-webkit-input-placeholder { From 1a4cd3631b7b742f7fdfd02f08da7b846957471c Mon Sep 17 00:00:00 2001 From: Cleiton Floss Date: Wed, 3 Jun 2020 21:17:13 -0400 Subject: [PATCH 2/4] Inputs: add a border-radius --- src/renderer/components/ft-input/ft-input.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index c0e9e3fa..13224984 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -15,6 +15,7 @@ font-size: 16px; height: 45px; color: var(--secondary-text-color); + border-radius: 5px; background-color: var(--search-bar-color); } From c24ea89b82903753f970305a3a0d2a0b80b58250 Mon Sep 17 00:00:00 2001 From: Cleiton Floss Date: Wed, 3 Jun 2020 21:17:48 -0400 Subject: [PATCH 3/4] Inputs: increase the padding --- src/renderer/components/ft-input/ft-input.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index 13224984..d1799b93 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -8,7 +8,7 @@ -moz-box-sizing: border-box; outline: none; width: 100%; - padding: 7px; + padding: 1rem; border: none; background: transparent; margin-bottom: 10px; From ee77b0d25d1fb82df74672d9c0037dab83814207 Mon Sep 17 00:00:00 2001 From: Cleiton Floss Date: Wed, 3 Jun 2020 21:18:31 -0400 Subject: [PATCH 4/4] Inputs: add a box-shadow when in focus --- src/renderer/components/ft-input/ft-input.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index d1799b93..b8ae1b1e 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -28,6 +28,13 @@ background-color: var(--primary-input-color); } +.forceTextColor .ft-input:focus { + box-shadow: 0 0 1rem 0 var(--primary-input-color); + -moz-transition: box-shadow 0.2s ease-in-out; + -o-transition: box-shadow 0.2s ease-in-out; + transition: box-shadow 0.2s ease-in-out; +} + .forceTextColor ::-webkit-input-placeholder { color: var(--text-with-main-color); }