TMS-1225: Minor style fixes for buttons

Author: eebbi

assets/styles/_color_overrides.scss

@@ -20,7 +20,7 @@ $pagination-item-border-radius: 50%;
 assets/styles/ui-components/_sibling-navigation.scss
 --------------------------------------------------------------*/
 $sibling-navigation-item-background-color: $primary-light-invert;
-$sibling-navigation-item-border-color: $sibling-navigation-item-background-color;
+$sibling-navigation-item-border-color: $secondary-invert;
 $sibling-navigation-item-active-color: $primary-light-invert;
 $sibling-navigation-item-active-background-color: $secondary-invert;
 

assets/styles/overrides/_button.scss

@@ -46,12 +46,12 @@
 
         &.is-outlined {
             background-color: transparent !important;
-            border-color: $primary !important;
+            border-color: $color-black !important;
 
             &:hover,
             &:focus {
                 background-color: transparent !important;
-                border-color: $primary !important;
+                border-color: $color-black !important;
             }
         }
 
@@ -64,8 +64,13 @@
     &.is-primary,
     &.is-secondary {
         &.is-outlined {
+            &,
             &.is-hovered,
-            &:hover {
+            &:hover,
+            &.is-focused,
+            &:focus,
+            &.is-active,
+            &:active {
                 color: $color-black !important;
                 background-color: $primary-invert !important;
                 text-decoration: underline !important;
@@ -74,18 +79,8 @@
                     fill: $color-black !important;
                 }
             }
-
-            &.is-active,
-            &:active,
-            &.is-focused,
-            &:focus {
-                color: $color-black !important;
-
-                .icon {
-                    fill: $color-black !important;
-                }
-            }
         }
+
         &.is-inverted {
             &:hover,
             &:focus {
@@ -100,6 +95,16 @@
         }
     }
 
+    &.is-primary-invert {
+        background-color: $color-blue-light;
+        border-color: $color-blue-light;
+        color: $color-black !important;
+
+        .icon {
+            fill: $color-black !important;
+        }
+    }
+
     &.is-secondary-invert {
         &.is-outlined {
             color: $secondary-invert !important;

assets/styles/overrides/_colors.scss

@@ -6,21 +6,17 @@
 
     a {
         &.button.is-primary {
-            color: $secondary-invert !important;
-
-            .icon {
-                fill: $secondary-invert !important;
-            }
-
+            &,
             &.is-hovered,
             &:hover,
             &.is-focused,
             &:focus {
-                color: $primary !important;
-                border-color: $primary !important;
+                background-color: $color-blue-light;
+                border-color: $color-blue-light;
+                color: $secondary-invert !important;
 
                 .icon {
-                    fill: $primary !important;
+                    fill: $secondary-invert !important;
                 }
             }
         }

assets/styles/overrides/_share-links.scss

@@ -7,14 +7,5 @@
         &:hover {
             box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
         }
-
-        &.is-focused,
-        &:focus,
-        &.is-active,
-        &:active {
-            .icon {
-                fill: $primary !important;
-            }
-        }
     }
 }

assets/styles/overrides/_sibling-navigation.scss

@@ -18,5 +18,4 @@
 @import "pill";
 @import "primary-nav";
 @import "share-links";
-@import "sibling-navigation";
 @import "slide-deck";