slick-theme.scss 4.6 KB

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