sfc-utils 1.4.16 → 1.4.17
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/components/topper2.mjs
CHANGED
|
@@ -42,10 +42,12 @@ const Topper2 = ({ settings, wcmData, mods }) => {
|
|
|
42
42
|
|
|
43
43
|
return [
|
|
44
44
|
topperStyles.headerDekFullScreen,
|
|
45
|
-
// Add styling for header-deck container position
|
|
45
|
+
// Add styling for header-deck container horizontal position
|
|
46
46
|
fullScreenHorizontalCss(),
|
|
47
|
-
// Add styling for
|
|
48
|
-
|
|
47
|
+
// Add styling for header-deck container vertical position
|
|
48
|
+
fullScreenVerticalCss(),
|
|
49
|
+
// Add style override for center-center position (if applicable)
|
|
50
|
+
fullScreenCenterCenterCss(),
|
|
49
51
|
// Add styling for header-deck container background
|
|
50
52
|
... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
|
|
51
53
|
];
|
|
@@ -72,10 +74,26 @@ const Topper2 = ({ settings, wcmData, mods }) => {
|
|
|
72
74
|
switch (HeaderDek_Horizontal_Position) {
|
|
73
75
|
case "left": return topperStyles.headerDekLeft;
|
|
74
76
|
case "right": return topperStyles.headerDekRight;
|
|
75
|
-
case "center": return topperStyles.
|
|
77
|
+
case "center": return topperStyles.headerDekCenterHorizontal;
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
80
|
|
|
81
|
+
/** get horizontal positioning css for full screen header-deck container **/
|
|
82
|
+
const fullScreenVerticalCss = () => {
|
|
83
|
+
switch (HeaderDek_Vertical_Position) {
|
|
84
|
+
case "top": return topperStyles.headerDekTop;
|
|
85
|
+
case "center": return topperStyles.headerDekCenterVertical;
|
|
86
|
+
case "bottom": return topperStyles.headerDekBottom;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const fullScreenCenterCenterCss = () => {
|
|
91
|
+
return (
|
|
92
|
+
HeaderDek_Horizontal_Position === "center" &&
|
|
93
|
+
HeaderDek_Vertical_Position === "center"
|
|
94
|
+
) ? topperStyles.headerDekCenterCenter : "";
|
|
95
|
+
}
|
|
96
|
+
|
|
79
97
|
const headerStyleList = () => {
|
|
80
98
|
let defaultStyles = [];
|
|
81
99
|
switch (Topper_Style) {
|
package/package.json
CHANGED
|
@@ -232,9 +232,9 @@
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.
|
|
235
|
+
.headerDekCenterHorizontal {
|
|
236
236
|
left: 50%;
|
|
237
|
-
transform:
|
|
237
|
+
transform: translateX(-50%);
|
|
238
238
|
margin-left: var(--headerDek-horizontal-offset);
|
|
239
239
|
|
|
240
240
|
@media @tablet {
|
|
@@ -245,6 +245,35 @@
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
|
|
248
|
+
.headerDekCenterVertical {
|
|
249
|
+
top: 50%;
|
|
250
|
+
transform: translateY(-50%);
|
|
251
|
+
margin-top: var(--headerDek-vertical-offset);
|
|
252
|
+
|
|
253
|
+
@media @tablet {
|
|
254
|
+
transform: none;
|
|
255
|
+
top: 0%;
|
|
256
|
+
left: 0%;
|
|
257
|
+
margin-top: 0px;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.headerDekCenterCenter {
|
|
262
|
+
left: 50%;
|
|
263
|
+
top: 50%;
|
|
264
|
+
transform: translate(-50%, -50%);
|
|
265
|
+
margin-left: var(--headerDek-horizontal-offset);
|
|
266
|
+
margin-top: var(--headerDek-vertical-offset);
|
|
267
|
+
|
|
268
|
+
@media @tablet {
|
|
269
|
+
transform: none;
|
|
270
|
+
top: 0%;
|
|
271
|
+
left: 0%;
|
|
272
|
+
margin-top: 0px;
|
|
273
|
+
margin-left: 0px;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
248
277
|
.textAlignLeft {
|
|
249
278
|
text-align: left;
|
|
250
279
|
}
|