Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

333 lines (309 sloc) 8.546 kb
/*-----------------------------------------------
* Mixins:
----------------------------------------------*/
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transform (@props) {
-webkit-transform: @props;
-moz-transform: @props;
-ms-transform: @props;
-o-transform: @props;
transform: @props;
}
/*-----------------------------------------------
* Global:
----------------------------------------------*/
@main-color: #088BBF;
.tiles-preload .tiles-slider-wrap * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.tiles-slider-wrap * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.tiles-slider-wrap a:focus { outline: none; } // FF
.tiles-slider-wrap,
.tiles-tile { position: relative; }
.tiles-wrap {
position: absolute;
height: 100%;
width: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
.tiles-tile {
float: left;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
z-index: 0;
.transition(all .3s ease-in-out);
}
/*-----------------------------------------------
* Timer:
----------------------------------------------*/
.tiles-timer {
position: absolute;
top: 0;
height: 5px;
width: 0;
background: @main-color;
}
/*-----------------------------------------------
* Navigation:
----------------------------------------------*/
/* Prev/Next */
.tiles-next, .tiles-prev {
opacity: 0;
position: absolute;
z-index: 1;
top: 50%;
margin: 0 .5em;
margin-top: -24px;
text-indent: -9999px;
width: 48px;
height: 48px;
line-height: 50px;
background: url(../img/prev_next.png) left no-repeat;
color: white;
.transition(all .3s ease-in-out);
}
.tiles-next {
right: 0;
background-position: right;
}
.tiles-slider-wrap:hover .tiles-next,
.tiles-slider-wrap:hover .tiles-prev { opacity: 1; }
.tiles-nav:hover ~ .tiles-next,
.tiles-nav:hover ~ .tiles-prev { opacity: 0; }
/* Bullets/Pagination */
.tiles-nav {
position: absolute;
top: 100%;
left: 50%;
margin-top: 1em;
.tiles-nav-item {
position: relative;
&.tiles-nav-active { cursor: default; }
&:not(.tiles-nav-active):hover span {
visibility: visible;
opacity: 1;
margin-top: -1em;
}
.transition(all .3s ease-in-out);
}
/* Pagination */
.tiles-pagination {
text-decoration: none;
color: #222;
padding: .1em .5em;
margin: 0 .1em;
border-radius: 2px;
&:hover {
text-decoration: none;
color: @main-color;
}
&.tiles-nav-active {
background: @main-color;
color: #fff;
}
}
/* Bullets */
.tiles-bullet {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 .3em;
border-radius: 16px;
background: #ddd;
&.tiles-nav-active { background: @main-color; }
}
/* Thumbnails */
span {
position: absolute;
z-index: 1;
visibility: hidden;
opacity: 0;
padding: .3em;
margin-top: -1.5em;
background: rgba(255,255,255,.85);
box-shadow: 0 0 5px rgba(0,0,0,.3);
border-radius: 2px;
border-top: 1px solid white;
.transition(all .3s ease-in-out);
-webkit-backface-visibility: hidden; // Fix resizing bug Webkit
&:after, &:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-style: solid;
border-width: 10px;
border-color: transparent;
border-top-color: rgba(255,255,255,.85);
}
&:before {
margin-top: 1px;
border-top-color: rgba(0,0,0,.5);
}
}
img { display: block; }
}
/* Descriptions */
.tiles-description {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: 1em 2em;
line-height: 1.5;
visibility: hidden;
opacity: 0;
color: white;
background: rgba(0,0,0,.65);
box-shadow: 0 -1px 2px rgba(0,0,0,.3);
.transition(all .3s ease-in-out);
p {
position: relative;
padding: 0; margin: 0;
left: -5em;
.transition(all .3s ease-in-out);
}
}
.tiles-description-active {
opacity: 1;
visibility: visible;
p { left: 0; }
}
.tiles-description-empty { display: none; }
/* cssSpeed */
.tiles-slider-s100 .tiles-tile { .transition(all .1s ease-in-out); }
.tiles-slider-s200 .tiles-tile { .transition(all .2s ease-in-out); }
.tiles-slider-s300 .tiles-tile { .transition(all .3s ease-in-out); }
.tiles-slider-s400 .tiles-tile { .transition(all .4s ease-in-out); }
.tiles-slider-s500 .tiles-tile { .transition(all .5s ease-in-out); }
.tiles-slider-s600 .tiles-tile { .transition(all .6s ease-in-out); }
.tiles-slider-s700 .tiles-tile { .transition(all .7s ease-in-out); }
.tiles-slider-s800 .tiles-tile { .transition(all .8s ease-in-out); }
.tiles-slider-s900 .tiles-tile { .transition(all .9s ease-in-out); }
.tiles-slider-s1000 .tiles-tile { .transition(all 1s ease-in-out); }
.tiles-tile.tiles-reset { .transition(all 0s ease-in-out); }
/*-----------------------------------------------
* Effects:
----------------------------------------------*/
/* Simple */
.tiles-simple-anim { opacity: 0; }
/* Default */
.tiles-default-anim {
position: relative;
opacity: 0;
box-shadow: 0 0 10px black;
top: -5%;
left: 5%;
z-index: 1;
}
/* Up */
.tiles-y1.tiles-up-anim { height: 1px !important; }
/* Left */
.tiles-x1.tiles-left-normal { clear: both; }
.tiles-x1.tiles-left-anim { width: 0 !important; }
/* Switch LR */
.tiles-switchlr-anim.tiles-even {
&.tiles-y1.tiles-x2 { left: 100/2%; }
&.tiles-y1.tiles-x4 { left: 100/4%; }
&.tiles-y1.tiles-x6 { left: 100/6%; }
&.tiles-y1.tiles-x8 { left: 100/8%; }
&.tiles-y1.tiles-x10 { left: 100/10%; }
&.tiles-y1.tiles-x12 { left: 100/12%; }
&.tiles-y1.tiles-x14 { left: 100/14%; }
&.tiles-y1.tiles-x16 { left: 100/16%; }
&.tiles-y1.tiles-x18 { left: 100/18%; }
&.tiles-y1.tiles-x20 { left: 100/20%; }
}
.tiles-switchlr-anim.tiles-odd {
&.tiles-y1.tiles-x2 { left: -100/2%; }
&.tiles-y1.tiles-x4 { left: -100/4%; }
&.tiles-y1.tiles-x6 { left: -100/6%; }
&.tiles-y1.tiles-x8 { left: -100/8%; }
&.tiles-y1.tiles-x10 { left: -100/10%; }
&.tiles-y1.tiles-x12 { left: -100/12%; }
&.tiles-y1.tiles-x14 { left: -100/14%; }
&.tiles-y1.tiles-x16 { left: -100/16%; }
&.tiles-y1.tiles-x18 { left: -100/18%; }
&.tiles-y1.tiles-x20 { left: -100/20%; }
}
/* Switch UD */
.tiles-switchud-anim.tiles-even {
&.tiles-x1.tiles-y2 { top: 100/2%; }
&.tiles-x1.tiles-y4 { top: 100/4%; }
&.tiles-x1.tiles-y6 { top: 100/6%; }
&.tiles-x1.tiles-y8 { top: 100/8%; }
&.tiles-x1.tiles-y10 { top: 100/10%; }
&.tiles-x1.tiles-y12 { top: 100/12%; }
&.tiles-x1.tiles-y14 { top: 100/14%; }
&.tiles-x1.tiles-y16 { top: 100/16%; }
&.tiles-x1.tiles-y18 { top: 100/18%; }
&.tiles-x1.tiles-y20 { top: 100/20%; }
}
.tiles-switchud-anim.tiles-odd {
&.tiles-x1.tiles-y2 { top: -100/2%; }
&.tiles-x1.tiles-y4 { top: -100/4%; }
&.tiles-x1.tiles-y6 { top: -100/6%; }
&.tiles-x1.tiles-y8 { top: -100/8%; }
&.tiles-x1.tiles-y10 { top: -100/10%; }
&.tiles-x1.tiles-y12 { top: -100/12%; }
&.tiles-x1.tiles-y14 { top: -100/14%; }
&.tiles-x1.tiles-y16 { top: -100/16%; }
&.tiles-x1.tiles-y18 { top: -100/18%; }
&.tiles-x1.tiles-y20 { top: -100/20%; }
}
/* Flip */
.tiles-fliplr-anim { .transform(~"rotateY(180deg)"); }
.tiles-flipud-anim { .transform(~"rotateX(180deg)"); }
/* Reduce */
.tiles-reduce-anim { .transform(~"scale(0)"); }
/* 360 */
.tiles-360-anim { .transform(~"rotateZ(360deg) scale(0)"); }
/* Left & Right */
.tiles-leftright-anim.tiles-even { .transform(~"translate(50%, 0)"); }
.tiles-leftright-anim.tiles-odd { .transform(~"translate(-50%, 0)"); }
/* Up & Down */
.tiles-updown-anim.tiles-even { .transform(~"translate(0, 50%)"); }
.tiles-updown-anim.tiles-odd { .transform(~"translate(0, -50%)"); }
/* Slider fixes */
.tiles-slider-wrap {
.tiles-switchlr-anim,
.tiles-switchud-anim,
.tiles-fliplr-anim,
.tiles-y1.tiles-up-anim,
.tiles-x1.tiles-left-anim,
.tiles-updown-anim,
.tiles-leftright-anim,
.tiles-flipud-anim,
.tiles-reduce-anim {
opacity: 0;
visibility: hidden;
}
}
.tiles-slider-leftright .tiles-wrap,
.tiles-slider-updown .tiles-wrap,
.tiles-slider-360 .tiles-wrap {
overflow: hidden;
}
Jump to Line
Something went wrong with that request. Please try again.