From d2d9515dfaf5c5077cc7eabcca54dbda026156eb Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 12 Mar 2017 23:31:56 +0000
Subject: [PATCH] Fix button, input, and select line-height

---
 docs/css/bulma-docs.css               | 30 +++++++++++++++++--------
 docs/documentation/elements/form.html | 32 +++++++++++++++++++++------
 sass/elements/button.sass             |  3 +++
 sass/elements/form.sass               |  8 ++++++-
 sass/utilities/controls.sass          |  4 ++--
 5 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 393cf6d6..9a6d28a6 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -583,10 +583,10 @@ a.box:active {
   height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: 0.425em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.375em;
+  padding-top: 0.325em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -1297,6 +1297,10 @@ a.box:active {
   position: absolute !important;
 }
 
+button.button {
+  line-height: 1;
+}
+
 .content {
   color: #4a4a4a;
 }
@@ -1462,10 +1466,10 @@ a.box:active {
   height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: 0.425em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.375em;
+  padding-top: 0.325em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1699,10 +1703,10 @@ a.box:active {
   height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: 0.425em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.375em;
+  padding-top: 0.325em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1839,6 +1843,11 @@ a.box:active {
   color: #ff3860;
 }
 
+input[type="submit"].input,
+.select select {
+  line-height: 1;
+}
+
 .field:not(:last-child) {
   margin-bottom: 0.75rem;
 }
@@ -1957,9 +1966,11 @@ a.box:active {
     flex-shrink: 1;
   }
   .field-body .field {
-    flex-grow: 1;
     flex-shrink: 1;
   }
+  .field-body .field:not(.is-narrow) {
+    flex-grow: 1;
+  }
   .field-body .field:not(:last-child) {
     margin-bottom: 0;
     margin-right: 0.75rem;
@@ -1967,6 +1978,7 @@ a.box:active {
 }
 
 .control {
+  font-size: 1rem;
   position: relative;
   text-align: left;
 }
@@ -3635,10 +3647,10 @@ a.nav-item.is-tab.is-active {
   height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: 0.425em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.375em;
+  padding-top: 0.325em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index bb3c084e..d1cc78c4 100644
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -759,13 +759,32 @@ doc-subtab: form
       </p>
     </div>
     <div class="field">
-      <p class="control is-expanded has-icon">
+      <p class="control is-expanded has-icon has-icon-right">
         <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
         <span class="icon is-small">
           <i class="fa fa-check"></i>
         </span>
       </p>
-      <p class="help is-success">This username is available</p>
+      <p class="help is-success">This email is correct</p>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label">
+    <label class="label">Department</label>
+  </div>
+  <div class="field-body">
+    <div class="field is-narrow">
+      <div class="control">
+        <div class="select is-fullwidth">
+          <select>
+            <option>Business development</option>
+            <option>Marketing</option>
+            <option>Sales</option>
+          </select>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -777,12 +796,11 @@ doc-subtab: form
   <div class="field-body">
     <div class="field">
       <div class="control">
-        <div class="select is-fullwidth">
-          <select>
-            <option>General enquiry</option>
-          </select>
-        </div>
+        <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
       </div>
+      <p class="help is-danger">
+        This field is required
+      </p>
     </div>
   </div>
 </div>
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index cce2e540..eb584527 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -153,3 +153,6 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       +loader
       +center(1em)
       position: absolute !important
+
+button.button
+  line-height: 1
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 39872deb..97a44d28 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -158,6 +158,10 @@ $input-radius:              $radius !default
     &.is-#{$name}
       color: $color
 
+input[type="submit"].input,
+.select select
+  line-height: 1
+
 // Containers
 
 .field
@@ -254,13 +258,15 @@ $input-radius:              $radius !default
     flex-grow: 5
     flex-shrink: 1
     .field
-      flex-grow: 1
       flex-shrink: 1
+      &:not(.is-narrow)
+        flex-grow: 1
       &:not(:last-child)
         margin-bottom: 0
         margin-right: 0.75rem
 
 .control
+  font-size: $size-normal
   position: relative
   text-align: left
   // Modifiers
diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
index 28bdba55..dc867b56 100644
--- a/sass/utilities/controls.sass
+++ b/sass/utilities/controls.sass
@@ -13,10 +13,10 @@ $control-radius-small: $radius-small !default
   height: 2.25em
   justify-content: flex-start
   line-height: 1.5
-  padding-bottom: 0.375em
+  padding-bottom: 0.425em
   padding-left: 0.625em
   padding-right: 0.625em
-  padding-top: 0.375em
+  padding-top: 0.325em
   position: relative
   vertical-align: top
   // States