Documented the forms label inline class

foundation · Jul 6, 2012 · 7fbf801 · 7fbf801
1 parent 4ede798
commit 7fbf801
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/marketing/docs/forms.php b/marketing/docs/forms.php
@@ -42,7 +42,7 @@
 
           <script src="https://gist.github.com/2952683.js?file=f3-simple-form.html"></script>
 
-          <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake.
+          <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of <code>.right</code> to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of <code>.inline</code> will have it vertically center against an input.</p>
 
           <form>
             <div class="row">

diff --git a/marketing/stylesheets/docs/presentation.css b/marketing/stylesheets/docs/presentation.css
@@ -709,7 +709,8 @@ form { margin: 0 0 19.416px; }
 .row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; }
 
 label { font-size: 14px; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; }
-label.right { float: none; text-align: right; padding-top: 6px; }
+label.right { float: none; text-align: right; }
+label.inline { line-height: 32px; margin: 0 0 12px 0; }
 
 @media only screen and (max-width: 767px) { label.right { text-align: left; } }
 .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; }

diff --git a/marketing/stylesheets/index.css b/marketing/stylesheets/index.css
@@ -709,7 +709,8 @@ form { margin: 0 0 19.416px; }
 .row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; }
 
 label { font-size: 14px; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; }
-label.right { float: none; text-align: right; padding-top: 6px; }
+label.right { float: none; text-align: right; }
+label.inline { line-height: 32px; margin: 0 0 12px 0; }
 
 @media only screen and (max-width: 767px) { label.right { text-align: left; } }
 .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; }

diff --git a/marketing/stylesheets/presentation.css b/marketing/stylesheets/presentation.css
@@ -709,7 +709,8 @@ form { margin: 0 0 19.416px; }
 .row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; }
 
 label { font-size: 14px; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; }
-label.right { float: none; text-align: right; padding-top: 6px; }
+label.right { float: none; text-align: right; }
+label.inline { line-height: 32px; margin: 0 0 12px 0; }
 
 @media only screen and (max-width: 767px) { label.right { text-align: left; } }
 .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; }