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

Open in your IDE?
  1. {# ----------------------------- PARAMÈTRAGES ----------------------------- #}
  2. {# ------------------------------------------------------------------------ #}
  4. {# Appliquer uniquement les styles réellement renseignés #}
  5. {% set typeTitleSection = (content.typeTitleSection is defined and content.typeTitleSection is not empty) ? content.typeTitleSection : 'h2' %}
  6. {% set paddingUnitSection = content.paddingUnitSection|default('px') %}
  7. {% set bordersRadiusUnitSection = content.bordersRadiusUnitSection|default('px') %}
  8. {% set titleSizeUnitSection = content.titleSizeUnitSection|default('px') %}
  9. {% set pictogramBorderRadiusUnitSection = content.pictogramBorderRadiusUnitSection|default('px') %}
  10. {% set pictogramBorderSizeUnitSection = content.pictogramBorderSizeUnitSection|default('px') %}
  12. {% set sectionSettings = {
  13. 'background-color': (content.backgroundColorSection is defined and content.backgroundColorSection is not empty) ? content.backgroundColorSection : null,
  14. 'padding': (content.paddingTopBottomSection is defined and content.paddingLeftRightSection is defined) ? content.paddingTopBottomSection ~ paddingUnitSection ~ ' ' ~ content.paddingLeftRightSection ~ paddingUnitSection : null,
  15. 'border-radius': (content.bordersRadiusSection is defined and content.bordersRadiusSection is not null) ? content.bordersRadiusSection ~ bordersRadiusUnitSection : null,
  16. }|filter((value) => value is not null) %}
  18. {% set titleSectionSettings = {
  19. 'font-weight': (content.weightTitleSection is defined and content.weightTitleSection is not empty) ? content.weightTitleSection : null,
  20. 'font-size': (content.titleSizeSection is defined and content.titleSizeSection is not null) ? content.titleSizeSection ~ titleSizeUnitSection : null,
  21. }|filter((value) => value is not null) %}
  23. {% set pictogramSectionSettings = {
  24. 'color': (content.pictogramTitleColorSection is defined and content.pictogramTitleColorSection is not empty) ? content.pictogramTitleColorSection : null,
  25. 'background-color': (content.pictogramTitleBackgroundColorSection is defined and content.pictogramTitleBackgroundColorSection is not empty) ? content.pictogramTitleBackgroundColorSection : null,
  26. 'border-radius': (content.pictogramBorderRadiusSection is defined and content.pictogramBorderRadiusSection is not null) ? content.pictogramBorderRadiusSection ~ pictogramBorderRadiusUnitSection : null,
  27. 'border': (content.pictogramBorderSizeSection is defined and content.pictogramBorderSizeSection is not null and content.pictogramBorderColorSection is defined and content.pictogramBorderColorSection is not empty) ? content.pictogramBorderSizeSection ~ pictogramBorderSizeUnitSection ~ ' solid ' ~ content.pictogramBorderColorSection : null,
  28. }|filter((value) => value is not null) %}
  29. {% set shouldRenderTitleStyles = titleSectionSettings is not empty or pictogramSectionSettings is not empty %}
  31. <style>
  33. {% if sectionSettings is not empty %}
  34. #{{ id }} {
  35. {{ sectionSettings|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  36. }
  37. {% endif %}
  39. {% if shouldRenderTitleStyles %}
  40. #{{ id }} {{ typeTitleSection }} {
  41. display: inline-flex;
  42. justify-content: flex-start;
  43. align-items: center;
  44. gap: 0.75rem;
  45. {{ titleSectionSettings|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  46. }
  47. {% endif %}
  49. #{{ id }} :is(h1, h2, h3, h4, h5, h6) > .icon {
  50. box-sizing: border-box;
  51. {% if pictogramSectionSettings is not empty %}
  52. {{ pictogramSectionSettings|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  53. {% endif %}
  54. }
  56. #{{ id }} :is(h1, h2, h3, h4, h5, h6) > .icon svg {
  57. padding: 3px;
  58. }
  59. </style>