Advertisement
RyanJEarnshaw

Untitled

Sep 27th, 2016
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.05 KB | None | 0 0
  1. /*! jQuery.Flipster, v1.0.1 (built 2015-11-02) */
  2. .flipster {
  3. display: block;
  4. overflow-x: hidden;
  5. overflow-y: visible;
  6. position: relative;
  7. }
  8.  
  9. .flipster:focus {
  10. outline: none;
  11. }
  12.  
  13. .flipster__container,.flipster__item {
  14. margin: 0;
  15. padding: 0;
  16. list-style-type: none;
  17. position: relative;
  18. }
  19.  
  20. .flipster__container {
  21. display: block;
  22. white-space: nowrap;
  23. word-spacing: -.25em;
  24. transform-origin: 50% 50%;
  25. backface-visibility: hidden;
  26. }
  27.  
  28. .flipster__item {
  29. display: inline-block;
  30. white-space: normal;
  31. word-spacing: normal;
  32. vertical-align: bottom;
  33. }
  34.  
  35. .flipster--click .flipster__item--past,.flipster--click .flipster__item--future {
  36. cursor: pointer;
  37. }
  38.  
  39. .flipster__item img {
  40. max-width: 100%;
  41. }
  42.  
  43. .flipster__button {
  44. position: absolute;
  45. top: 50%;
  46. display: block;
  47. appearance: none;
  48. background: none;
  49. border: none;
  50. padding: 0;
  51. z-index: 999;
  52. cursor: pointer;
  53. font-size: 15px;
  54. opacity: .5;
  55. transition: opacity 500ms ease;
  56. margin: -1em 2em;
  57. }
  58.  
  59. .flipster__button svg {
  60. width: 2em;
  61. stroke: currentColor;
  62. fill: transparent;
  63. stroke-width: 3;
  64. stroke-linecap: round;
  65. }
  66.  
  67. .flipster__button:hover,.flipster__button:focus {
  68. opacity: 1;
  69. }
  70.  
  71. .flipster__button--prev {
  72. left: 0;
  73. }
  74.  
  75. .flipster__button--next {
  76. right: 0;
  77. }
  78.  
  79.  
  80. .flipster--coverflow .flipster__container,.flipster--coverflow .flipster__item,.flipster--coverflow .flipster__item__content {
  81. transition: all 350ms ease-in-out;
  82. transition-timing-function: cubic-bezier(.56,.12,.12,.98);
  83. }
  84.  
  85. .flipster--coverflow .flipster__item {
  86. perspective: 800px;
  87. }
  88.  
  89. .flipster--coverflow .flipster__container {
  90. padding-bottom: 5%;
  91. }
  92.  
  93. .flipster--coverflow .flipster__item__content {
  94. transform-origin: 50% 100%;
  95. box-reflect: below 0 -webkit-gradient(linear,left bottom,left top,color-stop(.05,rgba(255,255,255,0.12)),color-stop(.2,transparent));
  96. -webkit-box-reflect: below 0 -webkit-gradient(linear,left bottom,left top,color-stop(.05,rgba(255,255,255,0.12)),color-stop(.2,transparent));
  97. }
  98.  
  99. .flipster--coverflow .flipster__item__content img:only-child {
  100. display: block;
  101. }
  102.  
  103. .flipster--coverflow .flipster__item--past .flipster__item__content {
  104. transform-origin: 0 50%;
  105. transform: scale(.75) rotateY(55deg);
  106. }
  107.  
  108. .flipster--coverflow .flipster__item--future .flipster__item__content {
  109. transform-origin: 100% 50%;
  110. transform: scale(.75) rotateY(-55deg);
  111. }
  112.  
  113. .flipster--coverflow .flip-current .flipster__item__content {
  114. transform: rotateY(0deg);
  115. }
  116.  
  117. .flipster--flat .flipster__container,.flipster--flat .flipster__item,.flipster--flat .flipster__item__content {
  118. transition: all 400ms ease-in-out;
  119. }
  120.  
  121. .flipster--flat .flipster__item--past,.flipster--flat .flipster__item--future {
  122.  
  123. }
  124.  
  125. .flipster--flat .flipster__item--past .flipster__item__content {
  126. transform: scale(.75);
  127. }
  128.  
  129. .flipster--flat .flipster__item--future .flipster__item__content {
  130. transform: scale(.75);
  131. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement