mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Tighten up buttons and form controls
* Smaller padding on buttons and large buttons * Same with inputs and large inputs * Remove about 10px from height of large inputs/buttons and 4px from regular ones Fixes #8707 and #8700. (Also relevant: #8711)
This commit is contained in:
parent
7cd54e52f2
commit
173dac4e54
5 changed files with 28 additions and 19 deletions
31
dist/css/bootstrap.css
vendored
31
dist/css/bootstrap.css
vendored
|
@ -1453,8 +1453,8 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
color: #555555;
|
||||
|
@ -1538,9 +1538,10 @@ textarea.form-control {
|
|||
}
|
||||
|
||||
.input-large {
|
||||
height: 56px;
|
||||
padding: 14px 16px;
|
||||
height: 45px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
@ -1548,12 +1549,13 @@ textarea.form-control {
|
|||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
select.input-large {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
select.input-small {
|
||||
|
@ -1647,7 +1649,7 @@ textarea.input-small {
|
|||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
@ -1932,8 +1934,9 @@ fieldset[disabled] .btn-link:focus {
|
|||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
@ -2029,7 +2032,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: 8px 12px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.428571429;
|
||||
|
@ -2049,7 +2052,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.input-group-addon.input-large {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
@ -2904,8 +2907,8 @@ button.close {
|
|||
}
|
||||
|
||||
.navbar-form {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.navbar-form .form-control,
|
||||
|
@ -3076,7 +3079,7 @@ button.close {
|
|||
}
|
||||
|
||||
.navbar-btn {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
|
@ -3357,7 +3360,7 @@ button.close {
|
|||
|
||||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -123,6 +123,7 @@
|
|||
.btn-large {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: 1.33; // ensure even-numbered height of butotn next to large input
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.btn-small,
|
||||
|
|
|
@ -222,12 +222,14 @@ input[type="number"] {
|
|||
height: @input-height-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.input-small {
|
||||
height: @input-height-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
|
|
@ -60,15 +60,18 @@
|
|||
// -------------------------
|
||||
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
||||
|
||||
@padding-base-vertical: 8px;
|
||||
@padding-base-vertical: 6px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-vertical: 10px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
@ -132,8 +135,8 @@
|
|||
@input-color-placeholder: @gray-light;
|
||||
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
|
||||
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
|
|
Loading…
Reference in a new issue