Added support for .ctrl element.

draganbabic · Apr 3, 2013 · 2c38c0e · 2c38c0e
1 parent ddb7871
commit 2c38c0e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/css/style.uni-form.css b/css/style.uni-form.css
@@ -113,6 +113,7 @@
 
 /* Fields in default layout */
 
+.uni-form .ctrl,
 .uni-form .input-text,
 .uni-form .input-file,
 .uni-form .input-select,
@@ -144,6 +145,7 @@
 
 /* Fields in alternate layout */
 
+.uni-form .ctrl,
 .uni-form .inline-labels .input-text,
 .uni-form .inline-labels .input-file,
 .uni-form .inline-labels .input-select,
@@ -235,9 +237,12 @@
 }
 
 /* ==========================================================================
-   Labels within grouped controls
+   Smaller text
+   --------------------------------------------------------------------------
+   We are targeting the labels within grouped fields, and ctrls
    ========================================================================== */
 
+.uni-form .ctrl,
 .uni-form .ctrl-holder > ul label {
   margin-top: .35em; /* Compensate for the smaller font size */
   font-size: .85em;

diff --git a/css/uni-form.css b/css/uni-form.css
@@ -97,6 +97,7 @@
 
 /* Float the input elements */
 
+.uni-form .ctrl,
 .uni-form .input-text,
 .uni-form .input-file,
 .uni-form .input-select,
@@ -106,6 +107,10 @@
   margin: 0;
 }
 
+.uni-form .ctrl {
+  padding-right: 3%;
+}
+
 /* Make some spacing between the label and the input/list */
 
 .uni-form label  + .input-text,
@@ -185,6 +190,7 @@
 
 /* Float the input elements */
 
+.uni-form .ctrl,
 .uni-form .inline-labels .input-text,
 .uni-form .inline-labels .input-file,
 .uni-form .inline-labels .input-select,
@@ -370,4 +376,4 @@
 
   .uni-form-columns-3 > .ctrl-holder {
     width: 33.3%;
-  }
+  }
diff --git a/demos/fauxform.html b/demos/fauxform.html
@@ -237,6 +237,16 @@ <h3>Default Form Field Layout</h3>
             <p class="form-hint">Laying out a single option checkbox without a label.</p>
           </div>
 
+          <div class="ctrl-holder">
+            <p class="label">
+              Ctrl element
+            </p>
+            <div class="ctrl">
+              Use the .ctrl element for stuff that's not a Uni–Form field, but that needs to line up with the input fields (e.g. captchas, etc.)
+            </div>
+            <p class="form-hint">It can even have a form hint.</p>
+          </div>
+
         </fieldset>
 
         <fieldset class="inline-labels">
@@ -392,6 +402,16 @@ <h3>Alternate Form Fields Layout</h3>
             </ul>
             <p class="form-hint">Laying out a single option checkbox without a label.</p>
           </div>
+
+          <div class="ctrl-holder">
+            <p class="label">
+              Ctrl element
+            </p>
+            <div class="ctrl">
+              Use the .ctrl element for stuff that's not a Uni–Form field, but that needs to line up with the input fields (e.g. captchas, etc.)
+            </div>
+            <p class="form-hint">It can even have a form hint.</p>
+          </div>
 
         </fieldset>