/* -----------------------------------------------------------------------------
WRAPPER OBJECT
----------------------------------------------------------------------------- */
.o-wrapper {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
/* -----------------------------------------------------------------------------
SLIDE AND PUSH MENUS COMPONENT
----------------------------------------------------------------------------- */
/**
* Menu overview.
*/
.c-menu {
position: fixed;
z-index: 200;
background-color: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.c-menu__items {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Left and right menus
*
* Slide and push menus coming in from the left and right inherit a lot of
* common styles. We'll start each of them off by doing up the common styles
* for each version, followed by individual styles.
*
* The various versions are governed by modifier classes.
*/
/**
* Common modifiers for left/right menus.
*/
.c-menu--slide-left,
.c-menu--slide-right,
.c-menu--push-left,
.c-menu--push-right {
width: 100%;
height: 100%;
overflow-y: scroll;
}
@media all and (min-width: 320px) {
.c-menu--slide-left,
.c-menu--slide-right,
.c-menu--push-left,
.c-menu--push-right {
width: 300px;
}
}
/**
* Slide/Push Menu Left.
*/
.c-menu--slide-left,
.c-menu--push-left {
top: 0;
left: 0;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
@media all and (min-width: 320px) {
.c-menu--slide-left,
.c-menu--push-left {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
.c-menu--slide-left.is-active,
.c-menu--push-left.is-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
/**
* Wrapper states.
*
* Various wrapper states occur depending on if a menu is pushing into view, in
* which case, the wrapper has to be pushed by the respective distance.
*/
.o-wrapper.has-push-left {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
@media all and (min-width: 320px) {
.o-wrapper.has-push-left {
-webkit-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
}
.o-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
@media all and (min-width: 320px) {
.o-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
.o-wrapper.has-push-top {
-webkit-transform: translateY(60px);
-ms-transform: translateY(60px);
transform: translateY(60px);
}
.o-wrapper.has-push-bottom {
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
}
/**
* Body states.
*
* When a menu is active, we want to hide the overflows on the body to prevent
* awkward document scrolling.
*/
body.has-active-menu {
overflow: hidden;
}
/* -----------------------------------------------------------------------------
MASK COMPONENT
----------------------------------------------------------------------------- */
.c-mask {
position: fixed;
z-index: 100;
top: 0;
left: 0;
overflow: hidden;
width: 0;
height: 0;
background-color: #000;
opacity: 0;
-webkit-transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.c-mask.is-active {
width: 100%;
height: 100%;
opacity: 0.7;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}