Flip embedded SVG on hover

1 files changed, 22 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 23028ae01de..04cd9db2acf 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -80,18 +80,36 @@
     height: 33px;
 
     &.scroll-top {
-      background-image: image-url('scroll_up');
+      .gitlab-icon-scroll-up-hover {
+        display: none;
+      }
 
       &:hover {
-        background-image: image-url('scroll_up_hover_active');
+
+        .gitlab-icon-scroll-up {
+          display: none;
+        }
+
+        .gitlab-icon-scroll-up-hover {
+          display: inline-block;
+        }
       }
     }
 
     &.scroll-bottom {
-      background-image: image-url('scroll_down');
+      .gitlab-icon-scroll-down-hover {
+        display: none;
+      }
 
       &:hover {
-        background-image: image-url('scroll_down_hover_active');
+
+        .gitlab-icon-scroll-down {
+          display: none;
+        }
+
+        .gitlab-icon-scroll-down-hover {
+          display: inline-block;
+        }
       }
     }
 
@@ -129,7 +147,6 @@
     display: inline-block;
     width: 16px;
     height: 33px;
-    background-image: image-url('scroll_down_hover_active');
   }
 
   .status-text {