UNPKG

bootstrap-vue-sidebar

Version:

Vue2Sidebar: Bootstrap 4 sidebar component in Vue 2.0

2 lines 1.86 kB
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);#sidebarCollapse{width:40px;height:40px;background:#f5f5f5}#sidebarCollapse span{width:80%;height:2px;margin:0 auto;display:block;background:#555;transition:all .8s cubic-bezier(.81,-.33,.345,1.375)}#sidebarCollapse span:first-of-type{transform:rotate(45deg) translate(2px,2px)}#sidebarCollapse span:nth-of-type(2){opacity:0}#sidebarCollapse span:last-of-type{transform:rotate(-45deg) translate(1px,-1px)}#sidebarCollapse.active span{transform:none;opacity:1;margin:5px auto}.wrapper{perspective:1500px}#sidebar{transition:all .6s cubic-bezier(.945,.02,.27,.665);transform-origin:center left}#sidebar.active{transform:rotateY(100deg)}@media (max-width:768px){#sidebar{margin-left:-250px;transform:rotateY(100deg)}#sidebar.active{margin-left:0;transform:none}#sidebarCollapse span:first-of-type,#sidebarCollapse span:last-of-type,#sidebarCollapse span:nth-of-type(2){transform:none;opacity:1;margin:5px auto}#sidebarCollapse.active span{margin:0 auto}#sidebarCollapse.active span:first-of-type{transform:rotate(45deg) translate(2px,2px)}#sidebarCollapse.active span:nth-of-type(2){opacity:0}#sidebarCollapse.active span:last-of-type{transform:rotate(-45deg) translate(1px,-1px)}}.wrapper{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:stretch;align-items:stretch}#sidebar{min-width:250px;max-width:250px;min-height:100vh}#sidebar.active{margin-left:-250px}a[data-toggle=collapse]{position:relative}.dropdown-toggle:after{display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%)}#sidebar .sidebar-header{padding:20px;border-bottom:1px solid #fff}#sidebar ul.components{padding:20px 0}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{padding:10px;font-size:1.1em;display:block} /*# sourceMappingURL=app.9845136f71156c636aaf7024c72d923e.css.map */