/**
|
* drawer
|
* @author Tevin
|
*/
|
|
@import "../../common/sassMixin";
|
|
.c-drawer {
|
@include position(fixed, 0 0 0 0, 9000);
|
pointer-events: none;
|
&.c-drawer-show {
|
pointer-events: all;
|
.c-drawer-mask {
|
display: block;
|
opacity: 1;
|
}
|
.c-drawer-container {
|
opacity: 1;
|
}
|
}
|
.c-drawer-mask {
|
display: none;
|
@include position(absolute, 0 0 0 0);
|
background-color: rgba(0, 0, 0, 0.3);
|
opacity: 0;
|
transition: opacity 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
|
&:active {
|
background-color: rgba(0, 0, 0, 0.25);
|
}
|
}
|
.c-drawer-container {
|
@include position(absolute, 0 n 0 0, 1);
|
width: 550px;
|
text-align: left;
|
opacity: 0;
|
background-color: #FFF;
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch;
|
transition: all 225ms cubic-bezier(0, 0, 0.2, 1);
|
}
|
&.c-drawer-left {
|
&.c-drawer-show {
|
.c-drawer-container {
|
transform: translateX(0%);
|
}
|
}
|
.c-drawer-container {
|
left: 0;
|
transform: translateX(-100%);
|
}
|
}
|
&.c-drawer-right {
|
&.c-drawer-show {
|
.c-drawer-container {
|
transform: translateX(0%);
|
}
|
}
|
.c-drawer-container {
|
right: 0;
|
transform: translateX(100%);
|
}
|
}
|
&.c-drawer-top {
|
&.c-drawer-show {
|
.c-drawer-container {
|
transform: translateY(0%);
|
}
|
}
|
.c-drawer-container {
|
width: 100%;
|
min-height: 200px;
|
bottom: auto;
|
transform: translateY(-100%);
|
}
|
}
|
}
|
