mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
adding step nav to components
This commit is contained in:
Mark Otto
parent
447c9322e9
commit
f2c40ee24d
44
bootstrap.css
vendored
44
bootstrap.css
vendored
@ -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: Tue Nov 29 23:48:09 PST 2011
|
||||
* Date: Wed Nov 30 00:39:32 PST 2011
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -2088,6 +2088,48 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
.tab-content > .active, .pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
.step-nav {
|
||||
position: relative;
|
||||
margin: 0 0 18px;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.step-nav li {
|
||||
display: inline;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.step-nav .prev, .step-nav .next {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
.step-nav .prev {
|
||||
left: 15px;
|
||||
}
|
||||
.step-nav .next {
|
||||
right: 15px;
|
||||
}
|
||||
.step-nav .dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 3px;
|
||||
text-indent: -999em;
|
||||
background-color: #bfbfbf;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.step-nav .dot:hover, .step-nav .active .dot {
|
||||
background-color: #404040;
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: 7px 14px;
|
||||
margin: 0 0 18px;
|
||||
|
||||
6
bootstrap.min.css
vendored
6
bootstrap.min.css
vendored
@ -279,6 +279,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.pills-vertical>li{float:none;}
|
||||
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
|
||||
.tab-content>.active,.pill-content>.active{display:block;}
|
||||
.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#bfbfbf;}
|
||||
.step-nav .prev,.step-nav .next{position:absolute;top:6px;}
|
||||
.step-nav .prev{left:15px;}
|
||||
.step-nav .next{right:15px;}
|
||||
.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
|
||||
.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
|
||||
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
|
||||
.breadcrumb .active a{color:#404040;}
|
||||
|
||||
@ -39,71 +39,6 @@ body > .navbar-fixed .brand:hover {
|
||||
}
|
||||
|
||||
|
||||
/* Github buttons
|
||||
-------------------------------------------------- */
|
||||
.github-btn {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.github-btn .gh-btn,
|
||||
.github-btn .gh-count,
|
||||
.github-btn .gh-ico {
|
||||
float: left;
|
||||
}
|
||||
.github-btn .gh-btn,
|
||||
.github-btn .gh-count {
|
||||
padding: 1px 5px 1px 4px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.github-btn .gh-btn {
|
||||
background-color: #e6e6e6;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
|
||||
}
|
||||
.github-btn .gh-btn:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
.github-btn .gh-btn:active {
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
|
||||
}
|
||||
.github-btn .gh-ico {
|
||||
margin-right: 4px;
|
||||
opacity: .65;
|
||||
}
|
||||
.github-btn .gh-btn:hover .gh-ico {
|
||||
opacity: .75;
|
||||
}
|
||||
.github-btn .gh-count {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
/* Jumbotrons
|
||||
-------------------------------------------------- */
|
||||
.jumbotron {
|
||||
@ -330,13 +265,6 @@ body > .navbar-fixed .brand:hover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* scrollspy docs */
|
||||
|
||||
.scrollspy-example {
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Popover docs
|
||||
-------------------------------------------------- */
|
||||
@ -499,19 +427,3 @@ h2 + table {
|
||||
}
|
||||
}
|
||||
|
||||
#accordion dt a{
|
||||
display:block;
|
||||
padding: 9px 15px;
|
||||
line-height: 1;
|
||||
background-color: whiteSmoke;
|
||||
border: 1px solid #EEE;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
#accordion dt:first-child a {
|
||||
border-top-color:#eee;
|
||||
}
|
||||
|
||||
#accordion dd p {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -412,6 +412,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step nav -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Step nav</h2>
|
||||
<p>Placeholder for now!</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<br>
|
||||
<ul class="step-nav">
|
||||
<li class="prev"><a href="#">« Overview</a></li>
|
||||
<li class="active"><a class="dot" href="#">1</a></li>
|
||||
<li><a class="dot" href="#">2</a></li>
|
||||
<li><a class="dot" href="#">3</a></li>
|
||||
<li><a class="dot" href="#">4</a></li>
|
||||
<li><a class="dot" href="#">5</a></li>
|
||||
<li class="next"><a href="#">Base CSS »</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
@ -216,3 +216,46 @@
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Step nav
|
||||
.step-nav {
|
||||
position: relative; // for prev/next links
|
||||
margin: 0 0 @baseLineHeight;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
.border-radius(15px);
|
||||
li {
|
||||
display: inline;
|
||||
color: @grayLight;
|
||||
}
|
||||
// prev/next links
|
||||
.prev,
|
||||
.next {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
.prev {
|
||||
left: 15px;
|
||||
}
|
||||
.next {
|
||||
right: 15px;
|
||||
}
|
||||
// indicators for each step/page/item/etc
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 3px;
|
||||
text-indent: -999em;
|
||||
background-color: @grayLight;
|
||||
.border-radius(5px);
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
|
||||
}
|
||||
.dot:hover,
|
||||
.active .dot {
|
||||
background-color: @grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user