More navbar derping

This commit is contained in:
Mark Otto
2013-01-16 16:14:41 -08:00
parent 960804cea3
commit 9ba14cfb7c
8 changed files with 190 additions and 122 deletions

32
less/bootstrap.less vendored
View File

@@ -91,38 +91,6 @@
max-width: 940px;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar .brand {
float: left;
padding-top: 11px;
padding-bottom: 11px;
margin-left: -15px;
}
.navbar .nav {
overflow: hidden; /* clearfix */
margin-top: 0; /* undo top margin to make nav extend full height of navbar */
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
/* Required to make the collapsing navbar work on regular desktops */
.navbar .btn-navbar {
display: none;
}
.nav-collapse.collapse {
float: left;
height: auto !important;
overflow: visible !important;
}
}
// Responsive: Large desktops and up

View File

@@ -55,11 +55,11 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: block;
display: inline-block;
.box-sizing(border-box); // Makes inputs behave like true block-level elements
min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px;
margin-bottom: @line-height-base / 2;
// margin-bottom: @line-height-base / 2;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;

View File

@@ -412,8 +412,9 @@
// -------------------------
// 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(@element-height) {
.navbar-vertical-align(@element-height) {
margin-top: (@navbar-height - @element-height) / 2;
margin-bottom: (@navbar-height - @element-height) / 2;
}

View File

@@ -6,24 +6,31 @@
.navbar {
padding: 15px;
background-color: @navbar-bg;
border-radius: @border-radius-base;
// Prevent floats from breaking the navbar
.clear_float();
}
// Brand/project name
// -------------------------
.navbar .brand {
display: inline-block;
padding: 7px 15px;
padding: ((@navbar-height - @line-height-base) / 2) 15px;
font-size: 18px;
font-weight: bold;
line-height: 1;
line-height: @line-height-base;
color: @navbar-brand-color;
&:hover {
color: @navbar-brand-color-hover;
text-decoration: none;
background-color: #ddd;
background-color: @navbar-brand-bg-hover;
}
}
// Responsive navbar button
// -------------------------
.btn-navbar {
float: right;
padding: 10px 12px;
@@ -44,12 +51,19 @@
}
}
// Nav links
// Navbar nav links
// -------------------------
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
.nav > li {
float: left;
}
.nav > li > a {
padding-top: (@navbar-height - @line-height-base) / 2;
padding-bottom: (@navbar-height - @line-height-base) / 2;
color: @navbar-link-color;
line-height: 20px;
}
@@ -65,8 +79,36 @@
background-color: @navbar-link-bg-active;
}
}
@media screen and (min-width: 992px) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar .brand {
float: left;
margin-left: -15px;
}
.navbar .nav {
.clear_float();
margin-top: 0; // undo top margin to make nav extend full height of navbar
}
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
display: none;
}
.nav-collapse.collapse {
float: left;
height: auto !important;
overflow: visible !important;
}
}
// Inverse navbar
// -------------------------
.navbar-inverse {
background-color: @navbar-inverse-bg;
@@ -97,6 +139,45 @@
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
position: static;
border-radius: 0;
}
// Fixed navbar
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
//
// Navbar optional components
// --------------------------------------------------
// Dividers in navbar
.navbar .divider-vertical {
height: 26px;
margin: 7px 9px;
border-left: 1px solid darken(@navbar-bg, 5%);
border-right: 1px solid lighten(@navbar-bg, 5%);
}
// Navbar form
.navbar-form {
.navbar-vertical-align(32px); // Vertically center in navbar
}
/*

View File

@@ -150,20 +150,28 @@
// Navbar
// -------------------------
@navbar-collapse-width: 979px;
@navbar-collapse-width-desktop: @navbar-collapse-width + 1;
// Responsive collapsing
// @navbar-collapse-width: 979px;
// @navbar-collapse-width-desktop: @navbar-collapse-width + 1;
@navbar-height: 44px;
// Basics of a navbar
@navbar-height: 50px;
@navbar-text: #777;
@navbar-bg: #eee;
@navbar-text: #777;
@navbar-link-color: #777;
@navbar-link-color-hover: @grayDark;
@navbar-link-color-active: @gray;
@navbar-link-bg-hover: transparent;
@navbar-link-bg-active: darken(@navbar-bg, 5%);
// Navbar brand label
@navbar-brand-color: @navbar-link-color;
@navbar-brand-color-hover: darken(@navbar-link-color, 10%);
@navbar-brand-bg-hover: transparent;
// Navbar links
@navbar-link-color: #777;
@navbar-link-color-hover: #333;
@navbar-link-color-active: #555;
@navbar-link-bg-hover: transparent;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
// Inverted navbar
@navbar-inverse-bg: #222;