From cc1a7b71126a8492471f7dcf094357b77955b3d3 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 18 Sep 2013 18:40:05 +0200
Subject: [PATCH] [ux] make forms styles centralized and uniform

---
 public/css/app/aux.styl   | 11 --------
 public/css/app/chat.styl  |  3 ---
 public/css/app/forms.styl | 25 ++++++++++++++++++
 public/css/otalk.css      | 54 +++++++++++++++++++++++++++++----------
 public/css/otalk.styl     |  1 +
 5 files changed, 66 insertions(+), 28 deletions(-)
 create mode 100644 public/css/app/forms.styl

diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl
index fdc90dc..bd4281f 100644
--- a/public/css/app/aux.styl
+++ b/public/css/app/aux.styl
@@ -23,20 +23,9 @@
 
   input
     width: 100%
-    display: block
-    height: 35px
-    font-size: 14px
-    padding: 10px 0.5em
     margin-bottom: 15px
-    background-color: #f9fafa
-    border: 1px solid #eeeeee
-    color: #2e2d2d
     borderbox()
 
-    &:focus
-      border: 1px solid #a7d9eb
-      outline: 0px
-
   button, .andyetLogin
     text-decoration: none
     text-align: center
diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index 394a46e..6eb815d 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -148,8 +148,5 @@
     padding: 5px
     borderbox()
 
-    &:focus
-      border-color: #bbb
-
     &.editing
       background-color: yellow
diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl
new file mode 100644
index 0000000..f19f4e7
--- /dev/null
+++ b/public/css/app/forms.styl
@@ -0,0 +1,25 @@
+input[type=text], input[type=email], input[type=search], textarea
+  -webkit-appearance: none
+  roundall(3px)
+  padding: 10px
+  background: white
+  border: 1px solid $grayOutline
+  font-size: 0.8em
+  borderbox()
+
+  transition: border .2s ease-in 0
+  -webkit-transition: border .2s ease-in 0
+  -moz-transition: border .2s ease-in 0
+
+input[type=text], input[type=email], input[type=search]
+  height: 8px
+
+textarea
+  resize: none
+
+input[type=text]:focus, 
+input[type=email]:focus, 
+input[type=search]:focus,
+textarea:focus
+  outline: none
+  border: 1px solid lighten($activeBlue, 50%)
\ No newline at end of file
diff --git a/public/css/otalk.css b/public/css/otalk.css
index a7b6b56..65dc143 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -612,9 +612,6 @@ td {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.chatBox textarea:focus {
-  border-color: #bbb;
-}
 .chatBox textarea.editing {
   background-color: #ff0;
 }
@@ -703,22 +700,11 @@ body #menu {
 }
 #loginbox input {
   width: 100%;
-  display: block;
-  height: 35px;
-  font-size: 14px;
-  padding: 10px 0.5em;
   margin-bottom: 15px;
-  background-color: #f9fafa;
-  border: 1px solid #eee;
-  color: #2e2d2d;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-#loginbox input:focus {
-  border: 1px solid #a7d9eb;
-  outline: 0px;
-}
 #loginbox button,
 #loginbox .andyetLogin {
   text-decoration: none;
@@ -748,3 +734,43 @@ body #menu {
   padding-bottom: 10px;
   border-bottom: 1px solid #f8f8f8;
 }
+input[type=text],
+input[type=email],
+input[type=search],
+textarea {
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #e4e4e4;
+  font-size: 0.8em;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: border 0.2s ease-in 0;
+  -o-transition: border 0.2s ease-in 0;
+  transition: border 0.2s ease-in 0;
+  -moz-transition: border 0.2s ease-in 0;
+  -webkit-transition: border 0.2s ease-in 0;
+  -moz-transition: border 0.2s ease-in 0;
+}
+input[type=text],
+input[type=email],
+input[type=search] {
+  height: 8px;
+}
+textarea {
+  resize: none;
+}
+input[type=text]:focus,
+input[type=email]:focus,
+input[type=search]:focus,
+textarea:focus {
+  outline: none;
+  border: 1px solid #78daff;
+}
diff --git a/public/css/otalk.styl b/public/css/otalk.styl
index fa0affb..569c504 100644
--- a/public/css/otalk.styl
+++ b/public/css/otalk.styl
@@ -6,3 +6,4 @@
 @import 'app/connectionStatus'
 @import 'app/layout'
 @import 'app/aux'
+@import 'app/forms'