tweak readonly, disabled, and uneditable form elements

diff --git a/bootstrap-1.2.0.css b/bootstrap-1.2.0.css
index 7a848a247cef5aa3f1e47d1092a1fc359482f36e..543aa4d16788208fa9d22efe2a00654ff8ce0717 100644 (file)
--- a/bootstrap-1.2.0.css
+++ b/bootstrap-1.2.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Sep  2 20:59:16 PDT 2011
+ * Date: Fri Sep  2 21:53:08 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -707,12 +707,12 @@ textarea {
   height: auto;
 }
 .uneditable-input {
-  background-color: #eee;
+  background-color: #fff;
   display: block;
-  border-color: #ccc;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  border-color: #eee;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 }
 :-moz-placeholder {
   color: #bfbfbf;
@@ -728,7 +728,7 @@ input, select, textarea {
   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-input:focus, textarea:focus {
+input:focus, select:focus, textarea:focus {
   outline: none;
   border-color: rgba(82, 168, 236, 0.8);
   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
@@ -800,14 +800,17 @@ select.xxlarge {
   width: 530px;
 }
 textarea.xxlarge {
-  overflow-y: scroll;
-}
-input[readonly]:focus, textarea[readonly]:focus, input.disabled {
-  background: #f5f5f5;
+  overflow-y: auto;
+}
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f5f5f5;
   border-color: #ddd;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  cursor: not-allowed;
 }
 .actions {
   background: #f5f5f5;

diff --git a/bootstrap-1.2.0.min.css b/bootstrap-1.2.0.min.css
index e085351756d985187d0453edf36ebe4d29d03632..e7b99664241e7e0bcf9a09c606a495756bb73359 100644 (file)
--- a/bootstrap-1.2.0.min.css
+++ b/bootstrap-1.2.0.min.css
@@ -112,11 +112,11 @@ input[type=file]{background-color:#fff;padding:initial;border:initial;line-heigh
 input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
 select,input[type=file]{height:27px;line-height:27px;}
 textarea{height:auto;}
-.uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);}
+.uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);}
 :-moz-placeholder{color:#bfbfbf;}
 ::-webkit-input-placeholder{color:#bfbfbf;}
 input,select,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
-input:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
+input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
 form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label,form div.error span.help-inline,form div.error span.help-block{color:#9d261d;}
 form div.error input,form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
 form div.error .input-prepend span.add-on,form div.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
@@ -126,8 +126,8 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
 .input-large,input.large,textarea.large,select.large{width:210px;}
 .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
 .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
-textarea.xxlarge{overflow-y:scroll;}
-input[readonly]:focus,textarea[readonly]:focus,input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+textarea.xxlarge{overflow-y:auto;}
+input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
 .help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
 .help-inline{padding-left:5px;*position:relative;*top:-5px;}

diff --git a/docs/index.html b/docs/index.html
index d2e0366118348c7773ba52ebdc64ec9e44b6e699..35cb88d6109862bd9ddd43a60273f6d58b7fb808 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -621,7 +621,7 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label for="xlInput">X-Large Input</label>
+            <label for="xlInput">X-Large input</label>
             <div class="input">
               <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
             </div>
@@ -651,19 +651,25 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label>Uneditable Input</label>
+            <label>Uneditable input</label>
             <div class="input">
-              <span class="uneditable-input">Some Value Here</span>
+              <span class="uneditable-input">Some value here</span>
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label for="disabledInput">Disabled Input</label>
+            <label for="disabledInput">Disabled input</label>
             <div class="input">
               <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
             </div>
           </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="disabledInput">Disabled textarea</label>
+            <div class="input">
+              <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
+            </div>
+          </div><!-- /clearfix -->
           <div class="clearfix error">
-            <label for="xlInput2">X-Large Input</label>
+            <label for="xlInput2">X-Large input</label>
             <div class="input">
               <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
               <span class="help-inline">Small snippet of help text</span>
@@ -673,7 +679,7 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label for="prependedInput">Prepended Text</label>
+            <label for="prependedInput">Prepended text</label>
             <div class="input">
               <div class="input-prepend">
                 <span class="add-on">@</span>
@@ -682,7 +688,7 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label for="prependedInput2">Prepended Checkbox</label>
+            <label for="prependedInput2">Prepended checkbox</label>
             <div class="input">
               <div class="input-prepend">
                 <label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
@@ -691,7 +697,7 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label for="appendedInput">Appended Checkbox</label>
+            <label for="appendedInput">Appended checkbox</label>
             <div class="input">
               <div class="input-append">
                 <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
@@ -700,7 +706,7 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label for="fileInput">File Input</label>
+            <label for="fileInput">File input</label>
             <div class="input">
               <input class="input-file" id="fileInput" name="fileInput" type="file" />
             </div>
@@ -709,7 +715,7 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label id="optionsCheckboxes">List of Options</label>
+            <label id="optionsCheckboxes">List of options</label>
             <div class="input">
               <ul class="inputs-list">
                 <li>
@@ -743,7 +749,7 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label>Date Range</label>
+            <label>Date range</label>
             <div class="input">
               <div class="inline-inputs">
                 <input class="small" type="text" value="May 1, 2011" />
@@ -758,14 +764,14 @@
           <div class="clearfix">
             <label for="textarea">Textarea</label>
             <div class="input">
-              <textarea class="xxlarge" id="textarea" name="textarea"></textarea>
+              <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
               <span class="help-block">
                 Block of help text to describe the field above if need be.
               </span>
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label id="optionsRadio">List of Options</label>
+            <label id="optionsRadio">List of options</label>
             <div class="input">
               <ul class="inputs-list">
                 <li>
@@ -784,7 +790,7 @@
             </div>
           </div><!-- /clearfix -->
           <div class="actions">
-            <input type="submit" class="btn primary" value="Save Changes">&nbsp;<button type="reset" class="btn">Cancel</button>
+            <input type="submit" class="btn primary" value="Save changes">&nbsp;<button type="reset" class="btn">Cancel</button>
           </div>
         </fieldset>
       </form>
@@ -803,7 +809,7 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label for="xlInput3">X-Large Input</label>
+            <label for="xlInput3">X-Large input</label>
             <div class="input">
               <input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
             </div>
@@ -824,14 +830,14 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix error">
-            <label for="xlInput4">X-Large Input</label>
+            <label for="xlInput4">X-Large input</label>
             <div class="input">
               <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
               <span class="help-inline">Small snippet of help text</span>
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix">
-            <label id="optionsCheckboxes">List of Options</label>
+            <label id="optionsCheckboxes">List of options</label>
             <div class="input">
               <ul class="inputs-list">
                 <li>
@@ -854,7 +860,7 @@
           </div><!-- /clearfix -->
         </fieldset>
         <div class="actions">
-          <button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
+          <button type="submit" class="btn primary">Save changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
         </div>
       </form>
     </div>

diff --git a/lib/forms.less b/lib/forms.less
index a16844ab1e8115124b7bd877a7b9a237dcfe6f03..5f8a09693eed253f9818fb8cf8c997d19908131f 100644 (file)
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -113,11 +113,13 @@ textarea {
   height: auto;
 }
 
+// For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  background-color: #eee;
+  background-color: #fff;
   display: block;
-  border-color: #ccc;
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
+  border-color: #eee;
+  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -130,12 +132,14 @@ textarea {
 
 // Focus states
 input,
-select, textarea {
+select,
+textarea {
   @transition: border linear .2s, box-shadow linear .2s;
   .transition(@transition);
   .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
 }
 input:focus,
+select:focus,
 textarea:focus {
   outline: none;
   border-color: rgba(82,168,236,.8);
@@ -175,35 +179,56 @@ form div.error {
 }
 
 // Form element sizes
-.input-mini, input.mini, textarea.mini, select.mini {
+.input-mini,
+input.mini,
+textarea.mini,
+select.mini {
   width: 60px;
 }
-.input-small, input.small, textarea.small, select.small {
+.input-small,
+input.small,
+textarea.small,
+select.small {
   width: 90px;
 }
-.input-medium, input.medium, textarea.medium, select.medium {
+.input-medium,
+input.medium,
+textarea.medium,
+select.medium {
   width: 150px;
 }
-.input-large, input.large, textarea.large, select.large {
+.input-large,
+input.large,
+textarea.large,
+select.large {
   width: 210px;
 }
-.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
+.input-xlarge,
+input.xlarge,
+textarea.xlarge,
+select.xlarge {
   width: 270px;
 }
-.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
+.input-xxlarge,
+input.xxlarge,
+textarea.xxlarge,
+select.xxlarge {
   width: 530px;
 }
 textarea.xxlarge {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
-// Turn off focus for disabled (read-only) form elements
-input[readonly]:focus,
-textarea[readonly]:focus,
-input.disabled {
-  background: #f5f5f5;
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f5f5f5;
   border-color: #ddd;
-  .box-shadow(none);
+  cursor: not-allowed;
 }
 
 // Actions (the buttons)