lightslider.scss 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. /*! lightslider - v1.1.6 - 2016-10-25
  2. * https://github.com/sachinchoolur/lightslider
  3. * Copyright (c) 2016 Sachin N; Licensed MIT */
  4. /*! lightslider - v1.1.3 - 2015-04-14
  5. * https://github.com/sachinchoolur/lightslider
  6. * Copyright (c) 2015 Sachin N; Licensed MIT */
  7. /** /!!! core css Should not edit !!!/**/
  8. .lSSlideOuter {
  9. overflow: hidden;
  10. -webkit-touch-callout: none;
  11. -webkit-user-select: none;
  12. -khtml-user-select: none;
  13. -moz-user-select: none;
  14. -ms-user-select: none;
  15. user-select: none
  16. }
  17. .lightSlider:before, .lightSlider:after {
  18. content: " ";
  19. display: table;
  20. }
  21. .lightSlider {
  22. overflow: hidden;
  23. margin: 0;
  24. }
  25. .lSSlideWrapper {
  26. max-width: 100%;
  27. overflow: hidden;
  28. position: relative;
  29. }
  30. .lSSlideWrapper > .lightSlider:after {
  31. clear: both;
  32. }
  33. .lSSlideWrapper .lSSlide {
  34. -webkit-transform: translate(0px, 0px);
  35. -ms-transform: translate(0px, 0px);
  36. transform: translate(0px, 0px);
  37. -webkit-transition: all 1s;
  38. -webkit-transition-property: -webkit-transform, height;
  39. -moz-transition-property: -moz-transform, height;
  40. transition-property: transform, height;
  41. -webkit-transition-duration: inherit !important;
  42. transition-duration: inherit !important;
  43. -webkit-transition-timing-function: inherit !important;
  44. transition-timing-function: inherit !important;
  45. }
  46. .lSSlideWrapper .lSFade {
  47. position: relative;
  48. }
  49. .lSSlideWrapper .lSFade > * {
  50. position: absolute !important;
  51. top: 0;
  52. left: 0;
  53. z-index: 9;
  54. margin-right: 0;
  55. width: 100%;
  56. }
  57. .lSSlideWrapper.usingCss .lSFade > * {
  58. opacity: 0;
  59. -webkit-transition-delay: 0s;
  60. transition-delay: 0s;
  61. -webkit-transition-duration: inherit !important;
  62. transition-duration: inherit !important;
  63. -webkit-transition-property: opacity;
  64. transition-property: opacity;
  65. -webkit-transition-timing-function: inherit !important;
  66. transition-timing-function: inherit !important;
  67. }
  68. .lSSlideWrapper .lSFade > *.active {
  69. z-index: 10;
  70. }
  71. .lSSlideWrapper.usingCss .lSFade > *.active {
  72. opacity: 1;
  73. }
  74. /** /!!! End of core css Should not edit !!!/**/
  75. /* Pager */
  76. .lSSlideOuter .lSPager.lSpg {
  77. margin: 10px 0 0;
  78. padding: 0;
  79. text-align: center;
  80. position: absolute;
  81. padding: 0 10px;
  82. right: 0;
  83. bottom: 8px;
  84. background: #ebebeb;
  85. }
  86. .lSSlideOuter .lSPager.lSpg:before {
  87. content: '';
  88. display: block;
  89. position: absolute;
  90. width: 30px;
  91. left: -30px;
  92. top: 0;
  93. bottom: 0;
  94. background: -moz-linear-gradient(left, rgba(235, 235, 235, 0) 0%, rgba(235, 235, 235, 1) 100%);
  95. background: -webkit-linear-gradient(left, rgba(235, 235, 235, 0) 0%, rgba(235, 235, 235, 1) 100%);
  96. background: linear-gradient(to right, rgba(235, 235, 235, 0) 0%, rgba(235, 235, 235, 1) 100%);
  97. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ebebeb', endColorstr='#ebebeb', GradientType=1);
  98. }
  99. .lSSlideOuter .lSPager.lSpg > li {
  100. cursor: pointer;
  101. display: inline-block;
  102. padding: 0 3px;
  103. }
  104. .lSSlideOuter .lSPager.lSpg > li a {
  105. background-color: #d4d4d4;
  106. // border-radius: 30px;
  107. display: inline-block;
  108. height: 6px;
  109. overflow: hidden;
  110. text-indent: -999em;
  111. width: 6px;
  112. position: relative;
  113. z-index: 99;
  114. }
  115. .lSSlideOuter .lSPager.lSpg > li.active a {
  116. background-color: #3b434d;
  117. }
  118. .lSSlideOuter .lSPager.lSpg > li:hover a {
  119. background-color: #eb914e;
  120. }
  121. .lSSlideOuter .media {
  122. opacity: 0.8;
  123. }
  124. .lSSlideOuter .media.active {
  125. opacity: 1;
  126. }
  127. /* End of pager */
  128. /** Gallery */
  129. .lSSlideOuter .lSPager.lSGallery {
  130. list-style: none outside none;
  131. padding-left: 0;
  132. margin: 0;
  133. overflow: hidden;
  134. transform: translate3d(0px, 0px, 0px);
  135. -moz-transform: translate3d(0px, 0px, 0px);
  136. -ms-transform: translate3d(0px, 0px, 0px);
  137. -webkit-transform: translate3d(0px, 0px, 0px);
  138. -o-transform: translate3d(0px, 0px, 0px);
  139. -webkit-transition-property: -webkit-transform;
  140. -moz-transition-property: -moz-transform;
  141. -webkit-touch-callout: none;
  142. -webkit-user-select: none;
  143. -khtml-user-select: none;
  144. -moz-user-select: none;
  145. -ms-user-select: none;
  146. user-select: none;
  147. }
  148. .lSSlideOuter .lSPager.lSGallery li {
  149. overflow: hidden;
  150. -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
  151. transition: border-radius 0.12s linear 0s 0.35s linear 0s;
  152. }
  153. .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
  154. border-radius: 5px;
  155. }
  156. .lSSlideOuter .lSPager.lSGallery img {
  157. display: block;
  158. height: auto;
  159. max-width: 100%;
  160. }
  161. .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
  162. content: " ";
  163. display: table;
  164. }
  165. .lSSlideOuter .lSPager.lSGallery:after {
  166. clear: both;
  167. }
  168. /* End of Gallery*/
  169. /* slider actions */
  170. .lSAction > a {
  171. width: 32px;
  172. display: block;
  173. top: 50%;
  174. height: 32px;
  175. background-image: url('../img/controls.png');
  176. cursor: pointer;
  177. position: absolute;
  178. z-index: 99;
  179. margin-top: -16px;
  180. opacity: 0.5;
  181. -webkit-transition: opacity 0.35s linear 0s;
  182. transition: opacity 0.35s linear 0s;
  183. }
  184. .lSAction > a:hover {
  185. opacity: 1;
  186. }
  187. .lSAction > .lSPrev {
  188. background-position: 0 0;
  189. left: 10px;
  190. }
  191. .lSAction > .lSNext {
  192. background-position: -32px 0;
  193. right: 10px;
  194. }
  195. .lSAction > a.disabled {
  196. pointer-events: none;
  197. }
  198. .cS-hidden {
  199. height: 1px;
  200. opacity: 0;
  201. filter: alpha(opacity=0);
  202. overflow: hidden;
  203. }
  204. /* vertical */
  205. .lSSlideOuter.vertical {
  206. position: relative;
  207. }
  208. .lSSlideOuter.vertical.noPager {
  209. padding-right: 0px !important;
  210. }
  211. .lSSlideOuter.vertical .lSGallery {
  212. position: absolute !important;
  213. right: 0;
  214. top: 0;
  215. }
  216. .lSSlideOuter.vertical .lightSlider > * {
  217. width: 100% !important;
  218. max-width: none !important;
  219. }
  220. /* vertical controlls */
  221. .lSSlideOuter.vertical .lSAction > a {
  222. left: 50%;
  223. margin-left: -14px;
  224. margin-top: 0;
  225. }
  226. .lSSlideOuter.vertical .lSAction > .lSNext {
  227. background-position: 31px -31px;
  228. bottom: 10px;
  229. top: auto;
  230. }
  231. .lSSlideOuter.vertical .lSAction > .lSPrev {
  232. background-position: 0 -31px;
  233. bottom: auto;
  234. top: 10px;
  235. }
  236. /* vertical */
  237. /* Rtl */
  238. .lSSlideOuter.lSrtl {
  239. direction: rtl;
  240. }
  241. .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
  242. padding-left: 0;
  243. list-style: none outside none;
  244. }
  245. .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
  246. padding-right: 0;
  247. }
  248. .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li {
  249. float: left;
  250. }
  251. .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li {
  252. float: right !important;
  253. }
  254. /* Rtl */
  255. @-webkit-keyframes rightEnd {
  256. 0% {
  257. left: 0;
  258. }
  259. 50% {
  260. left: -15px;
  261. }
  262. 100% {
  263. left: 0;
  264. }
  265. }
  266. @keyframes rightEnd {
  267. 0% {
  268. left: 0;
  269. }
  270. 50% {
  271. left: -15px;
  272. }
  273. 100% {
  274. left: 0;
  275. }
  276. }
  277. @-webkit-keyframes topEnd {
  278. 0% {
  279. top: 0;
  280. }
  281. 50% {
  282. top: -15px;
  283. }
  284. 100% {
  285. top: 0;
  286. }
  287. }
  288. @keyframes topEnd {
  289. 0% {
  290. top: 0;
  291. }
  292. 50% {
  293. top: -15px;
  294. }
  295. 100% {
  296. top: 0;
  297. }
  298. }
  299. @-webkit-keyframes leftEnd {
  300. 0% {
  301. left: 0;
  302. }
  303. 50% {
  304. left: 15px;
  305. }
  306. 100% {
  307. left: 0;
  308. }
  309. }
  310. @keyframes leftEnd {
  311. 0% {
  312. left: 0;
  313. }
  314. 50% {
  315. left: 15px;
  316. }
  317. 100% {
  318. left: 0;
  319. }
  320. }
  321. @-webkit-keyframes bottomEnd {
  322. 0% {
  323. bottom: 0;
  324. }
  325. 50% {
  326. bottom: -15px;
  327. }
  328. 100% {
  329. bottom: 0;
  330. }
  331. }
  332. @keyframes bottomEnd {
  333. 0% {
  334. bottom: 0;
  335. }
  336. 50% {
  337. bottom: -15px;
  338. }
  339. 100% {
  340. bottom: 0;
  341. }
  342. }
  343. .lSSlideOuter .rightEnd {
  344. -webkit-animation: rightEnd 0.3s;
  345. animation: rightEnd 0.3s;
  346. position: relative;
  347. }
  348. .lSSlideOuter .leftEnd {
  349. -webkit-animation: leftEnd 0.3s;
  350. animation: leftEnd 0.3s;
  351. position: relative;
  352. }
  353. .lSSlideOuter.vertical .rightEnd {
  354. -webkit-animation: topEnd 0.3s;
  355. animation: topEnd 0.3s;
  356. position: relative;
  357. }
  358. .lSSlideOuter.vertical .leftEnd {
  359. -webkit-animation: bottomEnd 0.3s;
  360. animation: bottomEnd 0.3s;
  361. position: relative;
  362. }
  363. .lSSlideOuter.lSrtl .rightEnd {
  364. -webkit-animation: leftEnd 0.3s;
  365. animation: leftEnd 0.3s;
  366. position: relative;
  367. }
  368. .lSSlideOuter.lSrtl .leftEnd {
  369. -webkit-animation: rightEnd 0.3s;
  370. animation: rightEnd 0.3s;
  371. position: relative;
  372. }
  373. /*/ GRab cursor */
  374. .lightSlider.lsGrab > * {
  375. cursor: -webkit-grab;
  376. cursor: -moz-grab;
  377. cursor: -o-grab;
  378. cursor: -ms-grab;
  379. cursor: grab;
  380. }
  381. .lightSlider.lsGrabbing > * {
  382. cursor: move;
  383. cursor: -webkit-grabbing;
  384. cursor: -moz-grabbing;
  385. cursor: -o-grabbing;
  386. cursor: -ms-grabbing;
  387. cursor: grabbing;
  388. }