| 1 |
- html,body{height:100vh;margin:0;padding:0}body{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(200px, 0.17fr) 1fr;grid-gap:0}body.hidden-aside{grid-template-columns:0 auto}body.hidden-aside aside{transform:translateX(-100%);opacity:0}body aside{position:relative;height:inherit;background-color:#f9f9f9;border-right:1px solid #ddd;overflow-y:auto;transition:transform 0.3s ease, opacity 0.3s ease;transform:translateX(0);display:flex;-ms-flex-direction:inherit;-webkit-flex-direction:inherit;flex-direction:column}body aside>ul.nav{flex-grow:1}body aside>ul.nav>li.nav-item:first-of-type>a{border-bottom:1px solid #ddd}body aside>ul.nav>li.nav-item:not(:first-of-type){border-bottom:1px solid #ddd}body aside>ul.nav>li.nav-item:not(:first-of-type)>a:not(.collapsed){background-color:#f1f1f1}body aside>ul.nav>li.nav-item>ul{padding:0.625rem 0.625rem 0.625rem 0;border-top:1px solid #ddd}body aside>ul.nav>li.nav-item a{display:block;padding:0.438rem 0.781rem;color:#333;text-decoration:none;cursor:pointer}body aside>ul.nav>li.nav-item a:hover{background-color:#f0f0f0}body aside footer{padding:0.781rem;text-align:center;border-top:1px solid #ddd}body main{background-color:#ffffff;height:inherit;overflow-y:auto}body main>header{border-bottom:1px solid #ddd;padding:0.313rem 0.781rem}body main>header .logo img{position:relative;top:-2px}body main>div.container-fluid{padding:0.781rem}
|