desy-html 10.1.0 → 10.2.0

package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css

@@ -3,6 +3,74 @@
    ========================================================================== */
 
 @layer components {
+  .c-menu-horizontal--links {
+    .c-menu-horizontal__link {
+      @apply text-primary-base;
+
+      &[disabled],
+      &[disabled]:hover,
+      &[disabled]:focus {
+        @apply opacity-50;
+        @apply text-black;
+        @apply cursor-not-allowed;
+      }
+    }
+  }
+
+  .c-menu-horizontal--navigation-bar {
+    @apply border-l-0;
+    @apply border-b;
+    @apply border-b-neutral-dark;
+
+    .c-menu-horizontal__link {
+      @apply border-none;
+      @apply no-underline;
+      @apply hover:bg-neutral-lighter;
+
+      &.c-menu-horizontal__active {
+        @apply hover:no-underline;
+        @apply font-bold;
+      }
+
+      &:hover:not(disabled) {
+        @apply bg-neutral-light;
+      }
+
+      &[disabled],
+      &[disabled]:hover,
+      &[disabled]:focus {
+        @apply bg-white;
+        @apply opacity-50;
+        @apply cursor-not-allowed;
+      }
+    }
+
+    .c-menu-horizontal__list {
+      @apply flex;
+      @apply flex-wrap;
+      @apply relative;
+      @apply w-full;
+    }
+
+    .c-menu-horizontal__active {
+      @apply hover:no-underline;
+      @apply relative;
+
+      &::after {
+        content: "";
+        @apply block;
+        @apply absolute;
+        @apply left-0;
+        @apply right-0;
+        @apply top-auto;
+        @apply bottom-0;
+        @apply w-auto;
+        @apply h-xs;
+        @apply bg-neutral-dark;
+      }
+    }
+  }
+
   .c-menu-horizontal--tabs {
     @apply lg:border-b;
     @apply lg:border-neutral-dark;
@@ -66,7 +134,8 @@
   }
 
   .c-menu-horizontal__link {
-    &:focus span{
+    &:focus > span,
+    &:focus > strong {
       @apply bg-warning-base;
       @apply shadow-outline-focus;
       @apply text-black;
@@ -75,15 +144,13 @@
 
     &.c-menu-horizontal__active {
       @apply no-underline;
-      &:hover {
-        @apply underline;
-      }
+      @apply hover:underline;
     }
   }
 
   .c-menu-horizontal--scroll {
     .c-menu-horizontal__list {
-      @apply relative w-full flex lg:flex-nowrap snap-x overflow-x-auto -mb-0.5;
+      @apply relative w-full flex flex-nowrap snap-x overflow-x-auto;
 
       & > li {
         @apply snap-start;

package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk

@@ -16,12 +16,12 @@
     {% endif %}
     <li>
     {% if item.active %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+        <strong class="flex items-center pointer-events-none font-bold">{{ item.html | safe if item.html else item.text }}</strong>
       </a>
     {% else %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         <span class="flex items-center pointer-events-none">
           {{ item.html | safe if item.html else item.text }}

package/src/templates/components/menu-vertical/_template.menu-vertical.njk

@@ -13,7 +13,7 @@
           {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif -%}
         {% set subId = "sub-" + id %}
-    <li class="m-base">
+    <li class="my-base break-inside-avoid-column">
       {% if item.href %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% if item.active %}