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 6688f90f8..90511c88c 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 487536812..ac754b773 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; }