mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Overhaul navbar navs
* Switch from to to eliminate an element in selectors * Drop .navbar-divider entirely
This commit is contained in:
Mark Otto
+69
-86
@@ -15,31 +15,30 @@
|
||||
// Navbar nav links
|
||||
// -------------------------
|
||||
|
||||
.navbar {
|
||||
.nav {
|
||||
// space out from .navbar .brand and .btn-navbar
|
||||
margin-top: 15px;
|
||||
}
|
||||
.nav > li > a {
|
||||
.navbar-nav {
|
||||
// Space out from .navbar .brand and .btn-navbar
|
||||
margin-top: 15px;
|
||||
|
||||
> 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;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
> li > a:hover,
|
||||
> li > a:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
.nav > .active > a,
|
||||
.nav > .active > a:hover,
|
||||
.nav > .active > a:focus {
|
||||
> .active > a,
|
||||
> .active > a:hover,
|
||||
> .active > a:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
.nav > .disabled > a,
|
||||
.nav > .disabled > a:hover,
|
||||
.nav > .disabled > a:focus {
|
||||
> .disabled > a,
|
||||
> .disabled > a:hover,
|
||||
> .disabled > a:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
@@ -80,7 +79,7 @@
|
||||
max-width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 7px 15px;
|
||||
padding: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: @line-height-base;
|
||||
@@ -122,11 +121,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Dividers in navbar
|
||||
.navbar .nav > .divider {
|
||||
.nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
|
||||
}
|
||||
|
||||
// Navbar form
|
||||
.navbar-form {
|
||||
.navbar-vertical-align(34px); // Vertically center in navbar
|
||||
@@ -135,19 +129,19 @@
|
||||
// Dropdown menus
|
||||
|
||||
// Menu position and menu carets
|
||||
.navbar .nav > li > .dropdown-menu {
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
// Menu position and menu caret support for dropups via extra dropup class
|
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu {
|
||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
// Dropdown menu items and carets
|
||||
.navbar .nav {
|
||||
.navbar-nav {
|
||||
// Caret should match text color on hover
|
||||
li.dropdown > a:hover .caret,
|
||||
li.dropdown > a:focus .caret {
|
||||
@@ -175,8 +169,8 @@
|
||||
}
|
||||
|
||||
// Right aligned menus need alt position
|
||||
.navbar .pull-right > li > .dropdown-menu,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right {
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -202,25 +196,27 @@
|
||||
color: @navbar-inverse-text;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
color: @navbar-inverse-link-color;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
background-color: @navbar-inverse-link-hover-bg;
|
||||
}
|
||||
.nav > .active > a,
|
||||
.nav > .active > a:hover,
|
||||
.nav > .active > a:focus {
|
||||
color: @navbar-inverse-link-active-color;
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
}
|
||||
.nav > .disabled > a,
|
||||
.nav > .disabled > a:hover,
|
||||
.nav > .disabled > a:focus {
|
||||
color: @navbar-inverse-link-disabled-color;
|
||||
background-color: @navbar-inverse-link-disabled-bg;
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: @navbar-inverse-link-color;
|
||||
}
|
||||
> li > a:hover,
|
||||
> li > a:focus {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
background-color: @navbar-inverse-link-hover-bg;
|
||||
}
|
||||
> .active > a,
|
||||
> .active > a:hover,
|
||||
> .active > a:focus {
|
||||
color: @navbar-inverse-link-active-color;
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
}
|
||||
> .disabled > a,
|
||||
> .disabled > a:hover,
|
||||
> .disabled > a:focus {
|
||||
color: @navbar-inverse-link-disabled-color;
|
||||
background-color: @navbar-inverse-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
@@ -235,32 +231,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Darken dividers
|
||||
.nav > .divider {
|
||||
background-color: darken(@navbar-inverse-bg, 5%);
|
||||
border-bottom-color: lighten(@navbar-inverse-bg, 5%);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.nav li.dropdown.open > .dropdown-toggle,
|
||||
.nav li.dropdown.active > .dropdown-toggle,
|
||||
.nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
color: @navbar-inverse-link-active-color;
|
||||
}
|
||||
.nav li.dropdown > a:hover .caret {
|
||||
border-top-color: @navbar-inverse-link-hover-color;
|
||||
border-bottom-color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
.nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: @navbar-inverse-link-color;
|
||||
border-bottom-color: @navbar-inverse-link-color;
|
||||
}
|
||||
.nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: @navbar-inverse-link-active-color;
|
||||
border-bottom-color: @navbar-inverse-link-active-color;
|
||||
.navbar-nav {
|
||||
li.dropdown.open > .dropdown-toggle,
|
||||
li.dropdown.active > .dropdown-toggle,
|
||||
li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
color: @navbar-inverse-link-active-color;
|
||||
}
|
||||
li.dropdown > a:hover .caret {
|
||||
border-top-color: @navbar-inverse-link-hover-color;
|
||||
border-bottom-color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: @navbar-inverse-link-color;
|
||||
border-bottom-color: @navbar-inverse-link-color;
|
||||
}
|
||||
li.dropdown.open > .dropdown-toggle .caret,
|
||||
li.dropdown.active > .dropdown-toggle .caret,
|
||||
li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: @navbar-inverse-link-active-color;
|
||||
border-bottom-color: @navbar-inverse-link-active-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,28 +263,28 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
@media screen and (min-width: @screen-tablet) {
|
||||
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: ((@navbar-height - @line-height-base) / 2);
|
||||
padding-bottom: ((@navbar-height - @line-height-base) / 2);
|
||||
margin-left: -10px;
|
||||
margin-left: -5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.navbar .nav {
|
||||
float: left;
|
||||
margin-top: 0; // undo top margin to make nav extend full height of navbar
|
||||
.clearfix();
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Dividers go vertical
|
||||
// Change the height and height, disable bottom border, then add right border
|
||||
@@ -307,16 +300,6 @@
|
||||
border-right-color: lighten(@navbar-inverse-bg, 5%);
|
||||
}
|
||||
|
||||
.navbar-fixed-left {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.navbar-fixed-left .navbar-brand,
|
||||
.navbar-fixed-left .nav,
|
||||
.navbar-fixed-left .nav > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Required to make the collapsing navbar work on regular desktops
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user