$boxShadow: rgba(0, 0, 0, .156863) 0rem .03rem .01rem, rgba(0, 0, 0, .227451) 0rem .03rem .01rem;
$panel: 'ui-panel';
/*@keyframes mymove
{
    from {transform:translateY(-100%);}
    to {transform:translateY(0%);}
}*/


.#{$panel}-base {
    position: absolute;
    z-index: 2;
    background-color:#fff;
}

.top-#{$panel} {
    left: 0;
    top: 0;
    right: 0;
    width:100%;
    transform:translateY(-100%);
   /* animation:mymove .6s ease-in-out .2s forwards;*/
    &.active {
        transform:translateY(0%);
        box-shadow: $boxShadow;
    }
}

.left-#{$panel} {
    left: 0;
    top: 0;
    bottom: 0;
    height:100%;
    transform: translateX(-100%);
    &.active {
        transform: translateX(0%);
        box-shadow: $boxShadow;
    }
}


.right-#{$panel} {
    right: 0; 
    top: 0;
    bottom: 0;
    height:100%;
    transform: translateX(100%);
    &.active {
        transform: translateX(0%);
        box-shadow: $boxShadow;
    }
}

.bottom-#{$panel} {
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
    transform:translateY(100%);
    &.active {
        transform:translateY(0%);
        box-shadow: $boxShadow;
    }
}

/*.left-#{$panel}-enter {
    transform: translateX(-100%);
    &.left-#{$panel}-enter-active {
        transform: translateX(0);
        transition: transform 500ms ease-in;
    }
}

.left-#{$panel}-leave {
    transform: translateX(0);
    &.left-#{$panel}-leave-active {
        transform: translateX(-100%);
        transition: transform 500ms ease-in;
    }
}*/