Add horizontal form sizing and column sizing #16

dwyl · Jun 2, 2017 · b95638f · b95638f
1 parent 2ecda16
commit b95638f
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/components/form.html b/components/form.html
@@ -329,9 +329,9 @@ <h3>Validation states</h3>
   <h3>Control sizing</h3>
   <h4>Height sizing</h4>
   <p class="mt0 f6 fw6 silver">EXAMPLE</p>
-  <input type="email" class="db w-100 pa3 mt2 br2 b--black-20 f4" placeholder="pa3 input">
-  <input type="email" class="db w-100 pv2 ph3 mt2 br2 b--black-20" placeholder="pv2 input">
-  <input type="email" class="db w-100 pv2 ph3 mt2 br2 b--black-20 f6" placeholder="pv2 f6 input">
+  <input type="email" class="db w-100 pv3 ph2 mt2 br2 b--black-20 f4" placeholder="pv3 input">
+  <input type="email" class="db w-100 pa2 mt2 br2 b--black-20" placeholder="pa2 input">
+  <input type="email" class="db w-100 pa2 mt2 br2 b--black-20 f6" placeholder="pa2 f6 input">
 
   <select class="w-100 f4 h3 mt3 mb2 ba b--black-20 bg-white">
     <option>h3 select</option>
@@ -342,4 +342,20 @@ <h4>Height sizing</h4>
   <select class="w-100 f6 h2 mv2 ba b--black-20 bg-white">
     <option>h2 f6 select</option>
   </select>
+
+  <h4>Horizontal form group sizes</h4>
+  <div class="mv3">
+    <label for="inputLarge" class="fw7 f6">Large label</label>
+    <input type="email" id="inputLarge" class="db w-100 pv3 ph2 mt2 br2 b--black-20 f4" placeholder="pa3 input">
+  </div>
+
+  <div class="mv3">
+    <label for="inputSmall" class="fw7 f6">Small label</label>
+    <input type="email" id="inputSmall" class="db w-100 pa2 mt2 br2 b--black-20 f6" placeholder="pv2 f6 input">
+  </div>
+
+  <h4>Column sizing</h4>
+  <input type="text" class="pa2 w-10 mt2 br2 b--black-20 f6" placeholder="w-10">
+  <input type="text" class="pa2 w-25 mt2 ml3 br2 b--black-20 f6" placeholder="w-25">
+  <input type="text" class="pa2 w-third mt2 ml3 br2 b--black-20 f6" placeholder="w-third">
 </article>