diff options
Diffstat (limited to 'less/input-groups.less')
| -rw-r--r-- | less/input-groups.less | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/less/input-groups.less b/less/input-groups.less new file mode 100644 index 000000000..fed7d5645 --- /dev/null +++ b/less/input-groups.less @@ -0,0 +1,153 @@ +// +// Input groups +// -------------------------------------------------- + +// Base styles +// ------------------------- +.input-group { + display: table; + border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table + + // Undo padding and float of grid classes + &.col { + float: none; + padding-left: 0; + padding-right: 0; + } + + .form-control { + width: 100%; + margin-bottom: 0; + } +} + +// Display as table-cell +// ------------------------- +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } +} +// Addon and addon wrapper for buttons +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; // Match the inputs +} + +// Text input groups +// ------------------------- +.input-group-addon { + .box-sizing(border-box); + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + font-weight: normal; + line-height: @line-height-base; + text-align: center; + background-color: @gray-lighter; + border: 1px solid @input-group-addon-border-color; + border-radius: @border-radius-base; + + // Sizing + &.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; + } + + // Nuke default margins from checkboxes and radios to vertically center within. + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } +} + +// Reset rounded corners +.input-group .form-control:first-child, +.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 .form-control:last-child, +.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; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; + // Jankily prevent input button groups from wrapping + + .btn { + margin-left: -4px; + } + // Bring the "active" button to the front + &:hover, + &:active { + z-index: 2; + } +} + + +// Inline forms +// -------------------------------------------------- + +.form-inline { + .form-control, + .radio, + .checkbox { + display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; + margin-bottom: 0; + } +} + + +// Horizontal forms +// -------------------------------------------------- +// Horizontal forms are built on grid classes. + +.form-horizontal .control-label { + padding-top: 9px; +} + +.form-horizontal { + .form-group { + .make-row(); + } +} + +// Only right align form labels here when the columns stop stacking +@media (min-width: @screen-tablet) { + .form-horizontal .control-label { + text-align: right; + } +} |
