diff options
author | Mark Otto <markotto@twitter.com> | 2012-05-15 10:40:06 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-05-15 10:40:06 +0400 |
commit | a0809ceebe5332a1c3e355a762d1bff3e477ce37 (patch) | |
tree | 5c8657307222f2bb697bf18569757a652f9eb770 /less | |
parent | 33061a8e0b5a5955c469c3e5184e989e497db4e3 (diff) |
add forms test page for all html5 input types and refactor selectors
Diffstat (limited to 'less')
-rw-r--r-- | less/forms.less | 131 |
1 files changed, 60 insertions, 71 deletions
diff --git a/less/forms.less b/less/forms.less index 9f95dd64f8..f9a994a7b5 100644 --- a/less/forms.less +++ b/less/forms.less @@ -58,69 +58,88 @@ label { color: @grayDark; } -// Inputs, Textareas, Selects -input, -textarea, +// Form controls +// ------------------------- + +// Shared resets select, -.uneditable-input { +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { display: inline-block; - width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; +} + +// Textual inputs and textareas +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { background-color: @inputBackground; border: 1px solid @inputBorder; .border-radius(@inputBorderRadius); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); } -.uneditable-textarea { - width: auto; - height: auto; + +input[type="radio"], +input[type="checkbox"] { + } -// Inputs within a label -label input, -label textarea, -label select { - display: block; +input[type="button"], +input[type="submit"], +input[type="reset"] { + } -// Mini reset for unique input types -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; /* IE7 */ - line-height: normal; - cursor: pointer; - background-color: transparent; - border: 0 \9; /* IE9 and down */ - .border-radius(0); +input[type="file"] { + +} + +input[type="hidden"] { + } + input[type="image"] { - border: 0; + } -// Reset the file input to browser defaults -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - background-color: @inputBackground; - background-color: initial; - border: initial; - .box-shadow(none); +input[type="range"] { + } -// Help out input buttons -input[type="button"], -input[type="reset"], -input[type="submit"] { +// Make uneditable textareas behave like a textarea +.uneditable-textarea { width: auto; height: auto; } @@ -133,37 +152,13 @@ input[type="file"] { line-height: 28px; } -// Reset line-height for IE -input[type="file"] { - line-height: 18px \9; -} - -// Chrome on Linux and Mobile Safari need background-color -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: @inputBackground; -} - // Make multiple select elements height not fixed select[multiple], select[size] { height: auto; } -// Remove shadow from image inputs -input[type="image"] { - .box-shadow(none); -} -// Make textarea height behave -textarea { - height: auto; -} - -// Hidden inputs -input[type="hidden"] { - display: none; -} @@ -207,12 +202,6 @@ input[type="hidden"] { // FOCUS STATE // ----------- -input, -textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); -} input:focus, textarea:focus { border-color: rgba(82,168,236,.8); |