From b6e06ee6fc59ada63f08bd7a919d715f9e9b316c Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Sat, 23 Jan 2021 16:01:08 -0600
Subject: [PATCH] Fix #4676: Series pool shown as blue unless hovered.

Broken in 49bc2364 by the use of @extend.

Here's what happened. There are two CSS rules that both apply to pool links:

* a:link { color: var(--link-color); }
* .pool-category-series a { color: var(--series-pool-color); }

These rules have equal specificity (0-1-1). This means the rule that is
defined last takes priority. This means the order in which CSS files are
included matters. 49bc2364 used the @extend directive in a rule for
popup menus, which required an @import, which changed the order of the
CSS files, which made the a:link rule suddenly take priority over the
series pool rule.

The proper fix would be to use Sass's new @use directive instead of
@import, but that requires the latest version of Sass, which requires
the latest version of Webpacker, which we can't upgrade to yet because
of breaking changes.

The real moral of the story is: our CSS is very fragile because of
specificity rules. It's very important that rules are defined in a
certain order, otherwise our CSS will break.

* https://sass-lang.com/documentation/at-rules/use
* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
---
 .../popup_menu_component.scss                  |  6 +++---
 app/javascript/src/styles/base/000_vars.scss   | 18 ++++++++++++++++++
 app/javascript/src/styles/base/030_links.scss  | 15 ++++-----------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss
index 6dce7d5fd..d4d9efc70 100644
--- a/app/components/popup_menu_component/popup_menu_component.scss
+++ b/app/components/popup_menu_component/popup_menu_component.scss
@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/030_links.scss";
+@import "../../javascript/src/styles/base/000_vars.scss";
 
 div.popup-menu {
   display: inline-block;
@@ -14,12 +14,12 @@ div.popup-menu {
 
     // the popup menu is open
     &[aria-expanded="true"] {
-      @extend .active-link;
+      @include active-link;
     }
 
     // the popup menu is not open
     &:not([aria-expanded="true"]) {
-      @extend .inactive-link;
+      @include inactive-link;
     }
   }
 
diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index 26b84d025..39da44ec0 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -50,3 +50,21 @@ $h4_padding: 0.8em 0 0.25em 0;
   font-weight: 900;
   content: $content;
 }
+
+@mixin active-link {
+  color: var(--link-color);
+
+  &:hover, &:focus {
+    background-color: var(--subnav-menu-background-color);
+    outline: none;
+  }
+}
+
+@mixin inactive-link {
+  color: var(--muted-text-color);
+
+  &:hover {
+    color: var(--link-hover-color);
+    background-color: var(--subnav-menu-background-color);
+  }
+}
diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss
index faa94c2a0..19cb74a15 100644
--- a/app/javascript/src/styles/base/030_links.scss
+++ b/app/javascript/src/styles/base/030_links.scss
@@ -1,3 +1,5 @@
+@import "../../javascript/src/styles/base/000_vars.scss";
+
 a:link {
   color: var(--link-color);
   text-decoration: none;
@@ -23,20 +25,11 @@ a.active {
 }
 
 a.active-link {
-  color: var(--link-color);
-
-  &:hover {
-    background-color: var(--subnav-menu-background-color);
-  }
+  @include active-link;
 }
 
 a.inactive-link {
-  color: var(--muted-text-color);
-
-  &:hover {
-    color: var(--link-hover-color);
-    background-color: var(--subnav-menu-background-color);
-  }
+  @include inactive-link;
 }
 
 a[rel*="external"] {