bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Alex Gleason 2021-10-05 17:49:44 -05:00
parent e04a488ea4
commit 30973bd05f
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/primary_navigation.js
View file

Binary file not shown.

BIN
app/soapbox/components/thumb_navigation.js
View file

Binary file not shown.

8
app/styles/components/icon.scss
View file

@ -4,11 +4,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: 0.2s;
svg { svg {
// Apparently this won't skew the image as long as it has a viewbox // Apparently this won't skew the image as long as it has a viewbox
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.2s;
} }
&--active { &--active {
@ -39,6 +41,12 @@
} }
} }
} }
&--unread {
svg.icon-tabler-bell {
transform: rotate(45deg);
}
}
} }
.icon-button > div { .icon-button > div {