Skip to content

Commit

Permalink
updated pills to include vertical (stacked) variation in patterns and…
Browse files Browse the repository at this point in the history
… documentation
  • Loading branch information
mdo committed Oct 12, 2011
1 parent b8a4921 commit 12af75e
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 5 deletions.
5 changes: 4 additions & 1 deletion bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Oct 10 19:37:09 PDT 2011
* Date: Tue Oct 11 21:49:21 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
Expand Down Expand Up @@ -1706,6 +1706,9 @@ a.menu:after, .dropdown-toggle:after {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #0069d6;
}
.pills-vertical > li {
float: none;
}
.tab-content, .pill-content {
clear: both;
}
Expand Down
1 change: 1 addition & 0 deletions bootstrap.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1447,7 +1447,7 @@ <h2>Tabs and pills</h2>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<div class="span12">
<h3>Basic tab example</h3>
<h3>Basic tabs example</h3>
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
Expand All @@ -1473,7 +1473,7 @@ <h3>Basic tab example</h3>
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<h3>Alternate tabs</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
Expand Down Expand Up @@ -1512,9 +1512,9 @@ <h3>Basic pills example</h3>
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<h3>Vertical pill nav</h3>
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
<ul class="pills pills-vertical">
<ul class="pills pills-vertical span4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
Expand Down
7 changes: 7 additions & 0 deletions lib/patterns.less
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,13 @@ a.menu:after,
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical {
> li {
float: none;
}
}


// For js-enabled tabbed areas
.tab-content,
Expand Down

0 comments on commit 12af75e

Please sign in to comment.