Merge pull request #499 from torchbox/fix/menu-drop-down-jobs-tag

Fixes to the badge colour and hover state in different themes
torchbox · Jul 4, 2023 · 47b4e7e · 47b4e7e
2 parents 96c1fed + 8aa72ad
commit 47b4e7e
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/tbx/static_src/sass/components/_badge.scss b/tbx/static_src/sass/components/_badge.scss
@@ -12,20 +12,36 @@
         width: 18px;
         height: 22px;
         content: '';
-        background: var(--color--header-icon-color);
+        background-color: var(--color--accent);
         position: absolute;
         transform: translate(-50%, -25%) rotate(30deg);
         left: 50%;
         top: 0;
-        transition: background $transition;
+        transition: background-color $transition;
+
+        @include media-query(menu-break) {
+            background-color: var(--color--header-icon-color);
+        }
     }
 
     &:focus,
     &:hover {
-        color: var(--color--accent);
+        color: var(--color--dark-indigo);
+
+        @include media-query(menu-break) {
+            color: var(--color--white);
+        }
 
         &::before {
-            background: var(--color--primary);
+            background-color: var(--color--white);
+
+            @include media-query(menu-break) {
+                background-color: var(--color--dark-indigo);
+
+                .theme--coral & {
+                    background-color: var(--color--coral);
+                }
+            }
         }
     }
 
@@ -40,13 +56,6 @@
         }
     }
 
-    .theme--coral & {
-        &:focus,
-        &:hover {
-            color: var(--color--dark-indigo);
-        }
-    }
-
     .template__homepage & {
         position: relative;