Commit f1a88eed authored by Mark Otto's avatar Mark Otto
Browse files

fix js link in docs nav, restyle accordion with new css

parent f48278da
Showing with 73 additions and 55 deletions
+73 -55
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Jan 15 18:32:40 PST 2012 * Date: Mon Jan 16 16:01:19 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;
...@@ -2939,17 +2939,25 @@ a.thumbnail:hover { ...@@ -2939,17 +2939,25 @@ a.thumbnail:hover {
.accordion { .accordion {
padding: 0; padding: 0;
} }
.accordion-group {
margin-bottom: 9px;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion-heading { .accordion-heading {
padding: 5px 10px; display: block;
border: 1px solid #ddd; padding: 9px 15px;
} }
.accordion-body { .accordion-body {
padding: 10px;
margin-left: 0;
margin-bottom: 9px;
border: 1px solid #ddd;
border-top: 0;
display: none; display: none;
padding: 15px;
margin-left: 0;
border-top: 1px solid #ddd;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
} }
.accordion .in { .accordion .in {
display: block; display: block;
......
...@@ -514,8 +514,9 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, ...@@ -514,8 +514,9 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.accordion{padding:0;} .accordion{padding:0;}
.accordion-heading{padding:5px 10px;border:1px solid #ddd;} .accordion-group{margin-bottom:9px;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.accordion-body{padding:10px;margin-left:0;margin-bottom:9px;border:1px solid #ddd;border-top:0;display:none;} .accordion-heading{display:block;padding:9px 15px;}
.accordion-body{display:none;padding:15px;margin-left:0;border-top:1px solid #ddd;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}
.accordion .in{display:block;} .accordion .in{display:block;}
.carousel{position:relative;line-height:1;} .carousel{position:relative;line-height:1;}
.carousel-inner{overflow:hidden;width:100%;position:relative;} .carousel-inner{overflow:hidden;width:100%;position:relative;}
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
<div class="span3"> <div class="span3">
<label> <label>
<h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3> <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
<p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
</label> </label>
</div> </div>
<div class="span3"> <div class="span3">
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
<div class="span3"> <div class="span3">
<label> <label>
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3> <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
<p class="muted"><strong>*</strong> Required for animation in plugins</p> <p class="muted"><strong>*</strong> Required for animation in plugins</p>
</label> </label>
</div> </div>
...@@ -1079,38 +1079,43 @@ $('#my-alert').bind('closed', function () { ...@@ -1079,38 +1079,43 @@ $('#my-alert').bind('closed', function () {
<div class="span9 columns"> <div class="span9 columns">
<h2>Example accordion</h2> <h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p> <p>Using the collapse plugin, we built a simple accordion style widget:</p>
<dl class="accordion" id="accordion">
<dt class="accordion-heading"> <div class="accordion">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <div class="accordion-group">
Collapsible Group Item #1 <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible group #1
</a> </a>
</dt> <div class="accordion-body collapse in" id="collapseOne">
<dd id="collapseOne" class="accordion-body collapse in"> <h5>Lorem ipsum</h5>
<p> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</p> <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
</dd> </div>
<dt class="accordion-heading"> </div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <div class="accordion-group">
Collapsible Group Item #2 <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible group #2
</a> </a>
</dt> <div class="accordion-body collapse" id="collapseTwo">
<dd id="collapseTwo" class="accordion-body collapse"> <h5>Lorem ipsum</h5>
<p> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</p> <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
</dd> </div>
<dt class="accordion-heading"> </div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <div class="accordion-group">
Collapsible Group Item #3 <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible group #3
</a> </a>
</dt> <div class="accordion-body collapse" id="collapseThree">
<dd id="collapseThree" class="accordion-body collapse"> <h5>Lorem ipsum</h5>
<p> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</p> <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
</dd> </div>
</dl> </div>
</div>
<hr> <hr>
<h2>Using bootstrap-collapse.js</h2> <h2>Using bootstrap-collapse.js</h2>
<p>Enable via javascript:</p> <p>Enable via javascript:</p>
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li> <li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
......
...@@ -4,17 +4,21 @@ ...@@ -4,17 +4,21 @@
.accordion { .accordion {
padding: 0; padding: 0;
} }
.accordion-group {
margin-bottom: @baseLineHeight / 2;
background-color: #eee;
.border-radius(4px);
}
.accordion-heading { .accordion-heading {
padding: 5px 10px; display: block;
border: 1px solid #ddd; padding: 9px 15px;
} }
.accordion-body { .accordion-body {
padding: 10px;
margin-left: 0;
margin-bottom: @baseLineHeight / 2;
border: 1px solid #ddd;
border-top: 0;
display: none; display: none;
padding: 15px;
margin-left: 0;
border-top: 1px solid #ddd;
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
} }
.accordion .in { .accordion .in {
display: block; display: block;
......
Supports Markdown
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