Skip to content
GitLab
Commit 8da78223 authored by Mark Otto's avatar Mark Otto
Browse files

reset input and button heights with updated padding

parent 56935c64
21 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute,!6666Patch 1,!65463.0.0 wip - fixed the issue in which the test pid isn't killed if a test fails,!6503control markup changes added
Hide whitespace changes
Inline Side-by-side
Showing
with 33 additions and 40 deletions
+33 -40
docs/assets/css/bootstrap.css
+ 17
- 23
View file @ 8da78223
......@@ -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,
......
less/buttons.less
+ 1
- 1
View file @ 8da78223
......@@ -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;
......
less/forms.less
+ 13
- 13
View file @ 8da78223
......@@ -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;
}
......
less/mixins.less
+ 0
- 2
View file @ 8da78223
......@@ -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
}
......
less/variables.less
+ 2
- 1
View file @ 8da78223
......@@ -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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment