com.phloxui/styles/lib/component/dataview/ComponentSlidePane.less

PhloxUI Ng2+ Framework

phx-component-slidepane {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}
.phx-component-slidepane {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    >.component-slidepane {
        display: block;
        position: absolute;
        background-color: extract(@CLR_1, 9);
        transition: all 0.5s ease 0s;
        box-shadow: 0px 4px 9px extract(@CLR_1, 6); 
        opacity: 0; 
        z-index: 2;
        pointer-events: auto;
        >.container-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
    }
    >.right { 
        width: 450px;
        height: 100%;  
        right: -450px; 
    }
    >.left { 
        width: 450px;
        height: 100%;  
        left: -450px; 
    }
    >.bottom { 
        width: 100%;
        height: 450px;  
        bottom: -450px;
    }
    >.top { 
        width: 100%;
        height: 450px;  
        top: -450px;
    }
    >.show { 
        opacity: 1;
    } 
    >.background-fake {
        position: absolute; 
        z-index: 1; 
        width: 100%; 
        height: 100%; 
        opacity: 0.5; 
        background-color: extract(@CLR_1, 8);
        pointer-events: auto;
    }
	button {
		&.fake {
			opacity: 0;
			width: 0;
			height: 0;
		}
	}
}