kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

adding actual images to carousel to ensure you can see things are animating; updated styles of carousel controls to work on light and dark backgrounds and use opacity for effects

This commit is contained in:
Mark Otto 2012-01-24 20:45:38 -08:00
parent aa59f123c0
commit a5c1d1f182
9 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
bootstrap.css vendored
View File

@ -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 Jan 24 20:30:11 PST 2012
* Date: Tue Jan 24 20:44:12 PST 2012
*/
article,
aside,
@ -2953,13 +2953,21 @@ a.thumbnail:hover {
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ccc;
color: #fff;
text-align: center;
background: #999999;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #222222;
border: 3px solid #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.carousel-control.right {
left: auto;
@ -2968,8 +2976,9 @@ a.thumbnail:hover {
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
background: #333333;
background: rgba(0, 0, 0, 0.75);
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.carousel-caption {
position: absolute;

4
bootstrap.min.css vendored
View File

@ -530,8 +530,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.carousel .next.left,.carousel .prev.right{left:0;}
.carousel .active.left{left:-100%;}
.carousel .active.right{left:100%;}
.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ccc;text-align:center;background:#999999;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.carousel-control.right{left:auto;right:15px;}
.carousel-control:hover{color:#ffffff;text-decoration:none;background:#333333;background:rgba(0, 0, 0, 0.75);}
.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}.carousel-control.right{left:auto;right:15px;}
.carousel-control:hover{color:#ffffff;text-decoration:none;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;}
.carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333333;background:rgba(0, 0, 0, 0.75);}
.carousel-caption h4,.carousel-caption p{color:#ffffff;}
.pull-right{float:right;}

BIN
docs/assets/img/bootstrap-mdo-sfmoma-01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/assets/img/bootstrap-mdo-sfmoma-02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
docs/assets/img/bootstrap-mdo-sfmoma-03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

2
docs/base-css.html
View File

@ -368,7 +368,7 @@
<tr>
<td><code>&lt;pre class="prettyprint"&gt;</code></td>
<td>
<p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here…&lt;/p&gt;

6
docs/javascript.html
View File

@ -1215,21 +1215,21 @@ $('#myCollapsible').on('hidden', function () {
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

6
docs/templates/pages/javascript.mustache vendored
View File

@ -1155,21 +1155,21 @@ $('#myCollapsible').on('hidden', function () {
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}First Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}Second Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}Third Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

13
lib/carousel.less
View File

@ -68,11 +68,13 @@
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ccc;
color: #fff;
text-align: center;
background: @grayLight;
background: rgba(0,0,0,.5);
.border-radius(20px);
background: @grayDarker;
border: 3px solid #fff;
.border-radius(23px);
.opacity(50);
.transition(all .2s linear);
// Reposition the right one
&.right {
@ -84,8 +86,7 @@
&:hover {
color: @white;
text-decoration: none;
background: @grayDark;
background: rgba(0,0,0,.75);
.opacity(90);
}
}