ublo-lib 1.47.88 → 1.47.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,34 +1,27 @@
|
|
|
1
1
|
.carousel {
|
|
2
|
-
|
|
3
|
-
--carousel-padding-top: 60px;
|
|
4
|
-
--carousel-button-width: 48px;
|
|
5
|
-
--carousel-button-background: hsl(0, 0%, 100%);
|
|
6
|
-
--carousel-button-hover-background: hsl(0, 0%, 100%);
|
|
7
|
-
--carousel-left-button-glow: transparent;
|
|
8
|
-
--carousel-right-button-glow: transparent;
|
|
9
|
-
--carousel-button-radius: 50%;
|
|
10
|
-
--carousel-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
11
|
-
--carousel-button-icon-size: 16px;
|
|
12
|
-
--carousel-button-icon-color: #081527;
|
|
13
|
-
--carousel-before-background: transparent;
|
|
14
|
-
--carousel-after-background: transparent;
|
|
15
|
-
|
|
2
|
+
/* Variables avec valeurs par défaut (fallback) */
|
|
16
3
|
position: relative;
|
|
17
4
|
display: flex;
|
|
18
5
|
justify-content: center;
|
|
19
6
|
/* 2px viennent des pseudo-elements after des boutons de control */
|
|
20
7
|
width: calc(100vw - var(--scrollbar-size) - 2px);
|
|
21
|
-
max-width: var(--carousel-width);
|
|
8
|
+
max-width: var(--carousel-width, var(--content-width));
|
|
22
9
|
margin: 0 auto;
|
|
23
|
-
padding-top: var(--carousel-padding-top);
|
|
10
|
+
padding-top: var(--carousel-padding-top, 60px);
|
|
24
11
|
}
|
|
25
12
|
|
|
26
13
|
.carousel--wheel {
|
|
27
|
-
--carousel-height:
|
|
14
|
+
--carousel-height: var(
|
|
15
|
+
--carousel-wheel-height,
|
|
16
|
+
calc(var(--carousel-item-height, 300px) + 150px)
|
|
17
|
+
);
|
|
28
18
|
}
|
|
29
19
|
|
|
30
20
|
.carousel--scale {
|
|
31
|
-
--carousel-height:
|
|
21
|
+
--carousel-height: var(
|
|
22
|
+
--carousel-scale-height,
|
|
23
|
+
calc(var(--carousel-item-height, 300px) + 100px)
|
|
24
|
+
);
|
|
32
25
|
}
|
|
33
26
|
|
|
34
27
|
/* ----- FALLBACK : Cas où il n'y a pas de logique de carousel ----- */
|
|
@@ -44,7 +37,7 @@
|
|
|
44
37
|
|
|
45
38
|
.controls {
|
|
46
39
|
position: absolute;
|
|
47
|
-
top: var(--carousel-item-height);
|
|
40
|
+
top: var(--carousel-item-height, 300px);
|
|
48
41
|
left: 0;
|
|
49
42
|
width: 100%;
|
|
50
43
|
margin: 0 auto;
|
|
@@ -57,25 +50,34 @@
|
|
|
57
50
|
|
|
58
51
|
.carousel--wheel .controls {
|
|
59
52
|
/* boutons au milieu de l'item central (item height / 2 - paddingtop carousel) */
|
|
60
|
-
top: calc(
|
|
53
|
+
top: calc(
|
|
54
|
+
(var(--carousel-item-height, 300px) + var(--carousel-padding-top, 60px)) / 2
|
|
55
|
+
);
|
|
61
56
|
left: auto;
|
|
62
57
|
/* largeur de la taille de l'item + des boutons + petit écart */
|
|
63
58
|
width: calc(
|
|
64
|
-
var(--carousel-item-width) + (var(--carousel-button-width) * 2) +
|
|
59
|
+
var(--carousel-item-width, 400px) + (var(--carousel-button-width, 48px) * 2) +
|
|
60
|
+
20px
|
|
65
61
|
);
|
|
66
62
|
transform: none;
|
|
67
63
|
}
|
|
68
64
|
|
|
69
65
|
.control {
|
|
70
|
-
--ds-button-background: var(--carousel-button-background);
|
|
71
|
-
--ds-button-hover-background: var(
|
|
72
|
-
|
|
66
|
+
--ds-button-background: var(--carousel-button-background, hsl(0, 0%, 100%));
|
|
67
|
+
--ds-button-hover-background: var(
|
|
68
|
+
--carousel-button-hover-background,
|
|
69
|
+
hsl(0, 0%, 100%)
|
|
70
|
+
);
|
|
71
|
+
--ds-button-radius: var(--carousel-button-radius, 50%);
|
|
73
72
|
--ds-button-border: var(--carousel-button-border);
|
|
74
|
-
--ds-button-shadow: var(
|
|
73
|
+
--ds-button-shadow: var(
|
|
74
|
+
--carousel-button-shadow,
|
|
75
|
+
0 2px 8px rgba(0, 0, 0, 0.15)
|
|
76
|
+
);
|
|
75
77
|
|
|
76
78
|
pointer-events: auto;
|
|
77
|
-
width: var(--carousel-button-width);
|
|
78
|
-
height: var(--carousel-button-width);
|
|
79
|
+
width: var(--carousel-button-width, 48px);
|
|
80
|
+
height: var(--carousel-button-width, 48px);
|
|
79
81
|
display: flex;
|
|
80
82
|
align-items: center;
|
|
81
83
|
justify-content: center;
|
|
@@ -89,22 +91,22 @@
|
|
|
89
91
|
left: -1px;
|
|
90
92
|
height: 100%;
|
|
91
93
|
width: 100%;
|
|
92
|
-
background-image: var(--carousel-left-button-glow);
|
|
93
|
-
border-radius: var(--carousel-button-radius);
|
|
94
|
+
background-image: var(--carousel-left-button-glow, transparent);
|
|
95
|
+
border-radius: var(--carousel-button-radius, 50%);
|
|
94
96
|
z-index: -1;
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
.control + .control::after {
|
|
98
100
|
left: auto;
|
|
99
101
|
right: -1px;
|
|
100
|
-
background-image: var(--carousel-right-button-glow);
|
|
102
|
+
background-image: var(--carousel-right-button-glow, transparent);
|
|
101
103
|
z-index: -1;
|
|
102
104
|
}
|
|
103
105
|
|
|
104
106
|
.controlIcon {
|
|
105
|
-
--size: var(--carousel-button-icon-size);
|
|
107
|
+
--size: var(--carousel-button-icon-size, 16px);
|
|
106
108
|
|
|
107
|
-
fill: var(--carousel-button-icon-color);
|
|
109
|
+
fill: var(--carousel-button-icon-color, #081527);
|
|
108
110
|
}
|
|
109
111
|
|
|
110
112
|
.viewport {
|
|
@@ -121,8 +123,8 @@
|
|
|
121
123
|
top: 0;
|
|
122
124
|
left: 0;
|
|
123
125
|
height: 100%;
|
|
124
|
-
width: var(--carousel-item-width);
|
|
125
|
-
background: var(--carousel-before-background);
|
|
126
|
+
width: var(--carousel-item-width, 400px);
|
|
127
|
+
background: var(--carousel-before-background, transparent);
|
|
126
128
|
z-index: 1;
|
|
127
129
|
}
|
|
128
130
|
|
|
@@ -132,8 +134,8 @@
|
|
|
132
134
|
top: 0;
|
|
133
135
|
right: 0;
|
|
134
136
|
height: 100%;
|
|
135
|
-
width: var(--carousel-item-width);
|
|
136
|
-
background: var(--carousel-after-background);
|
|
137
|
+
width: var(--carousel-item-width, 400px);
|
|
138
|
+
background: var(--carousel-after-background, transparent);
|
|
137
139
|
z-index: 1;
|
|
138
140
|
}
|
|
139
141
|
|