Rotate unread notification bell icon with CSS instead of relying on a separate icon

2021-10-05 17:49:44 -05:00 · 2021-10-05 17:49:44 -05:00 · 30973bd05f
commit 30973bd05f
parent e04a488ea4
3 changed files with 8 additions and 0 deletions
--- a/app/soapbox/components/primary_navigation.js
+++ b/app/soapbox/components/primary_navigation.js
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
--- a/app/styles/components/icon.scss
+++ b/app/styles/components/icon.scss
@ -4,11 +4,13 @@
  display: flex;
  align-items: center;
  justify-content: center;
+  transition: 0.2s;

  svg {
    // Apparently this won't skew the image as long as it has a viewbox
    width: 100%;
    height: 100%;
+    transition: 0.2s;
  }

  &--active {
@ -39,6 +41,12 @@
      }
    }
  }
+
+  &--unread {
+    svg.icon-tabler-bell {
+      transform: rotate(45deg);
+    }
+  }
 }

 .icon-button > div {