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('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
|
---|
22 | }
|
---|
23 |
|
---|
24 | /* Arrows */
|
---|
25 | .slick-prev,
|
---|
26 | .slick-next {
|
---|
27 | position: absolute;
|
---|
28 | display: block;
|
---|
29 | height: 20px;
|
---|
30 | width: 20px;
|
---|
31 | line-height: 0px;
|
---|
32 | font-size: 0px;
|
---|
33 | cursor: pointer;
|
---|
34 | background: transparent;
|
---|
35 | color: transparent;
|
---|
36 | top: 50%;
|
---|
37 | -webkit-transform: translate(0, -50%);
|
---|
38 | -ms-transform: translate(0, -50%);
|
---|
39 | transform: translate(0, -50%);
|
---|
40 | padding: 0;
|
---|
41 | border: none;
|
---|
42 | outline: none;
|
---|
43 | &:hover, &:focus {
|
---|
44 | outline: none;
|
---|
45 | background: transparent;
|
---|
46 | color: transparent;
|
---|
47 | &:before {
|
---|
48 | opacity: @slick-opacity-on-hover;
|
---|
49 | }
|
---|
50 | }
|
---|
51 | &.slick-disabled:before {
|
---|
52 | opacity: @slick-opacity-not-active;
|
---|
53 | }
|
---|
54 | }
|
---|
55 |
|
---|
56 | .slick-prev:before, .slick-next:before {
|
---|
57 | font-family: @slick-font-family;
|
---|
58 | font-size: 20px;
|
---|
59 | line-height: 1;
|
---|
60 | color: @slick-arrow-color;
|
---|
61 | opacity: @slick-opacity-default;
|
---|
62 | -webkit-font-smoothing: antialiased;
|
---|
63 | -moz-osx-font-smoothing: grayscale;
|
---|
64 |
|
---|
65 | & when ( @slick-font-family = 'slick' ) {
|
---|
66 | /* Icons */
|
---|
67 | @font-face {
|
---|
68 | font-family: 'slick';
|
---|
69 | font-weight: normal;
|
---|
70 | font-style: normal;
|
---|
71 | src: url('@{slick-font-path}slick.eot');
|
---|
72 | 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');
|
---|
73 | }
|
---|
74 | }
|
---|
75 | }
|
---|
76 |
|
---|
77 | .slick-prev {
|
---|
78 | left: -25px;
|
---|
79 | [dir="rtl"] & {
|
---|
80 | left: auto;
|
---|
81 | right: -25px;
|
---|
82 | }
|
---|
83 | &:before {
|
---|
84 | content: @slick-prev-character;
|
---|
85 | [dir="rtl"] & {
|
---|
86 | content: @slick-next-character;
|
---|
87 | }
|
---|
88 | }
|
---|
89 | }
|
---|
90 |
|
---|
91 | .slick-next {
|
---|
92 | right: -25px;
|
---|
93 | [dir="rtl"] & {
|
---|
94 | left: -25px;
|
---|
95 | right: auto;
|
---|
96 | }
|
---|
97 | &:before {
|
---|
98 | content: @slick-next-character;
|
---|
99 | [dir="rtl"] & {
|
---|
100 | content: @slick-prev-character;
|
---|
101 | }
|
---|
102 | }
|
---|
103 | }
|
---|
104 |
|
---|
105 | /* Dots */
|
---|
106 |
|
---|
107 | .slick-dotted .slick-slider {
|
---|
108 | margin-bottom: 30px;
|
---|
109 | }
|
---|
110 |
|
---|
111 | .slick-dots {
|
---|
112 | position: absolute;
|
---|
113 | bottom: -25px;
|
---|
114 | list-style: none;
|
---|
115 | display: block;
|
---|
116 | text-align: center;
|
---|
117 | padding: 0;
|
---|
118 | margin: 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 | }
|
---|