Skip to content

B
bootstrap
Commit db284a97 authored by Mark Otto's avatar Mark Otto
Browse files
Options

more consistent navbar vars

parent 4cbefa11
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 45 deletions
docs/assets/css/bootstrap.css
View file @ db284a97
...@@ -3735,7 +3735,7 @@ button.close { ...@@ -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;
} }
} }
......
less/navbar.less
View file @ db284a97
...@@ -28,20 +28,20 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
} }
} }
......
less/variables.less
View file @ db284a97
...@@ -172,17 +172,17 @@ ...@@ -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 @@ ...@@ -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
// ------------------------- // -------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment