rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

more consistent navbar vars

Browse Source
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 {
color: @navbar-link-color;
&: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:focus {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-link-color-disabled;
background-color: @navbar-link-bg-disabled;
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
@ -88,9 +88,9 @@
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-color-hover;
color: @navbar-brand-hover-color;
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
li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active;
color: @navbar-link-color-active;
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
}
li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
@ -169,8 +169,8 @@
li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
@ -207,20 +207,20 @@
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-inverse-link-color-hover;
background-color: @navbar-inverse-link-bg-hover;
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-color-active;
background-color: @navbar-inverse-link-bg-active;
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-color-disabled;
background-color: @navbar-inverse-link-bg-disabled;
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
// Darken the responsive nav toggle
@ -245,12 +245,12 @@
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-bg-active;
color: @navbar-inverse-link-color-active;
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-color-hover;
border-bottom-color: @navbar-inverse-link-color-hover;
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;
@ -259,8 +259,8 @@
.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-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
@ -338,7 +338,7 @@
.navbar-link {
color: @navbar-link-color;
&: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-color: @navbar-link-color;
@navbar-brand-color-hover: darken(@navbar-link-color, 10%);
@navbar-brand-bg-hover: transparent;
@navbar-brand-hover-color: darken(@navbar-link-color, 10%);
@navbar-brand-hover-bg: transparent;
// Navbar links
@navbar-link-color: #777;
@navbar-link-color-hover: #333;
@navbar-link-bg-hover: transparent;
@navbar-link-color-active: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc;
@navbar-link-bg-disabled: transparent;
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent;
// Inverted navbar
@navbar-inverse-text: @grayLight;
@ -195,22 +195,21 @@
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-color-disabled: #444;
@navbar-inverse-link-bg-disabled: transparent;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// 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-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Pagination
// -------------------------