Added support for disabled inputs and actions.

draganbabic · Apr 3, 2013 · ddb7871 · ddb7871
1 parent 625467f
commit ddb7871
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/css/style.uni-form.css b/css/style.uni-form.css
@@ -95,6 +95,16 @@
 
 .uni-form .input-file {}
 
+/* Disabled inputs */
+
+.uni-form .input-disabled {
+  background-color: #f4f4f4;
+  border-color: #ccc;
+  color: #999;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
 /* ==========================================================================
    Widths
    ========================================================================== */
@@ -197,6 +207,23 @@
   color: #999;
 }
 
+/* Disabled actions */
+
+.uni-form .action-disabled,
+.uni-form .action-disabled:link,
+.uni-form .action-disabled:visited,
+.uni-form .action-disabled:focus,
+.uni-form .action-disabled:hover,
+.uni-form .action-disabled:active {
+  background: #ccc;
+  border: 1px solid #aaa;
+  color: #999;
+  text-shadow: 1px 1px 0 rgba(255,255,255,.25);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  cursor: default;
+}
+
 /* ==========================================================================
    Required fields asterisks
    ========================================================================== */

diff --git a/demos/fauxform.html b/demos/fauxform.html
@@ -441,10 +441,32 @@ <h3>Columns</h3>
 
         </fieldset>
 
-        <div class="button-holder">
-          <button type="submit" class="action-secondary">Secondary action</button>
-          <button type="submit" class="action-primary">Primary Action</button>
-        </div>
+        <fieldset>
+
+          <h3>Disabled Fields</h3>
+
+          <div class="ctrl-holder">
+            <label for=""><em>*</em> Disabled input</label>
+            <input name="" id="" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="input-text input-disabled" disabled>
+            <p class="form-hint">This is a form hint.</p>
+          </div>
+
+          <div class="button-holder">
+            <button type="submit" class="action-primary action-disabled" disabled>Disabled Primary Action</button>
+          </div>
+
+        </fieldset>
+
+        <fieldset>
+
+          <h3>Actions</h3>
+
+          <div class="button-holder">
+            <button type="submit" class="action-secondary">Secondary action</button>
+            <button type="submit" class="action-primary">Primary Action</button>
+          </div>
+
+        </fieldset>
 
       </form>