@asd20/ui 3.2.352 → 3.2.355
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.
package/package.json
CHANGED
|
@@ -253,6 +253,7 @@ export default {
|
|
|
253
253
|
.back {
|
|
254
254
|
color: currentColor !important;
|
|
255
255
|
order: 2;
|
|
256
|
+
|
|
256
257
|
}
|
|
257
258
|
.right {
|
|
258
259
|
display: flex;
|
|
@@ -290,12 +291,12 @@ export default {
|
|
|
290
291
|
&::v-deep .asd20-icon {
|
|
291
292
|
width: 24px !important;
|
|
292
293
|
height: 24px !important;
|
|
293
|
-
--line-color: currentColor;
|
|
294
|
-
--fill-color: var(--color__accent);
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
294
|
+
--line-color: currentColor !important;
|
|
295
|
+
--fill-color: var(--color__accent) !important;
|
|
296
|
+
g {
|
|
297
|
+
// --website-icon__line-color: var(--website-icon__line-color) !important;
|
|
298
|
+
--line-color: currentColor !important;
|
|
299
|
+
}
|
|
299
300
|
}
|
|
300
301
|
&::v-deep .asd20-select-input {
|
|
301
302
|
margin-bottom: 0;
|
|
@@ -485,6 +486,7 @@ export default {
|
|
|
485
486
|
img {
|
|
486
487
|
width: 100%;
|
|
487
488
|
height: 100%;
|
|
489
|
+
max-height: inherit;
|
|
488
490
|
object-fit: cover;
|
|
489
491
|
border-top: none;
|
|
490
492
|
// opacity: 0;
|
|
@@ -58,8 +58,7 @@
|
|
|
58
58
|
>
|
|
59
59
|
<slot name="aside" />
|
|
60
60
|
</aside>
|
|
61
|
-
|
|
62
|
-
<div v-if="fullscreen" class="scroll-down-indicator"></div>
|
|
61
|
+
<div class="scroll-down-indicator"></div>
|
|
63
62
|
<slot />
|
|
64
63
|
</header>
|
|
65
64
|
</template>
|
|
@@ -251,6 +250,69 @@ export default {
|
|
|
251
250
|
}
|
|
252
251
|
}
|
|
253
252
|
}
|
|
253
|
+
.scroll-down-indicator {
|
|
254
|
+
position: relative;
|
|
255
|
+
z-index: 3;
|
|
256
|
+
text-transform: uppercase;
|
|
257
|
+
display: none;
|
|
258
|
+
flex-direction: column;
|
|
259
|
+
align-items: center;
|
|
260
|
+
// padding-bottom: space(2.125);
|
|
261
|
+
text-align: center;
|
|
262
|
+
font-weight: 400;
|
|
263
|
+
color: transparent;
|
|
264
|
+
bottom: 15vh;
|
|
265
|
+
left: 45vw;
|
|
266
|
+
&::before {
|
|
267
|
+
content: '';
|
|
268
|
+
position: absolute;
|
|
269
|
+
display: block;
|
|
270
|
+
width: space(2);
|
|
271
|
+
height: space(2);
|
|
272
|
+
bottom: space(0.15);
|
|
273
|
+
border-radius: 100%;
|
|
274
|
+
background: var(--color__accent);
|
|
275
|
+
box-shadow: 0 5px 5px 0 rgba(black, 0.125);
|
|
276
|
+
transform: translateX(0) translateY(0);
|
|
277
|
+
transform-origin: 50% 50%;
|
|
278
|
+
animation: slide-top 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
|
|
279
|
+
alternate-reverse both;
|
|
280
|
+
}
|
|
281
|
+
&::after {
|
|
282
|
+
content: '';
|
|
283
|
+
position: absolute;
|
|
284
|
+
display: block;
|
|
285
|
+
width: space(0.5);
|
|
286
|
+
height: space(0.5);
|
|
287
|
+
bottom: space(1);
|
|
288
|
+
left: space(0.575);
|
|
289
|
+
border: 5px solid var(--color__on-accent);
|
|
290
|
+
border-top-color: transparent;
|
|
291
|
+
border-left-color: transparent;
|
|
292
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
293
|
+
transform-origin: 50% 50%;
|
|
294
|
+
animation: slide-top-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
295
|
+
infinite alternate-reverse both;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
@keyframes slide-top {
|
|
300
|
+
0% {
|
|
301
|
+
transform: translateX(0) translateY(0);
|
|
302
|
+
}
|
|
303
|
+
100% {
|
|
304
|
+
transform: translateX(0) translateY(space(1));
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
@keyframes slide-top-rotate {
|
|
309
|
+
0% {
|
|
310
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
311
|
+
}
|
|
312
|
+
100% {
|
|
313
|
+
transform: translateX(0) translateY(space(1)) rotate(45deg);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
254
316
|
}
|
|
255
317
|
|
|
256
318
|
$min: 3rem;
|
|
@@ -422,6 +484,9 @@ $max: 4rem;
|
|
|
422
484
|
border-radius: var(--website-shape__radius-l);
|
|
423
485
|
}
|
|
424
486
|
}
|
|
487
|
+
.scroll-down-indicator {
|
|
488
|
+
display: block;
|
|
489
|
+
}
|
|
425
490
|
}
|
|
426
491
|
}
|
|
427
492
|
</style>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</video>
|
|
23
23
|
|
|
24
24
|
<img class="background-image" :src="imageUrl" alt="" />
|
|
25
|
-
|
|
25
|
+
<div class="scroll-down-indicator"></div>
|
|
26
26
|
<slot />
|
|
27
27
|
</header>
|
|
28
28
|
</template>
|
|
@@ -134,6 +134,69 @@ export default {
|
|
|
134
134
|
margin-right: 0;
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
+
.scroll-down-indicator {
|
|
138
|
+
position: relative;
|
|
139
|
+
z-index: 3;
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
display: none;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
align-items: center;
|
|
144
|
+
padding-bottom: space(2.125);
|
|
145
|
+
text-align: center;
|
|
146
|
+
font-weight: 400;
|
|
147
|
+
color: transparent;
|
|
148
|
+
bottom: 15vh;
|
|
149
|
+
left:45vw;
|
|
150
|
+
&::before {
|
|
151
|
+
content: '';
|
|
152
|
+
position: absolute;
|
|
153
|
+
display: block;
|
|
154
|
+
width: space(2);
|
|
155
|
+
height: space(2);
|
|
156
|
+
bottom: space(0.15);
|
|
157
|
+
border-radius: 100%;
|
|
158
|
+
background: var(--color__accent);
|
|
159
|
+
box-shadow: 0 5px 5px 0 rgba(black, 0.125);
|
|
160
|
+
transform: translateX(0) translateY(0);
|
|
161
|
+
transform-origin: 50% 50%;
|
|
162
|
+
animation: slide-top 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
|
|
163
|
+
alternate-reverse both;
|
|
164
|
+
}
|
|
165
|
+
&::after {
|
|
166
|
+
content: '';
|
|
167
|
+
position: absolute;
|
|
168
|
+
display: block;
|
|
169
|
+
width: space(0.5);
|
|
170
|
+
height: space(0.5);
|
|
171
|
+
bottom: space(1);
|
|
172
|
+
left: space(0.57);
|
|
173
|
+
border: 5px solid var(--color__on-accent);
|
|
174
|
+
border-top-color: transparent;
|
|
175
|
+
border-left-color: transparent;
|
|
176
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
177
|
+
transform-origin: 50% 50%;
|
|
178
|
+
animation: slide-top-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
179
|
+
infinite alternate-reverse both;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@keyframes slide-top {
|
|
184
|
+
0% {
|
|
185
|
+
transform: translateX(0) translateY(0);
|
|
186
|
+
}
|
|
187
|
+
100% {
|
|
188
|
+
transform: translateX(0) translateY(space(1));
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes slide-top-rotate {
|
|
193
|
+
0% {
|
|
194
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
195
|
+
}
|
|
196
|
+
100% {
|
|
197
|
+
transform: translateX(0) translateY(space(1)) rotate(45deg);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
137
200
|
}
|
|
138
201
|
|
|
139
202
|
@media (min-width: 1024px) {
|
|
@@ -184,6 +247,9 @@ export default {
|
|
|
184
247
|
margin: space(2) space(2) space(2) space(2);
|
|
185
248
|
width: 92%;
|
|
186
249
|
}
|
|
250
|
+
.scroll-down-indicator {
|
|
251
|
+
display: block;
|
|
252
|
+
}
|
|
187
253
|
}
|
|
188
254
|
}
|
|
189
255
|
</style>
|