Merge pull request #3490 from alistairmc/feature/Fix_link_visited_col…

…or_RHDX_227 [RHDX-227] Fix visited color
redhat-developer · Feb 4, 2020 · 541d2ef · 541d2ef
2 parents 022081e + c713ba8
commit 541d2ef
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 45 deletions.
diff --git a/.../drupal-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/_mixins.scss b/.../drupal-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/_mixins.scss
@@ -17,10 +17,13 @@
 //hidden classes
 %link {
   text-decoration: var(--pf-theme--link--text-decoration, "underline");
-  color: var(--pfe-theme--color--ui-link, #0066cc);
+  color: var(--pfe-theme--color--ui-link, $link-color);
+  &:visited {
+    color: var(--pfe-theme--color--ui-link, $link-color);
+  }
 
-  :hover {
-      color: var(--pfe-theme--color--ui-link--hover, #004080)
+  &:hover, &:active {
+      color: var(--pfe-theme--color--ui-link--hover, $link-color-hover)
   }
 }
 

diff --git a/...system/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/_pf4-custom-globals.scss b/...system/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/_pf4-custom-globals.scss
@@ -116,7 +116,9 @@
     font-weight: var(--pf-global--link--FontWeight);
     color: var(--pf-global--link--Color);
     text-decoration: var(--pf-global--link--TextDecoration);
-
+    &:visited, &:active {
+      color: var(--pf-global--link--Color);
+    }
     &:hover {
       --pf-global--link--Color: var(--pf-global--link--Color--hover);
       --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);

diff --git a/...al-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/colors/_base.scss b/...al-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/colors/_base.scss
@@ -9,4 +9,5 @@ $congress-blue: #004080;
 $light-gray: #EDEDED;
 $soft-dark: rgba(0,0,0,.8);
 
-
+$link-color: $science-blue;
+$link-color-hover: $congress-blue;
diff --git a/...system/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_buttons.scss b/...system/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_buttons.scss
@@ -2,6 +2,9 @@
 
 
 :root {
+  --rhd-c-button--m-heavy--Color: #fff;
+  --rhd-c-button--m-heavy--active--Color: #fff;
+  --rhd-c-button--m-heavy--hover--Color: #fff;
   --rhd-c-button--m-heavy--BackgroundColor: #ee0000;
   --rhd-c-button--m-heavy--hover--BackgroundColor: #cf0000;
   --rhd-c-button--m-heavy--active--BackgroundColor: #cf0000;
@@ -74,14 +77,17 @@
 }
 
 .pf-c-button {
-
   //link button
   &.pf-m-link {
     color: var(--rhd-c-button--m-link--Color);
     background-color: transparent;
     @media screen and (max-width: $pf-global--breakpoint--sm) {
       text-align: left;
     }
+    &:visited {
+      color: var(--rhd-c-button--m-link--Color);
+    }
+
     &:hover,
     &:focus,
     &.pf-m-active,
@@ -99,11 +105,13 @@
     &>i,
     &>.svg-inline--fa {
       color: var(--rhd-c-button--m-link--Color) !important;
-
+      &:visited {
+        color: var(--rhd-c-button--m-link--Color) !important;
+      }
+
       &:hover,
       &:active,
-      &:focus,
-      &:visited {
+      &:focus {
         color: var(--rhd-c-button--m-link--hover--Color) !important;
       }
     }
@@ -113,6 +121,9 @@
       @media screen and (max-width: $pf-global--breakpoint--sm) {
         text-align: left;
       }
+      &:visited {
+        color: var(--rhd-c-button--m-link-dark--Color);
+      }
       &:hover,
       &:focus,
       &.pf-m-active,
@@ -128,11 +139,12 @@
       &>.pf-c-button__icon>i,
       &>.pf-c-button__icon>.svg-inline--fa {
         color: var(--rhd-c-button--m-link-dark--Color);
-
+        &:visited {
+          color: var(--rhd-c-button--m-link-dark--Color);
+        }
         &:hover,
         &:active,
-        &:focus,
-        &:visited {
+        &:focus {
           color: var(--rhd-c-button--m-link-dark--hover--Color);
         }
       }
@@ -141,6 +153,10 @@
   .dark & {
     color: var(--rhd-c-button--m-link-dark--Color);
 
+    &:visited {
+      color: var(--rhd-c-button--m-link-dark--Color);
+    }
+
     &:hover,
     &:focus,
     &.pf-m-active,
@@ -157,10 +173,12 @@
     &>.pf-c-button__icon>.svg-inline--fa {
       color: var(--rhd-c-button--m-link-dark--Color) !important;
 
+      &:visited {
+        color: var(--rhd-c-button--m-link-dark--Color) !important;
+      }
       &:hover,
       &:active,
-      &:focus,
-      &:visited {
+      &:focus {
         color: var(--rhd-c-button--m-link-dark--hover--Color) !important;
       }
     }
@@ -176,6 +194,9 @@
     @media screen and (max-width: $pf-global--breakpoint--sm) {
       text-align: left;
     }
+    &:visited {
+      color: var(--rhd-c-button--m-tertiary--Color);
+    }
     &:hover,
     &:focus,
     &.pf-m-active,
@@ -191,11 +212,12 @@
     &>.pf-c-button__icon>i,
     &>.pf-c-button__icon>.svg-inline--fa {
       color: var(--rhd-c-button--m-tertiary--Color) !important;
-
+      &:visited {
+        color: var(--rhd-c-button--m-tertiary--Color) !important;
+      }
       &:hover,
       &:active,
-      &:focus,
-      &:visited {
+      &:focus {
         color: var(--rhd-c-button--m-tertiary--Color);
       }
     }
@@ -205,6 +227,9 @@
       @media screen and (max-width: $pf-global--breakpoint--sm) {
         text-align: left;
       }
+      &:visited {
+        color: var(--rhd-c-button--m-secondary-dark--Color);
+      }
       &:hover,
       &:focus,
       &.pf-m-active,
@@ -222,18 +247,22 @@
       &>i,
       &>.svg-inline--fa {
         color: var(--rhd-c-button--m-secondary-dark--Color) !important;
-
+        &:visited {
+          color: var(--rhd-c-button--m-secondary-dark--Color) !important;
+        }
         &:hover,
         &:active,
-        &:focus,
-        &:visited {
+        &:focus {
           color: #9D9D9D !important;
         }
       }
     }
 
     .dark & {
       color: var(--rhd-c-button--m-secondary-dark--Color);
+      &:visited {
+        color: var(--rhd-c-button--m-secondary-dark--Color);
+      }
       &:hover,
       &:focus,
       &.pf-m-active,
@@ -251,11 +280,12 @@
       &>i,
       &>.svg-inline--fa {
         color: var(--rhd-c-button--m-secondary-dark--Color) !important;
-
+        &:visited {
+          color: var(--rhd-c-button--m-secondary-dark--Color) !important;
+        }
         &:hover,
         &:active,
-        &:focus,
-        &:visited {
+        &:focus {
           color: #9D9D9D !important;
         }
       }
@@ -268,13 +298,16 @@
   // Heavy CTA
   &.pf-m-heavy {
     background-color: var(--rhd-c-button--m-heavy--BackgroundColor);
-    color: var(--pf-global--Color--light-100);
-
+    color: var(--rhd-c-button--m-heavy--Color);
+    &:visited {
+      color: var(--rhd-c-button--m-heavy--Color);
+    }
     &:hover,
+    &:focus,
     &:active,
     &.pf-m-active,
-    &:focus,
     &.pf-m-focus {
+      color: var(--rhd-c-button--m-heavy--Color);
       background-color: var(--rhd-c-button--m-heavy--active--BackgroundColor);
     }
 
@@ -285,14 +318,17 @@
     }
 
     .dark & {
-      color: var(--rhd-c-button--m-secondary-dark--Color);
-
+      color: var(--rhd-c-button--m-heavy--Color);
+      &:visited {
+        color: var(--rhd-c-button--m-heavy--Color);
+      }
       &:hover,
       &:focus,
+      &:active,
       &.pf-m-active,
       &.pf-m-focus {
         background-color: var(--rhd-c-button--m-heavy--active--BackgroundColor);
-        color: var(--pf-global--Color--light-100);
+        color: var(--rhd-c-button--m-heavy--Color);
       }
     }
   }
@@ -303,7 +339,6 @@
   // Primary Button
   &.pf-m-primary {
     background-color: var(--rhd-c-button--m-primary--BackgroundColor);
-
     &:hover,
     &:active,
     &.pf-m-active,
@@ -570,17 +605,17 @@
   }
 
   &.heavy-cta {
-    @extend .pf-m-heavy;
+    @extend .pf-c-button.pf-m-heavy;
     &.blue {
-      @extend .pf-m-primary;
+      @extend .pf-c-button.pf-m-primary;
     }
   }
 
   &.medium-cta {
-    @extend .pf-m-secondary;
+    @extend .pf-c-button.pf-m-secondary;
     border:none;
     &.red {
-      @extend .pf-m-secondary-alt;
+      @extend .pf-c-button.pf-m-secondary-alt;
     }
   }
 }
diff --git a/...lesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_cards.scss b/...lesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_cards.scss
@@ -51,30 +51,32 @@
 }
 
 .rhd-m-link {
-  color: #06c;
+  color: $link-color;
   text-decoration: none;
 
   &:hover,
   &:active,
-  &:focus,
-  &:visited {
-    color: #004080;
+  &:focus {
+    color: $link-color-hover;
 
     &>i,
     &>.svg-inline--fa {
-      color: #004080 !important;
+      color: $link-color-hover !important;
     }
   }
+  &:visited {
+    color: $link-color;
+  }
 
   &>i,
   &>.svg-inline--fa {
-    color: #06c;
+    color: $link-color;
 
     &:hover,
     &:active,
     &:focus,
     &:visited {
-      color: #004080;
+      color: $link-color-hover;
     }
   }
 }

diff --git a/.../themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_comment-list-card.scss b/.../themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_comment-list-card.scss
@@ -36,16 +36,16 @@
   }
 
   a {
-    color: #06c;
+    color: $link-color;
     text-decoration: none;
     &:hover,
     &:active,
     &:focus,
     &:visited {
-      color: #004080;
+      color: $link-color-hover;
       & > i,
       & > .svg-inline--fa {
-        color: #004080 !important;
+        color: $link-color-hover !important;
       }
     }
   }

diff --git a/...em/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_jump-to-nav.scss b/...em/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/components/_jump-to-nav.scss
@@ -21,6 +21,11 @@
       margin-right: var(--pf-global--spacer--xl);
       text-decoration: none;
 
+      &:visited {
+        color: var(--pf-global--Color--light-100);
+        text-decoration: none;
+      }
+
       &:hover,
       &:focus,
       &:active {

diff --git a/...l-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/pages/_search.scss b/...l-filesystem/web/themes/custom/rhdp2/rhd-frontend/src/styles/rhd-theme/pages/_search.scss
@@ -75,4 +75,4 @@
       position: relative;
       top: 0.1em;
     }
-  }
+  }