sidebar css

gistfile1.txt

/*---------------------------------*/
.l-sidebar {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top:0;
    right: 0;  
    bottom: 0;
    left: 0; 
    background: rgba(0,0,0,0.34); 
    z-index: 999;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    -o-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
.l-sidebar .sidebar__inner {
    position: absolute;
    top: 0;
    right: -421px;
    width: 100%;
    height: 100%;
    max-width: 421px;
    background: #fff;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: right 0.5s;
    -o-transition: right 0.5s;
    transition: right 0.5s;
    z-index: 10;
}
.l-sidebar .sidebar__overlay {
    position: fixed;
    top:0;
    right: 0;  
    bottom: 0;
    left: 0; 
    z-index: 1;
}
.l-sidebar .sidebar__close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 999;
}
    /*---------------------------------*/
    .l-sidebar--open {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .l-sidebar--open .sidebar__inner {
        right: 0;
    }
    /*---------------------------------*/
/*---------------------------------*/