sidey/src/sidey.css

Quickly and easily add an offcanvas sidebar to any page

.sidey-leftactive{
    transform: translate3d(0%, 0, 0) !important;
    -webkit-transform: translate3d(0%, 0, 0) !important;
    transition: all .2s ease-in-out;
}

.sidey-rightactive{
    transform: translate3d(25%, 0, 0) !important;
    -webkit-transform: translate3d(25%, 0, 0) !important;
    transition: all .2s ease-in-out;
}

.sidey-right{
    position: fixed;
    background-color: white;
    overflow-x: hidden;
    transform: translate3d(120%, 0, 0);
    transition: all .2s ease-in-out;
    width: 80%;
    bottom: 0;
    top: 0;
    transform: translate3d(120%, 0, 0);
    -webkit-transform: translate3d(120%, 0, 0);
}

.sidey-left{
    position: fixed;
    background-color: white;
    overflow-x: hidden;
    transition: all .2s ease-in-out;
    width: 80%;
    bottom: 0;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
}

.sidey-content{
    position: relative;
    min-height: 100%;
    width: 100%;
    transition: all .2s ease-in-out;
    transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
}

.sidey-leftpush{
    position: fixed;
    overflow-x: hidden;
    width: 100%;
    transform: translate3d(80%, 0, 0);
    -webkit-transform: translate3d(80%, 0, 0);
}


.sidey-rightpush{
    position: fixed;
    overflow-x: hidden;
    width: 100%;
    transform: translate3d(-80%, 0px, 0px);
    -webkit-transform: translate3d(-80%, 0px, 0px);
}

.sidey-blur{
    background:rgba(113,113,113,0.5) !important;
}

@media only screen and (min-width : 762px) {
    .sidey-leftpush{
        transform: translate3d(-50%, 0px, 0px);
        -webkit-transform: translate3d(-50%, 0px, 0px);
    }

    .sidey-left{
        width: 50%;
        transform: translate3d(-100%, 0px, 0px);
        -webkit-transform: translate3d(-100%, 0px, 0px);
    }

    .sidey-rightpush{
        transform: translate3d(-50%, 0, 0);
        -webkit-transform: translate3d(-50%, 0, 0);
    }

    .sidey-right{
        right: 0%;
        width: 50%;
    }

    .sidey-rightactive{
        transform: translate3d(0%, 0px, 0px) !important;
        -webkit-transform: translate3d(0%, 0px, 0px) !important;
    }
}

@media only screen and (min-width : 992px) {
    .sidey-leftpush{
        transform: translate3d(20%, 0, 0);
        -webkit-transform: translate3d(20%, 0, 0);
    }

    .sidey-left{
        width: 20%;
        transform: translate3d(-100%, 0, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
    }

    .sidey-leftactive{
        transform: translate3d(0%, 0px, 0px) !important;
        -webkit-transform: translate3d(0%, 0px, 0px) !important;
    }

    .sidey-rightpush{
        transform: translate3d(-20%, 0, 0);
        -webkit-transform: translate3d(-20%, 0, 0);
    }

    .sidey-right{
        right: 0%;
        width: 20%;
    }

    .sidey-rightactive{
        transform: translate3d(0%, 0px, 0px) !important;
        -webkit-transform: translate3d(0%, 0px, 0px) !important;
    }
}