Skip to content

Commit

Permalink
SHOPBASE-16 Add styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChelseyRiewerTrellis
ChelseyRiewerTrellis committed Aug 8, 2024
1 parent 62b2f6f commit 1de7cd2
Showing 1 changed file with 99 additions and 78 deletions.
177 changes: 99 additions & 78 deletions snippets/header-mega-menu.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,87 +31,108 @@
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
tabindex="-1"
>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- if grandchildlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for greatgrandchildlink in grandchildlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
href="{{ greatgrandchildlink.url }}"
class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
{% if greatgrandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ greatgrandchildlink.title | escape }}
</a>
</li>
{%- if greatgrandchildlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for greatgreatgrandchildlink in greatgrandchildlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ greatgrandchildlink.handle }}-{{ greatgreatgrandchildlink.handle }}"
href="{{ greatgreatgrandchildlink.url }}"
class="mega-menu__link link{% if greatgreatgrandchildlink.current %} mega-menu__link--active{% endif %}"
{% if greatgreatgrandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ greatgreatgrandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endfor -%}
</ul>
<div class="page-width twcss-flex">
<ul
class="mega-menu__list twcss-flex-1 {% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- if grandchildlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for greatgrandchildlink in grandchildlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
href="{{ greatgrandchildlink.url }}"
class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
{% if greatgrandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ greatgrandchildlink.title | escape }}
</a>
</li>
{%- if greatgrandchildlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for greatgreatgrandchildlink in greatgrandchildlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ greatgrandchildlink.handle }}-{{ greatgreatgrandchildlink.handle }}"
href="{{ greatgreatgrandchildlink.url }}"
class="mega-menu__link link{% if greatgreatgrandchildlink.current %} mega-menu__link--active{% endif %}"
{% if greatgreatgrandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ greatgreatgrandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- for block in blocks -%}
{% case block.type %}
{%- when 'promotional' -%}
{%- if block.settings.promotional_index == parent_index -%}
<div class="twcss-w-full twcss-max-w-64 twcss-flex twcss-flex-col twcss-gap-4">
{%- if block.settings.promotional_headline -%}
<img class="twcss-aspect-square" src="{{ block.settings.promotional_image | image_url }}" alt="{{ block.settings.promotional_image.alt | escape }}">

Check failure on line 114 in snippets/header-mega-menu.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

snippets/header-mega-menu.liquid#L114 

[ImgWidthAndHeight] Missing width and height attributes

Check warning on line 114 in snippets/header-mega-menu.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

snippets/header-mega-menu.liquid#L114 

[ImgLazyLoading] Use loading="eager" for images visible in the viewport on load and loading="lazy" for others
{%- endif -%}
{%- if block.settings.promotional_headline -%}
<div class="twcss-text-large">
{{ block.settings.promotional_headline }}
</div>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
{%- for block in blocks -%}
{% case block.type %}
{%- when 'promotional' -%}
{%- if block.settings.promotional_index == parent_index -%}
{{ block.settings.promotional_headline }}
{%- if block.settings.promotional_description -%}
<p class="twcss-text-base">
{{ block.settings.promotional_description }}
</p>
{%- endif -%}
{%- if block.settings.promotional_button_text and block.settings.promotional_button_url -%}
<a href="{{ block.settings.promotional_button_url }}" class="button button--secondary twcss-text-base">
{{ block.settings.promotional_button_text }}
</a>
{%- endif -%}
{% endcase %}
{%- endfor -%}
</li>
</div>
{%- endif -%}
{% endcase %}
{%- endfor -%}
</ul>
</div>
</div>
</details>
</header-menu>
Expand Down

0 comments on commit 1de7cd2

Please sign in to comment.