templates/_snippets/sections/cards_section_settings.html.twig line 1

Open in your IDE?
  1. {# ----------------------------- PARAMÈTRAGES ----------------------------- #}
  2. {# ------------------------------------------------------------------------ #}
  4. <!-- Variables CSS pour les cards -->
  5. <style>
  6. #{{ id }} {
  7. /* Cards container */
  8. --cards-gap: {{ content.gapCards|default(25) ~ content.gapUnitCards|default('px') }};
  10. /* Card dimensions */
  11. --card-max-width: {{ content.widthCards|default(100) ~ content.widthUnitCards|default('%') }};
  12. --card-border-radius: {{ content.borderRadiusCards|default(0) ~ content.borderRadiusUnitCards|default('px') }};
  14. /* Card border (conditionnel) */
  15. {% if content.isBorderCards|default(false) %}
  16. --card-border: {{ content.borderSizeCards|default(1) ~ content.borderSizeUnitCards|default('px') }} solid {{ content.borderColorCards|default('#000') }};
  17. {% endif %}
  19. /* Card box shadow (conditionnel) */
  20. {% if content.isBoxShadowCards|default(false) %}
  21. --card-box-shadow: {{ content.boxShadowPosXCards|default(0) ~ content.boxShadowUnitCards|default('px') }} {{ content.boxShadowPosYCards|default(0) ~ content.boxShadowUnitCards|default('px') }} {{ content.boxShadowSpreadCards|default(0) ~ content.boxShadowUnitCards|default('px') }} {{ content.boxShadowColorCards|default('#000') }};
  22. {% endif %}
  24. /* Card inner padding */
  25. --card-inner-padding: {{ content.paddingTopBottomCards|default(0) ~ content.paddingUnitCards|default('px') }} {{ content.paddingRightLeftCards|default(0) ~ content.paddingUnitCards|default('px') }};
  27. /* Typography - Title */
  28. --card-title-color: {{ content.titleColorCards|default('#000') }};
  29. --card-title-size: {{ content.titleSizeCards|default(16) ~ content.titleSizeUnitCards|default('px') }};
  30. --card-title-weight: {{ content.titleWeightCards|default(500) }};
  32. /* Typography - Text */
  33. --card-text-color: {{ content.textColorCards|default('#000') }};
  34. --card-text-size: {{ content.textSizeCards|default(16) ~ content.textSizeUnitCards|default('px') }};
  35. --card-text-weight: {{ content.textWeightCards|default(500) }};
  37. /* Price */
  38. --card-price-color: {{ content.priceColorCards|default('#000') }};
  39. --card-price-bg-color: {{ content.priceBackgroundColorCards|default('transparent') }};
  40. --card-price-size: {{ content.priceSizeCards|default(16) ~ content.priceSizeUnitCards|default('px') }};
  41. --card-price-weight: {{ content.priceWeightCards|default(500) }};
  42. --card-price-border-radius: {{ content.priceBorderRadiusCards|default(0) ~ content.priceBorderRadiusUnitCards|default('px') }};
  43. --card-price-padding: {{ content.pricePaddingCards|default(0) ~ content.pricePaddingUnitCards|default('px') }};
  44. }
  45. </style>