mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 05:58:25 +01:00
reset input and button heights with updated padding
This commit is contained in:
Mark Otto
parent
56935c64c0
commit
8da78223ff
40
docs/assets/css/bootstrap.css
vendored
40
docs/assets/css/bootstrap.css
vendored
@ -713,20 +713,24 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 4px 6px;
|
||||
margin-bottom: 9px;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 206px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@ -749,7 +753,6 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
@ -806,15 +809,14 @@ input[type="checkbox"] {
|
||||
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: 30px;
|
||||
height: 34px;
|
||||
/* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
|
||||
|
||||
line-height: 30px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
@ -1466,7 +1468,7 @@ select:focus:required:invalid:focus {
|
||||
width: auto;
|
||||
height: 20px;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
@ -1559,7 +1561,7 @@ input.search-query {
|
||||
/* IE8 doesn't have border radius, so don't indent the padding */
|
||||
|
||||
margin-bottom: 0;
|
||||
border-radius: 15px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
@ -1570,19 +1572,19 @@ input.search-query {
|
||||
}
|
||||
|
||||
.form-search .input-append .search-query {
|
||||
border-radius: 14px 0 0 14px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.form-search .input-append .btn {
|
||||
border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .btn {
|
||||
border-radius: 14px 0 0 14px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.form-search input,
|
||||
@ -2731,7 +2733,7 @@ button.close {
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -5257,10 +5259,6 @@ a.badge:hover {
|
||||
.control-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -5720,10 +5718,6 @@ a.badge:hover {
|
||||
.uneditable-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
// Core
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0; // For input.btn
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
|
||||
@ -79,14 +79,16 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: @baseLineHeight;
|
||||
padding: 4px 6px;
|
||||
margin-bottom: 9px;
|
||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: 6px 9px;
|
||||
margin-bottom: @baseLineHeight / 2;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @gray;
|
||||
border-radius: @inputBorderRadius;
|
||||
vertical-align: middle;
|
||||
background-color: @inputBackground;
|
||||
border-radius: @inputBorderRadius;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
@ -94,7 +96,7 @@ input[type="color"],
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 206px; // plus 12px padding and 2px border
|
||||
width: 220px;
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
@ -117,7 +119,6 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: @inputBackground;
|
||||
border: 1px solid @inputBorder;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
.transition(~"border linear .2s, box-shadow linear .2s");
|
||||
@ -162,7 +163,6 @@ input[type="file"] {
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid @inputBorder;
|
||||
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
@ -475,7 +475,7 @@ select:focus:required:invalid {
|
||||
width: auto;
|
||||
height: @baseLineHeight;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
padding: 6px;
|
||||
font-size: @baseFontSize;
|
||||
font-weight: normal;
|
||||
line-height: @baseLineHeight;
|
||||
@ -564,7 +564,7 @@ input.search-query {
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
|
||||
margin-bottom: 0; // Remove the default margin on all inputs
|
||||
border-radius: 15px;
|
||||
border-radius: @inputSearchBorderRadius;
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
@ -573,16 +573,16 @@ input.search-query {
|
||||
border-radius: 0; // Override due to specificity
|
||||
}
|
||||
.form-search .input-append .search-query {
|
||||
border-radius: 14px 0 0 14px;
|
||||
border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
|
||||
}
|
||||
.form-search .input-append .btn {
|
||||
border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
|
||||
}
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
|
||||
}
|
||||
.form-search .input-prepend .btn {
|
||||
border-radius: 14px 0 0 14px;
|
||||
border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -128,8 +128,6 @@
|
||||
.input-block-level() {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -111,9 +111,10 @@
|
||||
@inputBackground: @white;
|
||||
@inputBorder: #ccc;
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputSearchBorderRadius: 20px;
|
||||
@inputDisabledBackground: @grayLighter;
|
||||
@formActionsBackground: #f5f5f5;
|
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
@inputHeight: @baseLineHeight + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
|
||||
|
||||
|
||||
// Dropdowns
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user