rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

navbar vars

Browse Source
This commit is contained in:
Mark Otto 2012-11-30 15:33:56 -08:00
parent a09cea44ae
commit 62a2220035
6 changed files with 132 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/customize.html
View File

@ -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>

34
docs/templates/pages/customize.mustache vendored
View File

@ -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>

2
less/mixins.less
View File

@ -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;
}

114
less/navbar.less
View File

@ -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%));
}
}

22
less/responsive-navbar.less
View File

@ -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 {

55
less/variables.less
View File

@ -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;
@navbar-inverse-background: #111111;
@navbar-inverse-background-highlight: #222222;
@navbar-inverse-border: #111111;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: #fff;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@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;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: #fff;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@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;
@navbarInverseBrandColor: @navbarInverseLinkColor;
@navbar-inverse-brand-color: @navbar-inverse-link-color;
// Pagination