Merge pull request #667 from qld-gov-au/QOL-9484-primary-button-links

QOLDEV-34 fix underline on hover for footer buttons
qld-gov-au · Dec 12, 2022 · be66e0b · be66e0b
2 parents 9e7c88a + feed5a7
commit be66e0b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 18 deletions.
diff --git a/src/assets/_project/_blocks/components/accordion/_qg-accordion.scss b/src/assets/_project/_blocks/components/accordion/_qg-accordion.scss
@@ -70,7 +70,7 @@
     }
   }
   button:focus, button.focus {
-    outline: 2px solid #0096d6 !important;
+    outline: 2px solid $qg-active-outline !important;
     outline-offset: 2px;
     z-index: 100;
   }

diff --git a/src/assets/_project/_blocks/components/buttons/_qg-buttons.scss b/src/assets/_project/_blocks/components/buttons/_qg-buttons.scss
@@ -79,7 +79,6 @@
   @include button-variant($qg-light-green, $qg-light-green, lighten($qg-light-green, 7.5%), $hover-border: $qg-light-green, $active-background:$qg-light-green, $active-border: $qg-light-green);
   color: #000;
   a, &:focus:not(:disabled), &:hover:not(:disabled), &:link:not(:disabled), &:visited:not(:disabled), &:active:not(:disabled), &.focus:not(:disabled), &.hover:not(:disabled), &.link:not(:disabled), &.visited:not(:disabled), &.active:not(:disabled) {
-    text-decoration-line: none !important;
     color: #000 !important;
   }
 }
@@ -89,7 +88,6 @@
   color: #fff;
   a, &:focus, &:hover, &:link, &:visited, &:active, &.focus, &.hover, &.link, &.visited, &.active {
     color: #fff !important;
-    text-decoration-line: none !important;
   }
 }
 
@@ -98,7 +96,6 @@
   color: #fff;
   a, &:focus, &:hover, &:link, &:visited, &:active, &.focus, &.hover, &.link, &.visited, &.active {
     color: #fff !important;
-    text-decoration-line: none !important;
   }
 }
 
@@ -110,6 +107,8 @@
 
 .qg-btn {
   @extend .btn;
+  @include qg-button-outline-decoration;
+
   &.btn-outline-dark{
     color: $qg-outline-dark;
     background-color: transparent !important;
@@ -133,7 +132,7 @@
   }
 }
 
-#body .qg-btn, #body .btn, {
+#body .qg-btn, #body .btn, body .qg-btn, body .btn, {
   // override default .btn styling
   @include qg-link-hover-decoration;
 }
diff --git a/src/assets/_project/_blocks/components/link/_qg-link.scss b/src/assets/_project/_blocks/components/link/_qg-link.scss
@@ -17,14 +17,8 @@
     //   background: none;
     // }
     &:not(.btn-link) {
-      &:active,
-      &:focus,
-      &:focus-visible,
-      &.active,
-      &.focus {
+      @include qg-button-outline-decoration {
         background-color: transparent;
-        outline: 3px solid #0096d6;
-        outline-offset: 2px;
       }
     }
     @content;

diff --git a/src/assets/_project/_blocks/layout/footer/_service-centre.scss b/src/assets/_project/_blocks/layout/footer/_service-centre.scss
@@ -14,6 +14,7 @@
             transition: all .3s ease;
             white-space: nowrap;
             top: 9px;
+            @include qg-link-hover-decoration;
         }
 
         &[aria-expanded=true] {
@@ -28,12 +29,6 @@
                 border-radius: 0 0 4px 4px;
             }
         }
-
-        &:hover,&:focus {
-            .qg-service-centre-set-location__text {
-                text-decoration-line: underline;
-            }
-        }
     }
 
     &__link{

diff --git a/src/assets/_project/_blocks/scss-general/_qg-variables.scss b/src/assets/_project/_blocks/scss-general/_qg-variables.scss
@@ -15,6 +15,9 @@ $qg-green: #78ba00;
 $qg-outline-dark: #00698f;
 $qg-outline-dark-hover: #313131;
 
+// ## Active outlines (transient) ##
+$qg-active-outline: #0096d6;
+
 // ## Dark grey ##
 $qg-dark-grey-lightest: #949494;
 $qg-dark-gray-lighter: #8a8f91; // Lightest for large text on white
@@ -286,3 +289,15 @@ $qg-linkedin: #0077b5;
   @content;
 }
 $text-underline-offset: 5px;
+
+@mixin qg-button-outline-decoration {
+  // Surround buttons and links with a blue outline when active/focused
+  &:active, &.active,
+  &:focus, &.focus, &:focus-visible {
+    outline-width: 3px;
+    outline-style: solid;
+    outline-color: $qg-active-outline;
+    outline-offset: 2px;
+    @content;
+  }
+}