mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Overhaul carousel a bit more:

Browse Source 
* Drop custom type arrow controls for glyphicons icons instead for more consistent rendering
* Remove the captions and instead let folks implement what they want in the carousel
* Move the indicators to the bottom middle instead of top right
* Lighten up gradients on the edges for less harsh lighting
This commit is contained in:
Mark Otto
2013-02-16 01:22:15 -08:00
parent b688d8dcd4
commit d8e2668c1d
5 changed files with 90 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
less/carousel.less
View File

@@ -3,18 +3,20 @@
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
margin-bottom: @line-height-base;
line-height: 1;
}
// Wrap all slides, but only show the active one
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
// Immediate parent of all slides
.carousel-inner {
> .item {
@@ -85,13 +87,13 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
#gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.75));
#gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.5));
background-color: transparent;
}
@@ -104,20 +106,22 @@
}
// Toggles
.control {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: block;
margin-top: -35px;
margin-left: 30px;
font-size: 80px;
font-weight: 100;
display: inline-block;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: 20px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
&.right .control {
margin-left: 70px;
.carousel-control .glyphicon-chevron-right {
margin-left: 80px;
}
}
@@ -125,21 +129,22 @@
// -----------------------------
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 50%;
z-index: 5;
margin: 0;
width: 100px;
margin: 0 0 0 -50px;
list-style: none;
text-align: center;
li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
display: inline-block;
width: 8px;
height: 8px;
margin-left: 0;
margin-right: 0;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255,255,255,.25);
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
}
@@ -149,28 +154,19 @@
}
// Caption for text below images
// -----------------------------
// Scale up controls for >768px
@media screen and (min-width: 768px) {
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 40px;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
max-width: 60%;
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: 30px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-right {
margin-left: 70px;
}
h3,
p {
color: #fff;
line-height: @line-height-base;
}
h3 {
margin: 0 0 5px;
}
p {
margin-bottom: 0;
}
}