diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8bbbf4657d..925aae1415 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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, diff --git a/less/buttons.less b/less/buttons.less index 15e69337f4..9974d84023 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -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; diff --git a/less/forms.less b/less/forms.less index 84d93842cc..c2a083c4d7 100644 --- a/less/forms.less +++ b/less/forms.less @@ -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; } diff --git a/less/mixins.less b/less/mixins.less index 8cd741d2db..13f3acbdc8 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -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 } diff --git a/less/variables.less b/less/variables.less index fd7478cb67..5dd90206c3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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