From 94c267cc15ef62cf8122ce1725c06c571bf4e9b2 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 19 Oct 2013 18:27:11 -0700
Subject: [PATCH] Fixing up forms a bit.

---
 dist/ratchet.css    | 19 ++++++++++++-------
 lib/sass/forms.scss | 15 ++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 12b65b7..0191b62 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -537,6 +537,7 @@ input[type="color"],
   height: 40px;
   padding: 10px 15px;
   margin-bottom: 10px;
+  line-height: 21px;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
@@ -584,31 +585,35 @@ select {
   margin-bottom: 0;
   background-color: transparent;
   border: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
 }
 
 .input-group input:last-child {
-  border-bottom-width: 0;
+  background-image: none;
 }
 
 .input-row {
   overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
 }
 
 .input-row:last-child {
-  border-bottom-width: 0;
+  background-image: none;
 }
 
 .input-row label {
   float: left;
   width: 35%;
-  padding: 11px 10px 9px 15px;
+  padding: 10px 15px;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-weight: 500;
+  line-height: 1.1;
 }
 
 .input-row label + input {
@@ -616,7 +621,7 @@ select {
   width: 65%;
   padding-left: 0;
   margin-bottom: 0;
-  border-bottom: 0;
+  background-image: none;
 }
 
 [class*="bar-"] input[type=search] {
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index 633502f..3c6b370 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -33,6 +33,7 @@ input[type="color"],
   height: 40px;
   padding: 10px 15px;
   margin-bottom: 10px;
+  line-height: $line-height-default;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 3px;
@@ -87,14 +88,14 @@ select {
   margin-bottom: 0;
   background-color: transparent;
   border: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, .2);
   border-radius: 0;
   @include box-shadow(none);
+  @include hairline(single, #c8c7cc, 320px, 15px);
 }
 
 // Remove bottom border on last input to avoid double bottom border
 .input-group input:last-child {
-  border-bottom-width: 0;
+  background-image: none;
 }
 
 // Input groups with labels
@@ -104,21 +105,21 @@ select {
 // To use labels with input groups, wrap a label and an input in an .input-row
 .input-row {
   overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  @include hairline(single, #c8c7cc, 320px, 15px);
 }
 
 // Remove bottom border on last input-row to avoid double bottom border
 .input-row:last-child {
-  border-bottom-width: 0;
+  background-image: none;
 }
 
 // Labels get floated left with a set percentage width
 .input-row label {
   float: left;
   width: 35%;
-  padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile.
+  padding: 10px 15px;
   font-family: $font-family-default;
-  font-weight: $font-weight;
+  line-height: 1.1; // Put the text on the baseline.
 }
 
 // Actual inputs float to right of labels and also have a set percentage
@@ -127,7 +128,7 @@ select {
   width: 65%;
   padding-left: 0;
   margin-bottom: 0;
-  border-bottom: 0;
+  background-image: none;
 }