/
navigation.less
73 lines (72 loc) · 1.65 KB
/
navigation.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
@length: length(@colors);
.looper( 1 );
.looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
@navPair: extract(@colors, @index);
@navColorName: extract(@navPair, 1);
@navColorValue: extract(@navPair, 2);
@ruleset();
.looper( @index + 1 );
}
}
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0 - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
&.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
&:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
&:after {
content: 'prev';
}
left: 10px;
right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
&:after {
content: 'next';
}
right: 10px;
left: auto;
}
.navigation-color-loop({
.swiper-button-prev,
.swiper-button-next {
&.swiper-button-@{navColorName} {
--swiper-navigation-color: @navColorValue;
}
}
});
.swiper-button-lock {
display: none;
}