hr-design-system-handlebars 0.56.4 → 0.56.7

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.56.7 (Thu Sep 01 2022)
+
+#### 🐛 Bug Fix
+
+- adds some of mithras designs [#312](https://github.com/mumprod/hr-design-system-handlebars/pull/312) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.6 (Wed Aug 31 2022)
+
+#### 🐛 Bug Fix
+
+- adds autosuggest to list and flow, several refactoring [#311](https://github.com/mumprod/hr-design-system-handlebars/pull/311) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.5 (Wed Aug 31 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part6 [#310](https://github.com/mumprod/hr-design-system-handlebars/pull/310) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.4 (Wed Aug 31 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -434,7 +434,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\], .shadow-inner, .shadow-xl {
+.btn--secondary, .shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -596,6 +596,9 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -633,15 +636,15 @@ video {
 .top-full {
   top: 100%;
 }
-.z-10001 {
-  z-index: 10001;
-}
 .z-10000 {
   z-index: 10000;
 }
 .z-10002 {
   z-index: 10002;
 }
+.z-10001 {
+  z-index: 10001;
+}
 .-z-1000 {
   z-index: -1000;
 }
@@ -686,10 +689,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -728,17 +727,11 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
-.\!mb-0 {
-  margin-bottom: 0px !important;
-}
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-.\!mr-2 {
-  margin-right: 0.5rem !important;
+.mt-2 {
+  margin-top: 0.5rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
+.mt-0 {
+  margin-top: 0px;
 }
 .mt-1 {
   margin-top: 0.25rem;
@@ -749,15 +742,27 @@ video {
 .-mt-2 {
   margin-top: -0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .-mt-40 {
   margin-top: -10rem;
 }
 .-mt-10 {
   margin-top: -2.5rem;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
+.ml-0 {
+  margin-left: 0px;
+}
+.\!mr-2 {
+  margin-right: 0.5rem !important;
+}
+.mr-2 {
+  margin-right: 0.5rem;
+}
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -770,9 +775,6 @@ video {
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
-.mt-0 {
-  margin-top: 0px;
-}
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -891,6 +893,18 @@ video {
 .w-full {
   width: 100%;
 }
+.w-4 {
+  width: 1rem;
+}
+.w-auto {
+  width: auto;
+}
+.w-6 {
+  width: 1.5rem;
+}
+.w-screen {
+  width: 100vw;
+}
 .\!w-full {
   width: 100% !important;
 }
@@ -904,18 +918,6 @@ video {
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-4 {
-  width: 1rem;
-}
-.w-auto {
-  width: auto;
-}
-.w-6 {
-  width: 1.5rem;
-}
-.w-screen {
-  width: 100vw;
-}
 .w-7 {
   width: 1.75rem;
 }
@@ -967,6 +969,11 @@ video {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+.grow {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
 .basis-2\/3 {
   -ms-flex-preferred-size: 66.666667%;
       flex-basis: 66.666667%;
@@ -1205,6 +1212,12 @@ video {
   border-left-width: 1px;
   border-right-width: 1px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-l {
+  border-left-width: 1px;
+}
 .border-l-0 {
   border-left-width: 0px;
 }
@@ -1214,12 +1227,6 @@ video {
 .border-t-0 {
   border-top-width: 0px;
 }
-.border-b {
-  border-bottom-width: 1px;
-}
-.border-l {
-  border-left-width: 1px;
-}
 .border-r {
   border-right-width: 1px;
 }
@@ -1288,13 +1295,17 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
-.bg-gray-200 {
+.bg-blue-accented {
   --tw-bg-opacity: 1;
-  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
 }
 .bg-gray-500 {
   --tw-bg-opacity: 1;
@@ -1444,14 +1455,14 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.\!px-0 {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1504,12 +1515,15 @@ video {
   padding-top: 1px;
   padding-bottom: 1px;
 }
-.pl-4 {
-  padding-left: 1rem;
+.pl-2 {
+  padding-left: 0.5rem;
 }
 .pt-px {
   padding-top: 1px;
 }
+.pl-4 {
+  padding-left: 1rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1689,10 +1703,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgba(0, 0, 0, var(--tw-text-opacity));
-}
 .text-orange-spicyCarrot {
   --tw-text-opacity: 1;
   color: rgba(211, 70, 0, var(--tw-text-opacity));
@@ -1701,6 +1711,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
 .text-blue-science {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
@@ -1762,9 +1776,18 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
-.shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\] {
-  --tw-shadow: 0 13px 27px -2px rgba(50,50,93,0.25);
-  --tw-shadow-colored: 0 13px 27px -2px var(--tw-shadow-color);
+.shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10);
+  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color);
+  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
+  --tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
   -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
           box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -1873,7 +1896,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1661946876001;
+  counter-reset: cnt1662050483686;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2256,7 +2279,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1661946876001 1;
+  counter-increment: cnt1662050483686 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2273,7 +2296,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1661946876001);
+  content: counter(cnt1662050483686);
 }
 /*! purgecss start ignore */
 :root,
@@ -2641,6 +2664,26 @@ video {
     right: 0;
     bottom: 0;
 }
+.placeholder\:text-gray-800::-webkit-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800:-ms-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::-ms-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.placeholder\:text-gray-800::placeholder {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
 .first\:border-t:first-child {
   border-top-width: 1px;
 }
@@ -2650,6 +2693,9 @@ video {
 .first\:font-bold:first-child {
   font-weight: 700;
 }
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -2685,6 +2731,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
+.hover\:\!bg-white:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
+}
 .hover\:fill-white:hover {
   fill: #ffffff;
 }
@@ -2694,6 +2744,12 @@ video {
 .hover\:fill-blue-jellyBean:hover {
   fill: #006dc1;
 }
+.hover\:\!fill-congress:hover {
+  fill: #005293 !important;
+}
+.hover\:fill-congress:hover {
+  fill: #005293;
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);
@@ -2702,10 +2758,22 @@ video {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.hover\:text-blue-congress:hover {
+  --tw-text-opacity: 1;
+  color: rgba(0, 82, 147, var(--tw-text-opacity));
+}
+.hover\:\!text-blue-congress:hover {
+  --tw-text-opacity: 1 !important;
+  color: rgba(0, 82, 147, var(--tw-text-opacity)) !important;
+}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:no-underline:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2821,12 +2889,16 @@ video {
     margin-right: 0px;
   }
 
-  .md\:mb-0 {
-    margin-bottom: 0px;
+  .md\:mt-0 {
+    margin-top: 0px;
   }
 
-  .md\:\!mr-0 {
-    margin-right: 0px !important;
+  .md\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .md\:\!mr-2 {
+    margin-right: 0.5rem !important;
   }
 
   .md\:\!mb-2 {
@@ -2837,16 +2909,16 @@ video {
     margin-right: 0.5rem;
   }
 
-  .md\:\!mr-2 {
-    margin-right: 0.5rem !important;
+  .md\:mb-0 {
+    margin-bottom: 0px;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
+  .md\:\!mr-0 {
+    margin-right: 0px !important;
   }
 
-  .md\:-mt-40 {
-    margin-top: -10rem;
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
   }
 
   .md\:mb-16 {
@@ -2891,14 +2963,8 @@ video {
     height: 2rem;
   }
 
-  .md\:\!w-full {
-    width: 100% !important;
-  }
-
-  .md\:\!w-fit {
-    width: -webkit-fit-content !important;
-    width: -moz-fit-content !important;
-    width: fit-content !important;
+  .md\:w-1\/2 {
+    width: 50%;
   }
 
   .md\:w-fit {
@@ -2907,8 +2973,14 @@ video {
     width: fit-content;
   }
 
-  .md\:w-1\/2 {
-    width: 50%;
+  .md\:\!w-fit {
+    width: -webkit-fit-content !important;
+    width: -moz-fit-content !important;
+    width: fit-content !important;
+  }
+
+  .md\:\!w-full {
+    width: 100% !important;
   }
 
   .md\:w-40 {
@@ -2992,12 +3064,16 @@ video {
     border-bottom-right-radius: 1.5rem;
   }
 
+  .md\:border-0 {
+    border-width: 0px;
+  }
+
   .md\:\!border {
     border-width: 1px !important;
   }
 
-  .md\:border-0 {
-    border-width: 0px;
+  .md\:border {
+    border-width: 1px;
   }
 
   .md\:border-r {
@@ -3017,6 +3093,11 @@ video {
     border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   }
 
+  .md\:border-blue-congress {
+    --tw-border-opacity: 1;
+    border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+  }
+
   .md\:bg-neutral-200 {
     --tw-bg-opacity: 1;
     background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
@@ -3161,6 +3242,34 @@ video {
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
   }
+
+    .md\:hover\:\!bg-blue-congress:hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgba(0, 82, 147, var(--tw-bg-opacity)) !important;
+  }
+
+    .md\:hover\:\!fill-white:hover {
+    fill: #ffffff !important;
+  }
+
+    .md\:hover\:fill-white:hover {
+    fill: #ffffff;
+  }
+
+    .md\:hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+  }
+
+    .md\:hover\:\!text-white:hover {
+    --tw-text-opacity: 1 !important;
+    color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
+  }
+
+    .md\:hover\:no-underline:hover {
+    -webkit-text-decoration-line: none;
+            text-decoration-line: none;
+  }
 }
 @media (min-width: 1024px) {
 

package/dist/views/components/content_nav/content_nav.hbs

@@ -1,13 +1,40 @@
 {{#with this.contentNav}} 
-    {{#if this.isList}}
-        <nav class="c-content-nav {{../_modifier}} ">
+    {{#if this.isList}} 
+        <nav class="c-content-nav"> 
+            <div x-on:click.outside ="$store.contentNavDropdownIsOpen = false;" class="flex flex-wrap mt-2 md:mt-0 {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+                {{#if this.isAutosuggest}}
+                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+                {{/if}}
+                >
+                {{#if this.isAutosuggest}}
+                    <div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
+                        <input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
+                                placeholder="Eintrag filtern"/>
+                    </div>
+                {{/if}}
+            
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+            </div>
+
         </nav>
     {{else if this.isFlow}}
-        <nav class="c-content-nav {{../_modifier}} ">
+        <nav class="c-content-nav">
+            <div x-on:click.outside ="$store.contentNavDropdownIsOpen = false" class="flex flex-wrap mt-2 md:mt-0 {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+                {{#if this.isAutosuggest}}
+                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+                {{/if}}
+                >
+                {{#if this.isAutosuggest}}
+                    <div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
+                        <input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
+                                placeholder="Eintrag filtern"/>
+                    </div>
+                {{/if}}
+            
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+            </div>
         </nav>
-    {{else}} 
+    {{else}}  
         {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize
@@ -16,14 +43,14 @@
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
                      _hiddenNavigationLabel="Unternavigation"
         }} 
-            <div x-on:click.outside ="open = false;" class="flex flex-wrap {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+            <div x-on:click.outside ="$store.contentNavDropdownIsOpen = false" class="flex flex-wrap mt-0 {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
                 {{#if this.isAutosuggest}}
                     data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
                 {{/if}}
                 >
                 {{#if this.isAutosuggest}}
-                    <div class="flex w-full h-10 my-2 c-content-nav__autosuggest border-blue-congress align-center">
-                        <input x-ref="autosuggestInput" class="w-full pl-4 focus:outline-none js-autosuggest-input" type="text"
+                    <div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
+                        <input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
                                 placeholder="Eintrag filtern"/>
                     </div>
                 {{/if}}
@@ -32,5 +59,5 @@
             </div>
         {{/components/content_nav/dropdown}}
 
-    {{/if}}   
-{{/with}}
+    {{/if}}
+{{/with}} 

package/dist/views/components/content_nav/content_nav_item.hbs

@@ -1,31 +1,25 @@
-<li :class="{{_isdropdown}} ? '!w-full md:!w-full md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0' 
-            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit !mb-0 md:!mb-2 md:mr-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 md:!border' 
-            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full !mb-0 border-b last:border-b-0'
-            : {{_islist}} && {{_teasersize}} == 100 ? 'border mb-2 md:!mr-2 '
-            : {{_islist}} && {{_teasersize}} == 66 ? 'border mb-2 !mr-2 '
-            : {{_islist}} && {{_teasersize}} <= 50 ? 'border mb-2 md:!mr-2'
-            : {{_isflow}} ? '!w-fit !mr-2 border mb-2'
-            : '' " 
-
-class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit","w-fit","w-full","w-full","w-full"]'}} h-8 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
+<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
+class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
      {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress whitespace-nowrap overflow-hidden" 
+        _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}
-
-        <span>
-            {{>components/base/image/icon _icon="arrow-right" _addClass=" h-4 w-4 mr-2" }} 
-        </span>
-
-        <span class="mt-1 text-base font-copy js-title">{{this.title}}</span>
+        
+        <span class="flex mt-1 text-base grow font-copy js-title">{{this.title}}</span>
 
         {{#if this.link.hasIcon}}
             {{> components/base/image/icon _icon=this.link.iconName _addClass="mt-1 ml-2 h-4 w-4" _iconmap="icons"}}
         {{/if}}
 
+        <span>
+            {{>components/base/image/icon _icon="arrow-right" _addClass=" h-4 w-4 ml-2" }} 
+        </span>
+
     {{/components/base/link.hbs}} 
 </li>
+
+