diff options
Diffstat (limited to 'less/forms.less')
| -rw-r--r-- | less/forms.less | 228 |
1 files changed, 61 insertions, 167 deletions
diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..2c696945d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: (@line-height-base * 2); + line-height: inherit; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -56,8 +56,7 @@ input[type="tel"], input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: 6px 9px; - margin-bottom: 10px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -66,7 +65,13 @@ input[type="color"] { border: 1px solid @input-border; border-radius: @input-border-radius; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color linear .2s, box-shadow linear .2s"); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } } // Reset appearance properties for textual inputs and textarea @@ -98,32 +103,6 @@ textarea { height: auto; } -// Everything else -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"] { - // Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - .box-shadow(0 0 8px rgba(82,168,236,.6)); - } -} - // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { @@ -146,7 +125,6 @@ select[size] { } // Focus for select, file, radio, and checkbox -select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { @@ -171,8 +149,9 @@ textarea { .radio, .checkbox { display: block; - min-height: @line-height-base; // clear the floating input if there is no label text - margin-bottom: (@line-height-base / 2); + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; vertical-align: middle; label { @@ -182,7 +161,6 @@ textarea { cursor: pointer; } } - .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], @@ -192,7 +170,7 @@ textarea { } .radio + .radio, .checkbox + .checkbox { - margin-top: ((@line-height-base / 4) * -1); + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } /* @@ -242,46 +220,19 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } &.input-small { min-height: @input-height-small; - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; - margin-right: 0; -} - -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: @input-height-base; -} - - - // DISABLED STATE // -------------- @@ -348,9 +299,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@line-height-base - 1) 20px @line-height-base; - margin-top: @line-height-base; - margin-bottom: @line-height-base; + padding: @line-height-computed 20px; + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @form-actions-bg; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers @@ -361,20 +312,11 @@ select:focus:invalid { // HELP TEXT // --------- -.help-block, -.help-inline { - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - .help-block { display: block; // account for any element using help-block - margin-bottom: (@line-height-base / 2); -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast } @@ -407,12 +349,8 @@ select:focus:invalid { .input-group-btn, .input-group input { display: table-cell; - /*margin: 0;*/ - border-radius: 0; - &.input-small { - border-radius: 0; - } - &.input-large { + + &:not(:first-child):not(:last-child) { border-radius: 0; } } @@ -435,40 +373,37 @@ select:focus:invalid { text-shadow: 0 1px 0 #fff; background-color: @gray-lighter; border: 1px solid #ccc; + border-radius: @border-radius-base; - &.input-small { - padding: @padding-small; - font-size: @font-size-small; + &.input-small { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + border-radius: @border-radius-small; + } + &.input-large { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; - } } // Reset rounded corners .input-group input:first-child, -.input-group-addon:first-child { - .border-left-radius(@border-radius-base); - &.input-small { - .border-left-radius(@border-radius-small); - } - &.input-large { - .border-left-radius(@border-radius-large); - } +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group input:last-child, -.input-group-addon:last-child { - .border-right-radius(@border-radius-base); - &.input-small { - .border-right-radius(@border-radius-small); - } - &.input-large { - .border-right-radius(@border-radius-large); - } +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; @@ -483,7 +418,6 @@ select:focus:invalid { .input-group-btn > .btn { position: relative; float: left; // Collapse white-space - border-radius: 0; + .btn { margin-left: -1px; } @@ -494,29 +428,6 @@ select:focus:invalid { } } -// Prepended buttons -.input-group-btn:first-child { - // Round the left corners only - > .btn:first-child, - > .dropdown-toggle:first-child { - .border-left-radius(@border-radius-base); - &.btn-large { .border-left-radius(@border-radius-large); } - &.btn-small { .border-left-radius(@border-radius-small); } - } -} - -// Appended buttons -.input-group-btn:last-child { - // Round the right corners only - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(@border-radius-base); - &.btn-large { .border-right-radius(@border-radius-large); } - &.btn-small { .border-right-radius(@border-radius-small); } - } -} - - // Inline forms // -------------------------------------------------- @@ -528,6 +439,10 @@ select:focus:invalid { .radio, .checkbox { display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; margin-bottom: 0; } } @@ -535,41 +450,20 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- +// Horizontal forms are built on grid classes. -@media screen and (min-width: @screen-tablet) { - - .form-horizontal { - - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); - - input, - select, - textarea { - margin-bottom: 0; - } - } - - // Float the labels left - .control-group > .control-label { - float: left; - width: (@component-offset-horizontal - 20); - padding-top: 6px; - text-align: right; - } - - // Move over all input controls and content over - .control-group > .controls { - margin-left: @component-offset-horizontal; - } - - // Make sure form actions buttons are aligned with controls - .form-actions { - padding-left: @component-offset-horizontal; - } +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .row-label { + padding-top: 6px; + } +} +// Only right aline form labels here when the columns stop stacking +@media (min-width: 768px) { + .form-horizontal .row-label { + text-align: right; } } |