diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 5f936a2761..05cd548579 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -28,18 +28,56 @@ span.badge-posts { .topic-post { nav.post-controls { - clear: both; color: dark-light-choose($primary-low-mid, $secondary-high); + + .actions { + display: flex; + } + + .like-button { + display: flex; + flex: 0 1 auto; + button { + &.like { + flex: 1 1 auto; + } + &.like-count { + padding: 8px 4px 8px 8px; + line-height: 1.2; + + &.regular-likes { + margin-right: 0; + } + &.my-likes { + display: flex; + align-items: baseline; + max-width: unset; + margin-right: 0; + padding: 8px 9px 8px 8px; + i { + padding-left: 8px; + } + } + } + .d-icon { + line-height: $line-height-medium; + } + } + button.like-count + button.toggle-like { + padding: 8px 9px 8px 4px; + } + } + .d-icon { opacity: 1.0; } button { border: none; font-size: $font-up-1; - padding: 8px 10px; - vertical-align: middle; + padding: 10px 8px; background: transparent; - float: left; + flex: 1 1 auto; + max-width: 45px; &.hidden { display: none; } @@ -50,8 +88,8 @@ span.badge-posts { margin:10px 0 10px 0; } &.reply { - float: right; color: $primary-high; + margin-left: auto; } &.has-like { color: $love; @@ -61,31 +99,9 @@ span.badge-posts { } } - button.like-count { - font-size: $font-up-1; - padding: 8px 4px; - i.fa-heart, i.fa-heart-o { - padding-left: 8px; - color: dark-light-choose($primary-low-mid, $secondary-high); - } - &.my-likes { - margin-right: 5px; - } - &.regular-likes { - margin-right: -5px; - } - } } } - -/* shift post reply button to the right and make it black */ -.post-controls button.create { - float: right; - color: dark-light-choose($primary-high, $secondary-low); -} - - .post-admin-menu { background-color: $secondary; width: 205px;