slick-theme.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. @charset "UTF-8";
  2. // Default Variables
  3. @slick-font-path: "./fonts/";
  4. @slick-font-family: "slick";
  5. @slick-loader-path: "./";
  6. @slick-arrow-color: white;
  7. @slick-dot-color: black;
  8. @slick-dot-color-active: @slick-dot-color;
  9. @slick-prev-character: "←";
  10. @slick-next-character: "→";
  11. @slick-dot-character: "•";
  12. @slick-dot-size: 6px;
  13. @slick-opacity-default: 0.75;
  14. @slick-opacity-on-hover: 1;
  15. @slick-opacity-not-active: 0.25;
  16. /* Slider */
  17. .slick-loading .slick-list{
  18. background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
  19. }
  20. /* Arrows */
  21. .slick-prev,
  22. .slick-next {
  23. position: absolute;
  24. display: block;
  25. height: 20px;
  26. width: 20px;
  27. line-height: 0px;
  28. font-size: 0px;
  29. cursor: pointer;
  30. background: transparent;
  31. color: transparent;
  32. top: 50%;
  33. -webkit-transform: translate(0, -50%);
  34. -ms-transform: translate(0, -50%);
  35. transform: translate(0, -50%);
  36. padding: 0;
  37. border: none;
  38. outline: none;
  39. &:hover, &:focus {
  40. outline: none;
  41. background: transparent;
  42. color: transparent;
  43. &:before {
  44. opacity: @slick-opacity-on-hover;
  45. }
  46. }
  47. &.slick-disabled:before {
  48. opacity: @slick-opacity-not-active;
  49. }
  50. }
  51. .slick-prev:before, .slick-next:before {
  52. font-family: @slick-font-family;
  53. font-size: 20px;
  54. line-height: 1;
  55. color: @slick-arrow-color;
  56. opacity: @slick-opacity-default;
  57. -webkit-font-smoothing: antialiased;
  58. -moz-osx-font-smoothing: grayscale;
  59. & when ( @slick-font-family = 'slick' ) {
  60. /* Icons */
  61. @font-face {
  62. font-family: 'slick';
  63. font-weight: normal;
  64. font-style: normal;
  65. src: url('@{slick-font-path}slick.eot');
  66. src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
  67. }
  68. }
  69. }
  70. .slick-prev {
  71. left: -25px;
  72. [dir="rtl"] & {
  73. left: auto;
  74. right: -25px;
  75. }
  76. &:before {
  77. content: @slick-prev-character;
  78. [dir="rtl"] & {
  79. content: @slick-next-character;
  80. }
  81. }
  82. }
  83. .slick-next {
  84. right: -25px;
  85. [dir="rtl"] & {
  86. left: -25px;
  87. right: auto;
  88. }
  89. &:before {
  90. content: @slick-next-character;
  91. [dir="rtl"] & {
  92. content: @slick-prev-character;
  93. }
  94. }
  95. }
  96. /* Dots */
  97. .slick-dotted .slick-slider {
  98. margin-bottom: 30px;
  99. }
  100. .slick-dots {
  101. position: absolute;
  102. bottom: -25px;
  103. list-style: none;
  104. display: block;
  105. text-align: center;
  106. padding: 0;
  107. margin: 0;
  108. width: 100%;
  109. li {
  110. position: relative;
  111. display: inline-block;
  112. height: 20px;
  113. width: 20px;
  114. margin: 0 5px;
  115. padding: 0;
  116. cursor: pointer;
  117. button {
  118. border: 0;
  119. background: transparent;
  120. display: block;
  121. height: 20px;
  122. width: 20px;
  123. outline: none;
  124. line-height: 0px;
  125. font-size: 0px;
  126. color: transparent;
  127. padding: 5px;
  128. cursor: pointer;
  129. &:hover, &:focus {
  130. outline: none;
  131. &:before {
  132. opacity: @slick-opacity-on-hover;
  133. }
  134. }
  135. &:before {
  136. position: absolute;
  137. top: 0;
  138. left: 0;
  139. content: @slick-dot-character;
  140. width: 20px;
  141. height: 20px;
  142. font-family: @slick-font-family;
  143. font-size: @slick-dot-size;
  144. line-height: 20px;
  145. text-align: center;
  146. color: @slick-dot-color;
  147. opacity: @slick-opacity-not-active;
  148. -webkit-font-smoothing: antialiased;
  149. -moz-osx-font-smoothing: grayscale;
  150. }
  151. }
  152. &.slick-active button:before {
  153. color: @slick-dot-color-active;
  154. opacity: @slick-opacity-default;
  155. }
  156. }
  157. }