From db284a97d6b0d6eb20c3b6724440cbd26b80ccbd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 Mar 2013 17:56:31 -0700 Subject: [PATCH] more consistent navbar vars --- docs/assets/css/bootstrap.css | 2 +- less/navbar.less | 54 +++++++++++++++++------------------ less/variables.less | 33 +++++++++++---------- 3 files changed, 44 insertions(+), 45 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4c3cc20ac1..06314aafa8 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3735,7 +3735,7 @@ button.close { .navbar-link { color: @navbar-link-color; &:hover { - color: @navbar-link-color-hover; + color: @navbar-link-hover-color; } } diff --git a/less/navbar.less b/less/navbar.less index e9d971da1d..ac950ca9b8 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -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; } } diff --git a/less/variables.less b/less/variables.less index 66bc8d3bed..99f8bfb693 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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 // -------------------------