.modal{
.left {
@include translate3d(-100%, 0, 0);
@include transition-transform(0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
}
.right {
@include translate3d(100%, 0, 0);
@include transition-transform(0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
}
.top {
@include translate3d(0, -100%, 0);
@include transition-transform(0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
}
.bottom {
@include translate3d(0, 100%, 0);
@include transition-transform(0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
}
&.in{
.left,
.right,
.top,
.bottom {
@include translate3d(0, 0, 0);
}
}
&.inactive{
bottom: auto;
overflow: visible;
}
}
.modal-open-aside{
overflow: visible;
}
.modal > .left{
position: fixed;
z-index: 1055;
top: 0;
left: 0;
right: auto;
bottom:0;
}
.modal > .right{
position: fixed;
z-index: 1055;
top: 0;
left: auto;
right: 0;
bottom:0;
}
.modal > .top{
position: fixed;
z-index: 1055;
top: 0;
left: 0;
right: 0;
bottom: auto;
}
.modal > .bottom{
position: fixed;
z-index: 1055;
top: auto;
left: 0;
right: 0;
bottom: 0;
}
.modal-header,
.modal-content,
.modal-footer{
border-color: $border-color;
}
.modal-content{
color: $dark-black;
}
.aside{
color: $text-color;
}
.aside-header,
.aside-header .close {
color: inherit !important;
background-color: transparent !important;
}
.aside-header,
.aside-footer{
border-color: $border-color !important;
}
.aside-title{
font-size: 1.2rem;
margin: .45rem 0;
}