diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-04-04 13:48:39 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-04-04 13:48:39 -0400 |
commit | 15c7ff8aeca7e7bb838cf18497ca1c322d044f89 (patch) | |
tree | 9ba9065c103ea575fd9929e8f081241d9e0819e0 /webapp/sass/responsive | |
parent | 2bdab516b293d97f9797039e84f9d04656d2134d (diff) | |
parent | 1c06ceca109d78be91605c2626ee8ea119b186f3 (diff) | |
download | chat-15c7ff8aeca7e7bb838cf18497ca1c322d044f89.tar.gz chat-15c7ff8aeca7e7bb838cf18497ca1c322d044f89.tar.bz2 chat-15c7ff8aeca7e7bb838cf18497ca1c322d044f89.zip |
Merge pull request #2627 from mozilla/smooth-mobile-sidebar-transition
Smooth overlay transition when opening sidebar
Diffstat (limited to 'webapp/sass/responsive')
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 38476485d..c518f3729 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -714,19 +714,26 @@ .inner-wrap { @include single-transition(all, .5s, ease); - + &:before{ + content:""; + //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out. + transition: background-color 0.5s ease, z-index 0s ease 0.5s; + background-color: transparent; + height: 100%; + width: calc(100% + 30px); + left: -15px; + position: absolute; + top: 0; + z-index: 0; + } + &.move--right { @include translate3d(290px, 0, 0); &:before { z-index: 9999; - content: ''; - width: 100%; - height: 100%; - left: -15px; - top: 0; - position: absolute; - background: rgba(0, 0, 0, .4); + transition: background-color 0.5s ease; + background-color: rgba(0, 0, 0, 0.4); } } @@ -734,13 +741,8 @@ @include translate3d(-290px, 0, 0); &:before { z-index: 9999; - content: ''; - width: 100%; - height: 100%; - right: -15px; - top: 0; - position: absolute; - background: rgba(0, 0, 0, .4); + transition: background-color 0.5s ease; + background-color: rgba(0, 0, 0, 0.4); } } |