kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

mo betta new navbar styles; hook up some changed vars

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2867,7 +2867,7 @@ button.close {
.navbar {
padding: 15px;
background-color: #eee;
background-color: #eeeeee;
}
.navbar:before,
@ -2886,6 +2886,7 @@ button.close {
font-size: 18px;
font-weight: bold;
line-height: 1;
color: #777777;
}
.navbar .brand:hover {
@ -2919,18 +2920,24 @@ button.close {
.navbar .nav > li > a {
line-height: 20px;
color: #777777;
}
.navbar .nav > li > a:hover {
background-color: #ddd;
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar .nav > .active > a {
background-color: #ddd;
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
background-color: #e1e1e1;
}
.navbar-inverse {
background-color: #222;
background-color: #222222;
}
.navbar-inverse .brand {
@ -2942,15 +2949,20 @@ button.close {
}
.navbar-inverse .nav > li > a {
color: #fff;
color: #999999;
}
.navbar-inverse .nav > li > a:hover {
background-color: #333;
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .nav > .active > a {
background-color: #333;
.navbar-inverse .nav > .active > a,
.navbar-inverse .nav > .active > a:hover,
.navbar-inverse .nav > .active > a:focus {
color: #ffffff;
background-color: #222222;
}
.navbar-inverse .btn-navbar {

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;