From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 12 Mar 2017 23:31:56 +0000 (+0000)
Subject: Fix button, input, and select line-height
X-Git-Tag: 0.4.0~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d2d9515dfaf5c5077cc7eabcca54dbda026156eb;p=thirdparty%2Fbulma.git

Fix button, input, and select line-height
---

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 393cf6d6d..9a6d28a60 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 bb3c084e3..d1cc78c4e 100644
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -759,27 +759,29 @@ 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">Subject</label>
+    <label class="label">Department</label>
   </div>
   <div class="field-body">
-    <div class="field">
+    <div class="field is-narrow">
       <div class="control">
         <div class="select is-fullwidth">
           <select>
-            <option>General enquiry</option>
+            <option>Business development</option>
+            <option>Marketing</option>
+            <option>Sales</option>
           </select>
         </div>
       </div>
@@ -787,6 +789,22 @@ doc-subtab: form
   </div>
 </div>
 
+<div class="field is-horizontal">
+  <div class="field-label">
+    <label class="label">Subject</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <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>
+
 <div class="field is-horizontal">
   <div class="field-label">
     <label class="label">Question</label>
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index cce2e5406..eb5845273 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 39872debd..97a44d281 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 28bdba55a..dc867b56e 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