diff options
author | elijah <elijah@riseup.net> | 2012-08-24 21:12:36 -0700 |
---|---|---|
committer | elijah <elijah@riseup.net> | 2012-08-24 21:12:36 -0700 |
commit | 627f0488e5bd3c31359fc9e78acffbfea4a86a8b (patch) | |
tree | f7b14733e314cf82d5fa3e18cbe9d98c2ffe5c7c /app/assets/stylesheets/bootstrap/_carousel.scss | |
parent | b774dea07f97b078fa17e5dcbf901d1c83fed0d6 (diff) |
committed website v. 0.1.0
Diffstat (limited to 'app/assets/stylesheets/bootstrap/_carousel.scss')
-rw-r--r-- | app/assets/stylesheets/bootstrap/_carousel.scss | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/stylesheets/bootstrap/_carousel.scss b/app/assets/stylesheets/bootstrap/_carousel.scss new file mode 100644 index 0000000..ffba3d0 --- /dev/null +++ b/app/assets/stylesheets/bootstrap/_carousel.scss @@ -0,0 +1,121 @@ +// CAROUSEL +// -------- + +.carousel { + position: relative; + margin-bottom: $baseLineHeight; + line-height: 1; +} + +.carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} + +.carousel { + + .item { + display: none; + position: relative; + @include transition(.6s ease-in-out left); + } + + // Account for jankitude on images + .item > img { + display: block; + line-height: 1; + } + + .active, + .next, + .prev { display: block; } + + .active { + left: 0; + } + + .next, + .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { + left: 100%; + } + .prev { + left: -100%; + } + .next.left, + .prev.right { + left: 0; + } + + .active.left { + left: -100%; + } + .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.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: $white; + text-align: center; + background: $grayDarker; + border: 3px solid $white; + @include border-radius(23px); + @include opacity(50); + + // we can't have this transition here + // because webkit cancels the carousel + // animation if you trip this while + // in the middle of another animation + // ;_; + // .transition(opacity .2s linear); + + // Reposition the right one + &.right { + left: auto; + right: 15px; + } + + // Hover state + &:hover { + color: $white; + text-decoration: none; + @include opacity(90); + } +} + +// Caption for text below images +// ----------------------------- + +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px 15px 5px; + background: $grayDark; + background: rgba(0,0,0,.75); +} +.carousel-caption h4, +.carousel-caption p { + color: $white; +} |