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