kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Rotate unread notification bell icon with CSS instead of relying on a separate icon
rodzic
e04a488ea4
commit
30973bd05f
|
@ -63,8 +63,11 @@ class PrimaryNavigation extends React.PureComponent {
|
|||
{account && (
|
||||
<NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
|
||||
<IconWithCounter
|
||||
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
|
||||
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
|
||||
src={require('@tabler/icons/icons/bell.svg')}
|
||||
className={classNames('primary-navigation__icon', {
|
||||
'svg-icon--active': location.pathname === '/notifications',
|
||||
'svg-icon--unread': notificationCount > 0,
|
||||
})}
|
||||
count={notificationCount}
|
||||
/>
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
|
|
|
@ -56,8 +56,11 @@ class ThumbNavigation extends React.PureComponent {
|
|||
{account && (
|
||||
<NavLink to='/notifications' className='thumb-navigation__link'>
|
||||
<IconWithCounter
|
||||
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
|
||||
className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
|
||||
src={require('@tabler/icons/icons/bell.svg')}
|
||||
className={classNames({
|
||||
'svg-icon--active': location.pathname === '/notifications',
|
||||
'svg-icon--unread': notificationCount > 0,
|
||||
})}
|
||||
count={notificationCount}
|
||||
/>
|
||||
<span>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Ładowanie…
Reference in New Issue