templates/components/Spacer/index.twig line 1

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