rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' of https://github.com/saas786/bootstrap into 3.0.0-wip

Browse Source
This commit is contained in:
Mark Otto 2013-07-25 10:11:30 -07:00
commit f94d9ce096
5 changed files with 114 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-customize.html
View File

@ -12,6 +12,7 @@
<li><a href="#variables-form-states">Form states</a></li> <li><a href="#variables-form-states">Form states</a></li>
<li><a href="#variables-alerts">Alerts</a></li> <li><a href="#variables-alerts">Alerts</a></li>
<li><a href="#variables-navbar">Navbar</a></li> <li><a href="#variables-navbar">Navbar</a></li>
<li><a href="#variables-nav">Nav</a></li>
<li><a href="#variables-tables">Tables</a></li> <li><a href="#variables-tables">Tables</a></li>
<li><a href="#variables-forms">Forms</a></li> <li><a href="#variables-forms">Forms</a></li>
<li><a href="#variables-dropdowns">Dropdowns</a></li> <li><a href="#variables-dropdowns">Dropdowns</a></li>

54
customize.html
View File

@ -724,6 +724,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="darken(@navbar-link-color, 10%)"> <input type="text" placeholder="darken(@navbar-link-color, 10%)">
<label>@navbar-brand-hover-bg</label> <label>@navbar-brand-hover-bg</label>
<input type="text" placeholder="transparent"> <input type="text" placeholder="transparent">
<h4>Toggle</h4>
<label>@navbar-toggle-hover-bg</label>
<input type="text" placeholder="#ddd">
<label>@navbar-toggle-icon-bar-bg</label>
<input type="text" placeholder="#ccc">
<label>@navbar-toggle-border-color</label>
<input type="text" placeholder="#ddd">
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Inverted navbar</h3> <h3>Inverted navbar</h3>
@ -754,9 +761,56 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@navbar-inverse-brand-hover-bg</label> <label>@navbar-inverse-brand-hover-bg</label>
<input type="text" placeholder="transparent"> <input type="text" placeholder="transparent">
<h4>Toggle</h4>
<label>@navbar-inverse-toggle-hover-bg</label>
<input type="text" placeholder="#333">
<label>@navbar-inverse-toggle-icon-bar-bg</label>
<input type="text" placeholder="#fff">
<label>@navbar-inverse-toggle-border-color</label>
<input type="text" placeholder="#333">
</div> </div>
</div> </div>
<h2 id="variables-nav">Nav</h2>
<div class="row">
<div class="col-lg-6">
<h3>Default nav</h3>
<h4>Basics</h4>
<label>@nav-link-hover-bg</label>
<input type="text" placeholder="@gray-lighter">
<label>@nav-disabled-link-color</label>
<input type="text" placeholder="@gray-light">
<label>@nav-disabled-link-hover-color</label>
<input type="text" placeholder="@gray-light">
<label>@nav-open-link-hover-color</label>
<input type="text" placeholder="#fff">
<label>@nav-open-caret-border-color</label>
<input type="text" placeholder="@fff">
<h4>Tabs</h4>
<label>@nav-tabs-border-color</label>
<input type="text" placeholder="@ddd">
<label>@nav-tabs-link-hover-border-color</label>
<input type="text" placeholder="@gray-lighter">
<label>@nav-tabs-active-link-hover-color</label>
<input type="text" placeholder="@gray">
<label>@nav-tabs-active-link-hover-bg</label>
<input type="text" placeholder="@body-bg">
<label>@nav-tabs-active-link-hover-border-color</label>
<input type="text" placeholder="#ddd">
<label>@nav-tabs-justified-link-border-color</label>
<input type="text" placeholder="#ddd">
<label>@nav-tabs-justified-active-link-border-color</label>
<input type="text" placeholder="@body-bg">
<h4>Pills</h4>
<label>@nav-pills-active-link-hover-color</label>
<input type="text" placeholder="@fff">
<label>@nav-pills-active-link-hover-bg</label>
<input type="text" placeholder="@component-active-bg">
</div>
</div>
<h2 id="variables-tables">Tables</h2> <h2 id="variables-tables">Tables</h2>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">

14
less/navbar.less
View File

@ -123,12 +123,12 @@
height: 32px; height: 32px;
padding: 8px 12px; padding: 8px 12px;
background-color: transparent; background-color: transparent;
border: 1px solid #ddd; border: 1px solid @navbar-toggle-border-color;
border-radius: 4px; border-radius: @border-radius-base;
&:hover, &:hover,
&:focus { &:focus {
background-color: #ddd; background-color: @navbar-toggle-hover-bg;
} }
// Bars // Bars
@ -136,7 +136,7 @@
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background-color: #ccc; background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px; border-radius: 1px;
} }
.icon-bar + .icon-bar { .icon-bar + .icon-bar {
@ -250,13 +250,13 @@
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {
border-color: #333; border-color: @navbar-inverse-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: #333; background-color: @navbar-inverse-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: #fff; background-color: @navbar-inverse-toggle-icon-bar-bg;
} }
} }

30
less/navs.less
View File

@ -23,17 +23,17 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @gray-lighter; background-color: @nav-link-hover-bg;
} }
} }
// Disabled state sets text to gray and nukes hover/tab effects // Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a { &.disabled > a {
color: @gray-light; color: @nav-disabled-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @gray-light; color: @nav-disabled-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: not-allowed; cursor: not-allowed;
@ -51,12 +51,12 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: @nav-open-link-hover-color;
background-color: @link-color; background-color: @link-color;
border-color: @link-color; border-color: @link-color;
.caret { .caret {
border-top-color: #fff; border-top-color: @nav-open-caret-border-color;
border-bottom-color: #fff; border-bottom-color: @nav-open-caret-border-color;
} }
} }
} }
@ -83,7 +83,7 @@
// Give the tabs something to sit on // Give the tabs something to sit on
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid @nav-tabs-border-color;
> li { > li {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
@ -96,7 +96,7 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&:hover { &:hover {
border-color: @gray-lighter @gray-lighter #ddd; border-color: @nav-tabs-link-hover-border-color;
} }
} }
@ -105,9 +105,9 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @gray; color: @nav-tabs-active-link-hover-color;
background-color: @body-bg; background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid #ddd; border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
} }
@ -142,8 +142,8 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: @nav-pills-active-link-hover-color;
background-color: @component-active-bg; background-color: @nav-pills-active-link-hover-bg;
} }
} }
} }
@ -183,13 +183,13 @@
.nav-tabs-justified { .nav-tabs-justified {
border-bottom: 0; border-bottom: 0;
> li > a { > li > a {
border-bottom: 1px solid #ddd; border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs // Override margin from .nav-tabs
margin-right: 0; margin-right: 0;
} }
> .active > a { > .active > a {
border-bottom-color: @body-bg; border-bottom-color: @nav-tabs-justified-active-link-border-color;
} }
} }

37
less/variables.less
View File

@ -224,6 +224,43 @@
@navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc; @navbar-inverse-search-placeholder-color: #ccc;
// Navbar toggle
@navbar-toggle-hover-bg: #ddd;
@navbar-toggle-icon-bar-bg: #ccc;
@navbar-toggle-border-color: #ddd;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff;
// Pagination // Pagination
// ------------------------- // -------------------------