templates/components/Spacer/index.html.twig line 1

Open in your IDE?
  1. {% set spacerClassName = random() %}
  2. {% set className = className ?? '' %}
  3. {% set containerId = containerId ?? null %}
  4. {% set height = height ?? null %}
  5. {% set mediumHeight = mediumHeight ?? null %}
  6. {% set largeHeight = largeHeight ?? null %}
  7. {% set xlargeHeight = xlargeHeight ?? null %}
  8. {% set width = width ?? null %}
  9. {% set mediumWidth = mediumWidth ?? null %}
  10. {% set largeWidth = largeWidth ?? null %}
  11. {% set xlargeWidth = xlargeWidth ?? null %}
  13. <div class="spacer-{{ spacerClassName }} {{ className }}" {% if containerId != null %}id="{{ containerId }}"{% endif %}></div>
  14. <style>
  15. .spacer-{{ spacerClassName }} {
  16. {% if height %}
  17. height: {{ height / 16 }}rem;
  18. {% endif %}
  19. {% if width %}
  20. flex: 0 0 {{ width / 16 }}rem;
  21. width: {{ width / 16 }}rem;
  22. {% endif %}
  23. }
  25. @media screen and (min-width: 640px) {
  26. .spacer-{{ spacerClassName }} {
  27. {% if mediumHeight is not null %}
  28. height: {{ mediumHeight / 16 }}rem;
  29. {% endif %}
  30. {% if mediumWidth is not null %}
  31. flex: 0 0 {{ mediumWidth / 16 }}rem;
  32. width: {{ mediumWidth / 16 }}rem;
  33. {% endif %}
  34. }
  35. }
  37. @media screen and (min-width: 1024px) {
  38. .spacer-{{ spacerClassName }} {
  39. {% if largeHeight is not null %}
  40. height: {{ largeHeight / 16 }}rem;
  41. {% endif %}
  42. {% if largeWidth is not null %}
  43. flex: 0 0 {{ largeWidth / 16 }}rem;
  44. width: {{ largeWidth / 16 }}rem;
  45. {% endif %}
  46. }
  47. }
  49. @media screen and (min-width: 1200px) {
  50. .spacer-{{ spacerClassName }} {
  51. {% if xlargeHeight is not null %}
  52. height: {{ xlargeHeight / 16 }}rem;
  53. {% endif %}
  54. {% if xlargeWidth is not null %}
  55. flex: 0 0 {{ xlargeWidth / 16 }}rem;
  56. width: {{ xlargeWidth / 16 }}rem;
  57. {% endif %}
  58. }
  59. }
  60. </style>