From c6f75702b1bfbe9839e4097feb47d39fc67c5291 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sat, 14 Oct 2017 22:52:32 -0600
Subject: [PATCH] more fixes for input styles

---
 ui/dist/themes/dark.css            |  8 ++++-
 ui/scss/_vars.scss                 | 14 ++++++--
 ui/scss/component/_form-field.scss | 51 +++++++++++++++---------------
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css
index 4176b4985..f5d9d4736 100644
--- a/ui/dist/themes/dark.css
+++ b/ui/dist/themes/dark.css
@@ -24,7 +24,13 @@
     --input-bg: transparent;
     --input-border-color: rgba(255,255,255, 0.70);
     --input-hover-border-color: rgba(255, 255, 255, 1);
-    --input-placeholder-opacity: 0.5;
+
+    /* input:placeholder */
+    --input-placeholder-color: rgba(255,255,255, 0.5);
+
+    /* input:disabled */
+    --input-disabled-color: rgba(255, 255, 255, 0.50);
+    --input-disabled-border-color: rgba(255, 255, 255, 0.70);
 
     /* Search */
     --search-bg: rgba(0,0,0, 0.45);
diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 27b4086ac..71d3e69db 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -58,14 +58,22 @@ $text-color: #000;
 
   /* Input */
   --input-bg: transparent;
-  --input-active-bg: transparent;
   --input-width: 330px;
   --input-color: var(--text-color);
   --input-border-size: 2px;
   --input-border-color: rgba(0, 0, 0, 0.42);
+  /* input:active */
+  --input-active-bg: transparent;
+
+  /* input:disabled */
+  --input-disabled-border-color: rgba(0, 0, 0, 0.42);
+  --input-disabled-color: rgba(0, 0, 0, 0.54);
+
+  /* input:hover */
   --input-hover-border-color: rgba(0, 0, 0, 0.87);
+ /* input:placeholder */
   --input-placeholder-color: var(--text-color);
-  --input-placeholder-opacity: 0.42;
+  --input-placeholder-opacity: 1;
 
   /* Select */
   --select-bg: var(--color-bg-alt);
@@ -80,7 +88,7 @@ $text-color: #000;
   --button-height: $spacing-vertical * 1.5;
   --button-intra-margin: $spacing-vertical;
   --button-radius: 3px;
-
+  
   /* Header */
   --header-bg: var(--color-bg);
   --header-color: #666;
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index b676db070..d4b9e1256 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -9,7 +9,7 @@
 
 .form-row__label-row {
   margin-top: $spacing-vertical * 5/6;
-  margin-bottom: $spacing-vertical * 1/6;
+  margin-bottom: 0px;
   line-height: 1;
   font-size:calc( 0.9 * var(--font-size));
 }
@@ -18,26 +18,6 @@
   margin-right: 5px;
 }
 
-input[type="text"].input-copyable {
-  background: var(--input-bg);
-  color: var(--input-color);
-  line-height: 1;
-  padding-top: $spacing-vertical * 1/3;
-  padding-bottom: $spacing-vertical * 1/3;
-  padding-left: 5px;
-  padding-right: 5px;
-  width: 100%;
-}
-
-input[readonly] {
-    border-bottom: 1px dashed var(--input-border-color) !important;
-}
-
-input[readonly]:focus {
-    background: var(--input-bg) !important;
-    border-bottom: 1px dashed var(--input-border-color !important);
-}
-
 .form-field {
   display: inline-block;
   margin: 8px 0;
@@ -60,6 +40,27 @@ input[readonly]:focus {
     }
   }
 
+  input[type="text"].input-copyable {
+    background: var(--input-bg);
+    color:  var(--input-disabled-color);
+    line-height: 1;
+    padding-top: $spacing-vertical * 1/3;
+    padding-bottom: $spacing-vertical * 1/3;
+    padding-left: 5px;
+    padding-right: 5px;
+    width: 100%;
+  }
+
+  input[readonly] {
+      color:  var(--input-disabled-color) !important;
+      border-bottom: 1px dashed var(--input-disabled-border-color) !important;
+  }
+
+  input[readonly]:focus {
+      background: var(--input-bg) !important;
+      border-bottom: 1px dashed var(--input-disabled-border-color) !important;
+  }
+
   textarea,
   input[type="text"],
   input[type="password"],
@@ -73,22 +74,22 @@ input[readonly]:focus {
     color: var(--input-color);
     cursor: pointer;
     line-height: 1;
-    padding: $spacing-vertical * 1/3  1px;
+    padding:0 1px 8px 1px;
     box-sizing: border-box;
     -webkit-appearance: none;
     transition: all  var(--transition-duration) var(--transition-type);
 
-    & ::-webkit-input-placeholder {
+    &::-webkit-input-placeholder {
       color: var(--input-placeholder-color);
       opacity: var(--input-placeholder-opacity) !important;
    }
 
     &:focus {
-      border-color: var(--color-primary) !important;
+      border-color: var(--color-primary);
       background: var(--input-active-bg);
     }
 
-    &:hover {
+    &:hover:not(:focus){
       border-color: var(--input-hover-border-color);
     }