From 62a22200358639e860cad06c7b468cde9d446456 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 30 Nov 2012 15:33:56 -0800
Subject: [PATCH] navbar vars
---
docs/customize.html | 36 ++++----
docs/templates/pages/customize.mustache | 34 +++----
less/mixins.less | 2 +-
less/navbar.less | 114 ++++++++++++------------
less/responsive-navbar.less | 22 ++---
less/variables.less | 61 ++++++-------
6 files changed, 135 insertions(+), 134 deletions(-)
diff --git a/docs/customize.html b/docs/customize.html
index 4955471a1c..aa02cfa2a3 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -328,7 +328,7 @@
<input type="text" class="span3" placeholder="#ddd">
<h3>Forms</h3>
- <label>@placeholderText</label>
+ <label>@input-color-placeholder</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@input-background</label>
<input type="text" class="span3" placeholder="#fff">
@@ -367,28 +367,28 @@
<input type="text" class="span3" placeholder="#d9edf7">
<h3>Navbar</h3>
- <label>@navbarHeight</label>
+ <label>@navbar-height</label>
<input type="text" class="span3" placeholder="40px">
- <label>@navbarBackground</label>
+ <label>@navbar-background</label>
<input type="text" class="span3" placeholder="@grayDarker">
- <label>@navbarBackgroundHighlight</label>
+ <label>@navbar-background-highlight</label>
<input type="text" class="span3" placeholder="@grayDark">
- <label>@navbarText</label>
+ <label>@navbar-text</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@navbarBrandColor</label>
- <input type="text" class="span3" placeholder="@navbarLinkColor">
- <label>@navbarLinkColor</label>
+ <label>@navbar-brand-color</label>
+ <input type="text" class="span3" placeholder="@navbar-link-color">
+ <label>@navbar-link-color</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@navbarLinkColorHover</label>
+ <label>@navbar-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@navbarLinkColorActive</label>
- <input type="text" class="span3" placeholder="@navbarLinkColorHover">
- <label>@navbarLinkBackgroundHover</label>
+ <label>@navbar-link-color-active</label>
+ <input type="text" class="span3" placeholder="@navbar-link-color-hover">
+ <label>@navbar-link-background-hover</label>
<input type="text" class="span3" placeholder="transparent">
- <label>@navbarLinkBackgroundActive</label>
- <input type="text" class="span3" placeholder="@navbarBackground">
+ <label>@navbar-link-background-active</label>
+ <input type="text" class="span3" placeholder="@navbar-background">
<label>@navbarSearchBackground</label>
- <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+ <input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
<label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="#fff">
<label>@navbarSearchBorder</label>
@@ -396,10 +396,10 @@
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
- <label>@navbarCollapseWidth</label>
+ <label>@navbar-collapse-width</label>
<input type="text" class="span3" placeholder="979px">
- <label>@navbarCollapseDesktopWidth</label>
- <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
+ <label>@navbar-collapse-width-desktop</label>
+ <input type="text" class="span3" placeholder="@navbar-collapse-width + 1">
<h3>Dropdowns</h3>
<label>@dropdown-background</label>
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index c3c318d42a..768de2391b 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -299,28 +299,28 @@
<input type="text" class="span3" placeholder="#d9edf7">
<h3>{{_i}}Navbar{{/i}}</h3>
- <label>@navbarHeight</label>
+ <label>@navbar-height</label>
<input type="text" class="span3" placeholder="40px">
- <label>@navbarBackground</label>
+ <label>@navbar-background</label>
<input type="text" class="span3" placeholder="@grayDarker">
- <label>@navbarBackgroundHighlight</label>
+ <label>@navbar-background-highlight</label>
<input type="text" class="span3" placeholder="@grayDark">
- <label>@navbarText</label>
+ <label>@navbar-text</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@navbarBrandColor</label>
- <input type="text" class="span3" placeholder="@navbarLinkColor">
- <label>@navbarLinkColor</label>
+ <label>@navbar-brand-color</label>
+ <input type="text" class="span3" placeholder="@navbar-link-color">
+ <label>@navbar-link-color</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@navbarLinkColorHover</label>
+ <label>@navbar-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@navbarLinkColorActive</label>
- <input type="text" class="span3" placeholder="@navbarLinkColorHover">
- <label>@navbarLinkBackgroundHover</label>
+ <label>@navbar-link-color-active</label>
+ <input type="text" class="span3" placeholder="@navbar-link-color-hover">
+ <label>@navbar-link-background-hover</label>
<input type="text" class="span3" placeholder="transparent">
- <label>@navbarLinkBackgroundActive</label>
- <input type="text" class="span3" placeholder="@navbarBackground">
+ <label>@navbar-link-background-active</label>
+ <input type="text" class="span3" placeholder="@navbar-background">
<label>@navbarSearchBackground</label>
- <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+ <input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
<label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="#fff">
<label>@navbarSearchBorder</label>
@@ -328,10 +328,10 @@
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
- <label>@navbarCollapseWidth</label>
+ <label>@navbar-collapse-width</label>
<input type="text" class="span3" placeholder="979px">
- <label>@navbarCollapseDesktopWidth</label>
- <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
+ <label>@navbar-collapse-width-desktop</label>
+ <input type="text" class="span3" placeholder="@navbar-collapse-width + 1">
<h3>{{_i}}Dropdowns{{/i}}</h3>
<label>@dropdown-background</label>
diff --git a/less/mixins.less b/less/mixins.less
index 452c727822..d4ba71cfe4 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -456,7 +456,7 @@
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
- margin-top: (@navbarHeight - @elementHeight) / 2;
+ margin-top: (@navbar-height - @elementHeight) / 2;
}
diff --git a/less/navbar.less b/less/navbar.less
index 01932049bc..a167746ee3 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -11,8 +11,8 @@
overflow: visible;
padding: 0 20px;
margin-bottom: @line-height-base;
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
- border: 1px solid @navbarBorder;
+ #gradient > .vertical(@navbar-background-highlight, @navbar-background);
+ border: 1px solid @navbar-border;
border-radius: @border-radius-base;
.box-shadow(0 1px 4px rgba(0,0,0,.065));
@@ -38,13 +38,13 @@
.navbar .brand {
float: left;
display: block;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @line-height-base) / 2) 20px ((@navbarHeight - @line-height-base) / 2);
+ // Vertically center the text given @navbar-height
+ padding: ((@navbar-height - @line-height-base) / 2) 20px ((@navbar-height - @line-height-base) / 2);
margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
font-weight: 200;
- color: @navbarBrandColor;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+ color: @navbar-brand-color;
+ text-shadow: 0 1px 0 @navbar-background-highlight;
&:hover {
text-decoration: none;
}
@@ -54,26 +54,26 @@
// -------------------------
.navbar-text {
margin-bottom: 0;
- line-height: @navbarHeight;
- color: @navbarText;
+ line-height: @navbar-height;
+ color: @navbar-text;
}
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
- color: @navbarLinkColor;
+ color: @navbar-link-color;
&:hover {
- color: @navbarLinkColorHover;
+ color: @navbar-link-color-hover;
}
}
// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
- height: @navbarHeight;
+ height: @navbar-height;
margin: 0 9px;
- border-left: 1px solid @navbarBackground;
- border-right: 1px solid @navbarBackgroundHighlight;
+ border-left: 1px solid @navbar-background;
+ border-right: 1px solid @navbar-background-highlight;
}
// Buttons in navbar
@@ -214,11 +214,11 @@
// Links
.navbar .nav > li > a {
float: none;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @line-height-base) / 2) 15px ((@navbarHeight - @line-height-base) / 2);
- color: @navbarLinkColor;
+ // Vertically center the text given @navbar-height
+ padding: ((@navbar-height - @line-height-base) / 2) 15px ((@navbar-height - @line-height-base) / 2);
+ color: @navbar-link-color;
text-decoration: none;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+ text-shadow: 0 1px 0 @navbar-background-highlight;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
@@ -228,8 +228,8 @@
// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
- color: @navbarLinkColorHover;
+ background-color: @navbar-link-background-hover; // "transparent" is default to differentiate :hover from .active
+ color: @navbar-link-color-hover;
text-decoration: none;
}
@@ -237,9 +237,9 @@
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
- color: @navbarLinkColorActive;
+ color: @navbar-link-color-active;
text-decoration: none;
- background-color: @navbarLinkBackgroundActive;
+ background-color: @navbar-link-background-active;
.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}
@@ -251,7 +251,7 @@
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
+ .buttonBackground(darken(@navbar-background-highlight, 5%), darken(@navbar-background, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.navbar .btn-navbar .icon-bar {
@@ -314,26 +314,26 @@
// Caret should match text color on hover
.navbar .nav li.dropdown > a:hover .caret {
- border-top-color: @navbarLinkColorActive;
- border-bottom-color: @navbarLinkColorActive;
+ border-top-color: @navbar-link-color-active;
+ border-bottom-color: @navbar-link-color-active;
}
// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarLinkBackgroundActive;
- color: @navbarLinkColorActive;
+ background-color: @navbar-link-background-active;
+ color: @navbar-link-color-active;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColor;
- border-bottom-color: @navbarLinkColor;
+ border-top-color: @navbar-link-color;
+ border-bottom-color: @navbar-link-color;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColorActive;
- border-bottom-color: @navbarLinkColorActive;
+ border-top-color: @navbar-link-color-active;
+ border-bottom-color: @navbar-link-color-active;
}
// Right aligned menus need alt position
@@ -363,84 +363,84 @@
// -------------------------
.navbar-inverse {
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
- border-color: @navbarInverseBorder;
+ #gradient > .vertical(@navbar-inverse-background-highlight, @navbar-inverse-background);
+ border-color: @navbar-inverse-border;
.brand,
.nav > li > a {
- color: @navbarInverseLinkColor;
+ color: @navbar-inverse-link-color;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
- color: @navbarInverseLinkColorHover;
+ color: @navbar-inverse-link-color-hover;
}
}
.brand {
- color: @navbarInverseBrandColor;
+ color: @navbar-inverse-brand-color;
}
.navbar-text {
- color: @navbarInverseText;
+ color: @navbar-inverse-text;
}
.nav > li > a:focus,
.nav > li > a:hover {
- background-color: @navbarInverseLinkBackgroundHover;
- color: @navbarInverseLinkColorHover;
+ background-color: @navbar-inverse-link-background-hover;
+ color: @navbar-inverse-link-color-hover;
}
.nav .active > a,
.nav .active > a:hover,
.nav .active > a:focus {
- color: @navbarInverseLinkColorActive;
- background-color: @navbarInverseLinkBackgroundActive;
+ color: @navbar-inverse-link-color-active;
+ background-color: @navbar-inverse-link-background-active;
}
// Inline text links
.navbar-link {
- color: @navbarInverseLinkColor;
+ color: @navbar-inverse-link-color;
&:hover {
- color: @navbarInverseLinkColorHover;
+ color: @navbar-inverse-link-color-hover;
}
}
// Dividers in navbar
.divider-vertical {
- border-left-color: @navbarInverseBackground;
- border-right-color: @navbarInverseBackgroundHighlight;
+ border-left-color: @navbar-inverse-background;
+ border-right-color: @navbar-inverse-background-highlight;
}
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarInverseLinkBackgroundActive;
- color: @navbarInverseLinkColorActive;
+ background-color: @navbar-inverse-link-background-active;
+ color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > a:hover .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
+ border-top-color: @navbar-inverse-link-color-active;
+ border-bottom-color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColor;
- border-bottom-color: @navbarInverseLinkColor;
+ border-top-color: @navbar-inverse-link-color;
+ border-bottom-color: @navbar-inverse-link-color;
}
.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: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
+ border-top-color: @navbar-inverse-link-color-active;
+ border-bottom-color: @navbar-inverse-link-color-active;
}
// Navbar search
.navbar-search {
.search-query {
color: #fff;
- background-color: @navbarInverseSearchBackground;
- border-color: @navbarInverseSearchBorder;
+ background-color: @navbar-inverse-search-background;
+ border-color: @navbar-inverse-search-border;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
- .placeholder(@navbarInverseSearchPlaceholderColor);
+ .placeholder(@navbar-inverse-search-placeholder-color);
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
@@ -448,7 +448,7 @@
padding: 5px 15px;
color: @grayDark;
text-shadow: 0 1px 0 #fff;
- background-color: @navbarInverseSearchBackgroundFocus;
+ background-color: @navbar-inverse-search-background-focus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
@@ -458,7 +458,7 @@
// Navbar collapse button
.btn-navbar {
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+ .buttonBackground(darken(@navbar-inverse-background-highlight, 5%), darken(@navbar-inverse-background, 5%));
}
}
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index e0c0df6b16..5cf90b1075 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -5,7 +5,7 @@
// TABLETS AND BELOW
// -----------------
-@media (max-width: @navbarCollapseWidth) {
+@media (max-width: @navbar-collapse-width) {
// UNFIX THE TOPBAR
// ----------------
@@ -60,7 +60,7 @@
display: none;
}
.nav-collapse .nav .nav-header {
- color: @navbarText;
+ color: @navbar-text;
text-shadow: none;
}
// Nav and dropdown links in navbar
@@ -68,7 +68,7 @@
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
- color: @navbarLinkColor;
+ color: @navbar-link-color;
border-radius: 3px;
}
// Buttons
@@ -82,15 +82,15 @@
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
- background-color: @navbarBackground;
+ background-color: @navbar-background;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
- color: @navbarInverseLinkColor;
+ color: @navbar-inverse-link-color;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
- background-color: @navbarInverseBackground;
+ background-color: @navbar-inverse-background;
}
// Buttons in the navbar
.nav-collapse.in .btn-group {
@@ -135,14 +135,14 @@
float: none;
padding: (@line-height-base / 2) 15px;
margin: (@line-height-base / 2) 0;
- border-top: 1px solid @navbarBackground;
- border-bottom: 1px solid @navbarBackground;
+ border-top: 1px solid @navbar-background;
+ border-bottom: 1px solid @navbar-background;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
- border-top-color: @navbarInverseBackground;
- border-bottom-color: @navbarInverseBackground;
+ border-top-color: @navbar-inverse-background;
+ border-bottom-color: @navbar-inverse-background;
}
// Pull right (secondary) nav content
.navbar .nav-collapse .nav.pull-right {
@@ -174,7 +174,7 @@
// DEFAULT DESKTOP
// ---------------
-@media (min-width: @navbarCollapseDesktopWidth) {
+@media (min-width: @navbar-collapse-width-desktop) {
// Required to make the collapsing navbar work on regular desktops
.nav-collapse.collapse {
diff --git a/less/variables.less b/less/variables.less
index d3f1f12433..4da2f0d628 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -33,6 +33,7 @@
// Typography
// -------------------------
+
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -152,41 +153,41 @@
// Navbar
// -------------------------
-@navbarCollapseWidth: 979px;
-@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
+@navbar-collapse-width: 979px;
+@navbar-collapse-width-desktop: @navbar-collapse-width + 1;
-@navbarHeight: 44px;
-@navbarBackgroundHighlight: #ffffff;
-@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
-@navbarBorder: darken(@navbarBackground, 12%);
+@navbar-height: 44px;
+@navbar-background-highlight: #ffffff;
+@navbar-background: darken(@navbar-background-highlight, 5%);
+@navbar-border: darken(@navbar-background, 12%);
-@navbarText: #777;
-@navbarLinkColor: #777;
-@navbarLinkColorHover: @grayDark;
-@navbarLinkColorActive: @gray;
-@navbarLinkBackgroundHover: transparent;
-@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
+@navbar-text: #777;
+@navbar-link-color: #777;
+@navbar-link-color-hover: @grayDark;
+@navbar-link-color-active: @gray;
+@navbar-link-background-hover: transparent;
+@navbar-link-background-active: darken(@navbar-background, 5%);
-@navbarBrandColor: @navbarLinkColor;
+@navbar-brand-color: @navbar-link-color;
// Inverted navbar
-@navbarInverseBackground: #111111;
-@navbarInverseBackgroundHighlight: #222222;
-@navbarInverseBorder: #111111;
-
-@navbarInverseText: @grayLight;
-@navbarInverseLinkColor: @grayLight;
-@navbarInverseLinkColorHover: #fff;
-@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
-@navbarInverseLinkBackgroundHover: transparent;
-@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
-
-@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus: #fff;
-@navbarInverseSearchBorder: @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor: #ccc;
-
-@navbarInverseBrandColor: @navbarInverseLinkColor;
+@navbar-inverse-background: #111111;
+@navbar-inverse-background-highlight: #222222;
+@navbar-inverse-border: #111111;
+
+@navbar-inverse-text: @grayLight;
+@navbar-inverse-link-color: @grayLight;
+@navbar-inverse-link-color-hover: #fff;
+@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
+@navbar-inverse-link-background-hover: transparent;
+@navbar-inverse-link-background-active: @navbar-inverse-background;
+
+@navbar-inverse-search-background: lighten(@navbar-inverse-background, 25%);
+@navbar-inverse-search-background-focus: #fff;
+@navbar-inverse-search-border: @navbar-inverse-background;
+@navbar-inverse-search-placeholder-color: #ccc;
+
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
// Pagination
--
GitLab