slick.scss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /* Slider */
  2. .slick-slider {
  3. position: relative;
  4. display: block;
  5. box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. -webkit-touch-callout: none;
  8. -webkit-user-select: none;
  9. -khtml-user-select: none;
  10. -moz-user-select: none;
  11. -ms-user-select: none;
  12. user-select: none;
  13. -ms-touch-action: none;
  14. touch-action: none;
  15. -webkit-tap-highlight-color: rgba(0,0,0,0);
  16. }
  17. .slick-list {
  18. position: relative;
  19. overflow: hidden;
  20. display: block;
  21. margin: 0;
  22. padding: 0;
  23. &:focus {
  24. outline: none;
  25. }
  26. .slick-loading & {
  27. background: #fff url(./ajax-loader.gif) center center no-repeat;
  28. }
  29. &.dragging {
  30. cursor: pointer;
  31. cursor: hand;
  32. }
  33. }
  34. .slick-slider .slick-list,
  35. .slick-track,
  36. .slick-slide,
  37. .slick-slide img {
  38. -webkit-transform: translate3d(0, 0, 0);
  39. -moz-transform: translate3d(0, 0, 0);
  40. -ms-transform: translate3d(0, 0, 0);
  41. -o-transform: translate3d(0, 0, 0);
  42. transform: translate3d(0, 0, 0);
  43. }
  44. .slick-track {
  45. position: relative;
  46. left: 0;
  47. top: 0;
  48. display: block;
  49. zoom: 1;
  50. &:before,
  51. &:after {
  52. content: "";
  53. display: table;
  54. }
  55. &:after {
  56. clear: both;
  57. }
  58. .slick-loading & {
  59. visibility: hidden;
  60. }
  61. }
  62. .slick-slide {
  63. float: left;
  64. height: 100%;
  65. min-height: 1px;
  66. img {
  67. display: block;
  68. &.slick-loading {
  69. background: white url(./ajax-loader.gif) center center no-repeat;
  70. padding-bottom: 100%;
  71. }
  72. }
  73. display: none;
  74. &.dragging img {
  75. pointer-events: none;
  76. }
  77. .slick-initialized & {
  78. display: block;
  79. }
  80. .slick-loading & {
  81. visibility: hidden;
  82. }
  83. .slick-vertical & {
  84. display: block;
  85. height: auto;
  86. border: 1px solid transparent;
  87. }
  88. }
  89. /* Icons */
  90. @charset"UTF-8";
  91. @font-face {
  92. font-family:"slick";
  93. src:url("./fonts/slick.eot");
  94. src:url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  95. font-weight: normal;
  96. font-style: normal;
  97. }
  98. /* Arrows */
  99. .slick-prev,
  100. .slick-next {
  101. position: absolute;
  102. display: block;
  103. height: 20px;
  104. width: 20px;
  105. line-height: 0;
  106. font-size: 0;
  107. cursor: pointer;
  108. background: transparent;
  109. color: transparent;
  110. top: 50%;
  111. margin-top: -10px;
  112. padding: 0;
  113. border: none;
  114. outline: none;
  115. &:focus {
  116. outline: none;
  117. }
  118. &.slick-disabled:before {
  119. opacity: 0.25;
  120. }
  121. }
  122. .slick-prev:before, .slick-next:before {
  123. font-family:"slick";
  124. font-size: 20px;
  125. line-height: 1;
  126. color: white;
  127. opacity: 0.85;
  128. -webkit-font-smoothing: antialiased;
  129. -moz-osx-font-smoothing: grayscale;
  130. }
  131. .slick-prev {
  132. left: -25px;
  133. &:before {
  134. content:'\8592';
  135. }
  136. }
  137. .slick-next {
  138. right: -25px;
  139. &:before {
  140. content:'\8594';
  141. }
  142. }
  143. /* Dots */
  144. .slick-slider {
  145. margin-bottom: 30px;
  146. }
  147. .slick-dots {
  148. position: absolute;
  149. bottom: -45px;
  150. list-style: none;
  151. display: block;
  152. text-align: center;
  153. padding: 0px;
  154. width: 100%;
  155. li {
  156. position: relative;
  157. display: inline-block;
  158. height: 20px;
  159. width: 20px;
  160. margin: 0px 5px;
  161. padding: 0px;
  162. cursor: pointer;
  163. button {
  164. border: 0;
  165. background: transparent;
  166. display: block;
  167. height: 20px;
  168. width: 20px;
  169. outline: none;
  170. line-height: 0;
  171. font-size: 0;
  172. color: transparent;
  173. padding: 5px;
  174. cursor: pointer;
  175. outline: none;
  176. &:focus {
  177. outline: none;
  178. }
  179. &:before {
  180. position: absolute;
  181. top: 0;
  182. left: 0;
  183. content:'\8226';
  184. width: 20px;
  185. height: 20px;
  186. font-family:"slick";
  187. font-size: 6px;
  188. line-height: 20px;
  189. text-align: center;
  190. color: black;
  191. opacity: 0.25;
  192. -webkit-font-smoothing: antialiased;
  193. -moz-osx-font-smoothing: grayscale;
  194. }
  195. }
  196. &.slick-active button:before {
  197. opacity: 0.75;
  198. }
  199. }
  200. }