IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2627 from mozilla/smooth-mobile-sidebar-transition

Browse Source 
Smooth overlay transition when opening sidebar
This commit is contained in:
Harrison Healey
2016-04-04 13:48:39 -04:00
parent 2bdab516b2 1c06ceca10
commit 15c7ff8aec
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
webapp/sass/responsive/_mobile.scss
View File

@@ -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);
}
}