f-header@9.12.0 - small hover change to match design (#1797)

* small css change * small refactor Co-authored-by: Lizzie Turney <lizzie.turney@just-eat.com>
justeattakeaway · Apr 11, 2022 · 4fc827d · 4fc827d
1 parent 118b3a2
commit 4fc827d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/components/organisms/f-header/CHANGELOG.md b/packages/components/organisms/f-header/CHANGELOG.md
@@ -4,6 +4,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v9.12.0
+------------------------------
+*April 11, 2022*
+
+### Changed
+- CSS change to add hover to button
+
+
 v9.11.0
 ------------------------------
 *April 8, 2022*

diff --git a/packages/components/organisms/f-header/package.json b/packages/components/organisms/f-header/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-header",
   "description": "Fozzie Header - Globalised Header Component",
-  "version": "9.11.0",
+  "version": "9.12.0",
   "main": "dist/f-header.umd.min.js",
   "maxBundleSize": "40kB",
   "files": [

diff --git a/packages/components/organisms/f-header/src/components/Navigation.vue b/packages/components/organisms/f-header/src/components/Navigation.vue
@@ -158,7 +158,7 @@
                         :class="[
                             $style['c-nav-list-text'],
                             $style['c-nav-list-btn'],
-                            { [$style['c-nav-list-btn--hover']]: headerBackgroundTheme === 'white' }
+                            { [$style['c-nav-list-btn--hoverAboveMid']]: headerBackgroundTheme === 'white' }
                         ]"
                         @click.prevent="toggleUserMenu"
                         @keydown.space.prevent="toggleUserMenu">
@@ -702,6 +702,11 @@ export default {
         &:focus {
             border-radius: 0;
         }
+
+        &:hover {
+            background: $color-container-subtle;
+            border-radius: 0;
+        }
     }
 }
 
@@ -711,14 +716,11 @@ export default {
     }
 }
 
-.c-nav-list-btn--hover {
-    &:hover {
-        background: $color-container-subtle;
-        border-radius: $nav-focus-borderRadius;
-    }
-    @include media('<=mid') {
+.c-nav-list-btn--hoverAboveMid {
+    @include media('>mid') {
         &:hover {
-            border-radius: 0;
+            background: $color-container-subtle;
+            border-radius: $nav-focus-borderRadius;
         }
     }
 }