@mirweb/mir-web-components 2.12.0 → 2.13.0
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.
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<section class="carousel-video-hero">
|
|
3
|
+
<div class="carousel-video-hero__slides">
|
|
4
|
+
<slot name="carousel-video-hero-slides" />
|
|
5
|
+
</div>
|
|
6
|
+
<div v-if="$slots['carousel-video-hero-controls']" class="carousel-video-hero__controls">
|
|
7
|
+
<slot name="carousel-video-hero-controls" />
|
|
8
|
+
</div>
|
|
9
|
+
</section>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script setup lang="ts">
|
|
13
|
+
// Purely slot-based presentational shell — no props, no logic.
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<style lang="scss" scoped>
|
|
17
|
+
@use "../../../assets/scss/variables.scss" as *;
|
|
18
|
+
|
|
19
|
+
.carousel-video-hero {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 100%;
|
|
22
|
+
|
|
23
|
+
&__slides {
|
|
24
|
+
position: relative;
|
|
25
|
+
width: 100%;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
min-height: 500px;
|
|
28
|
+
|
|
29
|
+
// Make Splide fill the full slides height
|
|
30
|
+
:deep(.splide),
|
|
31
|
+
:deep(.splide__track),
|
|
32
|
+
:deep(.splide__list),
|
|
33
|
+
:deep(.splide__slide) {
|
|
34
|
+
height: 100%;
|
|
35
|
+
min-height: inherit;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Video fills container
|
|
39
|
+
:deep(.video__wrapper) {
|
|
40
|
+
position: absolute;
|
|
41
|
+
inset: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:deep(video) {
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
object-fit: cover;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&__controls {
|
|
52
|
+
padding: 16px 30px;
|
|
53
|
+
|
|
54
|
+
@include md {
|
|
55
|
+
padding: 16px max(30px, calc((100% - #{$max-width}) / 2));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</style>
|
package/dist/components/index.ts
CHANGED
|
@@ -25,6 +25,7 @@ export { default as MoleculeTextCard } from "./molecules/text-card/text-card.vue
|
|
|
25
25
|
export { default as BlockAccordion } from "./blocks/accordion/accordion.vue";
|
|
26
26
|
export { default as BlockAuthor } from "./blocks/author/author.vue";
|
|
27
27
|
export { default as BlockCardDisplay } from "./blocks/card-display/card-display.vue";
|
|
28
|
+
export { default as BlockCarouselVideoHero } from "./blocks/carousel-video-hero/carousel-video-hero.vue";
|
|
28
29
|
export { default as BlockColumnGrid } from "./blocks/column-grid/column-grid.vue";
|
|
29
30
|
export { default as BlockFacts } from "./blocks/facts/facts.vue";
|
|
30
31
|
export { default as BlockFeatures } from "./blocks/features/features.vue";
|