carousel refinements

This commit is contained in:
Mark Otto 2012-09-30 23:44:23 -07:00
parent b6f6235e9b
commit 4b0d71abc1
2 changed files with 30 additions and 21 deletions

View File

@ -5370,7 +5370,7 @@ a.badge:hover {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100px; width: 120px;
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
@ -5414,13 +5414,17 @@ a.badge:hover {
z-index: 5; z-index: 5;
display: block; display: block;
margin-top: -35px; margin-top: -35px;
margin-left: 35px; margin-left: 30px;
font-size: 80px; font-size: 80px;
font-weight: 100; font-weight: 100;
color: #fff; color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
} }
.carousel-control.right .control {
margin-left: 70px;
}
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: 0; right: 0;

View File

@ -72,14 +72,9 @@
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100px; width: 120px;
.opacity(50); .opacity(50);
&.left {
#gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
background-color: transparent;
}
// we can't have this transition here // we can't have this transition here
// because webkit cancels the carousel // because webkit cancels the carousel
// animation if you trip this while // animation if you trip this while
@ -87,7 +82,11 @@
// ;_; // ;_;
// .transition(opacity .2s linear); // .transition(opacity .2s linear);
// Reposition the right one // Set gradients for backgrounds
&.left {
#gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
background-color: transparent;
}
&.right { &.right {
left: auto; left: auto;
right: 0; right: 0;
@ -101,21 +100,27 @@
text-decoration: none; text-decoration: none;
.opacity(90); .opacity(90);
} }
}
.carousel-control .control { // Toggles
.control {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 5; z-index: 5;
display: block; display: block;
margin-top: -35px; margin-top: -35px;
margin-left: 35px; margin-left: 30px;
font-size: 80px; font-size: 80px;
font-weight: 100; font-weight: 100;
color: #fff; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
&.right .control {
margin-left: 70px;
}
} }
// Caption for text below images // Caption for text below images
// ----------------------------- // -----------------------------