diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-11 12:47:18 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-03-11 12:47:47 +0300 |
commit | 25f392eab734bd68da377a61c608bca73355ba43 (patch) | |
tree | 2d453d2e117939d9179e96b9798a55a34d17d6e2 /app/assets/stylesheets/pages/awards.scss | |
parent | 57a9d07716b39206c683430ef65d00af32fd9811 (diff) |
Added 'surprise' animation
Diffstat (limited to 'app/assets/stylesheets/pages/awards.scss')
-rw-r--r-- | app/assets/stylesheets/pages/awards.scss | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss index 6a19562e592..28994e60baa 100644 --- a/app/assets/stylesheets/pages/awards.scss +++ b/app/assets/stylesheets/pages/awards.scss @@ -11,14 +11,25 @@ position: absolute; top: 100%; left: 0; + margin-top: 3px; z-index: 1000; - display: none; min-width: 160px; font-size: 14px; background-color: $award-emoji-menu-bg; border: 1px solid $award-emoji-menu-border; border-radius: $border-radius-base; box-shadow: 0 6px 12px rgba(0,0,0,.175); + pointer-events: none; + opacity: 0; + transform: scale(.2); + transform-origin: 0 -45px; + transition: all .3s cubic-bezier(.87,-.41,.19,1.44); + + &.is-visible { + pointer-events: all; + opacity: 1; + transform: scale(1); + } .emoji-menu-content { padding: $gl-padding; @@ -56,9 +67,17 @@ background: none; border: 0; border-radius: $border-radius-base; + transition: transform .15s cubic-bezier(.3, 0, .2, 2); &:hover { - background-color: $white-dark; + background-color: transparent; + outline: 0; + transform: scale(1.3); + } + + &:focus, + &:active { + outline: 0; } .emoji-icon { |