Adjusting forms.

dist/ratchet.css

@@ -492,10 +492,12 @@ input[type="color"],
 
 input[type=search] {
   height: 34px;
+  padding: 0 10px;
   font-size: 14px;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
 }
 
 textarea {
@@ -515,6 +517,9 @@ select {
   width: auto;
   height: auto;
   padding: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
 }
 
 .input-group input {
@@ -541,9 +546,9 @@ select {
 
 .input-row label {
   float: left;
-  width: 25%;
+  width: 35%;
   padding: 11px 10px 9px 13px;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .input-row label + input {
@@ -554,7 +559,7 @@ select {
   border-bottom: 0;
 }
 
-.bar-standard input[type=search] {
+[class*="bar-"] input[type=search] {
   height: 32px;
   margin: 0;
 }

docs/css/docs.css

@@ -691,6 +691,11 @@ h6 {
   margin: 10px;
 }
 
+#formsWithInputGroupInPhone form,
+#formsWithInputGroupAndLabelsInPhone form {
+  margin: 10px 0;
+}
+
 /* Footer
 -------------------------------------------------- */
 

docs/index.html

@@ -815,7 +815,7 @@
               <input type="text" placeholder="Full name">
               <input type="search" placeholder="Search">
               <textarea rows="5"></textarea>
-              <a class="button button-block">Choose existing</a>
+              <a class="button-positive button-block button-filled">Choose existing</a>
             </form>
           </div>
 
@@ -824,7 +824,7 @@
   &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
   &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
   &lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
-  &lt;a class=&quot;button button-block&quot;&gt;Choose existing&lt;/a&gt;
+  &lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Choose existing&lt;/a&gt;
 &lt;/form&gt;
 </pre>
 

lib/sass/forms.scss

@@ -43,10 +43,12 @@ input[type="color"],
 // Fully round search input
 input[type=search] {
   height: 34px;
+  padding: 0 10px;
   font-size: 14px;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0,0,0,.1);
+  box-sizing: border-box; // Override content-box in normalize
 }
 
 // Allow text area's height to grow larger than a normal input
@@ -73,6 +75,9 @@ select {
   width: auto;
   height: auto;
   padding: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
 }
 
 // Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
@@ -108,9 +113,9 @@ select {
 // Labels get floated left with a set percentage width
 .input-row label {
   float: left;
-  width: 25%;
+  width: 35%;
   padding: 11px 10px 9px 13px; // Optimizing the baseline for mobile.
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 // Actual inputs float to right of labels and also have a set percentage
@@ -127,7 +132,7 @@ select {
 // --------------------------------------------------
 
 // Position/size search bar within the bar
-.bar-standard input[type=search] {
+[class*="bar-"] input[type=search] {
   height: 32px;
   margin: 0;
 }