atoms.app.carousel.css

[data-molecule-form=carousel]{margin:0;padding:0;width:100%;background-color:#ddd;}[data-molecule-form=carousel].tiny{height:6rem}[data-molecule-form=carousel].small{height:8rem}[data-molecule-form=carousel].big{position:absolute;height:100%}[data-molecule-form=carousel]:not(.big):not(.small):not(.tiny){height:12rem}[data-molecule-form=carousel] > [data-atom-index]{z-index:2;position:absolute;bottom:0;width:100%;padding:.2rem 0;text-align:center;}[data-molecule-form=carousel] > [data-atom-index] > span{position:relative;display:inline-block;width:8px;height:8px;margin:0 .1rem;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:WHITE;opacity:.5;}[data-molecule-form=carousel] > [data-atom-index] > span.active{opacity:1}[data-molecule-form=carousel] > :not([data-atom-index]){margin:0;padding:0;position:absolute;width:100%;height:100%;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#ddd;}[data-molecule-form=carousel] > :not([data-atom-index]):not([data-carousel-position]):not([data-carousel-transition]){visibility:hidden}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-transition]{-webkit-transition:all 450ms cubic-bezier(.645,.045,.355,1);-moz-transition:all 450ms cubic-bezier(.645,.045,.355,1);-ms-transition:all 450ms cubic-bezier(.645,.045,.355,1);-o-transition:all 450ms cubic-bezier(.645,.045,.355,1);-webkit-transition:all 450ms cubic-bezier(.645,.045,.355,1);-moz-transition:all 450ms cubic-bezier(.645,.045,.355,1);-ms-transition:all 450ms cubic-bezier(.645,.045,.355,1);-o-transition:all 450ms cubic-bezier(.645,.045,.355,1);transition:all 450ms cubic-bezier(.645,.045,.355,1)}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-transition="restoring"]{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="previous"]{left:-100%;}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="previous"][data-carousel-transition="current"]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="current"]{left:0;}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="current"][data-carousel-transition="next"]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="current"][data-carousel-transition="previous"]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="next"]{left:100%;}[data-molecule-form=carousel] > :not([data-atom-index])[data-carousel-position="next"][data-carousel-transition="current"]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}