From 383c0b780282e4ca2a9df2086166a576eef0f296 Mon Sep 17 00:00:00 2001
From: kawax <kawaxbiz@gmail.com>
Date: Wed, 3 May 2017 18:43:37 +0900
Subject: Show boosted user's avatar (#2518)

* Show boosted user's avatar

* add .status__avatar-boost

* margin

* apply to notifications too.

* account__avatar-boost

* Add inline prop to Avatar component

* Add AvatarOverlay component

* rename mixins.scss

* move files for latest master

* fixed for webpack
---
 app/javascript/styles/_mixins.scss     | 12 ++++++++++++
 app/javascript/styles/application.scss |  1 +
 app/javascript/styles/components.scss  | 30 ++++++++++++++++++++++++++----
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/styles/_mixins.scss

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
new file mode 100644
index 000000000..67d768a6c
--- /dev/null
+++ b/app/javascript/styles/_mixins.scss
@@ -0,0 +1,12 @@
+@mixin avatar-radius() {
+  border-radius: 4px;
+  background: transparent no-repeat;
+  background-position: 50%;
+  background-clip: padding-box;
+}
+
+@mixin avatar-size($size:48px) {
+  width: $size;
+  height: $size;
+  background-size: $size $size;
+}
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 5895dd81f..f418ba699 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -1,3 +1,4 @@
+@import 'mixins';
 @import 'variables';
 @import 'fonts/roboto';
 @import 'fonts/roboto-mono';
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index f9cf6a171..523389931 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -673,11 +673,33 @@ a.status__content__spoiler-link {
 }
 
 .account__avatar {
-  border-radius: 4px;
-  background: transparent no-repeat;
-  background-position: 50%;
-  background-clip: padding-box;
+  @include avatar-radius();
   position: relative;
+
+  &-inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+}
+
+.account__avatar-overlay {
+  @include avatar-size(48px);
+
+  &-base {
+    @include avatar-radius();
+    @include avatar-size(36px);
+  }
+
+  &-overlay {
+    @include avatar-radius();
+    @include avatar-size(24px);
+
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+  }
 }
 
 .account__relationship {
-- 
cgit