templates/_snippets/components/_section.html.twig line 1

Open in your IDE?
  1. {# Style de la section #}
  3. {% set sectionId = ('#'~section(content).id|raw) %}
  4. {% set section = section(content) %}
  5. {% set title = title(content) %}
  7. {% set backgroundGradientDirection = section.backgroundGradientDirection|default('to right') %}
  8. {% set backgroundGradientColor1 = section.backgroundGradientColor1|default('#000') %}
  9. {% set backgroundGradientColor2 = section.backgroundGradientColor2|default('#fff') %}
  10. {% set backgroundGradientColor1Position = section.backgroundGradientColor1Position|default(0) %}
  11. {% set backgroundGradientColor2Position = section.backgroundGradientColor2Position|default(100) %}
  13. {{ sectionId }}{
  14. {{ paddings(section.padding.unit, section.padding.top, section.padding.right, section.padding.bottom, section.padding.left) }}
  15. {% if section.gap.value is not none and section.gap.value != 0 %}grid-gap: {{ (section.gap.value~section.gap.unit)|raw }};{% endif %}
  16. {% if section.minHeight is not none and section.minHeight != 0 %}min-height: {{ (section.minHeight~section.minHeightUnit)|raw }};{% endif %}
  17. }
  19. {% if section.noBackgroundCheckbox == false %}
  20. {% if section.backgroundCheckbox == true %}
  21. {# Je préfère une couleur plutôt qu'une image #}
  22. {{ sectionId }}{
  23. {% if section.backgroundGradientCheckbox == true %}
  24. background: linear-gradient({{ section.backgroundGradientDirection }}, {{ section.backgroundGradientColor1 ~ ' ' ~ section.backgroundGradientColor1Position ~ '%' }}, {{ section.backgroundGradientColor2 ~ ' ' ~ section.backgroundGradientColor2Position ~ '%' }});
  25. {% else %}
  26. {% if section.backgroundColor is not none and section.backgroundColor != '' %}background-color: {{ (section.backgroundColor)|raw }};{% endif %}
  27. {% endif %}
  28. }
  29. {% else %}
  30. {# Je préfère une image plutôt qu'une couleur #}
  31. {{ sectionId }}{
  32. position: relative;
  33. background-size: cover !important;
  34. {% if section.backgroundImage is not none and section.backgroundImage.url != '' %}background: url('{{ (section.backgroundImage.url)|raw }}') no-repeat;{% endif %}
  35. }
  37. {{ sectionId }}::after{
  38. content: "";
  39. {% if section.backgroundFilter is not none and section.backgroundFilter != '' %}background-color: {{ (section.backgroundFilter)|raw }};{% endif %}
  40. {% if section.backgroundFilterOpacity is not none %}opacity: {{ (section.backgroundFilterOpacity)|raw }};{% endif %}
  41. position: absolute;
  42. top: 0;
  43. left: 0;
  44. width: 100%;
  45. height: 100%;
  46. z-index: 1;
  47. }
  49. {{ sectionId }}>*{
  50. z-index: 2;
  51. position: relative;
  52. }
  53. {% endif %}
  54. {% endif %}