From 240724a994715e71cfcf303e9bf4712d07f11654 Mon Sep 17 00:00:00 2001 From: Arnold Daniels Date: Sun, 15 Jul 2012 16:34:06 +0200 Subject: [PATCH] Fixed and improved uneditable forms and inputs --- less/jasny/forms-uneditable.less | 159 +++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 less/jasny/forms-uneditable.less diff --git a/less/jasny/forms-uneditable.less b/less/jasny/forms-uneditable.less new file mode 100644 index 00000000..a5fe2137 --- /dev/null +++ b/less/jasny/forms-uneditable.less @@ -0,0 +1,159 @@ +// Forms-uneditable.less +// CSS for uneditable forms and form elements +// ------------------------------------------ + +.uneditable-input, +.uneditable-textarea { + display: inline-block; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @gray; + cursor: not-allowed; + background-color: @inputBackground; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + padding: 4px 3px 4px 5px; + border: 1px solid #eee; + .border-radius(@inputBorderRadius); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); +} +.uneditable-input { + white-space: pre; + overflow: hidden; // prevent text from wrapping, but still cut it off like an input does + height: @baseLineHeight; +} +.uneditable-textarea { + white-space: pre-wrap; + overflow-y: auto; + overflow-x: hidden; +} + + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +select[disabled], +textarea[disabled], +input[type="text"][disabled], +input[type="password"][disabled], +input[type="datetime"][disabled], +input[type="datetime-local"][disabled], +input[type="date"][disabled], +input[type="month"][disabled], +input[type="time"][disabled], +input[type="week"][disabled], +input[type="number"][disabled], +input[type="email"][disabled], +input[type="url"][disabled], +input[type="search"][disabled] +{ + color: #999; +} +.uneditable-input.disabled, +.uneditable-textarea.disabled { + background-color: #f5f5f5; + border-color: #ddd; + cursor: not-allowed; + color: #999; +} + + +// TEXTAREA +// -------- + +// Make sure textarea has the same size in all browsers +textarea, +.uneditable-textarea { + height: 3 * @baseLineHeight; + &[rows="1"] { height: (1 + 1) * @baseLineHeight; } + &[rows="2"] { height: (1 + 2) * @baseLineHeight; } + &[rows="3"] { height: (1 + 3) * @baseLineHeight; } + &[rows="4"] { height: (1 + 4) * @baseLineHeight; } + &[rows="5"] { height: (1 + 5) * @baseLineHeight; } + &[rows="6"] { height: (1 + 6) * @baseLineHeight; } + &[rows="7"] { height: (1 + 7) * @baseLineHeight; } + &[rows="8"] { height: (1 + 8) * @baseLineHeight; } + &[rows="9"] { height: (1 + 9) * @baseLineHeight; } + &[rows="10"] { height: (1 + 10) * @baseLineHeight; } + &[rows="11"] { height: (1 + 11) * @baseLineHeight; } + &[rows="12"] { height: (1 + 12) * @baseLineHeight; } + &[rows="13"] { height: (1 + 13) * @baseLineHeight; } + &[rows="14"] { height: (1 + 14) * @baseLineHeight; } + &[rows="15"] { height: (1 + 15) * @baseLineHeight; } + &[rows="16"] { height: (1 + 16) * @baseLineHeight; } + &[rows="17"] { height: (1 + 17) * @baseLineHeight; } + &[rows="18"] { height: (1 + 18) * @baseLineHeight; } + &[rows="19"] { height: (1 + 19) * @baseLineHeight; } + &[rows="20"] { height: (1 + 20) * @baseLineHeight; } + &[rows="21"] { height: (1 + 21) * @baseLineHeight; } + &[rows="22"] { height: (1 + 22) * @baseLineHeight; } + &[rows="23"] { height: (1 + 23) * @baseLineHeight; } + &[rows="24"] { height: (1 + 24) * @baseLineHeight; } + &[rows="25"] { height: (1 + 25) * @baseLineHeight; } + &[rows="26"] { height: (1 + 26) * @baseLineHeight; } + &[rows="27"] { height: (1 + 27) * @baseLineHeight; } + &[rows="28"] { height: (1 + 28) * @baseLineHeight; } + &[rows="29"] { height: (1 + 29) * @baseLineHeight; } + &[rows="30"] { height: (1 + 30) * @baseLineHeight; } + &[rows="35"] { height: (1 + 35) * @baseLineHeight; } + &[rows="40"] { height: (1 + 40) * @baseLineHeight; } + &[rows="45"] { height: (1 + 45) * @baseLineHeight; } + &[rows="50"] { height: (1 + 50) * @baseLineHeight; } + &[rows="55"] { height: (1 + 55) * @baseLineHeight; } + &[rows="60"] { height: (1 + 60) * @baseLineHeight; } + &[rows="65"] { height: (1 + 65) * @baseLineHeight; } + &[rows="70"] { height: (1 + 70) * @baseLineHeight; } + &[rows="75"] { height: (1 + 75) * @baseLineHeight; } + &[rows="80"] { height: (1 + 80) * @baseLineHeight; } + &[rows="85"] { height: (1 + 85) * @baseLineHeight; } + &[rows="90"] { height: (1 + 90) * @baseLineHeight; } + &[rows="95"] { height: (1 + 95) * @baseLineHeight; } + &[rows="100"] { height: (1 + 100) * @baseLineHeight; } +} + +.uneditable-textarea { + .box-sizing(border-box); +} + + +// SPAN FIX +// -------- + +.uneditable-input[class*="span"], +.uneditable-textarea[class*="span"], +// Redeclare since the fluid row class is more specific +.row-fluid .uneditable-input[class*="span"], +.row-fluid .uneditable-textarea[class*="span"] { + float: none; + margin-left: 0; +} + +.input-append .uneditable-input, +.input-prepend .uneditable-input { + vertical-align: top; +} + +// Ensure input-prepend/append never wraps +.input-append .uneditable-input[class*="span"], +.input-prepend .uneditable-input[class*="span"] { + display: inline-block; +} + + +// UNEDITABLE FORM +// --------------- + +.uneditable-form { + input[disabled], + textarea[disabled], + select[disabled] { + cursor: auto; + } + .uneditable-input, + .uneditable-textarea { + cursor: text; + } + .form-actions { + background-color: transparent; + } +}