UNPKG

8.72 kBSCSSView Raw
1@charset "UTF-8";
2
3@import "../core/index-noreset.scss";
4@import "scss/mixin";
5@import "scss/variable";
6
7/* Slider */
8/* -------------------------------------- */
9
10#{$slick-prefix} {
11 @include box-sizing;
12
13 position: relative;
14 display: block;
15 -webkit-touch-callout: none;
16 user-select: none;
17 -ms-touch-action: pan-y;
18 touch-action: pan-y;
19 -webkit-tap-highlight-color: transparent;
20
21 &-initialized {
22 #{$slick-prefix}-slide {
23 display: block;
24 }
25 }
26
27 &-list {
28 position: relative;
29 overflow: hidden;
30 display: block;
31 margin: 0;
32 padding: 0;
33 transform: translate3d(0, 0, 0);
34
35 &:focus {
36 outline: none;
37 }
38
39 &.dragging {
40 cursor: pointer;
41 cursor: hand;
42 }
43 }
44
45 &-track {
46 position: relative;
47 top: 0;
48 left: 0;
49 display: block;
50 transform: translate3d(0, 0, 0);
51 }
52
53 &-slide {
54 float: left;
55 height: 100%;
56 min-height: 1px;
57 outline: 0;
58 transition: all $motion-duration-immediately $motion-linear;
59
60 #{$slick-prefix}[dir="rtl"] & {
61 float: right;
62 }
63
64 img {
65 display: block;
66 }
67 }
68
69 &-arrow {
70 display: block;
71 position: absolute;
72 cursor: pointer;
73 text-align: center;
74 transition: all $motion-duration-immediately $motion-linear;
75
76 /* prev/next 按钮不同位置下的外观 */
77 &.inner {
78 @include slick-arrow-statement(
79 $slick-arrow-icon-color-normal,
80 $slick-arrow-icon-color-hover,
81 $slick-arrow-icon-color-disabled,
82 $slick-arrow-bg-color-normal,
83 $slick-arrow-bg-color-hover,
84 $slick-arrow-bg-color-disabled,
85 $slick-arrow-bg-opacity-normal,
86 $slick-arrow-bg-opacity-hover,
87 $slick-arrow-bg-opacity-disabled
88 );
89 }
90
91 &.outer {
92 @include slick-arrow-statement(
93 $slick-arrow-icon-color-normal-outer,
94 $slick-arrow-icon-color-hover-outer,
95 $slick-arrow-icon-color-disabled-outer,
96 $slick-arrow-bg-color-normal-outer,
97 $slick-arrow-bg-color-hover-outer,
98 $slick-arrow-bg-color-disabled-outer,
99 $slick-arrow-bg-opacity-normal-outer,
100 $slick-arrow-bg-opacity-hover-outer,
101 $slick-arrow-bg-opacity-disabled-outer
102 );
103 border-radius: $slick-arrow-corner-radius-outer;
104 }
105 &.disabled {
106 cursor: not-allowed;
107 }
108 }
109
110 &-dots {
111 display: block;
112 position: absolute;
113 margin: 0;
114 padding: 0;
115
116 &-item {
117 position: relative;
118 display: inline-block;
119 cursor: pointer;
120
121 button {
122 cursor: pointer;
123 border-width: $slick-dots-border-width;
124 border-color: rgba(get-compiling-value($slick-dots-border-color-normal), get-compiling-value($slick-dots-border-opacity-normal));
125 border-style: solid;
126 outline: none;
127 padding: 0;
128 height: $slick-dots-height;
129 width: $slick-dots-width;
130 border-radius: $slick-dots-border-radius;
131 background: rgba(get-compiling-value($slick-dots-background-color-normal), get-compiling-value($slick-dots-background-opacity-normal));
132
133 &:focus,
134 &:hover {
135 background-color: rgba(get-compiling-value($slick-dots-background-color-hover), get-compiling-value($slick-dots-background-opacity-hover));
136 /* border-width: $slick-dots-border-width-hover; */
137 border-color: rgba(get-compiling-value($slick-dots-border-color-hover), get-compiling-value($slick-dots-border-opacity-hover));
138 }
139 }
140
141 &.active button {
142 background: rgba(get-compiling-value($slick-dots-background-color-selected), get-compiling-value($slick-dots-background-opacity-selected));
143 /* border-width: $slick-dots-border-width-selected; */
144 border-color: rgba(get-compiling-value($slick-dots-border-color-selected), get-compiling-value($slick-dots-border-opacity-selected));
145 animation: zoom .3s cubic-bezier(.86, 0, .07, 1);
146 }
147 }
148
149 /* dots 位于水平位置 */
150 &.hoz {
151 @include slick-dots-position(
152 100%,
153 $slick-dots-position-bottom,
154 'hoz'
155 );
156 text-align: center;
157
158 #{$slick-prefix}-dots-item {
159 margin: 0 $slick-dots-margin-lr;
160 }
161 }
162
163 /* dots 位于右侧垂直位置 */
164 &.ver {
165 @include slick-dots-position(
166 calc(#{$slick-dots-width} + 4px * 2),
167 $slick-dots-position-right,
168 'ver'
169 );
170
171 display: flex;
172 justify-content: center;
173 flex-direction: column;
174
175 #{$slick-prefix}-dots-item {
176 margin: $slick-dots-margin-tb 0;
177 }
178 }
179 }
180
181 /* 水平滑动 */
182 &#{$slick-prefix}-hoz {
183
184 &#{$slick-prefix}-outer {
185 padding: 0 $slick-track-padding-lr;
186 }
187
188 #{$slick-prefix}-arrow {
189 &.medium {
190 @include slick-arrow-size($slick-arrow-width-m, $slick-arrow-height-m, $slick-arrow-icon-m);
191 }
192
193 &.medium.inner {
194 @include slick-arrow-position-hoz(calc((100% - #{$slick-arrow-height-m}) / 2), 0, null, 0);
195 }
196
197 &.medium.outer {
198 @include slick-arrow-position-hoz(
199 calc((100% - #{$slick-arrow-height-m}) / 2), // top
200 calc(0px - #{$slick-arrow-position-lr-m}), // right
201 null, // bottom
202 calc(0px - #{$slick-arrow-position-lr-m}) // left
203 );
204 }
205
206 &.large {
207 @include slick-arrow-size($slick-arrow-width-l, $slick-arrow-height-l, $slick-arrow-icon-l);
208 }
209
210 &.large.inner {
211 @include slick-arrow-position-hoz(calc((100% - #{$slick-arrow-height-l}) / 2), 0, null, 0);
212 }
213
214 &.large.outer {
215 @include slick-arrow-position-hoz(
216 calc((100% - #{$slick-arrow-height-l}) / 2),
217 calc(0px - #{$slick-arrow-position-lr-l}),
218 null,
219 calc(0px - #{$slick-arrow-position-lr-l})
220 );
221 }
222 }
223 }
224
225 /* 垂直滑动 */
226 &#{$slick-prefix}-ver {
227
228 &#{$slick-prefix}-outer {
229 padding: $slick-ver-track-padding-tb 0;
230 }
231
232 #{$slick-prefix} {
233 &-slide {
234 display: block;
235 height: auto;
236 /* border: $slick-ver-slide-border-width solid transparent; */
237 }
238
239 &-arrow {
240 /* size medium */
241 &.medium {
242 @include slick-arrow-size($slick-ver-arrow-width-m, $slick-ver-arrow-height-m, $slick-arrow-icon-m);
243 }
244
245 /* size medium & position inner */
246 &.medium.inner {
247 @include slick-arrow-position-ver(0, null, 0, calc((100% - #{$slick-ver-arrow-width-m}) / 2));
248 }
249
250 /* size medium & position outer */
251 &.medium.outer {
252 @include slick-arrow-position-ver(calc(0px - #{$slick-ver-arrow-position-tb-m}), null, calc(0px - #{$slick-ver-arrow-position-tb-m}), calc((100% - #{$slick-ver-arrow-width-m}) / 2));
253 }
254
255 /* size large */
256 &.large {
257 @include slick-arrow-size($slick-ver-arrow-width-l, $slick-ver-arrow-height-l, $slick-arrow-icon-l);
258 }
259
260 /* size large & position inner */
261 &.large.inner {
262 @include slick-arrow-position-ver(0, null, 0, calc((100% - #{$slick-ver-arrow-width-l}) / 2));
263 }
264
265 /* size large & position outer */
266 &.large.outer {
267 @include slick-arrow-position-ver(calc(0px - #{$slick-ver-arrow-position-tb-l}), null, calc(0px - #{$slick-ver-arrow-position-tb-l}), calc((100% - #{$slick-ver-arrow-width-l}) / 2));
268 }
269 }
270 }
271 }
272}