@salesforcedevs/dx-components 1.3.242-alpha.1 → 1.3.242-alpha.2
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
|
@@ -75,6 +75,29 @@ img.mobile {
|
|
|
75
75
|
min-width: 1024px;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
.multiple-image-container {
|
|
79
|
+
position: relative;
|
|
80
|
+
max-width: 646px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.image-one {
|
|
84
|
+
display: block;
|
|
85
|
+
position: absolute;
|
|
86
|
+
left: 0;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
width: 418px;
|
|
89
|
+
height: 515px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.image-two {
|
|
93
|
+
display: block;
|
|
94
|
+
position: absolute;
|
|
95
|
+
right: 0;
|
|
96
|
+
bottom: 0;
|
|
97
|
+
width: 341px;
|
|
98
|
+
height: 339px;
|
|
99
|
+
}
|
|
100
|
+
|
|
78
101
|
.text-container > *:not(:last-child) {
|
|
79
102
|
margin-bottom: var(--dx-g-spacing-smd);
|
|
80
103
|
}
|
|
@@ -135,6 +158,10 @@ svg {
|
|
|
135
158
|
display: block;
|
|
136
159
|
margin-top: var(--dx-g-spacing-3xl);
|
|
137
160
|
}
|
|
161
|
+
|
|
162
|
+
.multiple-image-container {
|
|
163
|
+
display: none;
|
|
164
|
+
}
|
|
138
165
|
}
|
|
139
166
|
|
|
140
167
|
@media screen and (max-width: 768px) {
|
|
@@ -49,7 +49,11 @@
|
|
|
49
49
|
/>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
|
-
<div class="image-container">
|
|
52
|
+
<div lwc:if={multipleImages} class="multiple-image-container">
|
|
53
|
+
<img class="image-one" src={imgSrcOne} alt="" />
|
|
54
|
+
<img class="image-two" src={imgSrcTwo} alt="" />
|
|
55
|
+
</div>
|
|
56
|
+
<div lwc:else class="image-container">
|
|
53
57
|
<img class="desktop" src={imgSrc} alt="" />
|
|
54
58
|
<img class="mobile" src={imgSrcMobile} alt="" />
|
|
55
59
|
</div>
|
|
@@ -15,14 +15,17 @@ export default class MainContentHeader extends LightningElement {
|
|
|
15
15
|
@api ctaLabelSecondary?: string;
|
|
16
16
|
@api ctaHref!: string;
|
|
17
17
|
@api ctaHrefSecondary?: string;
|
|
18
|
-
@api imgSrc
|
|
19
|
-
@api imgSrcMobile
|
|
18
|
+
@api imgSrc?: string;
|
|
19
|
+
@api imgSrcMobile?: string;
|
|
20
20
|
@api ctaTarget?: string | null = null;
|
|
21
21
|
@api ctaTargetSecondary?: string | null = null;
|
|
22
22
|
@api backgroundGradientColor?: string;
|
|
23
|
-
@api backgroundGradientDark: boolean = false;
|
|
24
23
|
@api backgroundImage?: string;
|
|
25
|
-
@api
|
|
24
|
+
@api backgroundGradientDark = false;
|
|
25
|
+
@api hasSwoop = false;
|
|
26
|
+
@api multipleImages = false;
|
|
27
|
+
@api imgSrcOne?: string;
|
|
28
|
+
@api imgSrcTwo?: string;
|
|
26
29
|
|
|
27
30
|
private get style() {
|
|
28
31
|
return cx(
|