plumes/public/context-panel/pl-context-panel.min.css

Flying-fast Metro future vision components

.pl-context-panel{position:relative;width:100%;height:100%}.pl-context-panel .pl-context-panel-bg{position:absolute;left:50%;width:0;top:0;bottom:0;background:#333;-webkit-transition:all .25s cubic-bezier(.165,.84,.44,1);-moz-transition:all .25s cubic-bezier(.165,.84,.44,1);-ms-transition:all .25s cubic-bezier(.165,.84,.44,1);-o-transition:all .25s cubic-bezier(.165,.84,.44,1);transition:all .25s cubic-bezier(.165,.84,.44,1)}.pl-context-panel .pl-context-panel-title-cross::before,.pl-context-panel.left-cross.usable .pl-context-panel-title::before{-webkit-transition:all .35s cubic-bezier(.165,.84,.44,1);-moz-transition:all .35s cubic-bezier(.165,.84,.44,1);-ms-transition:all .35s cubic-bezier(.165,.84,.44,1);-o-transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-context-panel .pl-context-panel-title{background:#000;color:#fff;text-align:center;height:6rem;line-height:6rem;font-size:3rem;font-style:italic;margin:0;padding:0;white-space:nowrap;text-transform:uppercase}.pl-context-panel .pl-context-panel-title::after,.pl-context-panel .pl-context-panel-title::before{content:' ';position:absolute;top:3rem;background:#fff;width:4rem;height:1px;opacity:.6}.pl-context-panel .pl-context-panel-title::before{left:2rem}.pl-context-panel .pl-context-panel-title::after{right:2rem}.pl-context-panel .pl-context-panel-content,.pl-context-panel .pl-context-panel-content .pl-group{top:0;right:0;bottom:0;overflow:hidden;position:absolute;left:0}.pl-context-panel .pl-context-panel-content .pl-group{display:none}.pl-context-panel .pl-context-panel-content .pl-group.opened{display:block}.pl-context-panel .pl-context-panel-title-cross{display:none;cursor:pointer;position:absolute;top:1rem;width:4rem;height:4rem}.pl-context-panel .pl-context-panel-title-cross::before{content:'';position:absolute;top:2rem;left:0;background:#fff;width:4rem;height:1px;opacity:.6;transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-context-panel.use-title .pl-context-panel-content{top:6rem}.pl-context-panel.opened .pl-context-panel-bg{left:0;width:100%}.pl-context-panel.left-cross .pl-context-panel-title-cross{display:block;left:2rem}.pl-context-panel.left-cross.usable .pl-context-panel-title::before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-context-panel.left-cross.usable .pl-context-panel-title-cross::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.pl-context-panel.right-cross .pl-context-panel-title-cross{display:block;right:2rem}.screen-desktop .pl-context-panel.left-cross .pl-context-panel-title-cross,.screen-desktop .pl-context-panel.left-cross.usable .pl-context-panel-title-cross,.screen-desktop .pl-context-panel.right-cross .pl-context-panel-title-cross,.screen-desktop .pl-context-panel.right-cross.usable .pl-context-panel-title-cross,.screen-tablet .pl-context-panel.left-cross .pl-context-panel-title-cross,.screen-tablet .pl-context-panel.left-cross.usable .pl-context-panel-title-cross,.screen-tablet .pl-context-panel.right-cross .pl-context-panel-title-cross,.screen-tablet .pl-context-panel.right-cross.usable .pl-context-panel-title-cross{display:none}.pl-context-panel.right-cross.usable .pl-context-panel-title::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:all .35s cubic-bezier(.165,.84,.44,1);-moz-transition:all .35s cubic-bezier(.165,.84,.44,1);-ms-transition:all .35s cubic-bezier(.165,.84,.44,1);-o-transition:all .35s cubic-bezier(.165,.84,.44,1);transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-context-panel.right-cross.usable .pl-context-panel-title-cross::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.pl-context-panel .pl-section{position:relative;opacity:0;-webkit-transform:translateY(200rem);-moz-transform:translateY(200rem);-ms-transform:translateY(200rem);-o-transform:translateY(200rem);transform:translateY(200rem);-webkit-transition:all .45s cubic-bezier(.95,.05,.795,.035);-moz-transition:all .45s cubic-bezier(.95,.05,.795,.035);-ms-transition:all .45s cubic-bezier(.95,.05,.795,.035);-o-transition:all .45s cubic-bezier(.95,.05,.795,.035);transition:all .45s cubic-bezier(.95,.05,.795,.035);color:#fff}.pl-context-panel .pl-section.opened{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:all .45s cubic-bezier(.075,.82,.165,1);-moz-transition:all .45s cubic-bezier(.075,.82,.165,1);-ms-transition:all .45s cubic-bezier(.075,.82,.165,1);-o-transition:all .45s cubic-bezier(.075,.82,.165,1);transition:all .45s cubic-bezier(.075,.82,.165,1)}.screen-desktop .pl-context-panel.left-cross .pl-context-panel-title::after,.screen-desktop .pl-context-panel.left-cross .pl-context-panel-title::before,.screen-desktop .pl-context-panel.right-cross .pl-context-panel-title::after,.screen-desktop .pl-context-panel.right-cross .pl-context-panel-title::before,.screen-tablet .pl-context-panel.left-cross .pl-context-panel-title::after,.screen-tablet .pl-context-panel.left-cross .pl-context-panel-title::before,.screen-tablet .pl-context-panel.right-cross .pl-context-panel-title::after,.screen-tablet .pl-context-panel.right-cross .pl-context-panel-title::before{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}.screen-desktop .pl-context-panel.left-cross.usable .pl-context-panel-title::after,.screen-desktop .pl-context-panel.left-cross.usable .pl-context-panel-title::before,.screen-desktop .pl-context-panel.right-cross.usable .pl-context-panel-title::after,.screen-desktop .pl-context-panel.right-cross.usable .pl-context-panel-title::before,.screen-tablet .pl-context-panel.left-cross.usable .pl-context-panel-title::after,.screen-tablet .pl-context-panel.left-cross.usable .pl-context-panel-title::before,.screen-tablet .pl-context-panel.right-cross.usable .pl-context-panel-title::after,.screen-tablet .pl-context-panel.right-cross.usable .pl-context-panel-title::before{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}