Sha256: df9ab77041aaafa2c11e838541d108ccfa43b6f93f12e64a302e12d14cf59e28
Contents?: true
Size: 1.96 KB
Versions: 5
Compression:
Stored size: 1.96 KB
Contents
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
#{$carousel-class} {
margin: 0 auto;
text-align: left;
position: relative;
max-width: 100%;
&.no-next #{$carousel-class-next} { display: none; }
&.no-prev #{$carousel-class-prev} { display: none; }
}
#{$carousel-class-items} {
/* 4:3 ratio */
padding-bottom: 75%;
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
> ul {
@include reset-list;
position: absolute;
top: 0;
left: 0;
transition: left $carousel-transition, top $carousel-transition;
> li {
width: 100%;
height: auto;
position: relative;
> img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
}
}
}
//-------------------- Animations --------------------//
#{$carousel-class}.slide {
#{$carousel-class-items} > ul {
> li {
float: left;
}
@include clear-fix;
}
}
#{$carousel-class}.fade {
#{$carousel-class-items} > ul {
position: relative;
> li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
transition: opacity $carousel-transition, visibility $carousel-transition;
&.show { z-index: 5; }
}
}
}
//-------------------- Modifiers --------------------//
@if index($carousel-modifiers, "wide") {
#{$carousel-class-modifier-wide} {
#{$carousel-class-items} {
padding-bottom: 56.25%; // 16:9 ratio
}
}
}
@if index($carousel-modifiers, "square") {
#{$carousel-class-modifier-square} {
#{$carousel-class-items} {
padding-bottom: 100%; // 1:1 ratio
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems