From dcc7575a09d8e555a0256a8612094fa8ddf4453e Mon Sep 17 00:00:00 2001
From: Jan Brasna <1784648+janbrasna@users.noreply.github.com>
Date: Thu, 5 Dec 2024 23:45:24 +0100
Subject: [PATCH] Use opacity for hover state in footer social icons (#15676)
---
media/css/m24/components/footer-refresh.scss | 39 ++++---------------
.../icons/m24-small/social-instagram-gray.svg | 3 --
.../icons/m24-small/social-linkedin-gray.svg | 3 --
.../icons/m24-small/social-spotify-gray.svg | 3 --
.../icons/m24-small/social-tiktok-gray.svg | 3 --
media/img/icons/m24-small/social-x-gray.svg | 3 --
.../icons/m24-small/social-youtube-gray.svg | 3 --
7 files changed, 8 insertions(+), 49 deletions(-)
delete mode 100644 media/img/icons/m24-small/social-instagram-gray.svg
delete mode 100644 media/img/icons/m24-small/social-linkedin-gray.svg
delete mode 100644 media/img/icons/m24-small/social-spotify-gray.svg
delete mode 100644 media/img/icons/m24-small/social-tiktok-gray.svg
delete mode 100644 media/img/icons/m24-small/social-x-gray.svg
delete mode 100644 media/img/icons/m24-small/social-youtube-gray.svg
diff --git a/media/css/m24/components/footer-refresh.scss b/media/css/m24/components/footer-refresh.scss
index f1f82c573fc..c0efac08a77 100644
--- a/media/css/m24/components/footer-refresh.scss
+++ b/media/css/m24/components/footer-refresh.scss
@@ -118,6 +118,7 @@ $max-footer-content-width: $content-max;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: center center;
+ opacity: .45;
border-bottom: 1px solid rgba(0,0,0,0);
display: block;
height: 24px;
@@ -129,56 +130,32 @@ $max-footer-content-width: $content-max;
&:hover,
&:focus {
+ opacity: 1;
border-bottom-color: transparent;
- background-repeat: no-repeat;
-
- &.linkedin {
- background-image: url('/media/protocol/img/icons/social/linkedin/white.svg');
- }
-
- &.tiktok {
- background-image: url('/media/protocol/img/icons/social/tiktok/white.svg');
- }
-
- &.spotify {
- background-image: url('/media/protocol/img/icons/social/spotify/white.svg');
- }
-
- &.twitter {
- background-image: url('/media/protocol/img/icons/social/x/white.svg');
- }
-
- &.instagram {
- background-image: url('/media/protocol/img/icons/social/instagram/white.svg');
- }
-
- &.youtube {
- background-image: url('/media/protocol/img/icons/social/youtube/white.svg');
- }
}
&.linkedin {
- background-image: url('/media/img/icons/m24-small/social-linkedin-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/linkedin/white.svg');
}
&.tiktok {
- background-image: url('/media/img/icons/m24-small/social-tiktok-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/tiktok/white.svg');
}
&.spotify {
- background-image: url('/media/img/icons/m24-small/social-spotify-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/spotify/white.svg');
}
&.twitter {
- background-image: url('/media/img/icons/m24-small/social-x-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/x/white.svg');
}
&.instagram {
- background-image: url('/media/img/icons/m24-small/social-instagram-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/instagram/white.svg');
}
&.youtube {
- background-image: url('/media/img/icons/m24-small/social-youtube-gray.svg');
+ background-image: url('/media/protocol/img/icons/social/youtube/white.svg');
}
}
}
diff --git a/media/img/icons/m24-small/social-instagram-gray.svg b/media/img/icons/m24-small/social-instagram-gray.svg
deleted file mode 100644
index 44d7c292613..00000000000
--- a/media/img/icons/m24-small/social-instagram-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/social-linkedin-gray.svg b/media/img/icons/m24-small/social-linkedin-gray.svg
deleted file mode 100644
index ed41a5c5ac5..00000000000
--- a/media/img/icons/m24-small/social-linkedin-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/social-spotify-gray.svg b/media/img/icons/m24-small/social-spotify-gray.svg
deleted file mode 100644
index 280f19f844a..00000000000
--- a/media/img/icons/m24-small/social-spotify-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/social-tiktok-gray.svg b/media/img/icons/m24-small/social-tiktok-gray.svg
deleted file mode 100644
index 82b5f589911..00000000000
--- a/media/img/icons/m24-small/social-tiktok-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/social-x-gray.svg b/media/img/icons/m24-small/social-x-gray.svg
deleted file mode 100644
index 072c01a9ab8..00000000000
--- a/media/img/icons/m24-small/social-x-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/social-youtube-gray.svg b/media/img/icons/m24-small/social-youtube-gray.svg
deleted file mode 100644
index a772ee88228..00000000000
--- a/media/img/icons/m24-small/social-youtube-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-