Skip to content

B
bootstrap
Commit 0e47ce95 authored by Mark Otto's avatar Mark Otto
Browse files
Options

move tabs and pills to separate files with unique classes

parent 6c7a6b46
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 18 deletions
dist/css/bootstrap.css
View file @ 0e47ce95
......@@ -3171,6 +3171,95 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nav-tab {
padding-left: 0;
margin-bottom: 24px;
list-style: none;
border-bottom: 1px solid #ddd;
}
.nav-tab-item {
position: relative;
display: block;
float: left;
margin-bottom: -1px;
}
.nav-tab-link {
display: block;
padding: 10px 15px;
margin-right: .2rem;
line-height: 1.5;
border: 1px solid transparent;
border-radius: .2rem .2rem 0 0;
}
.nav-tab-link:hover,
.nav-tab-link:focus {
text-decoration: none;
background-color: #eceeef;
border-color: #eceeef #eceeef #ddd;
}
.open > .nav-tab-link,
.active > .nav-tab-link,
.open > .nav-tab-link:hover,
.active > .nav-tab-link:hover,
.open > .nav-tab-link:focus,
.active > .nav-tab-link:focus {
color: #55595c;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.disabled > .nav-tab-link,
.disabled > .nav-tab-link:hover,
.disabled > .nav-tab-link:focus {
color: #818a91;
cursor: not-allowed;
background-color: transparent;
border-color: transparent;
}
.nav-pill {
padding-left: 0;
margin-bottom: 24px;
list-style: none;
}
.nav-pill-item {
position: relative;
display: block;
float: left;
}
.nav-pill-item + .nav-pill-item {
margin-left: .2rem;
}
.nav-pill-link {
position: relative;
display: block;
padding: 10px 15px;
border-radius: .2rem;
}
.nav-pill-link:hover,
.nav-pill-link:focus {
text-decoration: none;
background-color: #eceeef;
}
.open > .nav-pill-link,
.active > .nav-pill-link,
.open > .nav-pill-link:hover,
.active > .nav-pill-link:hover,
.open > .nav-pill-link:focus,
.active > .nav-pill-link:focus {
color: #fff;
background-color: #027de7;
}
.disabled > .nav-pill-link {
color: #818a91;
}
.disabled > .nav-pill-link,
.disabled > .nav-pill-link:hover,
.disabled > .nav-pill-link:focus {
color: #818a91;
cursor: not-allowed;
background-color: transparent;
}
.navbar {
position: relative;
min-height: 50px;
......@@ -4947,6 +5036,10 @@ button.close {
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.nav-tab:before,
.nav-tab:after,
.nav-pill:before,
.nav-pill:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
......@@ -4969,6 +5062,8 @@ button.close {
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.nav-tab:after,
.nav-pill:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
......
dist/css/bootstrap.css.map
View file @ 0e47ce95
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 0e47ce95
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_includes/components/navs.html
View file @ 0e47ce95
......@@ -6,17 +6,35 @@
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<ul class="nav-tab" role="tablist">
<li class="nav-tab-item active">
<a href="#" class="nav-tab-link">Active</a>
</li>
<li class="nav-tab-item">
<a href="#" class="nav-tab-link">Link</a>
</li>
<li class="nav-tab-item">
<a href="#" class="nav-tab-link">Another link</a>
</li>
<li class="nav-tab-item disabled">
<a href="#" class="nav-tab-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<ul class="nav-tab" role="tablist">
<li class="nav-tab-item active">
<a href="#" class="nav-tab-link">Active</a>
</li>
<li class="nav-tab-item">
<a href="#" class="nav-tab-link">Link</a>
</li>
<li class="nav-tab-item">
<a href="#" class="nav-tab-link">Another link</a>
</li>
<li class="nav-tab-item disabled">
<a href="#" class="nav-tab-link">Disabled</a>
</li>
</ul>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
......@@ -27,19 +45,38 @@
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<ul class="nav-pill" role="tablist">
<li class="nav-pill-item active">
<a href="#" class="nav-pill-link">Active</a>
</li>
<li class="nav-pill-item">
<a href="#" class="nav-pill-link">Link</a>
</li>
<li class="nav-pill-item">
<a href="#" class="nav-pill-link">Another link</a>
</li>
<li class="nav-pill-item disabled">
<a href="#" class="nav-pill-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<ul class="nav-pill" role="tablist">
<li class="nav-pill-item active">
<a href="#" class="nav-pill-link">Active</a>
</li>
<li class="nav-pill-item">
<a href="#" class="nav-pill-link">Link</a>
</li>
<li class="nav-pill-item">
<a href="#" class="nav-pill-link">Another link</a>
</li>
<li class="nav-pill-item disabled">
<a href="#" class="nav-pill-link">Disabled</a>
</li>
</ul>
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example">
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
......
docs/dist/css/bootstrap.css
View file @ 0e47ce95
......@@ -3171,6 +3171,95 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nav-tab {
padding-left: 0;
margin-bottom: 24px;
list-style: none;
border-bottom: 1px solid #ddd;
}
.nav-tab-item {
position: relative;
display: block;
float: left;
margin-bottom: -1px;
}
.nav-tab-link {
display: block;
padding: 10px 15px;
margin-right: .2rem;
line-height: 1.5;
border: 1px solid transparent;
border-radius: .2rem .2rem 0 0;
}
.nav-tab-link:hover,
.nav-tab-link:focus {
text-decoration: none;
background-color: #eceeef;
border-color: #eceeef #eceeef #ddd;
}
.open > .nav-tab-link,
.active > .nav-tab-link,
.open > .nav-tab-link:hover,
.active > .nav-tab-link:hover,
.open > .nav-tab-link:focus,
.active > .nav-tab-link:focus {
color: #55595c;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.disabled > .nav-tab-link,
.disabled > .nav-tab-link:hover,
.disabled > .nav-tab-link:focus {
color: #818a91;
cursor: not-allowed;
background-color: transparent;
border-color: transparent;
}
.nav-pill {
padding-left: 0;
margin-bottom: 24px;
list-style: none;
}
.nav-pill-item {
position: relative;
display: block;
float: left;
}
.nav-pill-item + .nav-pill-item {
margin-left: .2rem;
}
.nav-pill-link {
position: relative;
display: block;
padding: 10px 15px;
border-radius: .2rem;
}
.nav-pill-link:hover,
.nav-pill-link:focus {
text-decoration: none;
background-color: #eceeef;
}
.open > .nav-pill-link,
.active > .nav-pill-link,
.open > .nav-pill-link:hover,
.active > .nav-pill-link:hover,
.open > .nav-pill-link:focus,
.active > .nav-pill-link:focus {
color: #fff;
background-color: #027de7;
}
.disabled > .nav-pill-link {
color: #818a91;
}
.disabled > .nav-pill-link,
.disabled > .nav-pill-link:hover,
.disabled > .nav-pill-link:focus {
color: #818a91;
cursor: not-allowed;
background-color: transparent;
}
.navbar {
position: relative;
min-height: 50px;
......@@ -4947,6 +5036,10 @@ button.close {
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.nav-tab:before,
.nav-tab:after,
.nav-pill:before,
.nav-pill:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
......@@ -4969,6 +5062,8 @@ button.close {
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.nav-tab:after,
.nav-pill:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
......
docs/dist/css/bootstrap.css.map
View file @ 0e47ce95
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 0e47ce95
This source diff could not be displayed because it is too large. You can view the blob instead.
less/bootstrap.less
View file @ 0e47ce95
......@@ -21,6 +21,8 @@
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "nav-tab.less";
@import "nav-pill.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
......
less/nav-pill.less 0 → 100644
View file @ 0e47ce95
// Pill nav
//
// Horizontal navigation with large (rounded) rectangle hit areas for links.
.nav-pill {
.list-unstyled();
margin-bottom: @line-height-computed;
&:extend(.clearfix all);
}
.nav-pill-item {
position: relative;
display: block;
float: left;
& + & {
margin-left: .2rem;
}
}
.nav-pill-link {
position: relative;
display: block;
padding: @nav-link-padding;
.border-radius(@nav-pills-border-radius);
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Open dropdown and active states
.open,
.active {
> .nav-pill-link {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
// Disabled state sets text to gray and nukes hover/tab effects
.disabled {
> .nav-pill-link {
color: @nav-disabled-link-color;
&,
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
background-color: transparent;
cursor: not-allowed;
}
}
}
less/nav-tab.less 0 → 100644
View file @ 0e47ce95
// Pill nav
//
// Horizontal navigation with large top-aligned tab visuals.
.nav-tab {
.list-unstyled();
margin-bottom: @line-height-computed;
border-bottom: 1px solid @nav-tabs-border-color;
&:extend(.clearfix all);
}
.nav-tab-item {
position: relative;
display: block;
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
}
.nav-tab-link {
display: block;
padding: @nav-link-padding;
margin-right: .2rem;
line-height: @line-height-base;
border: 1px solid transparent;
.border-radius(@border-radius-base @border-radius-base 0 0);
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
// Open dropdown and active states
.open,
.active {
> .nav-tab-link {
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
}
// Disabled state sets text to gray and nukes hover/tab effects
.disabled {
> .nav-tab-link {
&,
&:hover,
&:focus {
color: @nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
cursor: not-allowed;
}
}
}
Markdown is supported
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