improve navbar vars and fix side nav alignment

This commit is contained in:
Mark Otto 2013-01-16 23:33:26 -08:00
parent 6b193dc22d
commit f535201781
4 changed files with 42 additions and 19 deletions

View File

@ -2979,11 +2979,16 @@ button.close {
}
.navbar-inverse .brand {
color: #fff;
color: #999999;
}
.navbar-inverse .brand:hover {
background-color: #333;
color: #808080;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #999999;
}
.navbar-inverse .nav > li > a {

View File

@ -111,6 +111,13 @@ section > ul li {
color: rgba(255,255,255,.25);
}
/* Subhead (other docs pages)
------------------------- */
.subhead {
text-align: left;
}
/* Marketing section of Overview
@ -204,10 +211,10 @@ section > ul li {
/* From here, start to affix the nav because we keep columns here */
.bs-docs-sidenav.affix {
position: fixed;
top: 10px;
top: 54px;
}
.bs-docs-sidenav {
width: 189px;
width: 170px;
}
}

View File

@ -115,11 +115,17 @@
background-color: @navbar-inverse-bg;
.brand {
color: #fff;
color: @navbar-inverse-brand-color;
&:hover {
background-color: #333;
color: @navbar-inverse-brand-color-hover;
background-color: @navbar-inverse-brand-bg-hover;
}
}
.navbar-text {
color: @navbar-inverse-text;
}
.nav > li > a {
color: @navbar-inverse-link-color;
}

View File

@ -171,24 +171,29 @@
@navbar-link-bg-hover: transparent;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
// Inverted navbar
@navbar-inverse-text: @grayLight;
@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-bg-hover: transparent;
@navbar-inverse-link-bg-active: @navbar-inverse-bg;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-color-hover: darken(@navbar-inverse-link-color, 10%);
@navbar-inverse-brand-bg-hover: transparent;
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-bg-active: @navbar-inverse-bg;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
@navbar-inverse-brand-color: @navbar-inverse-link-color;
// Pagination