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

navbar vars

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