| 1 |
import { boxCss, colorControls, objectToCssString, spacingGenerate, wrapInMediaQuery } from "../shared/helpFn"; |
| 2 |
|
| 3 |
const cacheCss = { desktop: "", mobile: "", tablet: "" }; |
| 4 |
|
| 5 |
const dynamicCss = (attributes, page = "frontend", currentDevice = "all") => { |
| 6 |
const { |
| 7 |
uniqueId, |
| 8 |
layout, |
| 9 |
height, |
| 10 |
columns, |
| 11 |
columnGap, |
| 12 |
rowGap, |
| 13 |
dividerBorderStyle, |
| 14 |
dividerBg, |
| 15 |
dividerWidth, |
| 16 |
titleTypography, |
| 17 |
titleMargin, |
| 18 |
titleColor, |
| 19 |
titleLineHeight, |
| 20 |
titleLatterSpacing, |
| 21 |
titleFontSize, |
| 22 |
postCardBg, |
| 23 |
postCardBorder, |
| 24 |
postCardBorderWidth, |
| 25 |
postCardBorderRadius, |
| 26 |
postCardBoxShadowEnable, |
| 27 |
postCardBoxShadow, |
| 28 |
contentAreaMargin, |
| 29 |
postCardPadding, |
| 30 |
counterHeight, |
| 31 |
counterWidth, |
| 32 |
counterTypography, |
| 33 |
counterLineHeight, |
| 34 |
counterLatterSpacing, |
| 35 |
counterFontSize, |
| 36 |
counterColor, |
| 37 |
counterCardBg, |
| 38 |
counterBorderWidth, |
| 39 |
counterBorder, |
| 40 |
counterBorderRadius, |
| 41 |
counterBoxShadowEnable, |
| 42 |
counterBoxShadow, |
| 43 |
postCardHoverBoxShadow, |
| 44 |
postCardHoverBoxShadowEnable, |
| 45 |
postCardHoverBorderRadius, |
| 46 |
postCardHoverBorderWidth, |
| 47 |
postCardHoverBorder, |
| 48 |
counterHoverBoxShadow, |
| 49 |
counterHoverBoxShadowEnable, |
| 50 |
counterHoverBorderRadius, |
| 51 |
counterHoverBorderWidth, |
| 52 |
counterHoverBorder, |
| 53 |
displayOverlyThum, |
| 54 |
displayOverlyHoverThum, |
| 55 |
contentHorizontalPosition, |
| 56 |
excerptShow, |
| 57 |
excerptMargin, |
| 58 |
excerptLineHeight, |
| 59 |
excerptLatterSpacing, |
| 60 |
excerptFontSize, |
| 61 |
excerptWordSpacing, |
| 62 |
excerptTypography, |
| 63 |
excerptColor, |
| 64 |
taxonomyImageHeight, |
| 65 |
taxonomyImageWidth, |
| 66 |
imageSize, |
| 67 |
imageOverlayCustom, |
| 68 |
hoverOpacityEffect, |
| 69 |
grayscaleMode, |
| 70 |
grayscaleOnHover, |
| 71 |
originalOnHover, |
| 72 |
brightnessEffect, |
| 73 |
blurEffect, |
| 74 |
brightnessEffectHover, |
| 75 |
blurEffectHover, |
| 76 |
imageBorderRadius, |
| 77 |
imageBorderWidth, |
| 78 |
imageBorder, |
| 79 |
imageBorderHover, |
| 80 |
imageBorderWidthHover, |
| 81 |
imageBorderRadiusHover, |
| 82 |
counterMultiColorBg, |
| 83 |
contentVerticalPosition, |
| 84 |
contentAreaBg, |
| 85 |
catRadius, |
| 86 |
titleCounterGap, |
| 87 |
dividerAlignment, |
| 88 |
dividerThickness, |
| 89 |
titleWordSpacing, |
| 90 |
hideOnDesktop, |
| 91 |
hideOnTablet, |
| 92 |
hideOnMobile, |
| 93 |
globalBreakPointData, |
| 94 |
showHideDivider, |
| 95 |
} = attributes; |
| 96 |
|
| 97 |
const rangerCss = (attr, device = "Desktop") => { |
| 98 |
const updateUnit = attr?.unit?.[device] ?? ""; |
| 99 |
|
| 100 |
return `${attr?.device?.[device]}${updateUnit}`; |
| 101 |
}; |
| 102 |
|
| 103 |
const typographyCss = (attr) => { |
| 104 |
return { |
| 105 |
"font-family": attr.typography.family, |
| 106 |
"font-weight": attr.typography.fontWeight, |
| 107 |
"font-style": attr.typography.style, |
| 108 |
"text-decoration": attr.typography.decoration, |
| 109 |
"text-transform": attr.typography.transform, |
| 110 |
}; |
| 111 |
}; |
| 112 |
|
| 113 |
const getJustifyContent = () => { |
| 114 |
switch (layout) { |
| 115 |
case "taxonomy-layout-two": |
| 116 |
return "space-between"; |
| 117 |
case "taxonomy-layout-four": |
| 118 |
case "taxonomy-layout-seven": |
| 119 |
return "center"; |
| 120 |
case "taxonomy-layout-eight": |
| 121 |
return "space-evenly"; |
| 122 |
default: |
| 123 |
return "space-between"; |
| 124 |
} |
| 125 |
}; |
| 126 |
|
| 127 |
const layoutSixMargin = (width, device) => { |
| 128 |
return width.device?.[device].top; |
| 129 |
}; |
| 130 |
|
| 131 |
function getBoxSpacingStyles(spacingObj, deviceType, property = "margin") { |
| 132 |
if (!spacingObj?.device?.[deviceType] || !spacingObj?.unit?.[deviceType]) { |
| 133 |
return {}; |
| 134 |
} |
| 135 |
|
| 136 |
const units = spacingObj.unit?.[deviceType]; |
| 137 |
const values = spacingObj.device?.[deviceType]; |
| 138 |
|
| 139 |
return { |
| 140 |
[`${property}-top`]: `${values.top ?? 0}${units}`, |
| 141 |
[`${property}-right`]: `${values.right ?? 0}${units}`, |
| 142 |
[`${property}-bottom`]: `${values.bottom ?? 0}${units}`, |
| 143 |
[`${property}-left`]: `${values.left ?? 0}${units}`, |
| 144 |
}; |
| 145 |
} |
| 146 |
|
| 147 |
const justifyContentValue = getJustifyContent(layout); |
| 148 |
|
| 149 |
const taxonomyResponsiveCss = (deviceType) => { |
| 150 |
const marginStyles = getBoxSpacingStyles(contentAreaMargin, deviceType, "margin"); |
| 151 |
const paddingStyles = getBoxSpacingStyles(postCardPadding, deviceType, "padding"); |
| 152 |
|
| 153 |
const titleMarginStyles = getBoxSpacingStyles(titleMargin, deviceType, "margin"); |
| 154 |
|
| 155 |
const excerptMarginStyles = getBoxSpacingStyles(excerptMargin, deviceType, "margin"); |
| 156 |
|
| 157 |
const getBorderStyles = () => { |
| 158 |
const borderWidth = rangerCss(dividerThickness, deviceType); |
| 159 |
|
| 160 |
switch (dividerBg.color.style) { |
| 161 |
case "transparent": |
| 162 |
return { |
| 163 |
"border-bottom": `${borderWidth} ${dividerBorderStyle} transparent`, |
| 164 |
}; |
| 165 |
|
| 166 |
case "gradient": |
| 167 |
return { |
| 168 |
"border-bottom": `${borderWidth} ${dividerBorderStyle} transparent`, |
| 169 |
"border-image": `${colorControls( |
| 170 |
dividerBg.color.style, |
| 171 |
dividerBg.color.solidColor, |
| 172 |
dividerBg.color.gradient |
| 173 |
)} 1`, |
| 174 |
}; |
| 175 |
|
| 176 |
default: |
| 177 |
return { |
| 178 |
"border-bottom": `${borderWidth} ${dividerBorderStyle} ${dividerBg.color.solidColor}`, |
| 179 |
}; |
| 180 |
} |
| 181 |
}; |
| 182 |
|
| 183 |
const allResponsiveCss = [ |
| 184 |
{ |
| 185 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render`, |
| 186 |
styles: { |
| 187 |
"margin-left": "1px", |
| 188 |
"box-sizing": "border-box", |
| 189 |
display: [ |
| 190 |
"taxonomy-layout-one", |
| 191 |
"taxonomy-layout-two", |
| 192 |
"taxonomy-layout-three", |
| 193 |
"taxonomy-layout-five", |
| 194 |
"taxonomy-layout-six", |
| 195 |
"taxonomy-layout-seven", |
| 196 |
"taxonomy-layout-four", |
| 197 |
"taxonomy-layout-eight", |
| 198 |
].includes(layout) |
| 199 |
? "grid" |
| 200 |
: "flex", |
| 201 |
"grid-template-columns": [ |
| 202 |
"taxonomy-layout-one", |
| 203 |
"taxonomy-layout-two", |
| 204 |
"taxonomy-layout-three", |
| 205 |
"taxonomy-layout-four", |
| 206 |
"taxonomy-layout-five", |
| 207 |
"taxonomy-layout-six", |
| 208 |
"taxonomy-layout-seven", |
| 209 |
"taxonomy-layout-eight", |
| 210 |
].includes(layout) |
| 211 |
? `repeat(${columns?.device?.[deviceType]}, 1fr)` |
| 212 |
: "none", |
| 213 |
|
| 214 |
"column-gap": rangerCss(columnGap, deviceType), |
| 215 |
|
| 216 |
"row-gap": rangerCss(rowGap, deviceType), |
| 217 |
|
| 218 |
width: "100%", |
| 219 |
"flex-direction": "column", |
| 220 |
"justify-content": "center", |
| 221 |
}, |
| 222 |
}, |
| 223 |
|
| 224 |
{ |
| 225 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info-overlay`, |
| 226 |
styles: { |
| 227 |
position: "relative", |
| 228 |
width: "213.158px", |
| 229 |
height: "142.105px", |
| 230 |
"flex-shrink": "0", |
| 231 |
"aspect-ratio": "213.16 / 142.11", |
| 232 |
"background-size": "cover", |
| 233 |
"background-position": "center", |
| 234 |
"background-repeat": "no-repeat", |
| 235 |
overflow: "hidden", |
| 236 |
}, |
| 237 |
}, |
| 238 |
{ |
| 239 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info`, |
| 240 |
styles: { |
| 241 |
display: "flex", |
| 242 |
width: layout !== "taxonomy-layout-six" && "inherit", |
| 243 |
gap: layout === "taxonomy-layout-three" && rangerCss(titleCounterGap, deviceType), |
| 244 |
|
| 245 |
height: |
| 246 |
layout === "taxonomy-layout-five" || layout === "taxonomy-layout-six" |
| 247 |
? // ||layout === "taxonomy-layout-seven" |
| 248 |
"" |
| 249 |
: rangerCss(height, deviceType), |
| 250 |
"justify-content": [ |
| 251 |
"taxonomy-layout-four", |
| 252 |
"taxonomy-layout-seven", |
| 253 |
"taxonomy-layout-eight", |
| 254 |
].includes(layout) |
| 255 |
? contentHorizontalPosition |
| 256 |
: justifyContentValue, |
| 257 |
"align-items": ["taxonomy-layout-seven"].includes(layout) ? contentVerticalPosition : "center", |
| 258 |
|
| 259 |
"margin-bottom": `-${layoutSixMargin(postCardBorderWidth, deviceType)}px`, |
| 260 |
"margin-right": `-${layoutSixMargin(postCardBorderWidth, deviceType)}px`, |
| 261 |
"box-sizing": "border-box", |
| 262 |
"border-radius": spacingGenerate(postCardBorderRadius, deviceType), |
| 263 |
|
| 264 |
"border-style": postCardBorder.style, |
| 265 |
"border-color": postCardBorder.color, |
| 266 |
"border-width": spacingGenerate(postCardBorderWidth, deviceType), |
| 267 |
|
| 268 |
...(!displayOverlyThum && { |
| 269 |
background: colorControls( |
| 270 |
postCardBg.color.style, |
| 271 |
postCardBg.color.solidColor, |
| 272 |
postCardBg.color.gradient |
| 273 |
), |
| 274 |
}), |
| 275 |
"box-shadow": boxCss(postCardBoxShadowEnable, deviceType, postCardBoxShadow, "color"), |
| 276 |
|
| 277 |
...paddingStyles, |
| 278 |
|
| 279 |
...(layout !== "taxonomy-layout-six" ? marginStyles : {}), |
| 280 |
position: "relative", |
| 281 |
transition: "all 0.8s ease-in-out", |
| 282 |
}, |
| 283 |
}, |
| 284 |
|
| 285 |
{ |
| 286 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info-layout-one::after`, |
| 287 |
styles: { |
| 288 |
content: "''", |
| 289 |
position: "absolute", |
| 290 |
bottom: "0", |
| 291 |
...(dividerAlignment === "center" && { |
| 292 |
left: "50%", |
| 293 |
transform: "translateX(-50%)", |
| 294 |
}), |
| 295 |
...(dividerAlignment === "left" && { |
| 296 |
left: "0", |
| 297 |
transform: "none", |
| 298 |
}), |
| 299 |
...(dividerAlignment === "right" && { |
| 300 |
right: "0", |
| 301 |
transform: "none", |
| 302 |
}), |
| 303 |
width: rangerCss(dividerWidth, deviceType), |
| 304 |
...getBorderStyles(), |
| 305 |
|
| 306 |
background: "none", |
| 307 |
}, |
| 308 |
}, |
| 309 |
|
| 310 |
{ |
| 311 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover`, |
| 312 |
styles: { |
| 313 |
...(!displayOverlyHoverThum && { |
| 314 |
background: colorControls( |
| 315 |
postCardBg.hover.style, |
| 316 |
postCardBg.hover.solidColor, |
| 317 |
postCardBg.hover.gradient |
| 318 |
), |
| 319 |
}), |
| 320 |
|
| 321 |
"z-index": "1", |
| 322 |
"box-shadow": boxCss(postCardHoverBoxShadowEnable, deviceType, postCardHoverBoxShadow, "color"), |
| 323 |
|
| 324 |
"margin-bottom": `-${layoutSixMargin(postCardHoverBorderWidth, deviceType)}px`, |
| 325 |
"margin-right": `-${layoutSixMargin(postCardHoverBorderWidth, deviceType)}px`, |
| 326 |
"box-sizing": "border-box", |
| 327 |
|
| 328 |
// ...(layout !== "taxonomy-layout-one" && { |
| 329 |
...((layout !== "taxonomy-layout-one" || !showHideDivider) && { |
| 330 |
"border-style": postCardHoverBorder.style, |
| 331 |
"border-color": postCardHoverBorder.color, |
| 332 |
"border-width": spacingGenerate(postCardHoverBorderWidth, deviceType), |
| 333 |
"border-radius": spacingGenerate(postCardHoverBorderRadius, deviceType), |
| 334 |
}), |
| 335 |
}, |
| 336 |
}, |
| 337 |
|
| 338 |
{ |
| 339 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name`, |
| 340 |
styles: { |
| 341 |
color: titleColor?.color, |
| 342 |
|
| 343 |
width: |
| 344 |
// eslint-disable-next-line no-nested-ternary |
| 345 |
layout === "taxonomy-layout-three" |
| 346 |
? "80%" |
| 347 |
: ["taxonomy-layout-five", "taxonomy-layout-six"].includes(layout) |
| 348 |
? "100%" |
| 349 |
: "", |
| 350 |
|
| 351 |
"justify-content": |
| 352 |
["taxonomy-layout-five", "taxonomy-layout-six"].includes(layout) && contentHorizontalPosition, |
| 353 |
|
| 354 |
display: excerptShow ? "grid" : "flex", |
| 355 |
"align-items": "center", |
| 356 |
"margin-left": ["taxonomy-layout-three", "taxonomy-layout-one"].includes(layout) ? "0px" : "10px", |
| 357 |
"margin-right": layout === "taxonomy-layout-three" ? "0px" : "10px", |
| 358 |
margin: layout === "taxonomy-layout-three" && "unset", |
| 359 |
height: layout === "taxonomy-layout-three" && rangerCss(height, deviceType), |
| 360 |
...(["taxonomy-layout-eight", "taxonomy-layout-four"].includes(layout) && { |
| 361 |
"justify-content": "center", |
| 362 |
|
| 363 |
background: colorControls( |
| 364 |
contentAreaBg.color.style, |
| 365 |
contentAreaBg.color.solidColor, |
| 366 |
contentAreaBg.color.gradient |
| 367 |
), |
| 368 |
|
| 369 |
"border-radius": spacingGenerate(catRadius, deviceType), |
| 370 |
}), |
| 371 |
|
| 372 |
padding: layout !== "taxonomy-layout-one" ? "10px 20px" : "", |
| 373 |
}, |
| 374 |
}, |
| 375 |
|
| 376 |
{ |
| 377 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name div`, |
| 378 |
styles: { |
| 379 |
display: "flex", |
| 380 |
"align-items": "center", |
| 381 |
// 'justify-content': 'center', |
| 382 |
}, |
| 383 |
}, |
| 384 |
|
| 385 |
{ |
| 386 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img`, |
| 387 |
styles: { |
| 388 |
width: imageSize === "custom" ? rangerCss(taxonomyImageWidth, deviceType) : "", |
| 389 |
height: imageSize === "custom" ? rangerCss(taxonomyImageHeight, deviceType) : "", |
| 390 |
}, |
| 391 |
}, |
| 392 |
|
| 393 |
{ |
| 394 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info .sp-smart-post-taxonomy-name .sps-taxonomy-title-name`, |
| 395 |
styles: { |
| 396 |
width: layout === "taxonomy-layout-three" ? "80%" : "", |
| 397 |
"z-index": "2", |
| 398 |
|
| 399 |
...typographyCss(titleTypography), |
| 400 |
"font-size": rangerCss(titleFontSize, deviceType), |
| 401 |
"line-height": titleLineHeight?.device?.[deviceType], |
| 402 |
"letter-spacing": rangerCss(titleLatterSpacing), |
| 403 |
"word-spacing": rangerCss(titleWordSpacing), |
| 404 |
color: titleColor?.color, |
| 405 |
...titleMarginStyles, |
| 406 |
transition: "color 0.3s ease", |
| 407 |
}, |
| 408 |
}, |
| 409 |
|
| 410 |
{ |
| 411 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-name .sps-taxonomy-title-name`, |
| 412 |
styles: { |
| 413 |
color: titleColor?.hoverColor, |
| 414 |
}, |
| 415 |
}, |
| 416 |
{ |
| 417 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-name`, |
| 418 |
styles: { |
| 419 |
color: titleColor?.hoverColor, |
| 420 |
}, |
| 421 |
}, |
| 422 |
|
| 423 |
...(layout === "taxonomy-layout-four" |
| 424 |
? [ |
| 425 |
{ |
| 426 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count`, |
| 427 |
styles: { |
| 428 |
position: "absolute", |
| 429 |
right: "-11px", |
| 430 |
top: "-13px", |
| 431 |
background: "#2F2F2F", |
| 432 |
"border-radius": "50%", |
| 433 |
padding: `${rangerCss(counterHeight, deviceType)} ${rangerCss( |
| 434 |
counterWidth, |
| 435 |
deviceType |
| 436 |
)}`, |
| 437 |
}, |
| 438 |
}, |
| 439 |
{ |
| 440 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name`, |
| 441 |
styles: { |
| 442 |
position: "relative", |
| 443 |
"z-index": "1", |
| 444 |
padding: "8px 14px", |
| 445 |
|
| 446 |
margin: "0px 15px", |
| 447 |
}, |
| 448 |
}, |
| 449 |
] |
| 450 |
: [ |
| 451 |
{ |
| 452 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count`, |
| 453 |
styles: { |
| 454 |
display: layout === "taxonomy-layout-seven" ? "inline-table" : "flex", |
| 455 |
padding: ![ |
| 456 |
"taxonomy-layout-eight", |
| 457 |
"taxonomy-layout-five", |
| 458 |
"taxonomy-layout-six", |
| 459 |
].includes(layout) |
| 460 |
? "8px 10px" |
| 461 |
: "0px 0px 0px 5px", |
| 462 |
"flex-direction": "column", |
| 463 |
"justify-content": "center", |
| 464 |
"align-items": "center", |
| 465 |
gap: "8px", |
| 466 |
"flex-shrink": "0", |
| 467 |
background: |
| 468 |
!counterMultiColorBg && |
| 469 |
colorControls( |
| 470 |
counterCardBg.color.style, |
| 471 |
counterCardBg.color.solidColor, |
| 472 |
counterCardBg.color.gradient |
| 473 |
), |
| 474 |
color: "#ffebee", |
| 475 |
width: |
| 476 |
!["taxonomy-layout-eight", "taxonomy-layout-five", "taxonomy-layout-six"].includes( |
| 477 |
layout |
| 478 |
) && rangerCss(counterWidth, deviceType), |
| 479 |
height: |
| 480 |
!["taxonomy-layout-eight", "taxonomy-layout-five", "taxonomy-layout-six"].includes( |
| 481 |
layout |
| 482 |
) && rangerCss(counterHeight, deviceType), |
| 483 |
"border-style": counterBorder.style, |
| 484 |
"border-color": counterBorder.color, |
| 485 |
"border-width": spacingGenerate(counterBorderWidth, deviceType), |
| 486 |
"border-radius": spacingGenerate(counterBorderRadius, deviceType), |
| 487 |
"box-shadow": boxCss(counterBoxShadowEnable, deviceType, counterBoxShadow, "color"), |
| 488 |
"margin-right": ![ |
| 489 |
"taxonomy-layout-three", |
| 490 |
"taxonomy-layout-eight", |
| 491 |
"taxonomy-layout-five", |
| 492 |
"taxonomy-layout-six", |
| 493 |
"taxonomy-layout-one", |
| 494 |
].includes(layout) |
| 495 |
? "25px" |
| 496 |
: "", |
| 497 |
}, |
| 498 |
}, |
| 499 |
]), |
| 500 |
|
| 501 |
{ |
| 502 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count:hover`, |
| 503 |
styles: { |
| 504 |
background: colorControls( |
| 505 |
counterCardBg.hover.style, |
| 506 |
counterCardBg.hover.solidColor, |
| 507 |
counterCardBg.hover.gradient |
| 508 |
), |
| 509 |
|
| 510 |
"border-style": counterHoverBorder.style, |
| 511 |
"border-color": counterHoverBorder.color, |
| 512 |
"border-width": spacingGenerate(counterHoverBorderWidth, deviceType), |
| 513 |
"border-radius": spacingGenerate(counterHoverBorderRadius, deviceType), |
| 514 |
|
| 515 |
"box-shadow": boxCss(counterHoverBoxShadowEnable, deviceType, counterHoverBoxShadow, "color"), |
| 516 |
}, |
| 517 |
}, |
| 518 |
{ |
| 519 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count span`, |
| 520 |
styles: { |
| 521 |
color: counterColor?.color, |
| 522 |
"text-align": "right", |
| 523 |
...typographyCss(counterTypography), |
| 524 |
"font-size": rangerCss(counterFontSize, deviceType), |
| 525 |
"line-height": counterLineHeight?.device?.[deviceType], |
| 526 |
"letter-spacing": rangerCss(counterLatterSpacing), |
| 527 |
transition: "color 0.3s ease", |
| 528 |
}, |
| 529 |
}, |
| 530 |
|
| 531 |
{ |
| 532 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-count span`, |
| 533 |
styles: { |
| 534 |
color: counterColor?.hoverColor, |
| 535 |
}, |
| 536 |
}, |
| 537 |
|
| 538 |
{ |
| 539 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six`, |
| 540 |
styles: { |
| 541 |
"flex-direction": "column", |
| 542 |
|
| 543 |
...(layout === "taxonomy-layout-six" && { |
| 544 |
"border-width": spacingGenerate(postCardBorderWidth, deviceType), |
| 545 |
}), |
| 546 |
}, |
| 547 |
}, |
| 548 |
|
| 549 |
{ |
| 550 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-taxonomy-no-results`, |
| 551 |
styles: { |
| 552 |
"text-align": "center", |
| 553 |
color: "#666", |
| 554 |
padding: "1rem", |
| 555 |
"font-style": "italic", |
| 556 |
}, |
| 557 |
}, |
| 558 |
|
| 559 |
{ |
| 560 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name,.sp-smart-post-taxonomy-count`, |
| 561 |
styles: { |
| 562 |
position: "relative", |
| 563 |
"z-index": "1", |
| 564 |
}, |
| 565 |
}, |
| 566 |
|
| 567 |
{ |
| 568 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div`, |
| 569 |
styles: { |
| 570 |
height: "180px", |
| 571 |
"align-self": "stretch", |
| 572 |
position: "relative", |
| 573 |
}, |
| 574 |
}, |
| 575 |
|
| 576 |
{ |
| 577 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-card .sp-smart-post-card-image.img-opacity img`, |
| 578 |
styles: { |
| 579 |
opacity: hoverOpacityEffect, |
| 580 |
}, |
| 581 |
}, |
| 582 |
|
| 583 |
{ |
| 584 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div img`, |
| 585 |
styles: { |
| 586 |
width: imageSize !== "custom" ? "100%" : "", |
| 587 |
height: imageSize !== "custom" ? "180px" : "", |
| 588 |
"object-fit": "cover", |
| 589 |
display: "block", |
| 590 |
filter: `blur(${rangerCss(blurEffect, deviceType)}) brightness(${ |
| 591 |
brightnessEffect?.device?.[deviceType] |
| 592 |
}) ${grayscaleMode === "grayscale" ? "grayscale(100%)" : "grayscale(0%)"}`, |
| 593 |
|
| 594 |
"border-style": imageBorder.style, |
| 595 |
"border-color": imageBorder.color, |
| 596 |
"border-width": spacingGenerate(imageBorderWidth, deviceType), |
| 597 |
"border-radius": spacingGenerate(imageBorderRadius, deviceType), |
| 598 |
}, |
| 599 |
}, |
| 600 |
|
| 601 |
{ |
| 602 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div:hover img`, |
| 603 |
styles: { |
| 604 |
filter: `blur(${rangerCss(blurEffectHover, deviceType)}) brightness(${ |
| 605 |
brightnessEffectHover?.device?.[deviceType] |
| 606 |
}) ${ |
| 607 |
// eslint-disable-next-line no-nested-ternary |
| 608 |
grayscaleMode === "original" && grayscaleOnHover |
| 609 |
? "grayscale(100%)" |
| 610 |
: grayscaleMode === "grayscale" && !originalOnHover |
| 611 |
? "grayscale(100%)" |
| 612 |
: "" |
| 613 |
}`, |
| 614 |
|
| 615 |
"border-style": imageBorderHover.hoverStyle, |
| 616 |
"border-color": imageBorderHover.hoverColor, |
| 617 |
"border-width": spacingGenerate(imageBorderWidthHover, deviceType), |
| 618 |
"border-radius": spacingGenerate(imageBorderRadiusHover, deviceType), |
| 619 |
}, |
| 620 |
}, |
| 621 |
|
| 622 |
{ |
| 623 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .overlay-custom`, |
| 624 |
styles: { |
| 625 |
background: imageOverlayCustom, |
| 626 |
}, |
| 627 |
}, |
| 628 |
|
| 629 |
{ |
| 630 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-excerpt`, |
| 631 |
styles: { |
| 632 |
...typographyCss(excerptTypography), |
| 633 |
"font-size": rangerCss(excerptFontSize, deviceType), |
| 634 |
"word-spacing": rangerCss(excerptWordSpacing), |
| 635 |
"line-height": excerptLineHeight?.device?.[deviceType], |
| 636 |
"letter-spacing": rangerCss(excerptLatterSpacing), |
| 637 |
color: excerptColor?.color, |
| 638 |
...excerptMarginStyles, |
| 639 |
"z-index": "2", |
| 640 |
}, |
| 641 |
}, |
| 642 |
|
| 643 |
{ |
| 644 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-excerpt:hover`, |
| 645 |
styles: { |
| 646 |
color: excerptColor?.hoverColor, |
| 647 |
}, |
| 648 |
}, |
| 649 |
]; |
| 650 |
|
| 651 |
return allResponsiveCss; |
| 652 |
}; |
| 653 |
|
| 654 |
const desktopCss = [ |
| 655 |
...taxonomyResponsiveCss("Desktop") |
| 656 |
]; |
| 657 |
cacheCss.desktop = objectToCssString(desktopCss); |
| 658 |
|
| 659 |
if ("Tablet" === currentDevice || "all" === currentDevice) { |
| 660 |
const tabletCss = [ |
| 661 |
...taxonomyResponsiveCss("Tablet") |
| 662 |
]; |
| 663 |
cacheCss.tablet = wrapInMediaQuery( |
| 664 |
objectToCssString(tabletCss), |
| 665 |
`only screen and (max-width: ${globalBreakPointData?.tablet}px)` |
| 666 |
); |
| 667 |
} |
| 668 |
if ("Mobile" === currentDevice || "all" === currentDevice) { |
| 669 |
const mobileCss = [ |
| 670 |
...taxonomyResponsiveCss("Mobile"), |
| 671 |
{ |
| 672 |
class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-hide-post-text`, |
| 673 |
styles: { |
| 674 |
display: "none", |
| 675 |
}, |
| 676 |
} |
| 677 |
]; |
| 678 |
|
| 679 |
cacheCss.mobile = wrapInMediaQuery( |
| 680 |
objectToCssString(mobileCss), |
| 681 |
`only screen and (max-width: ${globalBreakPointData?.mobile}px)` |
| 682 |
); |
| 683 |
} |
| 684 |
return `${cacheCss.desktop} ${cacheCss.tablet} ${cacheCss.mobile}`; |
| 685 |
}; |
| 686 |
|
| 687 |
export default dynamicCss; |
| 688 |
|
