Skip to content
GitLab
Commit db284a97 authored by Mark Otto's avatar Mark Otto
Browse files

more consistent navbar vars

parent 4cbefa11
11 merge requests!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7674Clear float on all when navbar is collapsed - v3,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices
Hide whitespace changes
Inline Side-by-side
Showing
with 44 additions and 45 deletions
+44 -45
docs/assets/css/bootstrap.css
+ 1
- 1
View file @ db284a97
......@@ -3735,7 +3735,7 @@ button.close {
.navbar-link {
color: @navbar-link-color;
&:hover {
color: @navbar-link-color-hover;
color: @navbar-link-hover-color;
}
}
......
less/navbar.less
+ 27
- 27
View file @ db284a97
......@@ -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;
}
}
......
less/variables.less
+ 16
- 17
View file @ db284a97
......@@ -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
// -------------------------
......
Supports Markdown
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