push.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. //
  2. // Push styles (to be used with push.js)
  3. // --------------------------------------------------
  4. .content {
  5. // Fade animation
  6. &.fade {
  7. left: 0;
  8. opacity: 0;
  9. &.in {
  10. opacity: 1;
  11. }
  12. }
  13. // Slide animation
  14. &.sliding {
  15. z-index: 2;
  16. -webkit-transition: -webkit-transform .4s;
  17. -moz-transition: -moz-transform .4s;
  18. transition: transform .4s;
  19. @include transform(translate3d(0, 0, 0));
  20. &.left {
  21. z-index: 1;
  22. @include transform(translate3d(-100%, 0, 0));
  23. }
  24. &.right {
  25. z-index: 3;
  26. @include transform(translate3d(100%, 0, 0));
  27. }
  28. }
  29. }
  30. // Add chevrons to elements
  31. .navigate-left,
  32. .navigate-right,
  33. .push-left,
  34. .push-right {
  35. &:after {
  36. position: absolute;
  37. top: 50%;
  38. display: inline-block;
  39. font-family: Ratchicons;
  40. font-size: inherit;
  41. line-height: 1;
  42. color: #bbb;
  43. text-decoration: none;
  44. -webkit-font-smoothing: antialiased;
  45. @include transform(translateY(-50%));
  46. }
  47. }
  48. .navigate-left:after,
  49. .push-left:after {
  50. left: 15px;
  51. content: '\e822';
  52. }
  53. .navigate-right:after,
  54. .push-right:after{
  55. right: 15px;
  56. content: '\e826';
  57. }