github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-02-04 11:05:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

mo betta new navbar styles; hook up some changed vars

Browse Source
This commit is contained in:
Mark Otto
2013-01-16 15:35:41 -08:00
parent ee9403e2d2
commit 960804cea3
3 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
less/navbar.less
View File

@@ -5,7 +5,7 @@
// Wrapper and base class
.navbar {
padding: 15px;
background-color: #eee;
background-color: @navbar-bg;
.clear_float();
}
@@ -16,6 +16,7 @@
font-size: 18px;
font-weight: bold;
line-height: 1;
color: @navbar-brand-color;
&:hover {
text-decoration: none;
background-color: #ddd;
@@ -49,19 +50,25 @@
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
.nav > li > a {
color: @navbar-link-color;
line-height: 20px;
}
.nav > li > a:hover {
background-color: #ddd;
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
}
.nav > .active > a {
background-color: #ddd;
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
}
// Inverse navbar
.navbar-inverse {
background-color: #222;
background-color: @navbar-inverse-bg;
.brand {
color: #fff;
@@ -70,13 +77,18 @@
}
}
.nav > li > a {
color: #fff;
color: @navbar-inverse-link-color;
}
.nav > li > a:hover {
background-color: #333;
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-inverse-link-color-hover;
background-color: @navbar-inverse-link-bg-hover;
}
.nav > .active > a {
background-color: #333;
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active;
}
.btn-navbar {
background-color: #444;

20
less/variables.less
View File

@@ -154,34 +154,30 @@
@navbar-collapse-width-desktop: @navbar-collapse-width + 1;
@navbar-height: 44px;
@navbar-background-highlight: #ffffff;
@navbar-background: darken(@navbar-background-highlight, 5%);
@navbar-border: darken(@navbar-background, 12%);
@navbar-bg: #eee;
@navbar-text: #777;
@navbar-link-color: #777;
@navbar-link-color-hover: @grayDark;
@navbar-link-color-active: @gray;
@navbar-link-background-hover: transparent;
@navbar-link-background-active: darken(@navbar-background, 5%);
@navbar-link-bg-hover: transparent;
@navbar-link-bg-active: darken(@navbar-bg, 5%);
@navbar-brand-color: @navbar-link-color;
// Inverted navbar
@navbar-inverse-background: #222;
@navbar-inverse-background-highlight: #222222;
@navbar-inverse-border: #111111;
@navbar-inverse-bg: #222;
@navbar-inverse-text: @grayLight;
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-background-hover: transparent;
@navbar-inverse-link-background-active: @navbar-inverse-background;
@navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-bg-active: @navbar-inverse-bg;
@navbar-inverse-search-background: lighten(@navbar-inverse-background, 25%);
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-background;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
@navbar-inverse-brand-color: @navbar-inverse-link-color;