Make unfollow button light up red when hovered (#8286)

Fix #8284
This commit is contained in:
Eugen Rochko 2018-08-19 03:28:43 +02:00 committed by GitHub
parent 58ffe3f7c3
commit 19b07ba260
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 1 deletions

View file

@ -19,7 +19,7 @@ module StreamEntriesHelper
safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')]) safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')])
end end
elsif current_account.following?(account) || current_account.requested?(account) elsif current_account.following?(account) || current_account.requested?(account)
link_to account_unfollow_path(account), class: 'button logo-button', data: { method: :post } do link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do
safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')]) safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')])
end end
else else

View file

@ -35,6 +35,17 @@
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&:disabled { &:disabled {
background-color: $ui-primary-color; background-color: $ui-primary-color;
cursor: default; cursor: default;

View file

@ -110,6 +110,18 @@
} }
} }
&.button--destructive {
&:active,
&:focus,
&:hover {
background: $error-red;
svg path:last-child {
fill: $error-red;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
svg { svg {
display: none; display: none;