owl.carousel.less 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /*
  2. * Owl Carousel - Core
  3. */
  4. .owl-carousel {
  5. display: none;
  6. width: 100%;
  7. -webkit-tap-highlight-color: transparent;
  8. /* position relative and z-index fix webkit rendering fonts issue */
  9. position: relative;
  10. z-index: 1; }
  11. .owl-carousel .owl-stage {
  12. position: relative;
  13. -ms-touch-action: pan-Y;
  14. touch-action: manipulation;
  15. -moz-backface-visibility: hidden;
  16. /* fix firefox animation glitch */ }
  17. .owl-carousel .owl-stage:after {
  18. content: ".";
  19. display: block;
  20. clear: both;
  21. visibility: hidden;
  22. line-height: 0;
  23. height: 0; }
  24. .owl-carousel .owl-stage-outer {
  25. position: relative;
  26. overflow: hidden;
  27. /* fix for flashing background */
  28. -webkit-transform: translate3d(0px, 0px, 0px); }
  29. .owl-carousel .owl-wrapper,
  30. .owl-carousel .owl-item {
  31. -webkit-backface-visibility: hidden;
  32. -moz-backface-visibility: hidden;
  33. -ms-backface-visibility: hidden;
  34. -webkit-transform: translate3d(0, 0, 0);
  35. -moz-transform: translate3d(0, 0, 0);
  36. -ms-transform: translate3d(0, 0, 0); }
  37. .owl-carousel .owl-item {
  38. position: relative;
  39. min-height: 1px;
  40. float: left;
  41. -webkit-backface-visibility: hidden;
  42. -webkit-tap-highlight-color: transparent;
  43. -webkit-touch-callout: none; }
  44. .owl-carousel .owl-item img {
  45. display: block;
  46. width: 100%; }
  47. .owl-carousel .owl-nav.disabled,
  48. .owl-carousel .owl-dots.disabled {
  49. display: none; }
  50. .owl-carousel .owl-nav .owl-prev,
  51. .owl-carousel .owl-nav .owl-next,
  52. .owl-carousel .owl-dot {
  53. cursor: pointer;
  54. -webkit-user-select: none;
  55. -khtml-user-select: none;
  56. -moz-user-select: none;
  57. -ms-user-select: none;
  58. user-select: none; }
  59. .owl-carousel .owl-nav button.owl-prev,
  60. .owl-carousel .owl-nav button.owl-next,
  61. .owl-carousel button.owl-dot {
  62. background: none;
  63. color: inherit;
  64. border: none;
  65. padding: 0 !important;
  66. font: inherit; }
  67. .owl-carousel.owl-loaded {
  68. display: block; }
  69. .owl-carousel.owl-loading {
  70. opacity: 0;
  71. display: block; }
  72. .owl-carousel.owl-hidden {
  73. opacity: 0; }
  74. .owl-carousel.owl-refresh .owl-item {
  75. visibility: hidden; }
  76. .owl-carousel.owl-drag .owl-item {
  77. -ms-touch-action: pan-y;
  78. touch-action: pan-y;
  79. -webkit-user-select: none;
  80. -moz-user-select: none;
  81. -ms-user-select: none;
  82. user-select: none; }
  83. .owl-carousel.owl-grab {
  84. cursor: move;
  85. cursor: grab; }
  86. .owl-carousel.owl-rtl {
  87. direction: rtl; }
  88. .owl-carousel.owl-rtl .owl-item {
  89. float: right; }
  90. /* No Js */
  91. .no-js .owl-carousel {
  92. display: block; }
  93. /*
  94. * Owl Carousel - Animate Plugin
  95. */
  96. .owl-carousel .animated {
  97. animation-duration: 1000ms;
  98. animation-fill-mode: both; }
  99. .owl-carousel .owl-animated-in {
  100. z-index: 0; }
  101. .owl-carousel .owl-animated-out {
  102. z-index: 1; }
  103. .owl-carousel .fadeOut {
  104. animation-name: fadeOut; }
  105. @keyframes fadeOut {
  106. 0% {
  107. opacity: 1; }
  108. 100% {
  109. opacity: 0; } }
  110. /*
  111. * Owl Carousel - Auto Height Plugin
  112. */
  113. .owl-height {
  114. transition: height 500ms ease-in-out; }
  115. /*
  116. * Owl Carousel - Lazy Load Plugin
  117. */
  118. .owl-carousel .owl-item {
  119. /**
  120. This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  121. calculation of the height of the owl-item that breaks page layouts
  122. */ }
  123. .owl-carousel .owl-item .owl-lazy {
  124. opacity: 0;
  125. transition: opacity 400ms ease; }
  126. .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
  127. max-height: 0; }
  128. .owl-carousel .owl-item img.owl-lazy {
  129. transform-style: preserve-3d; }
  130. /*
  131. * Owl Carousel - Video Plugin
  132. */
  133. .owl-carousel .owl-video-wrapper {
  134. position: relative;
  135. height: 100%;
  136. background: #000; }
  137. .owl-carousel .owl-video-play-icon {
  138. position: absolute;
  139. height: 80px;
  140. width: 80px;
  141. left: 50%;
  142. top: 50%;
  143. margin-left: -40px;
  144. margin-top: -40px;
  145. background: url("../../images/owl.video.play.png") no-repeat;
  146. cursor: pointer;
  147. z-index: 1;
  148. -webkit-backface-visibility: hidden;
  149. transition: transform 100ms ease; }
  150. .owl-carousel .owl-video-play-icon:hover {
  151. -ms-transform: scale(1.3, 1.3);
  152. transform: scale(1.3, 1.3); }
  153. .owl-carousel .owl-video-playing .owl-video-tn,
  154. .owl-carousel .owl-video-playing .owl-video-play-icon {
  155. display: none; }
  156. .owl-carousel .owl-video-tn {
  157. opacity: 0;
  158. height: 100%;
  159. background-position: center center;
  160. background-repeat: no-repeat;
  161. background-size: contain;
  162. transition: opacity 400ms ease; }
  163. .owl-carousel .owl-video-frame {
  164. position: relative;
  165. z-index: 1;
  166. height: 100%;
  167. width: 100%; }