[Glitch] Fix regressions in icon buttons in web UI

Port a549415868 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
master
Eugen Rochko 4 years ago committed by Thibaut Girka
parent 8f950e540b
commit 47edac871c
  1. 1
      app/javascript/flavours/glitch/components/icon_button.js
  2. 10
      app/javascript/flavours/glitch/styles/components/index.scss
  3. 4
      app/javascript/flavours/glitch/styles/components/status.scss

@ -123,6 +123,7 @@ export default class IconButton extends React.PureComponent {
activate, activate,
deactivate, deactivate,
overlayed: overlay, overlayed: overlay,
'icon-button--with-counter': typeof counter !== 'undefined',
}); });
if (typeof counter !== 'undefined') { if (typeof counter !== 'undefined') {

@ -144,8 +144,7 @@
} }
.icon-button { .icon-button {
display: inline-flex; display: inline-block;
align-items: center;
padding: 0; padding: 0;
color: $action-button-color; color: $action-button-color;
border: 0; border: 0;
@ -154,6 +153,7 @@
cursor: pointer; cursor: pointer;
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
text-decoration: none;
&:hover, &:hover,
&:active, &:active,
@ -228,6 +228,12 @@
} }
} }
&--with-counter {
display: inline-flex;
align-items: center;
width: auto !important;
}
&__counter { &__counter {
display: inline-block; display: inline-block;
width: 14px; width: 14px;

@ -568,6 +568,10 @@
.status__action-bar-button { .status__action-bar-button {
margin-right: 18px; margin-right: 18px;
&.icon-button--with-counter {
margin-right: 14px;
}
} }
.status__action-bar-dropdown { .status__action-bar-dropdown {

Loading…
Cancel
Save