root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

more consistent navbar vars

This commit is contained in:
Mark Otto 2013-03-31 17:56:31 -07:00
parent 4cbefa1179
commit db284a97d6
3 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3735,7 +3735,7 @@ button.close {
.navbar-link { .navbar-link {
color: @navbar-link-color; color: @navbar-link-color;
&:hover { &:hover {
color: @navbar-link-color-hover; color: @navbar-link-hover-color;
} }
} }

54
less/navbar.less
View File

@ -28,20 +28,20 @@
} }
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
color: @navbar-link-color-hover; color: @navbar-link-hover-color;
background-color: @navbar-link-bg-hover; background-color: @navbar-link-hover-bg;
} }
.nav > .active > a, .nav > .active > a,
.nav > .active > a:hover, .nav > .active > a:hover,
.nav > .active > a:focus { .nav > .active > a:focus {
color: @navbar-link-color-active; color: @navbar-link-active-color;
background-color: @navbar-link-bg-active; background-color: @navbar-link-active-bg;
} }
.nav > .disabled > a, .nav > .disabled > a,
.nav > .disabled > a:hover, .nav > .disabled > a:hover,
.nav > .disabled > a:focus { .nav > .disabled > a:focus {
color: @navbar-link-color-disabled; color: @navbar-link-disabled-color;
background-color: @navbar-link-bg-disabled; background-color: @navbar-link-disabled-bg;
} }
} }
@ -88,9 +88,9 @@
text-align: center; text-align: center;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-brand-color-hover; color: @navbar-brand-hover-color;
text-decoration: none; text-decoration: none;
background-color: @navbar-brand-bg-hover; background-color: @navbar-brand-hover-bg;
} }
} }
@ -151,16 +151,16 @@
// Caret should match text color on hover // Caret should match text color on hover
li.dropdown > a:hover .caret, li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret { li.dropdown > a:focus .caret {
border-top-color: @navbar-link-color-hover; border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-color-hover; border-bottom-color: @navbar-link-hover-color;
} }
// Remove background color from open dropdown // Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle, li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle, li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle { li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active; background-color: @navbar-link-active-bg;
color: @navbar-link-color-active; color: @navbar-link-active-color;
} }
li.dropdown > .dropdown-toggle .caret { li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color; border-top-color: @navbar-link-color;
@ -169,8 +169,8 @@
li.dropdown.open > .dropdown-toggle .caret, li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret, li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret { li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active; border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-color-active; border-bottom-color: @navbar-link-active-color;
} }
} }
@ -207,20 +207,20 @@
} }
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
color: @navbar-inverse-link-color-hover; color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-bg-hover; background-color: @navbar-inverse-link-hover-bg;
} }
.nav > .active > a, .nav > .active > a,
.nav > .active > a:hover, .nav > .active > a:hover,
.nav > .active > a:focus { .nav > .active > a:focus {
color: @navbar-inverse-link-color-active; color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-active-bg;
} }
.nav > .disabled > a, .nav > .disabled > a,
.nav > .disabled > a:hover, .nav > .disabled > a:hover,
.nav > .disabled > a:focus { .nav > .disabled > a:focus {
color: @navbar-inverse-link-color-disabled; color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-bg-disabled; background-color: @navbar-inverse-link-disabled-bg;
} }
// Darken the responsive nav toggle // Darken the responsive nav toggle
@ -245,12 +245,12 @@
.nav li.dropdown.open > .dropdown-toggle, .nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle, .nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle { .nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-color-active; color: @navbar-inverse-link-active-color;
} }
.nav li.dropdown > a:hover .caret { .nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-hover; border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-color-hover; border-bottom-color: @navbar-inverse-link-hover-color;
} }
.nav li.dropdown > .dropdown-toggle .caret { .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color; border-top-color: @navbar-inverse-link-color;
@ -259,8 +259,8 @@
.nav li.dropdown.open > .dropdown-toggle .caret, .nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret, .nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret { .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active; border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-color-active; border-bottom-color: @navbar-inverse-link-active-color;
} }
} }
@ -338,7 +338,7 @@
.navbar-link { .navbar-link {
color: @navbar-link-color; color: @navbar-link-color;
&:hover { &:hover {
color: @navbar-link-color-hover; color: @navbar-link-hover-color;
} }
} }

33
less/variables.less
View File

@ -172,17 +172,17 @@
// Navbar brand label // Navbar brand label
@navbar-brand-color: @navbar-link-color; @navbar-brand-color: @navbar-link-color;
@navbar-brand-color-hover: darken(@navbar-link-color, 10%); @navbar-brand-hover-color: darken(@navbar-link-color, 10%);
@navbar-brand-bg-hover: transparent; @navbar-brand-hover-bg: transparent;
// Navbar links // Navbar links
@navbar-link-color: #777; @navbar-link-color: #777;
@navbar-link-color-hover: #333; @navbar-link-hover-color: #333;
@navbar-link-bg-hover: transparent; @navbar-link-hover-bg: transparent;
@navbar-link-color-active: #555; @navbar-link-active-color: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%); @navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc; @navbar-link-disabled-color: #ccc;
@navbar-link-bg-disabled: transparent; @navbar-link-disabled-bg: transparent;
// Inverted navbar // Inverted navbar
@navbar-inverse-text: @grayLight; @navbar-inverse-text: @grayLight;
@ -195,22 +195,21 @@
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @grayLight; @navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff; @navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-bg-hover: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-color-disabled: #444; @navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-bg-disabled: transparent; @navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar search // Inverted navbar search
// Normal navbar needs no special styles or vars // Normal navbar needs no special styles or vars
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%); @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff; @navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc; @navbar-inverse-search-placeholder-color: #ccc;
// Pagination // Pagination
// ------------------------- // -------------------------