Fix #569

css/bulma.css

@@ -633,11 +633,11 @@ a.box:active {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -1530,11 +1530,11 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1686,7 +1686,6 @@ input[type="submit"].button {
 
 .textarea {
   display: block;
-  line-height: 1.25;
   max-height: 600px;
   max-width: 100%;
   min-height: 120px;
@@ -1709,6 +1708,7 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  line-height: 1.5;
   position: relative;
   vertical-align: top;
 }
@@ -1781,11 +1781,11 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -2055,6 +2055,10 @@ input[type="submit"].button {
   }
 }
 
+.field-label .label {
+  font-size: inherit;
+}
+
 @media screen and (max-width: 768px) {
   .field-label {
     margin-bottom: 0.5rem;
@@ -2071,9 +2075,23 @@ input[type="submit"].button {
     -ms-flex-negative: 0;
         flex-shrink: 0;
     margin-right: 1.5rem;
-    padding-top: 0.375em;
     text-align: right;
   }
+  .field-label.is-small {
+    font-size: 0.75rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-normal {
+    padding-top: 0.375em;
+  }
+  .field-label.is-medium {
+    font-size: 1.25rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-large {
+    font-size: 1.5rem;
+    padding-top: 0.375em;
+  }
 }
 
 @media screen and (min-width: 769px) {
@@ -4006,11 +4024,11 @@ a.nav-item.is-tab.is-active {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;

docs/css/bulma-docs.css

@@ -633,11 +633,11 @@ a.box:active {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -1530,11 +1530,11 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1686,7 +1686,6 @@ input[type="submit"].button {
 
 .textarea {
   display: block;
-  line-height: 1.25;
   max-height: 600px;
   max-width: 100%;
   min-height: 120px;
@@ -1709,6 +1708,7 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  line-height: 1.5;
   position: relative;
   vertical-align: top;
 }
@@ -1781,11 +1781,11 @@ input[type="submit"].button {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -2055,6 +2055,10 @@ input[type="submit"].button {
   }
 }
 
+.field-label .label {
+  font-size: inherit;
+}
+
 @media screen and (max-width: 768px) {
   .field-label {
     margin-bottom: 0.5rem;
@@ -2071,9 +2075,23 @@ input[type="submit"].button {
     -ms-flex-negative: 0;
         flex-shrink: 0;
     margin-right: 1.5rem;
-    padding-top: 0.375em;
     text-align: right;
   }
+  .field-label.is-small {
+    font-size: 0.75rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-normal {
+    padding-top: 0.375em;
+  }
+  .field-label.is-medium {
+    font-size: 1.25rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-large {
+    font-size: 1.5rem;
+    padding-top: 0.375em;
+  }
 }
 
 @media screen and (min-width: 769px) {
@@ -4006,11 +4024,11 @@ a.nav-item.is-tab.is-active {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  line-height: 1.25;
-  padding-bottom: 0.5em;
+  line-height: 1.5;
+  padding-bottom: 0.375em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.5em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -7437,14 +7455,14 @@ html.route-index #carbon {
   margin-top: -1.5rem;
 }
 
-.example + .highlight pre {
-  max-height: 50vh;
-}
-
 .example + .highlight:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
+.highlight pre {
+  max-height: 600px;
+}
+
 .structure {
   border-color: #ff3860;
   border-radius: 3px;

docs/documentation/elements/form.html

@@ -587,7 +587,7 @@ doc-subtab: form
       Search
     </a>
   </p>
-</div
+</div>
 {% endcapture %}
     <div class="example">
 {{addons_example}}
@@ -750,7 +750,7 @@ doc-subtab: form
     </div>
 {% capture horizontal_form_example %}
 <div class="field is-horizontal">
-  <div class="field-label">
+  <div class="field-label is-normal">
     <label class="label">From</label>
   </div>
   <div class="field-body">
@@ -772,7 +772,7 @@ doc-subtab: form
 </div>
 
 <div class="field is-horizontal">
-  <div class="field-label">
+  <div class="field-label is-normal">
     <label class="label">Department</label>
   </div>
   <div class="field-body">
@@ -792,6 +792,26 @@ doc-subtab: form
 
 <div class="field is-horizontal">
   <div class="field-label">
+    <label class="label">Already a member?</label>
+  </div>
+  <div class="field-body">
+    <div class="field is-narrow">
+      <div class="control">
+        <label class="radio">
+          <input type="radio" name="member">
+          Yes
+        </label>
+        <label class="radio">
+          <input type="radio" name="member">
+          No
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
     <label class="label">Subject</label>
   </div>
   <div class="field-body">
@@ -807,7 +827,7 @@ doc-subtab: form
 </div>
 
 <div class="field is-horizontal">
-  <div class="field-label">
+  <div class="field-label is-normal">
     <label class="label">Question</label>
   </div>
   <div class="field-body">
@@ -834,9 +854,109 @@ doc-subtab: form
   </div>
 </div>
 {% endcapture %}
+<div class="example">
 {{horizontal_form_example}}
+</div>
 {% highlight html %}
 {{horizontal_form_example}}
+{% endhighlight %}
+
+<div class="content">
+  <p>
+    <span class="tag is-success">New!</span>
+    <br>
+    To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
+  </p>
+  <ul>
+    <li>
+      <code>.is-small</code>
+    </li>
+    <li>
+      <code>.is-normal</code> for any <code>.input</code> or <code>.button</code>
+    </li>
+    <li>
+      <code>.is-medium</code>
+    </li>
+    <li>
+      <code>.is-large</code>
+    </li>
+  </ul>
+</div>
+
+{% capture field_label_example %}
+<div class="field is-horizontal">
+  <div class="field-label">
+    <label class="label">No padding</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <label class="checkbox">
+          <input type="checkbox">
+          Checkbox
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-small">
+    <label class="label">Small padding</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <input class="input is-small" type="text" placeholder="Small sized input">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">Normal label</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <input class="input" type="text" placeholder="Normal sized input">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-medium">
+    <label class="label">Medium label</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <input class="input is-medium" type="text" placeholder="Medium sized input">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-large">
+    <label class="label">Large label</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <input class="input is-large" type="text" placeholder="Large sized input">
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+<div class="example">
+{{field_label_example}}
+</div>
+{% highlight html %}
+{{field_label_example}}
 {% endhighlight %}
   </div>
 </section>

docs/sass/example.sass

@@ -35,11 +35,12 @@
     border-radius: 0 0 $radius $radius
     border-top: none
     margin-top: -1.5rem
-    pre
-      max-height: 50vh
     &:not(:last-child)
       margin-bottom: 1.5rem
 
+.highlight pre
+  max-height: 600px
+
 $structure: $danger
 $structure-invert: $danger-invert
 

sass/elements/form.sass

@@ -71,7 +71,6 @@ $input-radius:              $radius !default
 
 .textarea
   display: block
-  line-height: 1.25
   max-height: 600px
   max-width: 100%
   min-height: 120px
@@ -86,6 +85,7 @@ $input-radius:              $radius !default
   display: inline-flex
   flex-wrap: wrap
   justify-content: flex-start
+  line-height: 1.5
   position: relative
   vertical-align: top
   input
@@ -226,6 +226,8 @@ $input-radius:              $radius !default
       display: flex
 
 .field-label
+  .label
+    font-size: inherit
   +mobile
     margin-bottom: 0.5rem
   +tablet
@@ -233,8 +235,18 @@ $input-radius:              $radius !default
     flex-grow: 1
     flex-shrink: 0
     margin-right: 1.5rem
-    padding-top: 0.375em
     text-align: right
+    &.is-small
+      font-size: $size-small
+      padding-top: 0.375em
+    &.is-normal
+      padding-top: 0.375em
+    &.is-medium
+      font-size: $size-medium
+      padding-top: 0.375em
+    &.is-large
+      font-size: $size-large
+      padding-top: 0.375em
 
 .field-body
   +tablet

sass/utilities/controls.sass

@@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
   font-size: $size-normal
   height: 2.25em
   justify-content: flex-start
-  line-height: 1.25
-  padding-bottom: 0.5em
+  line-height: 1.5
+  padding-bottom: 0.375em
   padding-left: 0.625em
   padding-right: 0.625em
-  padding-top: 0.5em
+  padding-top: 0.375em
   position: relative
   vertical-align: top
   // States