From b281ad64096d919145159ffbc4e1a5b284708d9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Jul 2013 18:56:31 -0700 Subject: Input groups overhaul * Moves input groups CSS into separate file * Moves input groups docs into the Components page * Add support for radios and checkboxes in input groups to fix #8679 --- dist/css/bootstrap.css | 323 +++++++++++++++++++++++++------------------------ 1 file changed, 164 insertions(+), 159 deletions(-) (limited to 'dist/css/bootstrap.css') diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index e3ab5b0b1..d711028b3 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -1541,165 +1541,6 @@ select.input-small { color: #737373; } -.input-group { - display: table; - border-collapse: separate; -} - -.input-group.col { - float: none; - padding-right: 0; - padding-left: 0; -} - -.input-group .form-control { - width: 100%; - margin-bottom: 0; -} - -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: table-cell; -} - -.input-group-addon:not(:first-child):not(:last-child), -.input-group-btn:not(:first-child):not(:last-child), -.input-group .form-control:not(:first-child):not(:last-child) { - border-radius: 0; -} - -.input-group-addon, -.input-group-btn { - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.input-group-addon { - padding: 8px 12px; - font-size: 14px; - font-weight: normal; - line-height: 1.428571429; - text-align: center; - background-color: #eeeeee; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.input-group-addon.input-small { - padding: 5px 10px; - font-size: 12px; - border-radius: 3px; -} - -.input-group-addon.input-large { - padding: 14px 16px; - font-size: 18px; - border-radius: 6px; -} - -.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-top-right-radius: 0; - border-bottom-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-bottom-left-radius: 0; - border-top-left-radius: 0; -} - -.input-group-addon:last-child { - border-left: 0; -} - -.input-group-btn { - position: relative; - white-space: nowrap; -} - -.input-group-btn > .btn { - position: relative; -} - -.input-group-btn > .btn + .btn { - margin-left: -4px; -} - -.input-group-btn > .btn:hover, -.input-group-btn > .btn:active { - z-index: 2; -} - -.form-inline .form-control, -.form-inline .radio, -.form-inline .checkbox { - display: inline-block; -} - -.form-inline .radio, -.form-inline .checkbox { - margin-top: 0; - margin-bottom: 0; -} - -.form-horizontal .control-label { - padding-top: 9px; -} - -.form-horizontal .form-group:before, -.form-horizontal .form-group:after { - display: table; - content: " "; -} - -.form-horizontal .form-group:after { - clear: both; -} - -.form-horizontal .form-group:before, -.form-horizontal .form-group:after { - display: table; - content: " "; -} - -.form-horizontal .form-group:after { - clear: both; -} - -@media (min-width: 768px) { - .form-horizontal .form-group { - margin-right: -15px; - margin-left: -15px; - } -} - -.form-horizontal .form-group .row { - margin-right: -15px; - margin-left: -15px; -} - -@media (min-width: 768px) { - .form-horizontal .control-label { - text-align: right; - } -} - .btn { display: inline-block; padding: 8px 12px; @@ -2037,6 +1878,170 @@ input[type="button"].btn-block { transition: height 0.35s ease; } +.input-group { + display: table; + border-collapse: separate; +} + +.input-group.col { + float: none; + padding-right: 0; + padding-left: 0; +} + +.input-group .form-control { + width: 100%; + margin-bottom: 0; +} + +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} + +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} + +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +.input-group-addon { + padding: 8px 12px; + font-size: 14px; + font-weight: normal; + line-height: 1.428571429; + text-align: center; + background-color: #eeeeee; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.input-group-addon.input-small { + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; +} + +.input-group-addon.input-large { + padding: 14px 16px; + font-size: 18px; + border-radius: 6px; +} + +.input-group-addon input[type="radio"], +.input-group-addon input[type="checkbox"] { + margin-top: 0; +} + +.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-top-right-radius: 0; + border-bottom-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-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.input-group-addon:last-child { + border-left: 0; +} + +.input-group-btn { + position: relative; + white-space: nowrap; +} + +.input-group-btn > .btn { + position: relative; +} + +.input-group-btn > .btn + .btn { + margin-left: -4px; +} + +.input-group-btn > .btn:hover, +.input-group-btn > .btn:active { + z-index: 2; +} + +.form-inline .form-control, +.form-inline .radio, +.form-inline .checkbox { + display: inline-block; +} + +.form-inline .radio, +.form-inline .checkbox { + margin-top: 0; + margin-bottom: 0; +} + +.form-horizontal .control-label { + padding-top: 9px; +} + +.form-horizontal .form-group:before, +.form-horizontal .form-group:after { + display: table; + content: " "; +} + +.form-horizontal .form-group:after { + clear: both; +} + +.form-horizontal .form-group:before, +.form-horizontal .form-group:after { + display: table; + content: " "; +} + +.form-horizontal .form-group:after { + clear: both; +} + +@media (min-width: 768px) { + .form-horizontal .form-group { + margin-right: -15px; + margin-left: -15px; + } +} + +.form-horizontal .form-group .row { + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 768px) { + .form-horizontal .control-label { + text-align: right; + } +} + .caret { display: inline-block; width: 0; -- cgit v1.2.3