diff options
author | Jenkins <jenkins@jenkins.ninjawedding.org> | 2018-06-14 06:17:24 +0000 |
---|---|---|
committer | Jenkins <jenkins@jenkins.ninjawedding.org> | 2018-06-14 06:17:24 +0000 |
commit | afceef74c2377192f100b9307068895ec0ec7d45 (patch) | |
tree | 7191360d84ea8430a9a3c0de4c57ccf44f3114e0 /app/javascript/styles | |
parent | 9d2b7ef9f8c31c9c113b655b51681a6ed499f9c4 (diff) | |
parent | f972815f1bdc7a9ca198da938471c1299a96b401 (diff) |
Merge remote-tracking branch 'tootsuite/master' into glitchsoc/master
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 48 |
1 files changed, 39 insertions, 9 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 58f1d6835..718c0c680 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1510,9 +1510,21 @@ a.account__display-name { text-decoration: none; } - .icon-button { - pointer-events: none; - opacity: 0; + .navigation-bar__actions { + position: relative; + + .icon-button.close { + position: absolute; + pointer-events: none; + transform: scale(0.0, 1.0) translate(-100%, 0); + opacity: 0; + } + + .compose__action-bar .icon-button { + pointer-events: auto; + transform: scale(1.0, 1.0) translate(0, 0); + opacity: 1; + } } } @@ -4932,9 +4944,18 @@ noscript { transition: margin-top $duration $delay; } - & > .icon-button { - will-change: opacity; - transition: opacity $duration $delay; + .navigation-bar__actions { + & > .icon-button.close { + will-change: opacity transform; + transition: opacity $duration * 0.5 $delay, + transform $duration $delay; + } + + & > .compose__action-bar .icon-button { + will-change: opacity transform; + transition: opacity $duration * 0.5 $delay + $duration * 0.5, + transform $duration $delay; + } } } @@ -4961,9 +4982,18 @@ noscript { margin-top: -50px; } - .icon-button { - pointer-events: auto; - opacity: 1; + .navigation-bar__actions { + .icon-button.close { + pointer-events: auto; + opacity: 1; + transform: scale(1.0, 1.0) translate(0, 0); + } + + .compose__action-bar .icon-button { + pointer-events: none; + opacity: 0; + transform: scale(0.0, 1.0) translate(100%, 0); + } } } } |