mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-01 01:21:49 +02:00
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
This commit is contained in:
Mark Otto
323
dist/css/bootstrap.css
vendored
323
dist/css/bootstrap.css
vendored
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user