src/scss/toolkit/modules/carousel.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/modules/carousel.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,175 +1,175 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
/**
* Should be used in conjunction with the JavaScript Titon.Carousel module.
*
- * <div class="carousel">
- * <ul class="carousel-items">
- * <li>
- * <img src="/path/to/image.jpg">
- * <div class="carousel-caption">Image caption</div>
- * </li>
- * </ul>
- * <ol class="carousel-tabs">
- * <li><a href=""></a></li>
- * </ol>
- * <a href="javascript:;" class="carousel-prev">
- * <span class="icon-chevron-sign-left"></span>
- * </a>
- * <a href="javascript:;" class="carousel-next">
- * <span class="icon-chevron-sign-right"></span>
- * </a>
- * </div>
+ * <div class="carousel">
+ * <ul class="carousel-items">
+ * <li>
+ * <img src="/path/to/image.jpg">
+ * <div class="carousel-caption">Image caption</div>
+ * </li>
+ * </ul>
+ * <ol class="carousel-tabs">
+ * <li><a href=""></a></li>
+ * </ol>
+ * <a href="javascript:;" class="carousel-prev">
+ * <span class="icon-chevron-sign-left"></span>
+ * </a>
+ * <a href="javascript:;" class="carousel-next">
+ * <span class="icon-chevron-sign-right"></span>
+ * </a>
+ * </div>
*/
.carousel {
- // 16:9
- max-width: 640px;
- max-height: 360px;
- width: 100%;
- height: auto;
- margin: 0 auto;
- text-align: left;
- position: relative;
- overflow: hidden;
+ // 16:9
+ max-width: 640px;
+ max-height: 360px;
+ width: 100%;
+ height: auto;
+ margin: 0 auto;
+ text-align: left;
+ position: relative;
+ overflow: hidden;
}
.carousel-items {
- list-style: none;
- margin: 0;
- padding: 0;
- position: relative;
- top: 0;
- left: 0;
- width: 100%;
- height: auto;
- z-index: 1;
- @include transition(left 1s, top 1s);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: auto;
+ z-index: 1;
+ @include transition(left 1s, top 1s);
- > li {
- position: relative;
- width: 100%;
- height: auto;
- z-index: 1;
- display: block;
+ > li {
+ position: relative;
+ width: 100%;
+ height: auto;
+ z-index: 1;
+ display: block;
- > img {
- display: block;
- width: 100%;
- max-width: 100%;
- height: auto;
- }
+ > img {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ }
- .carousel-caption {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: $padding;
- color: #fff;
- background: black(.70);
- }
- }
+ .carousel-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: $padding;
+ color: #fff;
+ background: black(.70);
+ }
+ }
}
.carousel-prev,
.carousel-next {
- display: block;
- position: absolute;
- padding: $padding;
- width: auto;
- height: auto;
- z-index: 5;
- font-size: 28px;
- color: #fff;
- opacity: .65;
- top: 50%;
- @include transform(translateY(-50%)); // move up 50% of their height
+ display: block;
+ position: absolute;
+ padding: $padding;
+ width: auto;
+ height: auto;
+ z-index: 5;
+ font-size: 28px;
+ color: #fff;
+ opacity: .65;
+ top: 50%;
+ @include transform(translateY(-50%)); // move up 50% of their height
- &:hover {
- color: #fff;
- opacity: 1;
- }
+ &:hover {
+ color: #fff;
+ opacity: 1;
+ }
- &:focus {
- outline: none;
- }
+ &:focus {
+ outline: none;
+ }
- // Large icons for large resolutions
- @include if-tablet-landscape {
- .carousel-prev,
- .carousel-next {
- font-size: 56px;
- }
- }
+ // Large icons for large resolutions
+ @include if-tablet-landscape {
+ .carousel-prev,
+ .carousel-next {
+ font-size: 56px;
+ }
+ }
}
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-tabs {
- list-style: none;
- line-height: 100%;
- margin: 0;
- padding: $padding;
- position: absolute;
- top: 0;
- left: 50%;
- z-index: 5;
- @include transform(translateX(-50%)); // move left 50% of their width
+ list-style: none;
+ line-height: 100%;
+ margin: 0;
+ padding: $padding;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ z-index: 5;
+ @include transform(translateX(-50%)); // move left 50% of their width
- li {
- display: inline-block;
- margin: 0 3px;
- }
+ li {
+ display: inline-block;
+ margin: 0 3px;
+ }
- a {
- display: inline-block;
- border: 2px solid #fff;
- height: 10px;
- width: 10px;
- border-radius: 50%;
- opacity: .65;
+ a {
+ display: inline-block;
+ border: 2px solid #fff;
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
+ opacity: .65;
- &:hover { opacity: 1; }
- &.is-active { background: #fff; }
- }
+ &:hover { opacity: 1; }
+ &.is-active { background: #fff; }
+ }
- // Hide if no tabs
- &:empty { display: none; }
+ // Hide if no tabs
+ &:empty { display: none; }
}
//-------------------- Animations --------------------//
.carousel.slide {
- .carousel-items {
- @include clear-fix;
+ .carousel-items {
+ @include clear-fix;
- > li {
- float: left;
- }
- }
+ > li {
+ float: left;
+ }
+ }
}
.carousel.fade {
- .carousel-items {
- height: 360px; // needs a base height because slides are absolute
+ .carousel-items {
+ height: 360px; // needs a base height because slides are absolute
- > li {
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- z-index: 1;
- @include transition(opacity 1s);
+ > li {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ z-index: 1;
+ @include transition(opacity 1s);
- &.show { z-index: 2; }
- }
- }
+ &.show { z-index: 2; }
+ }
+ }
}
\ No newline at end of file