diff options
| author | kawax <kawaxbiz@gmail.com> | 2017-05-03 18:43:37 +0900 |
|---|---|---|
| committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-05-03 11:43:37 +0200 |
| commit | 383c0b780282e4ca2a9df2086166a576eef0f296 (patch) | |
| tree | 76c4b2e6d4f7633a1a4608b8983d6644329805e6 /app/javascript/styles | |
| parent | bf8031e984a95827fd50591ea5ae3dbc4c2f004b (diff) | |
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
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/_mixins.scss | 12 | ||||
| -rw-r--r-- | app/javascript/styles/application.scss | 1 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 30 |
3 files changed, 39 insertions, 4 deletions
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 { |