2013-09-15 01:15:30 +04:00
|
|
|
//
|
|
|
|
// Push styles (to be used with push.js)
|
|
|
|
// --------------------------------------------------
|
2012-11-05 04:03:39 +04:00
|
|
|
|
2013-09-15 01:15:30 +04:00
|
|
|
.content {
|
2014-02-26 14:07:55 +04:00
|
|
|
// Fade animation
|
2013-09-15 01:15:30 +04:00
|
|
|
&.fade {
|
|
|
|
left: 0;
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
&.in {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-12-15 03:40:04 +04:00
|
|
|
// Slide animation
|
2014-02-24 13:01:47 +04:00
|
|
|
&.sliding {
|
2013-09-15 04:36:10 +04:00
|
|
|
z-index: 2;
|
2014-02-25 07:05:35 +04:00
|
|
|
-webkit-transition: -webkit-transform .4s;
|
|
|
|
-moz-transition: -moz-transform .4s;
|
|
|
|
transition: transform .4s;
|
2013-09-26 02:15:14 +04:00
|
|
|
@include transform(translate3d(0, 0, 0));
|
2013-09-15 01:15:30 +04:00
|
|
|
|
|
|
|
&.left {
|
2013-09-15 02:46:45 +04:00
|
|
|
z-index: 1;
|
2013-12-15 04:31:33 +04:00
|
|
|
@include transform(translate3d(-100%, 0, 0));
|
2013-09-15 01:15:30 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
&.right {
|
2013-09-15 02:46:45 +04:00
|
|
|
z-index: 3;
|
2013-09-26 02:15:14 +04:00
|
|
|
@include transform(translate3d(100%, 0, 0));
|
2013-09-15 01:15:30 +04:00
|
|
|
}
|
|
|
|
}
|
2013-09-15 04:36:10 +04:00
|
|
|
}
|
2014-02-10 07:22:27 +04:00
|
|
|
|
|
|
|
// Add chevrons to elements
|
2014-03-02 03:18:58 +04:00
|
|
|
.navigate-left,
|
2014-03-02 03:53:37 +04:00
|
|
|
.navigate-right,
|
2014-03-02 03:41:20 +04:00
|
|
|
.push-left,
|
|
|
|
.push-right {
|
|
|
|
&:after {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
display: inline-block;
|
|
|
|
color: #bbb;
|
|
|
|
font-family: Ratchicons;
|
|
|
|
font-size: inherit;
|
|
|
|
text-decoration: none;
|
|
|
|
line-height: 1;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
@include transform(translateY(-50%));
|
|
|
|
}
|
|
|
|
}
|
2014-03-02 03:53:37 +04:00
|
|
|
.navigate-left:after,
|
2014-03-02 03:41:20 +04:00
|
|
|
.push-left:after {
|
|
|
|
left: 15px;
|
|
|
|
content: '\e822';
|
|
|
|
}
|
2014-03-02 03:53:37 +04:00
|
|
|
.navigate-right:after,
|
|
|
|
.push-right:after{
|
2014-03-02 03:41:20 +04:00
|
|
|
right: 15px;
|
|
|
|
content: '\e826';
|
|
|
|
}
|