Documented the forms label inline class

diff --git a/marketing/docs/forms.php b/marketing/docs/forms.php
index edec7d8a225bdd3199fdaef61044d6b63cfa33fc..0c6be6732276fc5ab7897de51f1f294351d46640 100644 (file)
--- 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
index bc7d99e757cb958689e22ef3540d987c76fdccfd..7202af61176f1c50732079aa0ed3571c5923170e 100644 (file)
--- 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
index c0d19f5e7ca8633549dae210030f26e595f93bea..d1e192ab15a5a9115220f8aa049c2065814f262d 100644 (file)
--- 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
index a55018147765c902fe6c17af676ef6e12dc209f2..47ecabd20ae216165be56a6ad6b5f53217ad4bd1 100644 (file)
--- 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; }