rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

introduce new mixin to do navbar vertical centering

Browse Source
This commit is contained in:
Mark Otto 2012-02-20 19:14:26 -08:00
parent 143b3db2c9
commit d2630ff84e
4 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

10
docs/assets/css/bootstrap.css vendored
View File

@ -2559,14 +2559,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.navbar-form:after { .navbar-form:after {
clear: both; clear: both;
} }
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input, .navbar-form select { .navbar-form input, .navbar-form select {
display: inline-block; display: inline-block;
margin-top: 5px;
margin-bottom: 0; margin-bottom: 0;
} }
.navbar-form .radio, .navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] { .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px; margin-top: 3px;
} }

14
less/mixins.less
View File

@ -531,7 +531,7 @@
// COMPONENT MIXINS // COMPONENT MIXINS
// -------------------------------------------------- // --------------------------------------------------
// NAV DIVIDER // Horizontal dividers
// ------------------------- // -------------------------
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider() { .nav-divider() {
@ -549,7 +549,7 @@
*margin: -5px 0 5px; *margin: -5px 0 5px;
} }
// BUTTON BACKGROUNDS // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor) { .buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
@ -568,7 +568,15 @@
} }
} }
// POPOVER ARROWS // Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// Popover arrows
// ------------------------- // -------------------------
// For tipsies and popovers // For tipsies and popovers
#popoverArrow { #popoverArrow {

17
less/navbar.less
View File

@ -74,7 +74,7 @@
// Buttons in navbar // Buttons in navbar
.btn, .btn,
.btn-group { .btn-group {
margin-top: 5px; // make buttons vertically centered in navbar .navbarVerticalAlign(30px); // Vertically center in navbar
} }
.btn-group .btn { .btn-group .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it margin-top: 0; // then undo the margin here so we don't accidentally double it
@ -86,14 +86,15 @@
margin-bottom: 0; // remove default bottom margin margin-bottom: 0; // remove default bottom margin
.clearfix(); .clearfix();
input, input,
select { select,
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
.radio, .radio,
.checkbox { .checkbox {
margin-top: 5px; .navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select {
display: inline-block;
margin-bottom: 0;
} }
input[type="image"], input[type="image"],
input[type="checkbox"], input[type="checkbox"],
@ -114,7 +115,7 @@
.navbar-search { .navbar-search {
position: relative; position: relative;
float: left; float: left;
margin-top: 6px; .navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0; margin-bottom: 0;
.search-query { .search-query {
padding: 4px 9px; padding: 4px 9px;