@eox/pages-theme-eox 0.11.3 → 0.11.4
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
|
@@ -19,17 +19,19 @@ const iconStyle = {
|
|
|
19
19
|
};
|
|
20
20
|
</script>
|
|
21
21
|
<template>
|
|
22
|
-
<article class="
|
|
22
|
+
<article class="vertical large-padding">
|
|
23
23
|
<div>
|
|
24
|
-
<
|
|
24
|
+
<i v-if="typeof icon === 'string' && icon.startsWith('mdi-')" :class="`mdi ${icon}`"></i>
|
|
25
|
+
<div v-else-if="icon" :style="iconStyle" v-html="icon.html" class="icon"></div>
|
|
25
26
|
<h5 class="small">{{ title }}</h5>
|
|
26
27
|
<p>
|
|
27
28
|
<slot>{{ content }}</slot>
|
|
28
29
|
</p>
|
|
29
30
|
</div>
|
|
30
|
-
<nav
|
|
31
|
+
<nav
|
|
32
|
+
v-if="link"
|
|
33
|
+
>
|
|
31
34
|
<a
|
|
32
|
-
v-if="link"
|
|
33
35
|
:href="link.href"
|
|
34
36
|
:target="link.target ?? '_blank'"
|
|
35
37
|
class="button transparent bold primary-text no-padding"
|
|
@@ -59,6 +61,7 @@ const iconStyle = {
|
|
|
59
61
|
article {
|
|
60
62
|
justify-content: space-between;
|
|
61
63
|
transition: all 0.3s ease-in-out;
|
|
64
|
+
width: 100%;
|
|
62
65
|
}
|
|
63
66
|
.arrow {
|
|
64
67
|
transition: transform 0.2s;
|
|
@@ -14,7 +14,7 @@ const { cards, sectionTitle, background } = defineProps({
|
|
|
14
14
|
title: string,
|
|
15
15
|
content: string,
|
|
16
16
|
link?: { text: string, href: string,target?: string },
|
|
17
|
-
icon?: {
|
|
17
|
+
icon?: string | {
|
|
18
18
|
html: string,
|
|
19
19
|
width?: number,
|
|
20
20
|
height?: number,
|
|
@@ -27,6 +27,10 @@ const { cards, sectionTitle, background } = defineProps({
|
|
|
27
27
|
type: String,
|
|
28
28
|
default: "primary primary-gradient-bg",
|
|
29
29
|
},
|
|
30
|
+
cardBackground: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: "surface-container-low",
|
|
33
|
+
},
|
|
30
34
|
});
|
|
31
35
|
|
|
32
36
|
const { page, site } = useData();
|
|
@@ -70,10 +74,6 @@ const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.t
|
|
|
70
74
|
|
|
71
75
|
<template>
|
|
72
76
|
<section :class="`${background} full-width`">
|
|
73
|
-
<template v-if="sectionTitle">
|
|
74
|
-
<div class="large-space"></div>
|
|
75
|
-
<div class="large-space"></div>
|
|
76
|
-
</template>
|
|
77
77
|
<div class="holder large-padding">
|
|
78
78
|
<template v-if="siteTitle">
|
|
79
79
|
<h5>{{ siteTitle }}</h5>
|
|
@@ -95,6 +95,7 @@ const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.t
|
|
|
95
95
|
:title="feature.title"
|
|
96
96
|
:content="feature.content"
|
|
97
97
|
:icon="feature.icon"
|
|
98
|
+
:class="`${cardBackground}`"
|
|
98
99
|
/>
|
|
99
100
|
</a>
|
|
100
101
|
<FeatureCard
|
|
@@ -103,16 +104,18 @@ const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.t
|
|
|
103
104
|
:content="feature.content"
|
|
104
105
|
:icon="feature.icon"
|
|
105
106
|
:link="feature.link?.text ? feature.link : undefined"
|
|
107
|
+
:class="`${cardBackground}`"
|
|
106
108
|
/>
|
|
107
109
|
</div>
|
|
108
110
|
</div>
|
|
109
111
|
</div>
|
|
110
|
-
<div class="large-space"></div>
|
|
111
|
-
<div class="large-space"></div>
|
|
112
112
|
</section>
|
|
113
113
|
</template>
|
|
114
114
|
|
|
115
115
|
<style scoped>
|
|
116
|
+
section {
|
|
117
|
+
padding-block: 96px;
|
|
118
|
+
}
|
|
116
119
|
.cards-gallery {
|
|
117
120
|
display: flex;
|
|
118
121
|
flex-wrap: wrap;
|
|
@@ -135,7 +138,7 @@ const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.t
|
|
|
135
138
|
flex: 0 0 calc(25% - 18px);
|
|
136
139
|
}
|
|
137
140
|
|
|
138
|
-
@media (max-width:
|
|
141
|
+
@media (max-width: 1280px) {
|
|
139
142
|
.card-wrapper {
|
|
140
143
|
flex: 0 0 calc(33.333% - 16px);
|
|
141
144
|
}
|