From 1ce951d0be68bce4f0f61bff5f978fa5e1cd34a1 Mon Sep 17 00:00:00 2001 From: Stephen Burgess Date: Tue, 25 Apr 2017 08:16:09 -0500 Subject: [PATCH] Adjust status action bar icons (#2424) Set status action bar to have display flex and center align items so dropdown icon appears center aligned with other icons. Make styles alpha organized. Add hover state to boost icon - lighten color on hover. --- app/assets/stylesheets/boost.scss | 4 ++++ app/assets/stylesheets/components.scss | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/boost.scss b/app/assets/stylesheets/boost.scss index 6688f90f8d1..90511c88c13 100644 --- a/app/assets/stylesheets/boost.scss +++ b/app/assets/stylesheets/boost.scss @@ -4,4 +4,8 @@ button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 487536812aa..ac754b77358 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -557,6 +557,8 @@ a.status__content__spoiler-link { } .status__action-bar { + align-items: center; + display: flex; margin-top: 10px; overflow: hidden; } @@ -596,10 +598,10 @@ a.status__content__spoiler-link { .detailed-status__action-bar { background: lighten($color1, 4%); - display: flex; - flex-direction: row; border-top: 1px solid lighten($color1, 8%); border-bottom: 1px solid lighten($color1, 8%); + display: flex; + flex-direction: row; padding: 10px 0; }