*, *:after, *::before {
-moz-box-sizing: border-box; box-sizing: border-box;
}
html, body, .st-container, .st-pusher, .st-content {
height: 100%;
}
.st-content {
overflow-x: hidden; background-color: #F8F8F8; -webkit-overflow-scrolling: touch;
}
.st-content, .st-content-inner {
position: relative;
}
.st-container {
position: relative; overflow: hidden;
}
.st-pusher {
-webkit-transition: -webkit-transform 0.5s; height: 100%; overflow: hidden; position: relative; right: 0; transition: transform 0.5s; z-index: 99999;
}
.st-pusher::after {
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; background: rgba(0,0,0,0.3); content: ''; height: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; width: 0; z-index: 2000;
}
.st-menu-open .st-pusher::after {
width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
.st-menu {
position: absolute; top: 0; right: 0; z-index: 100; visibility: hidden; width: 300px; height: 100%; background: #4F90BA; -webkit-transition: all 0.5s; overflow-y: auto; color: white; transition: all 0.5s; .slideout-content { padding: 40px; ul { margin: 0; padding: 0; list-style: none; } h2 { font-size: 2em; font-weight: 300; line-height: 1em; margin: 0; margin-bottom: 20px; text-shadow: 0 0 1px rgba(0,0,0,0.1); } form { input { margin-bottom: 20px; height: 40px; } button { background-color: $dark-grey; font-size: 14px; padding: 20px 10px; } } }
}
.st-menu::after {
-webkit-transition: opacity 0.5s; background: rgba(0,0,0,0.2); content: ''; height: 100%; opacity: 1; position: absolute; right: 0; top: 0; transition: opacity 0.5s; width: 100%;
}
.st-menu-open .st-menu::after {
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; height: 0; opacity: 0; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; width: 0;
}
/* content style */
/* Individual effects */
/* Profile Reveal */ .st-effect-profile-reveal.st-menu-open .st-pusher {
-webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0);
}
.st-effect-profile-reveal.st-menu {
z-index: 1;
}
.st-effect-profile-reveal.st-menu-open .st-effect-profile-reveal.st-menu {
visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;
}
.st-effect-profile-reveal.st-menu::after {
display: none;
}
/* Password Reveal */ .st-effect-password-reveal.st-menu-open .st-pusher {
-webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0);
}
.st-effect-password-reveal.st-menu {
z-index: 1;
}
.st-effect-password-reveal.st-menu-open .st-effect-password-reveal.st-menu {
visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;
}
.st-effect-password-reveal.st-menu::after {
display: none;
}
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */ .no-csstransforms3d .st-pusher, .no-js .st-pusher {
padding-right: 300px;
}