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