From d5e42cf81a5b0a680d59e3dc5ebdc45652b7b4e9 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Fri, 2 Sep 2011 21:54:11 -0700
Subject: tweak readonly, disabled, and uneditable form elements

---
 lib/forms.less | 59 +++++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 17 deletions(-)

(limited to 'lib/forms.less')

diff --git a/lib/forms.less b/lib/forms.less
index a16844ab1..5f8a09693 100644
--- 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)
-- 
cgit v1.2.3