mirror of
https://github.com/jasny/bootstrap.git
synced 2026-01-21 04:17:53 -05:00
Fixed and improved uneditable forms and inputs
This commit is contained in:
Arnold Daniels
159
less/jasny/forms-uneditable.less
Normal file
159
less/jasny/forms-uneditable.less
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user