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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
@use '../global/globalCssVariables.module.scss' as global;
.collectionCarousel3DView-outer {
height: 100%;
position: relative;
background-color: white;
overflow: hidden;
display: flex;
}
.carousel-wrapper {
display: flex;
position: absolute;
top: global.$CAROUSEL3D_TOP * 1%;
height: (global.$CAROUSEL3D_SIDE_SCALE * 100) * 1%;
//align-items: center;
transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
.collectionCarousel3DView-item,
.collectionCarousel3DView-item-active {
flex: 1;
transition:
opacity 0.3s linear,
transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
pointer-events: none;
opacity: 0.5;
z-index: 1;
transform: scale(global.$CAROUSEL3D_SIDE_SCALE);
user-select: none;
}
.collectionCarousel3DView-item-active {
pointer-events: unset;
opacity: 1;
z-index: 2;
transform: scale(global.$CAROUSEL3D_CENTER_SCALE);
}
}
.dot-bar {
display: flex;
position: absolute;
justify-content: center;
bottom: 5%;
width: 100%;
.dot,
.dot-active {
height: 10px;
width: 10px;
border-radius: 50%;
margin: 3px;
display: inline-block;
background-color: lightgrey;
cursor: pointer;
}
.dot-active {
background-color: grey;
}
}
.carousel3DView-back,
.carousel3DView-fwd,
.carousel3DView-back-scroll,
.carousel3DView-fwd-scroll,
.carousel3DView-back-scroll-hidden,
.carousel3DView-fwd-scroll-hidden {
position: absolute;
display: flex;
width: 30px;
height: 30px;
align-items: center;
border-radius: 5px;
justify-content: center;
background: rgba(255, 255, 255, 0.46);
cursor: pointer;
}
.carousel3DView-fwd,
.carousel3DView-back {
top: 0px;
background: transparent;
width: calc((1 - #{global.$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%);
height: 100%;
}
.carousel3DView-fwd-scroll,
.carousel3DView-back-scroll,
.carousel3DView-fwd-scroll-hidden,
.carousel3DView-back-scroll-hidden {
top: calc(50% - 30px);
}
.carousel3DView-fwd,
.carousel3DView-fwd-scroll,
.carousel3DView-fwd-scroll-hidden {
right: 0px;
}
.carousel3DView-back,
.carousel3DView-back-scroll,
.carousel3DView-back-scroll-hidden {
left: 0px;
}
.carousel3DView-fwd-scroll-hidden,
.carousel3DView-back-scroll-hidden {
opacity: 0;
transition: opacity 0.5s linear;
pointer-events: none;
}
.carousel3DView-fwd-scroll,
.carousel3DView-back-scroll {
opacity: 1;
}
.carousel3DView-back-scroll:hover,
.carousel3DView-fwd-scroll:hover {
background: lightgray;
}
|
