bulma-addons/css/addons/navigation-view.min.css

Addons for Bulma CSS framework

.navigation-view{background-color:#fff;position:fixed;top:0;left:0;height:100%;width:280px;max-width:280px;min-width:280px;-webkit-transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out,-webkit-transform 258ms ease-out;-webkit-transform:translateX(-110%);transform:translateX(-110%);box-shadow:0 0 50px rgba(0,0,0,.5);z-index:37;background-color:#f5f5f5}.navigation-view.is-active{-webkit-transform:translateX(0);transform:translateX(0)}.navigation-view .navbar-burger{display:block;min-width:75px}.navigation-view .menu{box-shadow:none;width:100%;max-height:90%;max-height:calc(100% - 3.2rem);overflow-y:auto;overflow-x:hidden}.navigation-view .menu .menu-label{padding-left:1em}.navigation-view .menu .menu-list a{border-radius:0}.navigation-view.is-static{border-right:1px solid rgba(0,0,0,.15);min-width:75px;max-width:280px;width:0;-webkit-transform:translateX(0);transform:translateX(0);box-shadow:none;-webkit-transition:none;transition:none}.navigation-view.is-static .menu-label{visibility:hidden}.navigation-view.is-static .menu-list a{height:40px;overflow:hidden;text-overflow:ellipsis;text-align:center}.navigation-view.is-static .menu-list a span.icon{margin-bottom:1em}.navigation-view.is-static.is-active{width:100%;box-shadow:0 0 50px rgba(0,0,0,.5);-webkit-transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out,-webkit-transform 258ms ease-out}.navigation-view.is-static.is-active .menu-label{visibility:visible}.navigation-view.is-static.is-active .menu-list a{text-align:left}@media screen and (min-width:1024px){.navigation-view.is-static{width:100%;box-shadow:none!important}.navigation-view.is-static .menu-label{visibility:visible}.navigation-view.is-static .menu-list a{text-align:left}.navigation-view.is-static .navbar-burger{cursor:default;opacity:0;z-index:-999}}.navigation-view.is-dark{border-right:1px solid rgba(0,0,0,.15)}.navigation-view.is-dark>.menu{background-color:#242424}.navigation-view.is-dark>.menu .menu-label{color:#b5b5b5}.navigation-view.is-dark>.menu .menu-list a{color:#f5f5f5}.navigation-view.is-dark>.menu .menu-list a:hover:not(.is-active){color:#363636}body.has-static-navigation-view{padding-left:75px}@media screen and (min-width:1024px){body.has-static-navigation-view{padding-left:280px}}