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>